{"_id":"@code-workers.io/ngx-list","_rev":"2-78e03d826d17cd8663f6b441df602567","name":"@code-workers.io/ngx-list","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@code-workers.io/ngx-list","version":"1.0.0","peerDependencies":{"@angular/common":">=13.3.0","@angular/core":">=13.3.0"},"dependencies":{"tslib":"^2.3.0"},"keywords":["angular","list","ngx-list","generic","customizable"],"license":"MIT","module":"fesm2015/code-workers.io-ngx-list.mjs","es2020":"fesm2020/code-workers.io-ngx-list.mjs","esm2020":"esm2020/code-workers.io-ngx-list.mjs","fesm2020":"fesm2020/code-workers.io-ngx-list.mjs","fesm2015":"fesm2015/code-workers.io-ngx-list.mjs","typings":"code-workers.io-ngx-list.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./code-workers.io-ngx-list.d.ts","esm2020":"./esm2020/code-workers.io-ngx-list.mjs","es2020":"./fesm2020/code-workers.io-ngx-list.mjs","es2015":"./fesm2015/code-workers.io-ngx-list.mjs","node":"./fesm2015/code-workers.io-ngx-list.mjs","default":"./fesm2020/code-workers.io-ngx-list.mjs"}},"sideEffects":false,"gitHead":"10de71f22cd5445333aa62e23dd6f1013c6d9587","description":"A generic and customizable list component for Angular. ## Installation ```bash npm i @code-workers.io/ngx-list ```","_id":"@code-workers.io/ngx-list@1.0.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-lkzArGsOnLpZ39c5dQyz1FcODqkshZ5ogcnhq4i/RpeKAcwyiH30UX8G38eB4rfJL/3vWByDeiK8YJyLOFAPjQ==","shasum":"4d81ecebb644e001afcb6f17280f8c3d27ac3f5e","tarball":"https://registry.npmjs.org/@code-workers.io/ngx-list/-/ngx-list-1.0.0.tgz","fileCount":14,"unpackedSize":47963,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjDGhGwRnuLozrEY/WK0KNU/zCkw2offVZzaXfh7ytHgIgJzomaWXsGgCuozmV1fBP+xyeUIexTI7vOvtD1KzFpmw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnZHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpFxAAheSgNbjbZEU2HbqTmNFnHTQmUFsCvpxoFiK1gTCq04prnQqD\r\nGf4lX6T5zjyCIlAXl1f9ntb8SY90MpU38VI1cWrvqz5JVetei7x2qDwRjws3\r\nHfyef42ju8wwFE0MqaVZAHhCvr4IvQGeO0zyvO3qIO2k6styOcswWdYc+MTF\r\nwPzAC+VBq3iTrV1GqP4LuPf/xN3EbgEkT/75DQVhqZUBRSCwumulq119CAoi\r\noQtjomS9sUVGSTWU65uAsPIfjfhdg/iAo8wOosZ2nAEzGmSnx/Wk1gjGlYy2\r\nhbTREkXS1Fn8+GRFvhUVtF2VT8m22WOti+6HNN6HaqjUrRtrFA+DcM9xPSEj\r\nNWgfxitsFd8tKTrGqV87l1/tXofpcanmBG10W6dQaF4jDZG32dSZ+BPUQ7kB\r\nlee0+eypD5onirLtfC8zKJ+PK8rgcUbPvrvohUgAXHPkZpVVhSBaGnzKAC8W\r\nyyHIJPE86uWOqdFJSkIIKRvyRy72CDqRup96SdWoeyykgDKRtmQjW/A1PkC3\r\nupZQdwtvpB9Bkwv2EByEkPiKer1f75wh0TJVOAKYB7yVljZesTn/OOK8gggI\r\nSw1OpMxFR8NeatY5uX9Mj+LBXFmvGwk5boCiYkMXQGfl0LgATNFN9ZhMlhtx\r\nc+GGxuOaxoRrqiUAJjjD0ODo3nvtlFiElhY=\r\n=HdzW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mikelgo","email":"m.gonser@icloud.com"},"directories":{},"maintainers":[{"name":"mikelgo","email":"m.gonser@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-list_1.0.0_1669232199026_0.7048133333164797"},"_hasShrinkwrap":false},"1.1.0":{"name":"@code-workers.io/ngx-list","version":"1.1.0","peerDependencies":{"@angular/common":">=13.3.0","@angular/core":">=13.3.0","rxjs":"~7.4.0"},"dependencies":{"tslib":"^2.3.0"},"keywords":["angular","list","ngx-list","generic","customizable"],"license":"MIT","module":"fesm2015/code-workers.io-ngx-list.mjs","es2020":"fesm2020/code-workers.io-ngx-list.mjs","esm2020":"esm2020/code-workers.io-ngx-list.mjs","fesm2020":"fesm2020/code-workers.io-ngx-list.mjs","fesm2015":"fesm2015/code-workers.io-ngx-list.mjs","typings":"code-workers.io-ngx-list.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./code-workers.io-ngx-list.d.ts","esm2020":"./esm2020/code-workers.io-ngx-list.mjs","es2020":"./fesm2020/code-workers.io-ngx-list.mjs","es2015":"./fesm2015/code-workers.io-ngx-list.mjs","node":"./fesm2015/code-workers.io-ngx-list.mjs","default":"./fesm2020/code-workers.io-ngx-list.mjs"}},"sideEffects":false,"gitHead":"fef0f7db567e329fe2615d1ca9db14c45cc12f3f","description":"A generic and customizable list component for Angular. ## Installation ```bash npm i @code-workers.io/ngx-list ```","_id":"@code-workers.io/ngx-list@1.1.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-YTC/S50b6ig/UPVn45aA9gcF90YZd0WlIVHm2R87gQ4YkaVEvG80MYI9xPZUg/fUkbsYE6Qjc5znX78OTEb0yw==","shasum":"76fb12910b7bab26b7be3ca24fbced3c2cc9b41d","tarball":"https://registry.npmjs.org/@code-workers.io/ngx-list/-/ngx-list-1.1.0.tgz","fileCount":14,"unpackedSize":51312,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZoMUs40kKG2TjBs8I1elmyPNbgiCYfWOlijKz//uPqAIgJ5pVDWW1pTwRTdowWICKJ6mPHLujmNoq7rglQofrd78="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfofiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpltg//Q+l3Ijd38yKCGDb9WxeTVyufRDUFnv+V/ypXNGMGT92OXE/N\r\nesazpJSz0mJ5NcewYrLAmIlAl5CIGhwDXVWpMN28je+XS/FOeKp/iJjoNzRi\r\n/11ieMoMUXsJ5ML+d2i6IhmB4vXd4snzXTRWM2oKnGJG/R6WMkgleiQPFfhJ\r\nGIBkYWizQOdlSfcTpwG3DlzAtcWeF5YFwPOpeAGmifjio3is/ElwyguCSn1o\r\n5Tu5K5nvOhdriYlLbGXRvmYLD6T2Y82hkj+/ZlqPoBnrf9DJkSa5Hq9awDVf\r\nNPWjG0XBjwX16f+zROZCu7DFMxmnxfyy8KItRdERnTJVZ3iaeMoqPI70oenK\r\nX571UuzPaHlNxZ2hlYuu1xgCbYA62/T4utcUh7EA1saZIh/N1p/pRyZqr+LX\r\nsaldwE1hpKBZ1rtcICNBpk3/vEQuoffev5cICDYSzbl15tSf+ErxS5WIOZT+\r\nuGx6GFu9LP5bf7wejb6dd4JUtl3mSus7GY0G6JkA4wUsBydIjTl3i4TOBEK5\r\nSqBrii/nuP5Fpv5RP5tdqqOJJcKv3NF8MuYypHreDjVGJT+Nc0HPz0YGiJCC\r\ngdRk7xKw4CqgYzagcgomuJG6dj4ZYezFyhGkyb5bDrJwGQe79UPlILAQXgN7\r\nzscbSv7g9oKnXEH5l/yrz5EpazllHy1pGvQ=\r\n=1c36\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mikelgo","email":"m.gonser@icloud.com"},"directories":{},"maintainers":[{"name":"mikelgo","email":"m.gonser@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-list_1.1.0_1669236706696_0.6697397553020317"},"_hasShrinkwrap":false},"2.0.0":{"name":"@code-workers.io/ngx-list","version":"2.0.0","peerDependencies":{"@angular/common":">=13.3.0","@angular/core":">=13.3.0","rxjs":"~7.4.0"},"dependencies":{"tslib":"^2.3.0"},"keywords":["angular","list","ngx-list","generic","customizable"],"license":"MIT","module":"fesm2015/code-workers.io-ngx-list.mjs","es2020":"fesm2020/code-workers.io-ngx-list.mjs","esm2020":"esm2020/code-workers.io-ngx-list.mjs","fesm2020":"fesm2020/code-workers.io-ngx-list.mjs","fesm2015":"fesm2015/code-workers.io-ngx-list.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/code-workers.io-ngx-list.mjs","es2020":"./fesm2020/code-workers.io-ngx-list.mjs","es2015":"./fesm2015/code-workers.io-ngx-list.mjs","node":"./fesm2015/code-workers.io-ngx-list.mjs","default":"./fesm2020/code-workers.io-ngx-list.mjs"}},"sideEffects":false,"gitHead":"92309cdfb2e6796d2455c3fd9319eb3cc7c24430","description":"A generic and customizable list component for Angular. ## Installation ```bash npm i @code-workers.io/ngx-list ```","_id":"@code-workers.io/ngx-list@2.0.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-pkwLpbiiMzpw4i2mkcs3XBOrmBUbmaUgMdXqITFaQLt1F0V7cC/+FCdFj0k8q++gIo93F/uUU7vAILPcfahEqw==","shasum":"f03fe26b23b5b87a24dd1f60085a1095096ecceb","tarball":"https://registry.npmjs.org/@code-workers.io/ngx-list/-/ngx-list-2.0.0.tgz","fileCount":13,"unpackedSize":45581,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj++zh2yysZPJkCGcy5w2JxZ9oC6nr1AyZbxET7evl7gIgX2fio090N6alNEzeqj9H8dbg7GnabCNEoAr5QCmIeWY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfouEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrx3A/9Ea2o/oDHh4V+VOzt3n+wuQzoymP5h4imD40z/YvYHb0+A0km\r\nXpZTdSlX8w6iDQCVaGHqHHEUMeaEbxMa9pS4TbPVshjNacBz8MeQ19QWdMiC\r\nOGXXg/dNZzd3XnRr8k/fX/dTDpnVmp/uYFt6483fNNcVIqkjSvmAabJ5MwSx\r\n2eHduBpWMQUY4HcHldqyLFKWTU47lAN7HrTmk//oE5UjA1GZNyBDbPsnXS/h\r\nThsQNGfyHqlQ3oKnWTmNU8IQu8GHJjLNCQm+CqnwMgmqYj6mMNODb8whZrM+\r\n/HQ3VaWWm7D7K19+NHomha1FW/luv5xDnfhDLOe2BGGb3BN6b7GhhcdQo2kA\r\n3jPmGRla+M8whNVSwACjNyG+Z4v6EKxLDC3tFCba9coWG9EvCrOws9UlINOF\r\nc3n6PJXgNWFZPR1cU/bqcRF2Dlt1PpKTWhicP3yXVJfe+ibIxEJmp9/DFawe\r\nV3j9omj5vSY65uh9b1U3HUXKj4JXMtN2ou4pC8xYHnFTUjVbiCxtm9JT32mg\r\ntDh608Q8+33LIyGXWRB9Wea8zHvcb4hoeptXN/ST5yRWBeAapD8AHZD4bwd7\r\n6lJeUDk9JxegoYzZzwfmUBaCF8MCyIOAjUoIpUcchN4BRosxoDHTwFLNIeX/\r\nlu1S8ZMs589rxvW/W3jNlbzVQ1p2XNncITs=\r\n=wP9n\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"mikelgo","email":"m.gonser@icloud.com"},"directories":{},"maintainers":[{"name":"mikelgo","email":"m.gonser@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-list_2.0.0_1669237636162_0.9306193822889846"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-23T19:36:38.974Z","1.0.0":"2022-11-23T19:36:39.244Z","modified":"2022-11-23T21:07:16.444Z","1.1.0":"2022-11-23T20:51:46.944Z","2.0.0":"2022-11-23T21:07:16.345Z"},"maintainers":[{"name":"mikelgo","email":"m.gonser@icloud.com"}],"description":"A generic and customizable list component for Angular. ## Installation ```bash npm i @code-workers.io/ngx-list ```","keywords":["angular","list","ngx-list","generic","customizable"],"license":"MIT","readme":"# @code-workers.io/ngx-list\n\nA generic and customizable list component for Angular.\n## Installation\n```bash\nnpm i @code-workers.io/ngx-list\n```\n\n## Why?\n\nLists are a very common UI component in almost every application. However,\nto build a really generic and flexible list component, in terms of the appearance of\nthe list items some advanced techniques are required. \n\nThose advanced techniques are often either not well enough documented or just not really known. \n\n## Features\n\n- [x] OnPush change detection\n- [x] Customizable list item\n- [x] Customizable list item context\n- [x] Generic\n- [x] Tiny bundle size\n\n## Demo\n[Live Demo](https://angular-ivy-dtje4y.stackblitz.io)\n\n\n## Usage\n\n```typescript\n// in some component\n<ngx-list\n    [items]=\"items\"\n  <ng-template [ngxListContext]=\"items\" let-item let-active=\"active\" let-selected=\"selected\">\n    <div (click)=\"onSelect(item)\"\n      class=\"border border-gray-300 shadow-lg rounded-lg bg-white px-10 py-8 mb-4\"\n        [class.item_active]=\"active\"\n        [class.item_selected]=\"selected\"\n        >\n      <span >{{item.name}} | {{item.id}} </span>\n    </div>\n  </ng-template>\n</ngx-list>\n\n\n```\n\n\nThe Styles:\n\n```scss\n.item_active {\n  @apply bg-gray-300/30;\n}\n.item_selected {\n  @apply bg-blue-500/30;\n}\n```\nThe styles are built with [Tailwind CSS](https://tailwindcss.com/)\n## Compatibility\n\n- version 1.x.x is compatible with Angular v13.0.0 and higher\n","readmeFilename":"README.md"}