{"_id":"@auroratide/text-filter","name":"@auroratide/text-filter","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@auroratide/text-filter","version":"0.1.0","description":"Decorate an input field to automatically filter a list","keywords":["input","filter","web components","list","table"],"type":"module","main":"lib/text-filter.js","module":"lib/text-filter.js","scripts":{"start":"wds --node-resolve -p 3000 --watch","test":"wtr --node-resolve ./**/*.spec.js","prepublishOnly":"npm run test","gh":"gh-pages -d ."},"author":{"name":"Timothy Foster","url":"https://auroratide.com"},"license":"ISC","devDependencies":{"@open-wc/testing":"^3.1.2","@web/dev-server":"^0.1.30","@web/test-runner":"^0.13.27","gh-pages":"^3.2.3"},"gitHead":"a2dcb6d9a23462af18786cee1e1dcede093458dd","_id":"@auroratide/text-filter@0.1.0","_nodeVersion":"17.5.0","_npmVersion":"8.4.1","dist":{"integrity":"sha512-oN6QgXa8E9JT8TlrjS1f3agMiBa+Agj8cNQYkjJCOrnTXeT+u/pjv1SzwD+RjgFj9cQ3xZYI4eZDBRkFo2xGDg==","shasum":"c621a1eee20809727045b8c514e2cd2226eccd92","tarball":"https://registry.npmjs.org/@auroratide/text-filter/-/text-filter-0.1.0.tgz","fileCount":7,"unpackedSize":11524,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4CEGakBX/GlBQPZidA0iEEoHzvNd6IS6sRblU79K5NAiEAwztBclkWR1DLlMiXUSvre+Dzc/fZYdvQqcGdYHvJ8kg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXwmHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmHg/8CbpLYZ7mlUIIOs41nTfn8RWXn21qdKyKOtpn8k5MRHWtTx02\r\n7X/h6MLqkJuhjIauzl+8xMd9g2A2L9kSbErbdJ5qwu+P31Gp4ZoG+ALwepaX\r\na8c1PmYZ/A64LvFMWqq9/QWoboaMcO3r4jgvb/1gjKUOw8zC4R2GrKLbFlCD\r\npMM7oRJG16LvH0NszN/ayo+N12EDF+vOzanKnri+YgHX5D0VGtiR/LS/Xwiu\r\nWFvxj+KS9Jc3vtDAo/M/7+byVMWds9RJJSzO2w1t1y4Lh9AUfhY8/ptANlZI\r\nfVlwclcRuD7Et+hHZlBFw/lsSaBxtmlWZAx+ODfit3HkINo5uQNS5fUFbonb\r\nowWCkSow+lHc+ijFjT1yZAGMf8embHFlK2tOv0OLVx5GbzFhGSDhQqIRjXKm\r\nRBm7ZkKWI/fMAB2zs5N0VOnPecLofk3WIiyEmk6wphM/DK8KGB7EtU50oDBs\r\nXe3HTsAvmd9mch0FWXdAYh7ulO/ikoZxJDkt7SxQaDZ1UmRlDwsP+nBETYnd\r\nY2EGbITor9ajZBV5Wnr/3bXvH1wCr5DygLSIXeWwbReuRaVykkaWBRZXS1pQ\r\n3Yaa5MO7NCNn7K9RjXPVniM9vsCK3aTGLLVKX56VZ5AqLVz9lsMu6O2BQwee\r\nz5nLbT7WzT+yRD7146JuQJAkWTR6tYJDVqI=\r\n=cJem\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"auroratide","email":"tf.auroratide@gmail.com"},"directories":{},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/text-filter_0.1.0_1650395527285_0.8897287176811044"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-19T19:12:07.205Z","0.1.0":"2022-04-19T19:12:07.457Z","modified":"2022-04-19T19:12:07.597Z"},"maintainers":[{"name":"auroratide","email":"tf.auroratide@gmail.com"}],"description":"Decorate an input field to automatically filter a list","keywords":["input","filter","web components","list","table"],"author":{"name":"Timothy Foster","url":"https://auroratide.com"},"license":"ISC","readme":"# &lt;text-filter&gt; Input Element\n\nSet up a text input to automatically filter a list of items live! When someone types into the input, the attached item list is filtered to only show items matching the text.\n\nSee the **[Live Demo](https://auroratide.github.io/text-filter/)** for some examples!\n\n## Installation\n\nYou can import through CDN:\n\n```html\n<script type=\"module\" src=\"https://unpkg.com/@auroratide/text-filter/lib/define.js\"></script>\n```\n\nOr, you may install through [NPM](https://www.npmjs.com/package/@auroratide/text-filter) and include it as part of your build process:\n\n```\n$ npm i @auroratide/text-filter\n```\n\n```js\nimport '@auroratide/text-filter/lib/define.js'\n```\n\n## Usage\n\n`text-filter` is a [customized built-in element](https://html.spec.whatwg.org/#custom-elements-customized-builtin-example) for the native `input` element.\n\n```html\n<input is=\"text-filter\" for=\"my-list\" type=\"text\" />\n<ul id=\"my-list\">\n    <li>An item</li>\n    <li>Another item</li>\n</ul>\n```\n\nThe important thing is that the input is **linked** to a target list via the `for` attribute. This attribute should exactly equal the `id` value of the target list or table.\n\n### All Attributes\n\n| Attribute | Default | Description |\n| ------------- | --------- | ------------- |\n| for | - | The `id` of the target list or table |\n\n## Javascript API\n\n| Method | Description |\n| ------------- | ------------- |\n| doFilter | Force a refresh of the filter against the input text |\n\n### Properties\n\n* `for` - the id of the attached list or table\n* `target` (readonly) - the attached list or table as an HTMLElement\n* `itemMatches` - a function that determines whether a given list item matches the text\n  * By default, this uses the `textContent` of the element\n\n### Events\n\n| Name | When Triggered |\n| ------------- | ------------- |\n| text-filter:filter-complete | Whenever the filter is finished processing after a change to either the input or attached list |\n\n## Accessibility\n\nSince this extends the native `input` element, `text-filter` inherits all the accessibility features of that element.\n","readmeFilename":"README.md"}