{"_id":"@bundle-of-tubes/stateful-components","_rev":"3-4d0f8987a19cfbfadace73c9b34c1b90","name":"@bundle-of-tubes/stateful-components","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@bundle-of-tubes/stateful-components","version":"0.0.1","keywords":["javascript","typescript","component","state"],"license":"MIT","_id":"@bundle-of-tubes/stateful-components@0.0.1","maintainers":[{"name":"bundle-of-tubes","email":"jasonnmorrow@gmail.com"}],"homepage":"https://github.com/bundle-of-tubes/stateful-components","bugs":{"url":"https://github.com/bundle-of-tubes/stateful-components/issues"},"dist":{"shasum":"e0a5ec17ac8cfd89f8ad39f734d6e766a92ebb8b","tarball":"https://registry.npmjs.org/@bundle-of-tubes/stateful-components/-/stateful-components-0.0.1.tgz","fileCount":9,"integrity":"sha512-YJkdZbvbGqAballP7rzvFgxBr370+DXDPwOTGULIVuhkVYBAn5fGUOasHi6zeuVCJfKi6ptmp+KFPzveBBEeaA==","signatures":[{"sig":"MEUCIQCGx2sYxvjN+Dwj8+4nLN4wBzsymAmduwpf3MDMCW2TLQIgMUwq+cuUMdJ9XFuI6pBfV3P+CnpBePYGJB+iOoFJG28=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29346},"main":"dist/exports.js","type":"module","types":"dist/exports.d.ts","gitHead":"382a1106aca58f88a5afe8be23fd25fbc0756e25","private":false,"scripts":{"prepack":"tsc --project tsconfig.json"},"_npmUser":{"name":"bundle-of-tubes","email":"jasonnmorrow@gmail.com"},"repository":{"url":"git+https://github.com/bundle-of-tubes/stateful-components.git","type":"git"},"_npmVersion":"11.19.0","description":"A library of Web Components","directories":{},"_nodeVersion":"26.7.0","dependencies":{"typescript":"^7.0.2","@bundle-of-tubes/state-promulgator":"0.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/stateful-components_0.0.1_1788636724839_0.25318347585358536","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@bundle-of-tubes/stateful-components","version":"0.0.2","keywords":["javascript","typescript","component","state"],"license":"MIT","_id":"@bundle-of-tubes/stateful-components@0.0.2","maintainers":[{"name":"bundle-of-tubes","email":"jasonnmorrow@gmail.com"}],"homepage":"https://github.com/bundle-of-tubes/stateful-components","bugs":{"url":"https://github.com/bundle-of-tubes/stateful-components/issues"},"dist":{"shasum":"690be6fbb4171f2303d7b5b5d244b7b1959e5b8a","tarball":"https://registry.npmjs.org/@bundle-of-tubes/stateful-components/-/stateful-components-0.0.2.tgz","fileCount":9,"integrity":"sha512-S5uqyT+7MIhnE52Vh7a5RTWZoSYj6aEn74biAt+8EWV8rWdfdfVF+Ru9TXWhmYu2LFgA3SvzTJftgBGOmbPe8Q==","signatures":[{"sig":"MEUCIQCOVxb8kBozMsRcZDFhpwAJq1Sas3WDtkXuflLj+tJdmAIgE2bjIRpPHUqbgUTAGFPiOWS0CD+jQpVXeBTERSJTRTI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40344},"main":"dist/exports.js","type":"module","types":"dist/exports.d.ts","gitHead":"3fd85ebd643dfb094fdb388293104de209f36776","private":false,"scripts":{"prepack":"tsc --project tsconfig.json"},"_npmUser":{"name":"bundle-of-tubes","email":"jasonnmorrow@gmail.com"},"repository":{"url":"git+https://github.com/bundle-of-tubes/stateful-components.git","type":"git"},"_npmVersion":"11.19.0","description":"A library of Web Components","directories":{},"_nodeVersion":"26.7.0","dependencies":{"typescript":"^7.0.2","@bundle-of-tubes/state-promulgator":"0.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/stateful-components_0.0.2_1788987797331_0.06412070189503205","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"_id":"@bundle-of-tubes/stateful-components@0.0.3","bugs":{"url":"https://github.com/bundle-of-tubes/stateful-components/issues"},"dist":{"shasum":"791dda1a11dc80ce33aa7df7f3fd76c2f7db7a7b","tarball":"https://registry.npmjs.org/@bundle-of-tubes/stateful-components/-/stateful-components-0.0.3.tgz","fileCount":9,"integrity":"sha512-SHbKXU3nBqIEhDAWb3uully3q135SQUzeCNPzIdqLi1yEE+czHN3pjKRppgchXivBk/orWijpAulsK1fSfZMFw==","signatures":[{"sig":"MEQCIFCudwvFimTWm2duxEW0Y6wF+SpRYfVj1kZuEEOB29oKAiAA1HhgMRfcDeyuGlzysCJSKh3ej6piUVk8lvrvKZdFAg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCellQkIu9b48OfR6JNCaKKon+PflCYA6IxbdKigRHT2wIgVzTBuC16tFUyChwVwPgfaW7zUkfGfPBhzZwgtWckTvo="}],"unpackedSize":40371},"main":"dist/exports.js","name":"@bundle-of-tubes/stateful-components","type":"module","types":"dist/exports.d.ts","gitHead":"a4b7c554207fef8939b8002457aaa3b4cf8ba1f9","license":"MIT","private":false,"scripts":{"prepack":"tsc --project tsconfig.json"},"version":"0.0.3","_npmUser":{"name":"bundle-of-tubes","email":"jasonnmorrow@gmail.com"},"homepage":"https://github.com/bundle-of-tubes/stateful-components","keywords":["javascript","typescript","component","state"],"repository":{"url":"git+https://github.com/bundle-of-tubes/stateful-components.git","type":"git"},"_npmVersion":"11.19.0","description":"A library of Web Components","directories":{},"maintainers":[{"name":"bundle-of-tubes","email":"jasonnmorrow@gmail.com"}],"_nodeVersion":"26.7.0","dependencies":{"@bundle-of-tubes/state-promulgator":"0.0.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^7.0.2"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/stateful-components_0.0.3_1789089051506_0.942466885014841"}}},"time":{"created":"2026-09-05T19:32:04.646Z","modified":"2026-09-11T01:10:51.759Z","0.0.1":"2026-09-05T19:32:04.977Z","0.0.2":"2026-09-09T21:03:17.481Z","0.0.3":"2026-09-11T01:10:51.575Z"},"bugs":{"url":"https://github.com/bundle-of-tubes/stateful-components/issues"},"license":"MIT","homepage":"https://github.com/bundle-of-tubes/stateful-components","keywords":["javascript","typescript","component","state"],"repository":{"url":"git+https://github.com/bundle-of-tubes/stateful-components.git","type":"git"},"description":"A library of Web Components","maintainers":[{"name":"bundle-of-tubes","email":"jasonnmorrow@gmail.com"}],"readme":"# stateful-components\nWeb Components utilizing the stateful-promulgator tool\n\nUsage examples can be found at https://github.com/bundle-of-tubes/promulgator-examples\n\n## Pagination\n\nComponents and utilities to control pagination based on \"skip\" and \"take\"\n\n### PagePromulgator\n\nA specialization of StatePromulgator for pagination. The state has the following properties:\n* pageSize: The typical size of pages\n* cardinality: The total number of items across all pages (determining which page is the last)\n* skip: The number of items belonging to previous pages, or the index of the first item to appear on the current page\n* take: The actual number of items in the page to be rendered\n\n#### PagePromulgator Constructor\n\n##### Parameters\n* initialPageSize: the default page size (\"take\" will be the same as the page size except\n* initialCardinality: The total number of items across all pages\n\n##### Examples\n\n```javascript\nimport {PagePromulgator} from '@bundle-of-tubes/stateful-components';\n\nconst pager = new PagePromulgator(20, 99);\n\n```\n\n#### PagePromulgator.prototype.setPageSize()\n\nSetter for the page size\n\n##### Parameters\n* newPageSize: the new value of the pageSize\n\n##### Examples\n\n```javascript\npager.setPageSize(50);\n```\n\n#### PagePromulgator.prototype.first()\n\nUpdates the state to use the first full page\n\n##### Examples\n\n```javascript\npager.first();\n```\n\n#### PagePromulgator.prototype.prev()\n\nUpdates the state to use the page immediately preceeding the current one\n\nThe resulting page will not overlap with the current page\n\n##### Examples\n\n```javascript\npager.prev();\n```\n\n#### PagePromulgator.prototype.next()\n\nUpdates the state to use the page immediately following the current one\n\n##### Examples\n\n```javascript\npager.next();\n```\n\n#### PagePromulgator.prototype.last()\n\nUpdates the state to use the last full page\n\n##### Examples\n\n```javascript\npager.last();\n```\n\n### PageInputsV2\n\nAn HTMLElement with an open shadow, five buttons, and a select representing a way for the user to request changes to the paging\n\nUnless you want the same state reflected in multiple `PageInputsV2` instances, `PageControllerV2` will be more convenient to use\n\n#### PageInputsV2.prototype.DEFAULT_PAGE_SIZE\n\nThe initial value of the select controlling the page size\n\n#### PageInputsV2.prototype.assignPagePromulgator()\n\nMake the `PageInputsV2` control the state in a `PagePromulgator`\n\n##### Parameters\n* pager: a `PagePromulgator` that already has registered callbacks for computing the current page number and the total number of pages\n\n##### Examples\n\n```javascript\nconst pager = new PagePromulgator(20, 99);\ndocument.getElementById(\"thead-pagination\").assignPagePromulgator(pager);\ndocument.getElementById(\"tfoot-pagination\").assignPagePromulgator(pager);\n```\n\n### PaginationEvent\n\nCustom event (of type \"paginate\") representing a requested change in page\n\n#### PaginationEvent Constructor\n\n##### Parameters\n* skip\n* take\n\n##### Examples\n\n```javascript\npager.registerCallback((newState)=>{\n  document.getElementById(\"mytable\").dispatchEvent(new PaginationEvent(newState.skip, newState.take));\n}, ['skip', 'take'], []);\ndocument.getElementById(\"mytable\").addEventListener('paginate', event=>console.log(`newSkip: ${event.skip}, newTake: ${event.take}`));\n```\n\n#### PaginationEvent.prototype.skip\n\nThe requested \"skip\" for the new page\n\n#### PaginationEvent.prototype.take\n\nThe requested \"take\" for the new page\n\n### PageControllerV2\n\nAn HTMLElement with inputs for controlling pages\n\nEmits a PaginationEvent when the page is changed\n\n#### PageControllerV2.prototype.setCardinality()\n\nSet the maximum number of rows\n\n##### Parameters\n* cardinality: The length of the list being paginated over\n\n##### Examples\n\n```javascript\ndocument.getElementById('thead-pagination').setCardinality(420);\n```\n\n### PageInputs and PageController\n\n`PageInputs` and `PageController` are similar to `PageInputsV2` and `PageControllerV2` except they show page numbers instead of page ranges on the buttons. Users find this confusing, since buttons that show the same page number can have different behaviors. Also, `PageController` takes `cardinality` as an attribute instead of providing `setCardinality()`.\n","readmeFilename":"README.md"}