{"_id":"@angius/lit-click-outside","name":"@angius/lit-click-outside","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@angius/lit-click-outside","version":"1.0.2","description":"@clickOutside decorator for Lit Element to call annotated method when component is scrolled to viewport","main":"dist/index.js","module":"dist/esm/index.js","scripts":{"build":"tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"},"dependencies":{"lit":"^2.2.4"},"devDependencies":{"typescript":"^4.7.2"},"repository":{"type":"git","url":"git+https://github.com/atulin/lit-element-click-outside.git"},"author":{"name":"Michał Kaliszewski"},"contributors":[{"name":"Atulin"}],"license":"MIT","bugs":{"url":"https://github.com/atulin/lit-element-click-outside/issues"},"homepage":"https://github.com/atulin/lit-element-click-outside","keywords":["lit element","decorator","click outside","IntersectionObserver"],"types":"./dist/index.d.ts","gitHead":"70be2f00521a67d967ffd766b6e3aae7bfc91538","_id":"@angius/lit-click-outside@1.0.2","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-XlkWPYzGRDpGTy5H1b9rLhPWEaTgh4CMxfkl29Osnce+ciCjC0saIKzXYGQ1cNFGlsk/dbSPh0nuy9ZWT1f+8w==","shasum":"1cd13201d077ff1c1d48f69dafded7b2abce7df8","tarball":"https://registry.npmjs.org/@angius/lit-click-outside/-/lit-click-outside-1.0.2.tgz","fileCount":6,"unpackedSize":11481,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnWfJn6CoCcHhPmAPRE/u4iIs9P2oFBrOQ3UNRJlu1nAiA9OXC2NEgPyGBINU2UT6PJW0dEgS420SAAB333gakqLA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijXTXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8tQ//Q/L+iYKmme1dvRxA/OMPiZXMIVgEUfmtGufC3NHLyZksonR/\r\n8Bl+xLfrpsFeo5Rxwbj/qyZ2sjqFjipDEE3mj2iTYBf4tdMi5OXgV32APwFD\r\nMbyzlmpH33d4LbmonSVN7Ct+zEqvYpSsY9nRHuVdzhgEk8apbLAI9oPv/a1Y\r\n57RxkSfb53oylbyAW9RzE4vyqbamigPZ8D9xxQDu8S2fmiCAEDMY1zy6dx+U\r\nAGFi5paXVtIIGVfX8+YMesNWEz8i0VNI+R2LqdBsEt8Wz4s0/9oRuTFAn9kx\r\nZFQFDxU7X3iyAiJ0f2a8PgKLGkr9U5n4+4cfteBefb02xPtIm0Oo1QsWUeAn\r\nuzTKhmjcAn4e6Y8ss5ZXb/QSkQ7LLv9ypOvCvA1mTNRtnsdYn69NiCMZFaLq\r\np5ySJPoe7Jd4zqWbZVshSu+qJU/1thi6AwSAtWZuws8Yv8pHL1A5DaKlnlKr\r\nb8mDbo+uBLdJt9RSBfUxbNwl5pRddEYaTlFR32fnGf+ny8Q3zaoogJqFA+Hq\r\njlawkHcxKV+JNhULwp+CYD8QH7mes17onk3nwpTlp7UCiQem6MCb6BoK30jm\r\nBzz4cXCz66QXxP0wEzv7EJr+qChq8RR4vsJzlmKRi4iFIVLg+X+UcU5/Zw65\r\nDfM5Hk34eRYmqCdwS8jzxSBnylW/BXDaew0=\r\n=cbgD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"angius","email":"koumarin@gmail.com"},"directories":{},"maintainers":[{"name":"angius","email":"koumarin@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lit-click-outside_1.0.2_1653437655037_0.876790686618478"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-25T00:14:14.806Z","1.0.2":"2022-05-25T00:14:15.172Z","modified":"2022-05-25T00:14:15.347Z"},"maintainers":[{"name":"angius","email":"koumarin@gmail.com"}],"description":"@clickOutside decorator for Lit Element to call annotated method when component is scrolled to viewport","homepage":"https://github.com/atulin/lit-element-click-outside","keywords":["lit element","decorator","click outside","IntersectionObserver"],"repository":{"type":"git","url":"git+https://github.com/atulin/lit-element-click-outside.git"},"contributors":[{"name":"Atulin"}],"author":{"name":"Michał Kaliszewski"},"bugs":{"url":"https://github.com/atulin/lit-element-click-outside/issues"},"license":"MIT","readme":"# lit-click-outside\n\n## What is it?\n\n`lit-element-click-outside` is a  `@clickOutside` decorator that allows you to call component method as the user clicks outside of the host component. Obviously it's very easy. Why then import it as external library? First, because it does not make sense write this boilerplate code in each project. Second, because decorator solution is elegant and convenient.\n\n## Installing\n\nIn your Lit Element project, add `lit-element-click-outside` to your package.json:\n\n```\nnpm i lit-element-click-outside\n```\n\n## How to use it?\n\nIt's very simple: you just need to anotate your method with `@clickOutside` and it will be called when user clicks outside of component area.\n\n```javascript\nimport { LitElement, html, property, customElement } from 'lit-element';\nimport { clickOutside } from 'lit-element-click-outside';\n\n@customElement('simple-greeting')\nexport class SimpleGreeting extends LitElement {\n  @property() name = 'World';\n\n  @clickOutside()\n  someMethod() {\n    console.log(\n      \"someMethod was called because user just clicked outside of SimpleGreeting\"\n    );\n  }\n\n  render() {\n    return html`<p>Hello, ${this.name}!</p>`;\n  }\n}\n```\n\n## Options\n\nYou may pass some optional parameters to decorator (or util function):\n\n```javascript\n@clickOutside({\n    exclude: 'button .exclude-click-outside-class'\n})\n```\n\n| Property name   | Type   | Default   | Description                                                                                                                                    |\n| --------------- | ------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| `triggerEvents` | string | `'click'` | A comma-separated list of events to cause the trigger                                                                                          |\n| `exclude`       | string |           | A comma-separated string of DOM element queries to exclude when clicking outside of the element. Example: `[exclude]=\"'button .btn-primary'\"`. |\n","readmeFilename":"README.md"}