{"_id":"@avine/ng-timeline","_rev":"11-aca86a0512b0b4944d02c40ee81b5915","name":"@avine/ng-timeline","dist-tags":{"latest":"16.0.0"},"versions":{"0.5.4":{"name":"@avine/ng-timeline","description":"Angular component that displays a list of events in chronological order.","version":"0.5.4","private":false,"repository":{"type":"git","url":"git+https://github.com/avine/ng-libs.git"},"keywords":["timeline","angular"],"author":{"name":"Stéphane Francel","email":"contact@avine.io"},"license":"MIT","bugs":{"url":"https://github.com/avine/ng-libs/issues"},"homepage":"https://github.com/avine/ng-libs/tree/main/projects/timeline#readme","peerDependencies":{"@angular/cdk":"^15.0.0","@angular/common":"^15.0.0","@angular/core":"^15.0.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/avine-ng-timeline.mjs","es2020":"fesm2020/avine-ng-timeline.mjs","esm2020":"esm2020/avine-ng-timeline.mjs","fesm2020":"fesm2020/avine-ng-timeline.mjs","fesm2015":"fesm2015/avine-ng-timeline.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/avine-ng-timeline.mjs","es2020":"./fesm2020/avine-ng-timeline.mjs","es2015":"./fesm2015/avine-ng-timeline.mjs","node":"./fesm2015/avine-ng-timeline.mjs","default":"./fesm2020/avine-ng-timeline.mjs"}},"sideEffects":false,"gitHead":"4529ce957c3498a6ffb99e466f1266436a31dd15","_id":"@avine/ng-timeline@0.5.4","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-K+7hwhXCAYo26ji0j+5BxfnhP3/XgY4B0SXfgLI8154iD6UIgaSsPayqJ2fAo3RpYz4RvWNeDCxtON5FsSReKw==","shasum":"832d5a1971bb9c59b2de337ccdb3fd23e683242a","tarball":"https://registry.npmjs.org/@avine/ng-timeline/-/ng-timeline-0.5.4.tgz","fileCount":23,"unpackedSize":104804,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI3SmWZq50qgt1EEUKRmsr4oceEGx8lh8qW3ggPp3w+wIgX9lPu09hCcGA0X+ANGzKEXPwTzWEUoUMOQ9SEeRnW5w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHUANACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQ9w//WSx2w9Ei8gGTUiB7q6qXnffciQX/wDoOb+oxySwZdfJ/yU6k\r\n2xyUXKD6ZywqnF27rJUcQbZ//Jq1gV0AbcGFxIUsjcg++drIVHnoxwxuewjZ\r\nGSnvehxnkp5jdJC+UaZnX/mHK9wpSvapZQnMGHPwxpFSEirOzALzWP+mSWUb\r\nSC2YCwVsrNsoq8oUeK7h+zXk7F/S2IJ5mCmugEPF8PSqqOKTcC2Pym6ElzWb\r\ns1nzF85f3Pff2AJxvkxdCPQ9/2Vr3j7zLrhCx83cXETf7h5ONVv/DMY06U3M\r\ndmnwE/ImEOhZM/Oi36YtAmhqMP1UdoFvk/0W+0XI75JWofvIAQQkJIiMInRf\r\nLerOph/Vy8bdFcw610KKF481iVmcJrVnl6ZfBwecZJf72q3U6fLwRAMGd9/C\r\n1pCi3W4j6gPXqPi+pXOqgED7I1tgpHDYyK3xEMsxNdw1aCJXhcqtdLvNkpLj\r\nRB0/Lcxe4nXh+GvegUyRGLgKm7KiGO9a3M0o0IxayGqjIqo1eldKaV1QBi1D\r\n0vlsM7BU630ySjzRYisqFNVZgMGVJCPJAqnk7oyj+MS5k7AVYzzvtEa/MqFa\r\nAU8djAvp8/mjjfE4ya7AtDREhymRdWVXUCoF+ZoL306IVQCx0jeINqeIkhQr\r\nO+9vnTdqtbg0ra+XNJqigd0pJ4mW4vv3pXg=\r\n=L+gu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"avine","email":"contact@avine.io"},"directories":{},"maintainers":[{"name":"avine","email":"contact@avine.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-timeline_0.5.4_1679638541426_0.40835058279278935"},"_hasShrinkwrap":false},"0.5.5":{"name":"@avine/ng-timeline","description":"Angular component that displays a list of events in chronological order.","version":"0.5.5","private":false,"repository":{"type":"git","url":"git+https://github.com/avine/ng-libs.git"},"keywords":["timeline","angular"],"author":{"name":"Stéphane Francel","email":"contact@avine.io"},"license":"MIT","bugs":{"url":"https://github.com/avine/ng-libs/issues"},"homepage":"https://github.com/avine/ng-libs/tree/main/projects/timeline#readme","peerDependencies":{"@angular/cdk":"^15.0.0","@angular/common":"^15.0.0","@angular/core":"^15.0.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/avine-ng-timeline.mjs","es2020":"fesm2020/avine-ng-timeline.mjs","esm2020":"esm2020/avine-ng-timeline.mjs","fesm2020":"fesm2020/avine-ng-timeline.mjs","fesm2015":"fesm2015/avine-ng-timeline.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/avine-ng-timeline.mjs","es2020":"./fesm2020/avine-ng-timeline.mjs","es2015":"./fesm2015/avine-ng-timeline.mjs","node":"./fesm2015/avine-ng-timeline.mjs","default":"./fesm2020/avine-ng-timeline.mjs"}},"sideEffects":false,"gitHead":"942c7d8bfeda315792118f85cd557f23c46d7385","_id":"@avine/ng-timeline@0.5.5","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-EVFNFb0F+PopFHInNbjhn824+7TgS+VnH3BA4m2+KCpxlDwSJZHTaskcZoGEhsQve8oD8IozetC+W0GsCGbJMg==","shasum":"eb7234964b415f5be00fca6ce147366ed6fbb6c3","tarball":"https://registry.npmjs.org/@avine/ng-timeline/-/ng-timeline-0.5.5.tgz","fileCount":25,"unpackedSize":110601,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXEw0+kLGV6RHrh8/Gbzfiegxmo05N5mael/9mzrnDAgIgO7fZgeS/tChTScPrY5J/zxoCPkQJnvwC+IwiHXBuPUU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIMyAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9CxAAn05U0d5PjpHiqWmP3Mx0Vy3idpqlGIMPDSEvG6wOcTREgtnW\r\nrLne+ZGPYYmwiE4ciE3cMqAf4yT1pu3blPPMEw/WOHpPTFSv49NvJpbb0DsS\r\nd2k//GbbyBHKUme2jUZeEtQ+UkOjDFXUUrTOqYUCziHF33b+NLD9AIyak6mY\r\nJ+e1rCZIQFn70M2m61aq5m5J+cSufrAZrNgt8Ux0UXi2ilJv+uh8GgHaYzjl\r\niIqOZLBzJqHIUqcqMcpLOFqMmSm8nZh8p/DzWfCTKADVASH7RXqt8j4uRMUB\r\nB5hX2B11+FFVe/tpMzFVOskURBiOghs80DKh0CScdr6/CSm2eTAtebTGQ/o0\r\nlFzzSYjQrdoFfydKawDFGMgWBHOBoFQsN+N2NBmJ7Y4r1z9yZSewBO7uDtat\r\nsToTTuUyTWJsp55B/s8FSIXrbGFTe9fKVFXpBujZqDemjc5lswfdOp0G9VTO\r\nErmkgahAQHmzCd6Ibn9DWuXD0EEqu8deSunzmhxA9/hWJpPJ5RuxTpbfrtZI\r\nSAIG6WXIZmNCPzcgvNpCCaHtxjdMCC9kmUTMLBSb3OcercqFvDZao+f7ss3R\r\nijKdzyt+9MteqDzK43lBBNyMz6Eszmn9+HjK1j7iFKkLvpgqgc/aJD90R225\r\nD1hecV5zq4ckJB97redFTIiW1VJLxxcb17M=\r\n=VNgZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"avine","email":"contact@avine.io"},"directories":{},"maintainers":[{"name":"avine","email":"contact@avine.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-timeline_0.5.5_1679871103693_0.8669873280416469"},"_hasShrinkwrap":false},"0.5.6":{"name":"@avine/ng-timeline","description":"Angular component that displays a list of events in chronological order.","version":"0.5.6","private":false,"repository":{"type":"git","url":"git+https://github.com/avine/ng-libs.git"},"keywords":["timeline","angular"],"author":{"name":"Stéphane Francel","email":"contact@avine.io"},"license":"MIT","bugs":{"url":"https://github.com/avine/ng-libs/issues"},"homepage":"https://github.com/avine/ng-libs/tree/main/projects/timeline#readme","peerDependencies":{"@angular/cdk":"^15.0.0","@angular/common":"^15.0.0","@angular/core":"^15.0.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/avine-ng-timeline.mjs","es2020":"fesm2020/avine-ng-timeline.mjs","esm2020":"esm2020/avine-ng-timeline.mjs","fesm2020":"fesm2020/avine-ng-timeline.mjs","fesm2015":"fesm2015/avine-ng-timeline.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/avine-ng-timeline.mjs","es2020":"./fesm2020/avine-ng-timeline.mjs","es2015":"./fesm2015/avine-ng-timeline.mjs","node":"./fesm2015/avine-ng-timeline.mjs","default":"./fesm2020/avine-ng-timeline.mjs"}},"sideEffects":false,"gitHead":"c8d1f31822b8e513170ff557e6e61311ce1b950f","_id":"@avine/ng-timeline@0.5.6","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-OsRs/GoiZHJfuqH+nC0e9xfUSK0BX9wnKEOH7U2iVP4kQgIZ316mAMg3ZLsdqG364+xDCs0mg4r34xeTVK34tg==","shasum":"15e6ea9537f6663d032a115930e7eedb0c3f06e3","tarball":"https://registry.npmjs.org/@avine/ng-timeline/-/ng-timeline-0.5.6.tgz","fileCount":25,"unpackedSize":116043,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdzrQdj8Rxn9gbvFPCvQlnzwEnlX6qxjmB3aCNuZXHKAiEAidVwT2hxMZQ7N6h5n2v4vl2BaI1j3CnAUKSzCNoO0co="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIh3sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEPw//ZkflCz9wSXfVLJZVDpZdPMH78JXUq1m1FbfglC1PRWiZRiS2\r\nmqAvmDKSd36vjxkRuV/wAsQqrd6wS+7L1DPCjTQo8TnlWwsrp0qa9ruEI3C3\r\n9p1YWLvbgYbqnUcL9+x9GN0CySOsECPz0jMVtAlm64O9Cv803OTGBuV3SuF2\r\nAHDZcLYsnTjb3WE7JfrhQykMIJLGBM+9IBmtTNe5NuApmz9ABdEv9erZvzXI\r\nCWSBNTkNFwp+V5htmK8igiChIq8+pazZ35riU4DCgqNBihULBOI+0WUX7OiO\r\nGQBnIk4U/GLfulGz/eczzamYptz2gAxlazv0QLs7CHj/FxIiFS7urVQly0ps\r\nzN+eSWSgeESJv6MDMnz6QN6eKge/eBsJ6o7V/VQbifGFlloPq6JlroxyyOWR\r\ns3zGANkODh5xvq/SJ/OqGSg2VGRBaRDRYyssj/UMAozjEVoehyg6vxyq8YRc\r\nXhquEAT0mvuE3NeLV2zfG5CpbG8FmECYBw1ZyWQ12pd+ZK7N4oPEB8uvovOb\r\n9WrOj2EYZATinzUid6U68A19a1FC+tevpZ0lLpRs8yF1/I790yZuH+eewa6j\r\nBrMY6lxBAuEmMlQmvIB3rn7x2vnKer1WEAnHkqUgbLQbClAVaWhQi0lhgU6L\r\nNUXQw+dQQqpscWBhxWym0xsk6IVM1s9bB64=\r\n=APm8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"avine","email":"contact@avine.io"},"directories":{},"maintainers":[{"name":"avine","email":"contact@avine.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-timeline_0.5.6_1679957483967_0.6397744448885909"},"_hasShrinkwrap":false},"16.0.0":{"name":"@avine/ng-timeline","description":"Angular component that displays a list of events in chronological order.","version":"16.0.0","private":false,"repository":{"type":"git","url":"git+https://github.com/avine/ng-libs.git"},"keywords":["timeline","angular"],"author":{"name":"Stéphane Francel","email":"contact@avine.io"},"license":"MIT","bugs":{"url":"https://github.com/avine/ng-libs/issues"},"homepage":"https://github.com/avine/ng-libs/tree/main/projects/timeline#readme","peerDependencies":{"@angular/cdk":">= 16.0.0","@angular/common":">= 16.0.0","@angular/core":">= 16.0.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2022/avine-ng-timeline.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/avine-ng-timeline.mjs","esm":"./esm2022/avine-ng-timeline.mjs","default":"./fesm2022/avine-ng-timeline.mjs"}},"sideEffects":false,"gitHead":"8b50dc3d6a3503cc1b77949ceb93cef36ef73719","_id":"@avine/ng-timeline@16.0.0","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-J27IeWj4M5oNqYUfj+atRVM+BS7nDGg3XqCCnG54Zb/sn3omPf0MqJ1IX1GvsxScJAWFRTETchxCENpT0r95uw==","shasum":"a676012f68149f1ce06581c4824c8c6d493db44b","tarball":"https://registry.npmjs.org/@avine/ng-timeline/-/ng-timeline-16.0.0.tgz","fileCount":23,"unpackedSize":84661,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm2y6Az5DXxaNN1NSJy+0gVwR43Ok1Jp6XG6VGL6d0WgIhAIyNRAogyl2msQdG99xpQwYQ9MyUWCDvpc8bdxydR+CS"}]},"_npmUser":{"name":"avine","email":"contact@avine.io"},"directories":{},"maintainers":[{"name":"avine","email":"contact@avine.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-timeline_16.0.0_1695115169143_0.4991163060613404"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-23T23:12:23.613Z","0.5.0":"2023-03-23T23:12:23.854Z","modified":"2023-09-19T09:19:29.517Z","0.5.1":"2023-03-23T23:16:16.798Z","0.5.2":"2023-03-23T23:21:20.097Z","0.5.3":"2023-03-23T23:23:08.880Z","0.5.4":"2023-03-24T06:15:41.614Z","0.5.5":"2023-03-26T22:51:43.979Z","0.5.6":"2023-03-27T22:51:24.178Z","16.0.0":"2023-09-19T09:19:29.323Z"},"maintainers":[{"name":"avine","email":"contact@avine.io"}],"description":"Angular component that displays a list of events in chronological order.","homepage":"https://github.com/avine/ng-libs/tree/main/projects/timeline#readme","keywords":["timeline","angular"],"repository":{"type":"git","url":"git+https://github.com/avine/ng-libs.git"},"author":{"name":"Stéphane Francel","email":"contact@avine.io"},"bugs":{"url":"https://github.com/avine/ng-libs/issues"},"license":"MIT","readme":"# Timeline\n\nAngular component that displays a list of events in chronological order.\n\n## Demo\n\nCheck out [demo here](https://avine.github.io/ng-libs/timeline).\n\n## Usage\n\n### Component\n\n```ts\nimport { Component } from '@angular/core';\nimport { TIMELINE_DIRECTIVES, provideTimelineBreakpoint } from '@avine/ng-timeline';\n\n@Component({\n  selector: 'app-timeline-demo',\n  standalone: true,\n  imports: [TIMELINE_DIRECTIVES],\n  providers: [provideTimelineBreakpoint('1280px')], // This is optional\n  templateUrl: './timeline.component.html',\n})\nexport class TimelineDemoComponent {\n  items = ['Step 1', 'Step 2', 'Step 3'];\n}\n```\n\n### Template\n\n```html\n<!-- Using items input -->\n<timeline-container [items]=\"items\" />\n\n<!-- Using timeline-item components  -->\n<timeline-container>\n  <timeline-item>Step 1</timeline-item>\n\n  <timeline-item>Step 2</timeline-item>\n\n  <timeline-item>\n    <ng-template timelineIcon>\n      <!-- your SVG icon comes here -->\n    </ng-template>\n\n    Step 3\n  </timeline-item>\n</timeline-container>\n```\n\n## API\n\nThe different sizes should be entered as numbers (you should not specify units such as `em` or `rem`).\n\nThese sizes will be treated as `em` relative to the font-size of the root element of the timeline.\n\n| Input               | Type                      | Default   | Description                                                            |\n| ------------------- | ------------------------- | --------- | ---------------------------------------------------------------------- |\n| items               | string[]                  | []        | The list of items to display.                                          |\n| pendingFromIndex    | NumberInput               | undefined | Display the items as pending from the specified index.                 |\n| bgColor             | string \\| undefined       | undefined | Indicates the background color of the timeline.                        |\n| lineSize            | TimelineLineSize          | {}        | Determines the size of the line between bullets.                       |\n| bulletPoints        | BooleanInput              | false     | Display bullet points instead of bullet content.                       |\n| reverse             | BooleanInput              | false     | Reverse the bullet and content positions.                              |\n| vertical            | BooleanInput              | false     | Display timeline in horizontal or vertical direction.                  |\n| verticalContentSize | NumberInput               | false     | Limit the size (width) of the content when the timeline is vertical.   |\n| breakpoint          | string \\| boolean \\| null | false     | Switch between vertical and horizontal timeline based on a breakpoint. |\n\n### TimelineLineSize\n\nDetermines the size of the line between bullets.\n\n```ts\ninterface TimelineLineSize {\n  horizontal?: number;\n  vertical?: number;\n}\n```\n\n### Breakpoint\n\nSwitch between vertical and horizontal timeline based on a breakpoint.\n\nIf `breakpoint` is set to `true` then the default value is used (`1024px`).\n\nYou can provide a different default value using the `provideTimelineBreakpoint` function:\n\n```ts\nimport { provideTimelineBreakpoint } from '@avine/ng-timeline';\n\n@Component({\n  providers: [provideTimelineBreakpoint('1280px')],\n})\nexport class TimelineDemoComponent {}\n```\n\nOr by providing the `TIMELINE_BREAKPOINT` injection token:\n\n```ts\nimport { TIMELINE_BREAKPOINT } from '@avine/ng-timeline';\n\n@Component({\n  providers: [{ provide: TIMELINE_BREAKPOINT, useValue: '1280px' }],\n})\nexport class TimelineDemoComponent {}\n```\n\n## Sass customization\n\nYou can fully customize the Timeline CSS using Sass.\n\nBelow the [list of Sass variables](https://github.com/avine/ng-libs/blob/main/projects/timeline/src/lib/scss/_variables.scss):\n\n```scss\n@use 'node_modules/@avine/ng-timeline/src/lib/scss/timeline.scss' with (\n  $timeline-background-color: #fff,\n\n  $timeline-line-thickness: 3px,\n  $timeline-line-color: #ced4da,\n\n  $timeline-line-size-horizontal: 10,\n  $timeline-line-size-vertical: 2,\n\n  $timeline-bullet-font-size: 1.5,\n  $timeline-bullet-outline-size: 0.5,\n  $timeline-bullet-border-size: 2px,\n  $timeline-bullet-size: 3,\n\n  $timeline-bullet-border-color: #6ea8fe,\n  $timeline-bullet-background-color: #0d6efd,\n  $timeline-bullet-color: #fff,\n\n  $timeline-pending-bullet-scale: 0.875,\n  $timeline-pending-bullet-border-color: #dee2e6,\n  $timeline-pending-bullet-background-color: #adb5bd,\n  $timeline-pending-bullet-color: #e9ecef,\n  $timeline-pending-content-color: #999,\n\n  $timeline-vertical-content-size: auto\n);\n```\n\n## License\n\n[MIT](https://github.com/avine/ng-libs/blob/main/LICENSE)\n","readmeFilename":"README.md"}