{"_id":"@github/filter-input-element","_rev":"41-72cbd999d7a598b60903d955168f8609","name":"@github/filter-input-element","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@github/filter-input-element","version":"0.1.0","license":"MIT","_id":"@github/filter-input-element@0.1.0","maintainers":[{"name":"lgarron","email":"code@garron.net"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"mschoening","email":"max@max.wtf"},{"name":"koddsson","email":"koddsson@gmail.com"}],"homepage":"https://github.com/github/filter-input-element#readme","bugs":{"url":"https://github.com/github/filter-input-element/issues"},"dist":{"shasum":"1757e3eba0b8bf6b857d3d2775be0806fd7fce44","tarball":"https://registry.npmjs.org/@github/filter-input-element/-/filter-input-element-0.1.0.tgz","fileCount":7,"integrity":"sha512-Zl8jr8FV07ut0itfeSN3OT6pVwqvMd6h9yA/J1WHm+mYBtKqwc/aiQmklW43X8mzqBpmZxuZ+7TViWPztQzTdg==","signatures":[{"sig":"MEUCIQD2F2brG8Jn9To+jMQsUDrdS4PHfWxDKS7OCAR5teOqxgIgPXPO+YxNfeWj9fAm7yNLM5NB8lste4qs+uyqt6fDZLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3ubsCRA9TVsSAnZWagAAfRUP/3/T45/rU8dBH0c+iVQO\n5rQ3V10fGLpQAUQ+G6bYmzKe1/igMv4u8OoCGkHdq6uU3Q5VJI0vzQB3y2vo\n++/TCAhrN9YweuZaEZzHOMMZCitnkNTE1V/8ssItvrzawuoh+gJPkECejIJa\nwg4vRpNA+7wfoeW87KqNlQBngc5yx1lBfKGzlDWLg23adJZfjV4b5H19D4hq\nTNdasznGXQ1jIkICyEk9IdJ7k3xl4NHgqTZjxYYkJvucYmxeC5+/kxdkMN+x\nqTizEU32A/sjZjJTZpbkXvqBUSOZcNVLE9/W2K+5/J3gbRASbL7ajEsr/HX4\nWcwVN6A7DvVC5G9O/hUdpf5HNHLc6nzwF+9ZMRz2xAPPJV2mX1SZyPZC/dlt\nQrOnCTk0qRvoWZRIwwN1fYonCjOVrdl1OaRngiEpujdFzPNCjHsiIUUqexIE\nfV9ZXQ5z73sdhRODEQzl66IAlUbR9uDUJFf+SoRapM80Zhs7Ijk1egm9t4kx\nMPEHt9qSYhji4m6yyW5KCB/r1MnqIGvBiBE51nJkBG36UEiN50FgNN1i86XC\nAKWddzV9hEKrl1rGJRmRVPXDRDg6uRb5/rJ5VQ2UiuGHlO8j2GnJW9Rr9lZK\nIWTA0GgpWoJAZt0FXhKRmLINbYZKtww0HvdGO6T2Z5LQ48PXkGbhffcVw1Y6\n8FwI\r\n=4AsL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/umd/index.js","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"d9bb0a9e2b404708fae0d5937c1ff9c46766e81d","scripts":{"lint":"github-lint","test":"karma start test/karma.config.js","build":"tsc --outDir dist/umd --module umd && tsc","clean":"rm -rf dist","pretest":"npm run build","prebuild":"npm run clean && npm run lint","postpublish":"npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'","prepublishOnly":"npm run build"},"_npmUser":{"name":"muan","email":"me@muanchiou.com"},"repository":{"url":"git+https://github.com/github/filter-input-element.git","type":"git"},"_npmVersion":"6.9.0","description":"Display elements in a subtree that match filter input text.","directories":{},"_nodeVersion":"12.6.0","_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","karma":"^4.4.1","mocha":"^6.2.2","eslint":"^6.5.1","karma-chai":"^0.1.0","typescript":"^3.6.4","karma-mocha":"^1.3.0","eslint-plugin-github":"^3.2.0","karma-mocha-reporter":"^2.2.5","karma-chrome-launcher":"^3.1.0","karma-firefox-launcher":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/filter-input-element_0.1.0_1574889195565_0.8684597067205395","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@github/filter-input-element","version":"0.1.1","license":"MIT","_id":"@github/filter-input-element@0.1.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"lgarron","email":"code@garron.net"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"https://github.com/github/filter-input-element#readme","bugs":{"url":"https://github.com/github/filter-input-element/issues"},"dist":{"shasum":"9b8caff8fa35e037b6f270795b5bae1d6d34a631","tarball":"https://registry.npmjs.org/@github/filter-input-element/-/filter-input-element-0.1.1.tgz","fileCount":7,"integrity":"sha512-YTAF9gmLfdYvK+BaVOYBwawtdchxgov9ZmLJ3HCyZ7ALyCKEbHhNRRX7GD3KsoPWUedxiH0X3v/loB2njLbjwg==","signatures":[{"sig":"MEQCIHUAUb0iae0ZhDCBvRYsiHRunf7atCwRV35zKFUw+LxrAiBPd5wPKG2GGGXyblD6xZgrVn8A752vshsKrGlxb9YY1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2I4fCRA9TVsSAnZWagAAYSAP/0RxmOJgOQWLO8Tzso3I\n81fqPA/B5bdNrnZVeCRLTBGFSwzxx7y/lzMSLTWu6W9ybmJGObBAKiJc58Nu\nOm7+RdBPgQ3pAZBN9xl4QMz+TSR2+wsemz8cx5l6k5cKbCYcPFD4wmv20p+2\neVzIDfiTPVbsuCQdXCHIr52VW+5YK2Rv6TWTBuTWepj9kzLEgI/gfXq5UEeH\n9ouvlS3JYJnnpYwKo4XYHdbnTRf2VjADhPDX+Hqd+HntyTRrSvBN0k8MVuLU\nPg42RpMOE36+WRS2zojNDDGLQKA4YPLWoWCOVHL1ELSqaS/XIU2jcykg1OOg\ns0R2afDtkQ3DU8B48W6HDf/GjxjbWKCIhdRQpeFRgmm8lzYK4b1cp++o6chV\nydsJkDh4xGb1vEgc/haXk73sl3SKT+kEyqSrNNBhSYAyTsUxHFuUPvNWPU7P\nzrbW8WcERoqsxf5Do2QqlFEJjxoIXzzZXhN6NHbtGRHEL7m/SlZErbLWk77d\nuTmyuMoEZI1Nd3sfXiIUi8O1MwggwGyicsqhkGLsNmSibOJQ0wXTOgbyRXBd\nYIv+53iQklG0AkM7qKxupaG+XBZwCfqYdjakeBsa3hoxoqkmJJfn0+c9oW1Q\nyzyrA6tLN7NVBtZZb0XwSZ9EuTa0ojWqZ80gSTUKA+1UcTlQo1a1Pk5UduvU\nm7Em\r\n=dXgs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/umd/index.js","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"1ec025e797fbb2ea35e30288872bfb8a67861361","scripts":{"lint":"github-lint","test":"karma start test/karma.config.js","build":"tsc --outDir dist/umd --module umd && tsc","clean":"rm -rf dist","pretest":"npm run build","prebuild":"npm run clean && npm run lint","postpublish":"npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'","prepublishOnly":"npm run build"},"_npmUser":{"name":"muan","email":"me@muanchiou.com"},"repository":{"url":"git+https://github.com/github/filter-input-element.git","type":"git"},"_npmVersion":"6.9.0","description":"Display elements in a subtree that match filter input text.","directories":{},"_nodeVersion":"12.6.0","_hasShrinkwrap":false,"devDependencies":{"chai":"^4.1.2","karma":"^4.4.1","mocha":"^6.2.2","eslint":"^6.5.1","karma-chai":"^0.1.0","typescript":"^3.6.4","karma-mocha":"^1.3.0","eslint-plugin-github":"^3.2.0","karma-mocha-reporter":"^2.2.5","karma-chrome-launcher":"^3.1.0","karma-firefox-launcher":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/filter-input-element_0.1.1_1576010477958_0.9037464709681897","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-11-27T21:13:15.248Z","modified":"2026-08-07T19:04:19.909Z","0.1.0":"2019-11-27T21:13:15.715Z","0.1.1":"2019-12-10T20:41:18.137Z"},"bugs":{"url":"https://github.com/github/filter-input-element/issues"},"license":"MIT","homepage":"https://github.com/github/filter-input-element#readme","repository":{"url":"git+https://github.com/github/filter-input-element.git","type":"git"},"description":"Display elements in a subtree that match filter input text.","maintainers":[{"email":"manuelpuyol@github.com","name":"manuelpuyol"},{"email":"yes@jonrohan.codes","name":"jonrohan"},{"email":"design-systems@github.com","name":"primer-css"},{"email":"lugraciecy@gmail.com","name":"gracepark"},{"email":"jibrang@github.com","name":"jibrangarcia"},{"email":"arelia.jones@gmail.com","name":"arelia"},{"email":"tylerjdev@github.com","name":"tylerthedev"},{"email":"clay@smockle.com","name":"smockle"},{"email":"sim@simurai.com","name":"simurai"},{"email":"katehiga8@gmail.com","name":"khiga8"},{"email":"simon.taranto@gmail.com","name":"srt32"},{"email":"dgreif+githubbotnpm@github.com","name":"githubbot"},{"email":"jonathan.fuchs@gmail.com","name":"jfuchs"},{"email":"andri.j.alexandrou@gmail.com","name":"andrialexandrou"},{"email":"joycezhu@github.com","name":"joycezhu"},{"email":"bteng22@gmail.com","name":"bteng22"},{"email":"dustin.savery@gmail.com","name":"dustin.savery"},{"email":"ncalteen@github.com","name":"ncalteen"},{"email":"alaingoga@gmail.com","name":"alaingoga"},{"email":"andrei.girip99@gmail.com","name":"andreiig"}],"readme":"# <filter-input> element \n\nDisplay elements in a subtree that match filter input text.\n\n## Installation\n\n```\n$ npm install @github/filter-input-element\n```\n\n## Usage\n\n```html\n\n \n\n
\n
\n
Bender
\n
Hubot
\n
Wall-E
\n
BB-8
\n
R2-D2
\n
\n
0 robots found.
\n
\n```\n\n## Elements and attributes\n\n### Required\n\n- `filter-input[aria-owns]` should point to the container ID that wraps all `` related elements.\n- `filter-input` should have one `input` child element that is used to filter.\n- `[id]` should be set on a container that either contains or has `[data-filter-list]` attribute.\n- `[data-filter-list]` should be set on the element whose **direct child elements** are to be filtered.\n\n### Optional\n\n#### Specify filter text\n\nUse `[data-filter-item-text]` to specify an element whose text should be used for filtering. In the following example, the text `(current)` would not be matched.\n\n```html\n
\n```\n\n#### Blankslate\n\nUse `[data-filter-empty-state]` to specify an element to be displayed when no results were found. This element must be inside of the container `aria-owns` points to.\n\n```html\n
\n```\n\n#### Create new item\n\nUse `[data-filter-new-item]` to include an item to create a new instance when no exact match were found. The element with `[data-filter-new-text]`'s text content will be set to the input value. You can also use `[data-filter-new-value]` to set an input value to the query param.\n\n```html\n
\n```\n\n## Methods\n\n`filterInputElement.filter` can be optionally set to provide an alternative filtering logic. The default is substring.\n\n```js\nconst fuzzyFilterInput = document.querySelector('.js-fuzzy-filter-input')\nfuzzyFilterInput.filter = (element, elementText, query) => {\n // fuzzy filtering logic\n return {match: boolean, hideNew: boolean}\n}\n```\n\n`match`(required) indicates whether the item should be shown. `hideNew` (optional) will determine whether the \"Create new item\" element should be hidden. For example, when an exact match is found, the \"create new item\" option should be hidden.\n\n## Events\n\n- `filter-input-start` (bubbles) - fired on `` when a filter action is about to start.\n- `filter-input-updated` (bubbles) - fired on `` when filter has finished. `event.detail.count` is the number of matches found, and `event.detail.total` is the total number of elements.\n\nTo ensure that the client side update is communicated to assistive technologies, `filter-input-updated` event can be used to update filter results to screen readers. For example:\n\n```js\nconst ariaLiveContainer = document.querySelector('[aria-live=\"assertive\"]')\ndocument.addEventListener('filter-input-updated', event => {\n ariaLiveContainer.textContent = `${event.detail.count} results found.`\n})\n```\n\nFor more details on this technique, check out [Improving accessibility on GOV.UK search](https://technology.blog.gov.uk/2014/08/14/improving-accessibility-on-gov-uk-search/).\n\n## Browser support\n\nBrowsers without native [custom element support][support] require a [polyfill][].\n\n- Chrome\n- Firefox\n- Safari\n- Microsoft Edge\n\n[support]: https://caniuse.com/#feat=custom-elementsv1\n[polyfill]: https://github.com/webcomponents/custom-elements\n\n## Development\n\n```\nnpm install\nnpm test\n```\n\n## License\n\nDistributed under the MIT license. See LICENSE for details.\n","readmeFilename":"README.md"}