{"_id":"@arkihillel/paper-chip","_rev":"1-4a10281bed3bdad842b570bf7e03c71e","name":"@arkihillel/paper-chip","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0":{"description":"A chip web component made with Polymer 3 following Material Design guidelines","keywords":["polymer","web component","material design","chip","tag","es2015"],"repository":{"type":"git","url":"git+https://github.com/arkihillel/paper-chip.git"},"homepage":"https://github.com/arkihillel/paper-chip","name":"@arkihillel/paper-chip","version":"3.0.0","main":"paper-chip.js","flat":true,"bug":{"url":"https://github.com/arkihillel/paper-chip/issues"},"license":"MIT","devDependencies":{"@polymer/iron-component-page":"^4.0.0","@polymer/iron-demo-helpers":"^3.0.0","@polymer/iron-test-helpers":"^3.0.0","@polymer/iron-validator-behavior":"^3.0.0","@polymer/paper-icon-button":"^3.0.0","@webcomponents/webcomponentsjs":"^2.0.0","bower":"^1.8.0","conventional-changelog-cli":"^1.2.0","eslint":"^3.12.2","eslint-plugin-html":"^2.0.3","git-rev-sync":"^1.8.0","polyserve":"^0.27.12","shx":"^0.2.2","validate-commit":"^3.2.1","wct-browser-legacy":"^1.0.1","web-component-tester":"^6.0.0"},"config":{"directories":{"src":"scripts","demo":"demo","component":"paper-chip","deps":"node_modules"}},"scripts":{"reset":"shx rm -rf node_modules/ $npm_package_config_directories_deps *.log","clean":"shx rm -rf *.log $npm_package_config_directories_deps/$npm_package_config_directories_component","lint":"eslint *.html **/*.html","changelog":"conventional-changelog -p eslint -i CHANGELOG.md -s","from:master":"node -e 'process.exit(require(\"git-rev-sync\").branch(process.cwd()) !== \"master\")'","changelog:edit":"$(git var GIT_EDITOR) CHANGELOG.md","preversion":"npm run from:master","version":"npm run changelog && npm run changelog:edit && git add CHANGELOG.md","postversion":"git push && git push --tags && git checkout develop && git merge master && git push && git checkout master","serve":"polyserve -c $npm_package_config_directories_deps","test":"wct"},"git":{"scripts":{"commit-msg":"./node_modules/.bin/validate-commit-msg --preset eslint $1"}},"resolutions":{"inherits":"2.0.3","samsam":"1.1.3","supports-color":"3.1.2","type-detect":"1.0.0","@webcomponents/webcomponentsjs":"^2.0.0"},"dependencies":{"@polymer/polymer":"^3.0.0","@polymer/iron-behaviors":"^3.0.0","@polymer/paper-material":"^3.0.0","@polymer/iron-flex-layout":"^3.0.0","@polymer/paper-input":"^3.0.0","@polymer/iron-input":"^3.0.0","@polymer/paper-item":"^3.0.0","@polymer/paper-listbox":"^3.0.0","@polymer/paper-ripple":"^3.0.0"},"contributors":[{"name":"Alessandro La Bella","email":"a.labella@fabbricadigitale.it"},{"name":"Leonardo Di Donato","email":"l.didonato@fabbricadigitale.it"},{"name":"Lorenzo Cesana","email":"l.cesana@fabbricadigitale.it"},{"name":"Leonardo Grasso","email":"l.grasso@fabbricadigitale.it"}],"gitHead":"88c582fbe6114cde4ac6af3588429097209b1409","bugs":{"url":"https://github.com/arkihillel/paper-chip/issues"},"_id":"@arkihillel/paper-chip@3.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.11.1","_npmUser":{"name":"arkihillel","email":"arki.hillel@gmail.com"},"dist":{"integrity":"sha512-YsiGiQ1b6ylxmiKCSlVKgi2R5ma5EwbdBXwlAv8mRcvOqWJp6EzIwxGWj9/Tn39WGjRj2FRfEWoVm94n4MdpBg==","shasum":"738eb69b3322ae38b660b25942b8b3762de7790a","tarball":"https://registry.npmjs.org/@arkihillel/paper-chip/-/paper-chip-3.0.0.tgz","fileCount":22,"unpackedSize":213213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbp4DXCRA9TVsSAnZWagAApyQP/jNbGaJ7prC5hFtYiyqa\nnYIXuq6ZWIB8TuIypWPIFIwQ5kGm2FBrXEyIqZrZj0nXKYrIr9yETPDl7C0b\nP+n7QZZd7ccTc1dCPCLfDLQUGv0J9+HoGO8apWkpjtQUQv6xGnmWE6mCppb9\nfWj0q1CddLrR5+sTMAdOz1hOySwvOwoRLrwGxLqvk6Id93NaVYWaV5+Ig6wn\n/agsNg04pJNLFJu6ZS5/WxIUBCPfwyGguOmutYDHJ3/qKmP8AWn31Ex1nx1Y\nR7yAxkqPUl0slz/y2t6EXkVa8zOuDdLFM0isiBOqBqVToHX/h8iNWDtv+6aE\nT0ZrQNk2Q5dQyBUu8HXDmlmAz74FpE0lr65nQzIQYAF4gaB2RBft8+mSCZn8\nvS06RQDXG4LVncNacRouRTbF+nAwceLU1VUqK38ZgEOlEbMV6gWvaN+kLRHC\nloNBHgqnzlZ2JEWETLj8kpTXij0yeycQOsnp+GHHuWVemJzPw4/YvstvutKI\nrtjcJSakS/ZSU6MVqOhiJrM6rfFnuAS0H4wwiJEOwq92RB2+P+tRMNsDSqkg\nn0+6dlgxcHRmmMD2/cVsxpfAPsJxmPmKps+ld6NBpWL54buXb36JN/nt8NYt\nC5y5mTao3/RqQeaTGYCcN5OkuW5FAeddpjmj50apxp44dXLYK7/2wsKtQWLb\nVwKi\r\n=zizP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq/JOERtQ2VQrH0Ms2bQnhViUe7KDuYCDaz5jZ4W1J7wIgHLjmU9RXcYAef1ppZKRov44FocDyKs3cac4FzrK+8tE="}]},"maintainers":[{"name":"arkihillel","email":"arki.hillel@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/paper-chip_3.0.0_1537704150871_0.456875048017644"},"_hasShrinkwrap":false}},"time":{"created":"2018-09-23T12:02:30.712Z","3.0.0":"2018-09-23T12:02:31.096Z","modified":"2022-04-04T15:32:03.578Z"},"maintainers":[{"name":"arkihillel","email":"arki.hillel@gmail.com"}],"description":"A chip web component made with Polymer 3 following Material Design guidelines","homepage":"https://github.com/arkihillel/paper-chip","keywords":["polymer","web component","material design","chip","tag","es2015"],"repository":{"type":"git","url":"git+https://github.com/arkihillel/paper-chip.git"},"contributors":[{"name":"Alessandro La Bella","email":"a.labella@fabbricadigitale.it"},{"name":"Leonardo Di Donato","email":"l.didonato@fabbricadigitale.it"},{"name":"Lorenzo Cesana","email":"l.cesana@fabbricadigitale.it"},{"name":"Leonardo Grasso","email":"l.grasso@fabbricadigitale.it"}],"bugs":{"url":"https://github.com/arkihillel/paper-chip/issues"},"license":"MIT","readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://www.webcomponents.org/element/fabbricadigitale/paper-chip) [![License](https://img.shields.io/badge/license-MIT-yellowgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n\n# \\<paper-chip\\>\n\nMaterial design: [Chips](https://material.io/guidelines/components/chips.html#).\n\n> A chip web component made with Polymer 3 following Material Design guidelines\n\nThis elements family may provide a icon or a photo, some line of text or a contact information with Material Design styling.\n\n[![Browser Support Matrix](https://saucelabs.com/browser-matrix/paper-chip.svg)](https://saucelabs.com/u/paper-chip)\n\n### Elements\n\n* `<paper-chip>`\n* `<paper-chip-input>`\n\n### Table of contents\n\n* [\\<paper-chip\\>](#paper-chip-usage)\n  * [Minimal](#minimal)\n  * [Single or multi line chips](#single-or-multi-line)\n  * [Removable chips](#removable)\n  * [Animatable chips](#animated-transition)\n* [\\<paper-chip-input\\>](#paper-chip-input-usage)\n  * [How to configure the presentation](#how-to-configure-its-presentation)\n    * [Disable the input underline](#disable-the-input-underline)\n    * [How to fix the input label at the top](#how-to-fix-the-input-label-at-the-top)\n    * [Non floating label](#non-floating-label)\n  * [How to customize the submit keys](#configure-your-favorite-submit-keys)\n  * [Autocomplete](#autocomplete)\n    * [Configure custom datasource properties](#configure-custom-datasource-properties)\n    * [Customize the filtering logic of the autocomplete](#custom-filter-logic)\n  * [Declarative insertion of chips](#how-to-insert-chips)\n\n## \\<paper-chip\\> usage\n\n### Minimal\n\nA minimal chip.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip single-line>Minimal chip</paper-chip>\n```\n\n### Single or multi-line\n\nIt can show **single-line** or **multi-line** text.\n\nYou can **open a multi-line chip** tapping on it, showing some additional info.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip>\n    <iron-icon slot=\"icon\" class=\"icon\" icon=\"avatars:avatar-1\"></iron-icon>\n    <div slot=\"label\" class=\"label\">John Foo</div>\n    <div slot=\"caption\" class=\"caption\">jfoo@doh.com</div>\n</paper-chip>\n```\n\n### Removable\n\nFollowing snippet of code shows how to configure (via attributes) some basic behavior.\n\nIt may be **removable** or not.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip removable>\n    <div slot=\"label\" class=\"label\">Removable Chip</div>\n</paper-chip>\n```\n\n### Animated transition\n\nDo you want to **animated** the chip when it is opening?\n\nYou can do it via attribute.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip removable animated>\n    <div slot=\"icon\" class=\"icon\">P</div>\n    <div slot=\"label\" class=\"label\">John Foo</div>\n    <div slot=\"caption\" class=\"caption\">jfoo@doh.com</div>\n</paper-chip>\n```\n\n## \\<paper-chip-input\\> usage\n\nUse `<paper-chip-input>` when you desire an input field where the strings digited by the user are collected as `paper-chip`s.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input></paper-chip-input>\n```\n\n### How to configure its presentation\n\nConfigure `paper-chip-input` presentation using attribute.\n\n#### Disable the input underline\n\nIf you do not want the input underline use `noline` attribute.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input noline></paper-chip-input>\n```\n#### How to fix the input label at the top\n\nUse `always-float-label` attribute to fix the the label at the top.\n\n <!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input always-float-label></paper-chip-input>\n```\n\n#### Non floating label\n\nUse `no-label-float` attribute to disable floating label. So the input label will be inside the input.\n\n <!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input no-label-float></paper-chip-input>\n```\n\n### Input field feature\n\nInputs can have different types, and be disabled.\n\n <!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input label=\"text input\" staged-value=\"pre-filled\"></paper-chip-input>\n```\n\nInputs can have character counters.\n\n <!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input label=\"simple character counter\" char-counter></paper-chip-input>\n```\n\nOr you can limit chip text's max length.\n\n <!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input label=\"input with at most 10 characters\" char-counter maxlength=\"10\"></paper-chip-input>\n```\n\nInputs can validate automatically or on demand, and can have custom error messages.\n\n <!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input label=\"this input requires letters only\" auto-validate pattern=\"[a-zA-Z]*\" error-message=\"letters only!\"></paper-chip-input>\n```\n\nYou can configure your favorite allowed pattern.\n\n <!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input label=\"this input will only let you type letters\" auto-validate allowed-pattern=\"[a-zA-Z]\"></paper-chip-input>\n```\n\nYou can run validation manually\n\n <!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input id=\"inputForValidation\" required label=\"this input is manually validated\" pattern=\"[a-zA-Z]*\" error-message=\"letters only!\"></paper-chip-input>\n\n<button onclick=\"validate()\">Validate!</button>\n<script>\nfunction validate() {\n    document.getElementById('inputForValidation').validate();\n}\n</script>\n```\n\n`paper-chip-input` can have custom prefix and suffix.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input no-label-float label=\"\">\n    <iron-icon icon=\"mail\" slot=\"prefix\"></iron-icon>\n    <paper-icon-button slot=\"suffix\" icon=\"clear\"></paper-icon-button>\n</paper-chip-input>\n```\n\n### Chip-added and chip-removed event\n\n`paper-chip-input` fires custom events chip-added/chip-removed event when a chip is added or removed to `paper-chip-input`.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input id=\"custom-event\"></paper-chip-input>\n<span id=\"log\"></span>\n<script>\ndocument.querySelector('#custom-event').addEventListener('chip-added', function (e) {\n    document.querySelector(\"#log\").textContent=\"Chip added!\"\n})\ndocument.querySelector('#custom-event').addEventListener('chip-removed', function (e) {\n    document.querySelector(\"#log\").textContent=\"Chip removed!\"\n})\n</script>\n```\n\n### Configure your favorite submit keys\n\nDo you want to change the **keys** that automatically submit chips?\n\nNo worries, we support it!\n\nConfigure them with the `enter-keys` property adding the keys.\n\nWe support the [Polymer.IronA11yKeysBehavior](https://github.com/PolymerElements/iron-a11y-keys-behavior) format.\n\nFollowing example should clarify the usage of this feature.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input enter-keys='[\"enter\", \"space\"]'></paper-chip-input>\n```\n\n### Autocomplete\n\nDo you need **autocomplete** ?\n\nWhen you have a predefined and finite set of input values you can set the predefined values with `datasource` property. Don't forget to add the `autocomplete` attribute.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input autocomplete label=\"Weekdays\" datasource='[{\"value\": \"1\", \"label\": \"monday\" },{\"value\": \"2\", \"label\": \"tuesday\"}, {\"value\": \"3\", \"label\": \"wednesday\"}, {\"value\": \"4\", \"label\": \"thursday\"}, {\"value\": \"5\", \"label\": \"friday\"}, {\"value\": \"6\", \"label\": \"saturday\"}, {\"value\": \"7\", \"label\": \"sunday\"}]'  placeholder=\"Add day\"></paper-chip-input>\n```\n\n#### Configure custom datasource properties\n\nThe default properties for datasource are `label` and `value`, but you can configure it from outside by the properties `display-property` and `value-property`.\n\n```html\n<paper-chip-input display-property=\"val\" value-property=\"key\">\n</paper-chip-input>\n```\n\n```json\n[\n  { \"val\": \"apple\", \"key\": \"0\" },\n  { \"val\": \"apricot\", \"key\": \"1\" }\n]\n```\n\n#### Custom filter logic\n\nAutocomplete uses a **startWith** filter as default logic.\n\nDo you need to implement a **custom filter logic**? You can do it!\n\nSet `filter` property with your custom *function*. The following lines of code will show you how to do it.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input autocomplete id=\"weekdays\" label=\"Weekdays\" datasource='[{\"value\": \"1\", \"label\": \"monday\" },{\"value\": \"2\", \"label\": \"tuesday\"}, {\"value\": \"3\", \"label\": \"wednesday\"}, {\"value\": \"4\", \"label\": \"thursday\"}, {\"value\": \"5\", \"label\": \"friday\"}, {\"value\": \"6\", \"label\": \"saturday\"}, {\"value\": \"7\", \"label\": \"sunday\"}]' placeholder=\"Add day\"></paper-chip-input>\n<script>\nlet weekdays = document.querySelector(\"#weekdays\")\nweekdays.filter = (data, value) => {\n    return data.filter((item) => item[weekdays.displayProperty].toLowerCase().includes(value.toLowerCase()))\n}\n</script>\n```\n\n### How to insert chips\n\nYou can insert `<paper-chip>` elements inside the `<paper-chip-input>` declaratively - ie., putting the within the Light DOM.\n\n<!--\n```\n<custom-element-demo>\n  <template>\n    <script src=\"../webcomponentsjs/webcomponents-lite.js\"></script>\n    <link rel=\"import\" href=\"paper-chip-input.html\">\n    <next-code-block></next-code-block>\n  </template>\n</custom-element-demo>\n```\n-->\n```html\n<paper-chip-input>\n  <paper-chip value=\"light\">Light</paper-chip>\n  <paper-chip value=\"dom\">DOm</paper-chip>\n</paper-chip-input>\n```\n\n## Styling\n\nThe following custom properties and mixins are available for styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--paper-chip-secondary-text-color` | The paper-chip label-color | `--secondary-text-color`\n`--paper-chip-background-color` | The paper-chip background-color | `--paper-grey-200`\n`--paper-chip-icon-background-color` | The paper-chip avatar background-color | `--paper-grey-500`\n`--paper-chip-icon-text-color` | The paper-chip icon color | `--text-primary-color`\n`--paper-chip-closed-label-max-width` | The paper-chip label max-width when is closed | 80px\n\n## Testing\n\nIf you are using **polyserve** navigate to the `test/` directory of your element to run its tests.\n\nYou can view results in the browser console.\n\n### WCT\n\nThe tests are run via [web-component-tester](https://github.com/polymer/web-component-tester).\n\nTo run them locally execute:\n\n```bash\nnpm test\n```\n\n## Contributing\n\nThanks for your interest in this project!\n\nWe are really glad you are reading this. External contributions are very welcome by our team. We know that we need volunteer developers to help this project come (and mantain) to fruition.\n\nThere are many ways to contribute to this project. Get started reading the [contributing guide](CONTRIBUTING.md).\n\n## License\n\nMIT © fabbricadigitale\n\n\n","readmeFilename":"README.md"}