{"_id":"@csiro-geoanalytics/raven-sticky-sidebar","_rev":"2-476b659d688da8e94051cdde70aade29","name":"@csiro-geoanalytics/raven-sticky-sidebar","dist-tags":{"latest":"1.0.0"},"versions":{"0.2.0":{"name":"@csiro-geoanalytics/raven-sticky-sidebar","version":"0.2.0","description":"An Angular component for making sidebars that stick in place while content around them scrolls as usual.","keywords":["angular","sidebar","sticky","scroll","raven"],"license":"MIT","author":{"name":"Thomas Higginbotham","email":"thomas@thomashigginbotham.com"},"repository":{"type":"git","url":"git+https://gitlab.com/csiro-geoanalytics/npm/raven-sticky-sidebar.git"},"maintainers":[{"name":"peterwarren","email":"peter.warren@csiro.au"},{"name":"immotus","email":"immotus@outlook.com"},{"name":"hil340","email":"john.hille@csiro.au"},{"name":"samuelbradley","email":"sam.bradley@csiro.au"},{"name":"riniangreani","email":"rini.angreani@csiro.au"},{"name":"stuwoodman","email":"stuart.woodman@data61.csiro.au"},{"name":"vfazio","email":"vincent.fazio@csiro.au"},{"name":"squireg","email":"geoffrey.squire@csiro.au"}],"bugs":{"url":"https://gitlab.com/csiro-geoanalytics/npm/raven-sticky-sidebar/issues"},"homepage":"https://gitlab.com/csiro-geoanalytics/npm/raven-sticky-sidebar#readme","peerDependencies":{"@angular/common":">=7.2.0","@angular/core":">=7.2.0"},"main":"bundles/csiro-geoanalytics-raven-sticky-sidebar.umd.js","module":"fesm5/csiro-geoanalytics-raven-sticky-sidebar.js","es2015":"fesm2015/csiro-geoanalytics-raven-sticky-sidebar.js","esm5":"esm5/csiro-geoanalytics-raven-sticky-sidebar.js","esm2015":"esm2015/csiro-geoanalytics-raven-sticky-sidebar.js","fesm5":"fesm5/csiro-geoanalytics-raven-sticky-sidebar.js","fesm2015":"fesm2015/csiro-geoanalytics-raven-sticky-sidebar.js","typings":"csiro-geoanalytics-raven-sticky-sidebar.d.ts","metadata":"csiro-geoanalytics-raven-sticky-sidebar.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"@csiro-geoanalytics/raven-sticky-sidebar@0.2.0","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-8TFVf24BNMiwifX4o0OaI3NEUSpWlVRyG/LRynws/2xFnMQd9VbCCOII4Mk513VyUTbf1GSN99MCDqFos0JFLQ==","shasum":"40a7f665968f569314b48b6d14c4010987708eca","tarball":"https://registry.npmjs.org/@csiro-geoanalytics/raven-sticky-sidebar/-/raven-sticky-sidebar-0.2.0.tgz","fileCount":27,"unpackedSize":142087,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFOnmdR4Dxo+HZALE60crybkjf6So76ba64bWAFonotiAiEAtLwfqvbdxrC1sDq0Fwi5pVQvsCk7K86fvLZwXMg4vfA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ3r1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUjA//d0CUXS11iX1DyrMCsBI6mp/Gd8LOMQqe8R6XQ1tNGqENBaF4\r\nNEQEA4nlprqI1EEuVcovDmQYTAln+F5gdR/Tu1GWrvQIuewMZO5weQwD5n8z\r\neig5F4OBmZSo0jZTPPAcQ9IpNFlL0P0cYbCI38KVZpTfqpkuSwi+Gv24XFNk\r\nfRCF4f1g++0xMz745EUQG8j3urHpFd3IxE1LzXxTad5jfrdt2/DKUYJ4ZgmJ\r\ntsA9KMG+F8lhgQXZOJjihtJgT3x4YZkWrySOM9MqbHudPHCQ6qEw3n1MiFX7\r\nIHbxOLmxFAtBM3zZJCzpTClTlyooRrwYUv8c6RXlAVPGe4+40uX54PE5pc4Y\r\nzxswbqtjVwOYXRxL+wjQcpUAjkioq99ViG3aNcJ9teTcXWyKUT75qBH6l+gK\r\nwTm1iitYxCDduxNJg/fQHZjsWE9kWVcJoCAN63mgZA4fv63A8LqFAAJbmtG5\r\n4RFc805LRV4w/wcLp2RwRgyXuslX4SceKQ1xXZHj8iR/laXhRzjYjYG9Xjxt\r\nFPSr1xrC+FJRfLMsqhX+KPduGU4R32szm7musX3DlP6Nk+dC8XW7rPLEOmmT\r\nYclduJG2/a5bwZvr1EGzxgQ+MfPwnvUMuO3wptBU9wdqU9qoVYO6S246twGl\r\nEaQ3s/8Kq2khMDc36EmYbNPxsqo7V43VJaU=\r\n=VvmA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"immotus","email":"immotus@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/raven-sticky-sidebar_0.2.0_1650948853236_0.39294000105837434"},"_hasShrinkwrap":false},"1.0.0":{"name":"@csiro-geoanalytics/raven-sticky-sidebar","version":"1.0.0","description":"An Angular component for making sidebars that stick in place while content around them scrolls as usual.","keywords":["angular","sidebar","sticky","scroll","raven"],"license":"MIT","author":{"name":"Thomas Higginbotham","email":"thomas@thomashigginbotham.com"},"repository":{"type":"git","url":"git+https://gitlab.com/csiro-geoanalytics/npm/raven-sticky-sidebar.git"},"maintainers":[{"name":"ntaherifar","email":"n.taherifar@gmail.com"},{"name":"peterwarren","email":"peter.warren@csiro.au"},{"name":"immotus","email":"immotus@outlook.com"},{"name":"hil340","email":"john.hille@csiro.au"},{"name":"samuelbradley","email":"sam.bradley@csiro.au"},{"name":"riniangreani","email":"rini.angreani@csiro.au"},{"name":"stuwoodman","email":"stuart.woodman@data61.csiro.au"},{"name":"vfazio","email":"vincent.fazio@csiro.au"},{"name":"squireg","email":"geoffrey.squire@csiro.au"}],"bugs":{"url":"https://gitlab.com/csiro-geoanalytics/npm/raven-sticky-sidebar/issues"},"homepage":"https://gitlab.com/csiro-geoanalytics/npm/raven-sticky-sidebar#readme","peerDependencies":{"@angular/common":">=16.0.0","@angular/core":">=16.0.0"},"module":"fesm2022/csiro-geoanalytics-raven-sticky-sidebar.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/csiro-geoanalytics-raven-sticky-sidebar.mjs","esm":"./esm2022/csiro-geoanalytics-raven-sticky-sidebar.mjs","default":"./fesm2022/csiro-geoanalytics-raven-sticky-sidebar.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"gitHead":"5f2d9525fa123b4bdc4ebea45fc56bd371b2d4c6","_id":"@csiro-geoanalytics/raven-sticky-sidebar@1.0.0","_nodeVersion":"18.16.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-sPBapeQJmX++vLwp+y+X+th4mlokXREjzzyBflWEs3q37Nnsw4T76Abz5vpdMwbyC6uhm0IJdEdcey/8COtcyA==","shasum":"0881bf5903bcf7b6ff0a0be537c1cbc774a74761","tarball":"https://registry.npmjs.org/@csiro-geoanalytics/raven-sticky-sidebar/-/raven-sticky-sidebar-1.0.0.tgz","fileCount":15,"unpackedSize":55355,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp8TDKQY+Mk5pIYHtem4W723t9A6SRlqPNnEDzuM9+qwIhAO8WaM/vPF1ppciMY6LyUbSmiHLzN/5gf83oN0SnJN5m"}]},"_npmUser":{"name":"immotus","email":"immotus@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/raven-sticky-sidebar_1.0.0_1689771874576_0.0680635717710103"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-26T04:54:13.175Z","0.2.0":"2022-04-26T04:54:13.398Z","modified":"2023-07-19T13:04:35.064Z","1.0.0":"2023-07-19T13:04:34.767Z"},"maintainers":[{"name":"ntaherifar","email":"n.taherifar@gmail.com"},{"name":"peterwarren","email":"peter.warren@csiro.au"},{"name":"immotus","email":"immotus@outlook.com"},{"name":"hil340","email":"john.hille@csiro.au"},{"name":"samuelbradley","email":"sam.bradley@csiro.au"},{"name":"riniangreani","email":"rini.angreani@csiro.au"},{"name":"stuwoodman","email":"stuart.woodman@data61.csiro.au"},{"name":"vfazio","email":"vincent.fazio@csiro.au"},{"name":"squireg","email":"geoffrey.squire@csiro.au"}],"description":"An Angular component for making sidebars that stick in place while content around them scrolls as usual.","homepage":"https://gitlab.com/csiro-geoanalytics/npm/raven-sticky-sidebar#readme","keywords":["angular","sidebar","sticky","scroll","raven"],"repository":{"type":"git","url":"git+https://gitlab.com/csiro-geoanalytics/npm/raven-sticky-sidebar.git"},"author":{"name":"Thomas Higginbotham","email":"thomas@thomashigginbotham.com"},"bugs":{"url":"https://gitlab.com/csiro-geoanalytics/npm/raven-sticky-sidebar/issues"},"license":"MIT","readme":"# Raven Sticky Sidebar for Angular\n\nAn Angular component for making sidebars that stick in place while content around them scrolls as usual.\n\n## Features\n\n* Uses `position:sticky` for better performance\n* Gracefully handles sidebars larger than the viewport\n* Support for float, flexbox, and grid layouts\n\n## Installation\n\nInstall into your Angular project using NPM.\n\n`npm install raven-sticky-sidebar --save`\n\nImport the **StickySidebarModule** into your module.\n\n```ts\nimport { StickySidebarModule } from 'raven-sticky-sidebar';\n\n@NgModule({\n  imports: [\n    StickySidebarModule,\n    // ...\n  ],\n  // ...\n})\nexport class AppModule { }\n```\n\n## Usage\n\nAdd a &lt;raven-sticky-sidebar&gt; element to your template, and use floats, flexbox, or grid to position the sidebar.\n\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <style>\n      .wrapper {\n        display: grid;\n        grid-template-columns: 1fr 3fr;\n        grid-gap: 1rem;\n      }\n    </style>\n\n    <div class=\"wrapper\">\n      <raven-sticky-sidebar>\n        <aside>Sidebar content...</aside>\n      </raven-sticky-sidebar>\n\n      <article>\n        Main content that scrolls...\n      </article>\n    </div>\n  `,\n  styles: []\n})\nexport class AppComponent { }\n```\n\n### Options\n\n| Option    | Type   | Description                                              | Default Value\n| :-------- | :----- | :------------------------------------------------------- | :------------\n| topOffset | number | Space to add to the top while sidebar is stuck (px).     | 0\n| container | string | A CSS selector string that points to the parent element. | \"\"\n\n> Only add the **container** attribute if the sidebar is expected to stick within a parent element that has a limited height with its own scroll bars.\n\n## FAQ\n\n### How do I add a bottom offset?\n\nThe primary reason for needing a bottom offset is when the sidebar is larger than the viewport, causing the bottom of the sidebar content to butt up against the bottom of the viewport.\n\nThis can be easily fixed by adding some bottom padding to the last element in the sidebar. You may also need to adjust how you add your background to prevent the background from showing below the last element (adding padding to a wrapper element can help in those cases).\n\n### The sidebar is not working correctly. How can I fix it?\n\nTry creating a new Angular project with the bare minimum code necessary to make use of raven-sticky-sidebar. Gradually make changes to reproduce your issue in the bare environment.\n\n### The sidebar is still not working correctly. What else can I do?\n\nSometimes, when content in a sidebar is changed, it can cause problems with the initial calculations that were made. However, you can recalculate using the sidebar component’s `reset()` method.\n\n```ts\nimport { Component, ViewChild } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <style>/* ... */</style>\n\n    <raven-sticky-sidebar #sidebar>\n      <!-- ... -->\n    </raven-sticky-sidebar>\n  `\n})\nexport class AppComponent {\n  @ViewChild('sidebar')\n  sidebar: StickySidebarComponent;\n\n  someFuncThatUpdatesContent() {\n    // Update content in sidebar\n    // ...\n\n    // Reset sidebar\n    this.sidebar.reset()\n  }\n}\n```\n\n## Browser Compatibility\n\nInternet Explorer does not support **position:sticky** and is not compatible with raven-sticky-sidebar. [Most other major browsers have support](https://caniuse.com/#search=position%3Asticky) (including Edge).\n\n## Development\n\nTo contribute to the development of this component, clone its repository and run `npm install`. Then run `ng serve -o` to start a development server and to open a sample page in your browser.\n\n## License.\n\nMIT license.\n","readmeFilename":"README.md"}