{"_id":"@astropub/timeline-component","_rev":"2-1738d13804c8ec6b055a839d94a38f36","name":"@astropub/timeline-component","dist-tags":{"latest":"0.2.1"},"versions":{"0.1.0":{"name":"@astropub/timeline-component","description":"A sequence of tracks and events over a time span","type":"module","version":"0.1.0","main":"lib/registered.js","types":"lib/registered.d.ts","exports":{".":{"import":"./lib/module.js","types":"./lib/module.d.ts"},"./classic":{"default":"./lib/classic.js","types":"./lib/classic.d.ts"},"./elements":{"default":"./lib/elements.js","types":"./lib/elements.d.ts"},"./module":{"default":"./lib/module.js","types":"./lib/module.d.ts"},"./astro":{"import":"./lib/astro/module.js","types":"./lib/astro/module.d.ts"},"./astro/classic":{"default":"./lib/astro/classic.js","types":"./lib/astro/classic.d.ts"},"./astro/elements":{"default":"./lib/astro/elements.js","types":"./lib/astro/elements.d.ts"},"./astro/module":{"default":"./lib/astro/module.js","types":"./lib/astro/module.d.ts"}},"source":{"./classic.ts":{"type":"classic"},"./elements.ts":{"type":"module"},"./module.ts":{"type":"module"},"./astro/classic.ts":{"type":"classic","lib":"lib/astro"},"./astro/elements.ts":{"type":"module","lib":"lib/astro"},"./astro/module.ts":{"type":"module","lib":"lib/astro"}},"directories":{"lib":"lib","src":"src"},"unpkg":"lib/classic.js","jsdelivr":"lib/classic.js","sideEffects":true,"license":"CC0-1.0","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"bugs":{"url":"https://github.com/astro-community/timeline-web-component/issues"},"homepage":"https://github.com/astro-community/timeline-web-component","repository":{"type":"git","url":"git+https://github.com/astro-community/timeline-web-component.git"},"scripts":{"build":"build","start":"vite","prerelease":"build","release":"npm publish --access public"},"keywords":["astro","chart","component","components","custom","element","elements","event","events","gantt","javascript","js","multitrack","region","regions","sequence","shadow","span","time","timeline","track","tracks","web"],"gitHead":"3ae333cafe66ceef4195d3c32049b227e873d581","_id":"@astropub/timeline-component@0.1.0","_nodeVersion":"18.4.0","_npmVersion":"8.12.1","dist":{"integrity":"sha512-cnCSl20+edGfHCF4sAPHKdeu2GWIR9aJ02D6OeQG2bNSYo7RQwKv34e/ulgYNPkuPBK3BdRTs3wxhJQ65KvoqA==","shasum":"a52d55d4528239a76b169b15a3b26b678a8ee496","tarball":"https://registry.npmjs.org/@astropub/timeline-component/-/timeline-component-0.1.0.tgz","fileCount":20,"unpackedSize":95251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGD7aKOjid/Py3Du9fcBa5Im0MMuAgoXPBDyaa1KjxHlAiEA08oH+P56R3poIoQYN47ky6UdS/Fow3wKIHDq8mF3FuA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPohBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpymBAAnrbwpJ1qyMwSyEuevcNKD3M/A8VZAu74qGWqZdvk5m7t2LHs\r\n0qk43dl3CWXfgq0dTldFaJYunK2z84AJkVVeiieKVwjaTkNePaeuPW8/J2bh\r\n1Pnm7VigF+NRoWONA10bH054ncvh5P9eEy5/4DOMYzHtXi8Vpfws08GBH0tr\r\nvqEDnp6zSxXCsC8pfYP7Oy4hi2CApVSwYwmci0SiC4Tyh+yX9kgDapXLk+c7\r\nef9Q3MT8rIEv0OJ7oMonsK7v09sKoc4c7Ib3Qv8ATu7QBn3IRJV4lo0iotgj\r\nA+vjvv4cmtRbaRUSkr6sXlcOyuSu/8kDWqHBOZV7JIXC9W2ia1FDEdiboWlU\r\n1k1kZdhi07Phyn2wL1ktl1pfmyGAGef1bOAvYdjKcA4k1eA/1UYzOVXiz2Pw\r\ncm82diIqWcFh11FP26qza2w/3PY28Av2ODBxndl2ostnx340hGtz5aGh6jvl\r\nl6XoC/zjZzjEkiRp8JyihTQlSdC4fWUD4X6/JhhLhjVJRH4QNiYWM4bQie3p\r\nZVKm1nqrnUbA72HqcKMcNUUM0rzKMmJrxXnRvGaOj/L+hMPmPieFwmDQbxMC\r\ndPLSvUlwDLgePApTBI3/hr78fsFo0kxn7jVRgxlcuvz3CnfQAoT/4ScECJDJ\r\n809n8r6C2A7EmKs33qS8goV1pTK6eSmH2uk=\r\n=btqo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/timeline-component_0.1.0_1665042497746_0.5795677580138741"},"_hasShrinkwrap":false},"0.2.0":{"name":"@astropub/timeline-component","description":"A sequence of tracks and events over a time span","type":"module","version":"0.2.0","main":"lib/registered.js","types":"lib/registered.d.ts","exports":{".":{"import":"./lib/module.js","types":"./lib/module.d.ts"},"./classic":{"default":"./lib/classic.js","types":"./lib/classic.d.ts"},"./elements":{"default":"./lib/elements.js","types":"./lib/elements.d.ts"},"./module":{"default":"./lib/module.js","types":"./lib/module.d.ts"},"./astro":{"import":"./lib/astro/module.js","types":"./lib/astro/module.d.ts"},"./astro/classic":{"default":"./lib/astro/classic.js","types":"./lib/astro/classic.d.ts"},"./astro/elements":{"default":"./lib/astro/elements.js","types":"./lib/astro/elements.d.ts"},"./astro/module":{"default":"./lib/astro/module.js","types":"./lib/astro/module.d.ts"}},"source":{"./classic.ts":{"type":"classic"},"./elements.ts":{"type":"module"},"./module.ts":{"type":"module"},"./astro/classic.ts":{"type":"classic","lib":"lib/astro"},"./astro/elements.ts":{"type":"module","lib":"lib/astro"},"./astro/module.ts":{"type":"module","lib":"lib/astro"}},"directories":{"lib":"lib","src":"src"},"unpkg":"lib/classic.js","jsdelivr":"lib/classic.js","sideEffects":true,"license":"CC0-1.0","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"bugs":{"url":"https://github.com/astro-community/timeline-web-component/issues"},"homepage":"https://github.com/astro-community/timeline-web-component","repository":{"type":"git","url":"git+https://github.com/astro-community/timeline-web-component.git"},"scripts":{"build":"build","start":"vite","prerelease":"build","release":"npm publish --access public"},"keywords":["astro","chart","component","components","custom","element","elements","event","events","gantt","javascript","js","multitrack","region","regions","sequence","shadow","span","time","timeline","track","tracks","web"],"gitHead":"348fbfbd7d5f1f28b18f7ba52143071b21d94316","_id":"@astropub/timeline-component@0.2.0","_nodeVersion":"18.9.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-9KOcOErxkM1IHAmhsXp1dKz4zR+rL9Fie06/TOfOk7D81tHDbXLSsDtxPsNAkYVQTUQ22EbboOY2RdecVrS9mQ==","shasum":"6f454cf4980861e5f9c51cdc50c4b91466df057f","tarball":"https://registry.npmjs.org/@astropub/timeline-component/-/timeline-component-0.2.0.tgz","fileCount":20,"unpackedSize":103937,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDpLV6/hwHnG5gNazRHrydklaPo94tyOtGOa/xqaInEfAiEA9kja744xNfaaU/PUCyJkEKlqHZDf/WHcBPzKCN8s2Tw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQHQwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhtQ//S9BjZxT9x2V3T2En1Ac4aE9Q10+ke5xVlJGNvG8blSFq6t3Q\r\nNj/yGVaA02cBm64Rx/orrtJ0HhkzKe70H6Kh5wk3Gqk1Xv1pneoIg3IQf/OS\r\nqpj9m7pF2HnUH78Bof/WmxdHdRt01JJOKbaLqKp2wCjoh0Y4OAIreLYKVPf4\r\nAxdj51kvimrYvlQZ87JsbF11rE8DrjOoXJka9YBRCG6yOmKLjiawHgrK5de1\r\nheoQVohU+N8nKZ5hxFDgN76cCGuFau3jI6PwxzlbTVPCXbOQ5PEyTOAFl6+C\r\nKqmOtUoTH1/bptbnti8Fhsq7F4RD+KPuXXYMWRvOMF7BfEPodmldxDralUkG\r\n9k2q85lT7GDBMawC3LwPSXcot6qPDCAHB1NsG5UWa2wYQrEgsGtJKcv1t/gY\r\nrXx/dBhOqXGEBwUIwCnLvlpoCc55/1SonYwU1cdZC3rwOz6/3Xl2cbVJB7bn\r\npLyGa74w4QxUWtD6JUQVOLaMK1h/IBOW9qlnRAjPzngFU/pDmgH1ux1qtdfn\r\nxI+dKnApDowfnGGuli8GNBbyFXj88lVVsvcGyJks6HNi6El/ardw1RLkIZO0\r\n2cv6fG7BGUfyyLaooCse4SFm9iyhOtIR/m/U1Fq90EDT+GQ4PKjpUacFcQrW\r\n9ThB4p+TK/Um4I14wAX8P8aA4MT9CKtHFa8=\r\n=jg8L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/timeline-component_0.2.0_1665168432541_0.1591946132194717"},"_hasShrinkwrap":false},"0.2.1":{"name":"@astropub/timeline-component","description":"A sequence of tracks and events over a time span","type":"module","version":"0.2.1","main":"lib/module.js","types":"lib/module.d.ts","exports":{".":{"import":"./lib/module.js","types":"./lib/module.d.ts"},"./classic":{"default":"./lib/classic.js","types":"./lib/classic.d.ts"},"./elements":{"default":"./lib/elements.js","types":"./lib/elements.d.ts"},"./module":{"default":"./lib/module.js","types":"./lib/module.d.ts"},"./astro":{"import":"./lib/astro/module.js","types":"./lib/astro/module.d.ts"},"./astro/classic":{"default":"./lib/astro/classic.js","types":"./lib/astro/classic.d.ts"},"./astro/elements":{"default":"./lib/astro/elements.js","types":"./lib/astro/elements.d.ts"},"./astro/module":{"default":"./lib/astro/module.js","types":"./lib/astro/module.d.ts"}},"source":{"./classic.ts":{"type":"classic"},"./elements.ts":{"type":"module"},"./module.ts":{"type":"module"},"./astro/classic.ts":{"type":"classic","lib":"lib/astro"},"./astro/elements.ts":{"type":"module","lib":"lib/astro"},"./astro/module.ts":{"type":"module","lib":"lib/astro"}},"directories":{"lib":"lib","src":"src"},"unpkg":"lib/classic.js","jsdelivr":"lib/classic.js","sideEffects":true,"license":"CC0-1.0","author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"bugs":{"url":"https://github.com/astro-community/timeline-web-component/issues"},"homepage":"https://github.com/astro-community/timeline-web-component","repository":{"type":"git","url":"git+https://github.com/astro-community/timeline-web-component.git"},"scripts":{"build":"build","start":"vite","prerelease":"build","release":"npm publish --access public"},"keywords":["astro","chart","component","components","custom","element","elements","event","events","gantt","javascript","js","multitrack","region","regions","sequence","shadow","span","time","timeline","track","tracks","web"],"gitHead":"2db8251f6fa5ba6f4c510be37649e4d85d090bc4","_id":"@astropub/timeline-component@0.2.1","_nodeVersion":"18.9.0","_npmVersion":"8.19.1","dist":{"integrity":"sha512-zgBowpzAbO9up5UXA2sR2/renFrKPEgDDiy6qh6krRbB0ZCjQWaZD6kAx2WfhG8bwAUmNPpTqeKHJMSIIc+Ihw==","shasum":"58d0c18ac6823075e9452aae3bca299b1d9714ab","tarball":"https://registry.npmjs.org/@astropub/timeline-component/-/timeline-component-0.2.1.tgz","fileCount":20,"unpackedSize":104442,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEXnMQE2GRyO0oxFjQpam7x1T3Okx3AqCsuVuPJCXCZwIhAM5Lh0fYygT1QVJYB63jQrMapR8QKmsO846sjKFfPmbK"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjScQlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5iQ//VzoEpc0CU3+tvvdR7omHGNSEo2mGpMIIt/jQUceRDeh5ocKr\r\nxWH1S93GwNoPRYkfy2AffUZ+VEVAUApsPpj7S2JpNM0MnDMBCxpQKGK6p+5F\r\nTi0pH+0sZfcYCPItCxy9UYbDoxiS9GeEZh0KbfFHS2D6b5yjWXfos8W4NOfv\r\n4lD+f2FjLOzGPY9/jOs6rOK24F7aA+tWy1R5y7j6ijqU0DcT36hyhLtRciQ1\r\nFuprX0sFyPTt/bolR8sfPGYclTzI/r4Tl9xMdAVsZpbOcBxeFeH70B5c8/eS\r\nt9yVpYFhbjM4sMIScpMDWbU2nreHEciPTnaDc7G+iKRcVjpe/UG18TNo6ug9\r\nC+qP6G7oV3mSZiiR+9rV3xlaLO+8l3sxI5iJTqzGbxKTS4FRz2sKCRL36xVn\r\njiK85DOJ7wGxHJCBFQm3cYViZJndHqFjGKYOXnw/gDg3N7bZjBqUwYnKPgx+\r\nhiPabOW9CBzfgJrUsS6FARbTmeBk9QvuFc6uzn8BmrromTkvBxBYEq27gBru\r\nTrmzu5+2bcWyM89Z5zjHEBI3eACjP/zSbNOgHL6QiUW1+2ZXmb5mEQbe8425\r\neCjdwzGbF7Sdh3GXTUbaCFyg3V1XURR1hrzHpWf7TPDjhrIB0qOPf8+HrpG/\r\nMylR2yc49EAPuyH7beQVMQCK+PIa4NcqaRE=\r\n=0Mur\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/timeline-component_0.2.1_1665778724771_0.4975360361587995"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-06T07:48:17.686Z","0.1.0":"2022-10-06T07:48:17.933Z","modified":"2022-10-14T20:18:45.171Z","0.2.0":"2022-10-07T18:47:12.742Z","0.2.1":"2022-10-14T20:18:45.074Z"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"description":"A sequence of tracks and events over a time span","homepage":"https://github.com/astro-community/timeline-web-component","keywords":["astro","chart","component","components","custom","element","elements","event","events","gantt","javascript","js","multitrack","region","regions","sequence","shadow","span","time","timeline","track","tracks","web"],"repository":{"type":"git","url":"git+https://github.com/astro-community/timeline-web-component.git"},"author":{"name":"Jonathan Neal","email":"jonathantneal@hotmail.com"},"bugs":{"url":"https://github.com/astro-community/timeline-web-component/issues"},"license":"CC0-1.0","readme":"# Timeline Component\n\nThe **Timeline Component** lets you represent a sequence of tracks and events over a time span.\n\n![Screenshot](/playground/assets/screenshot.png)\n\n[![Open in StackBlitz][stackblitz-img]][stackblitz-url]\n\n```html\n<web-timeline></web-timeline>\n```\n\nThe **Timeline Component** is controllable through an imperative API.\n\n```html\n<script>\n\nconst timeline = document.querySelector('web-timeline')\n\n// set the start time to July 4th, 2023 (GMT)\ntimeline.startTime = '2023-07-04T00:00Z'\n\n// set the current time to the middle of the same day\ntimeline.currentTime = '2023-07-04T12:00Z'\n\n// set the end time to July 5th; the beginning of the next day.\ntimeline.endTime = '2023-07-05T00:00Z'\n\n</script>\n```\n\n## Installation\n\nThe component is available from the **npm** registry:\n\n```shell\nnpm install @astropub/timeline-component\n```\n\n<br />\n\nThe `<web-timeline>` component can be added with classic JavaScript:\n\n```html\n<script src=\"https://unpkg.com/@astropub/timeline-component/lib/classic\"></script>\n```\n\nThe `<web-timeline>` component can also be added within JavaScript modules:\n\n```html\n<script type=\"module\">\n\nimport 'https://unpkg.com/@astropub/timeline-component/lib/module'\n\n</script>\n```\n\n<br />\n\nThe exact import path may differ, depending on the project and tooling:\n\n```html\n<script type=\"module\">\n\nimport '@astropub/timeline-component/lib/module'\n\n</script>\n```\n\n<br />\n\n### Astro-Themed Timeline Component\n\nAn **[Astro](https://github.com/RocketCommunicationsInc/astro)** themed `<web-timeline>` component can be added with classic JavaScript or JavaScript modules:\n\n```html\n<script src=\"https://unpkg.com/@astropub/timeline-component/lib/astro/classic\"></script>\n```\n\n```html\n<script type=\"module\">\n\nimport 'https://unpkg.com/@astropub/timeline-component/lib/astro/module'\n\n</script>\n```\n\n<br />\n\nThe `<web-timeline>` element itself can also be referenced from the JavaScript module:\n\n```html\n<script type=\"module\">\n\nimport { Timeline } from 'https://unpkg.com/@astropub/timeline-component/lib/astro/module'\n\n</script>\n```\n\n## Setting up Tracks\n\nTo add a track to the timeline, use the `addTrack` method:\n\n```js\nconst track = timeline.addTrack({\n  header: 'My Track'\n})\n```\n\n## Setting up Events\n\nTo add an event to a `TimelineTrack`, use the `addEvent` method:\n\n```js\nconst event = track.addEvent({\n  content: 'My Event',\n  startTime: '2022-07-04T05:00Z',\n  endTime: '2022-07-04T08:00Z',\n})\n```\n\n## Usage with Angular\n\nThe Timeline component offers public methods that can be executed.\nThese methods are can be executed by setting a [`ViewChild` decorator](https://angular.io/api/core/ViewChild) on the element.\n\n```js\nimport { Timeline } from '@astropub/timeline-component'\nimport { Component, ViewChild } from '@angular/core'\n\n@Component({\n  selector: 'web-timeline',\n  template: `<web-timeline></web-timeline>`\n})\n\nexport class TimelineComponent {\n  @ViewChild(Timeline) timelineComponent: Timeline\n}\n```\n\n---\n\n## API\n\n- [Timeline](#timeline)\n- [TimelineTrack](#timelinetrack)\n- [TimelineEvent](#timelineevent)\n\n### Timeline\n\nThe `Timeline` interface represents the timeline and all of its tracks and events.\n\n```js\nimport { Timeline } from '@astropub/timeline-component/lib/astro/module'\n\nconst timeline = new Timeline({\n  startTime: '2023-07-04T00:00Z',\n  currentTime: '2023-07-04T08:00Z',\n  endTime: '2023-07-05T00:00Z'\n})\n```\n\n#### Timeline.startTime\n\nThe `startTime` property represents the starting point of the timeline.\n\nThis value can be provided as a number, as an epoch time, or as a `Date` object.\n\n```js\n// set the start time to July 4th, 2023 (GMT)\n\ntimeline.startTime = 1688428800000\ntimeline.startTime = '2023-07-04T00:00Z'\ntimeline.startTime = new Date('2023-07-04T00:00Z')\n```\n\n#### Timeline.currentTime\n\nThe `currentTime` property represents the current point in the timeline.\n\nThis value can be provided as a number, as an epoch time, or as a `Date` object.\n\n```js\n// set the start time to noon of July 4th, 2023 (GMT)\n\ntimeline.currentTime = 1688472000000\ntimeline.currentTime = '2023-07-04T12:00Z'\ntimeline.currentTime = new Date('2023-07-04T12:00Z')\n```\n\n#### Timeline.endTime\n\nThe `endTime` property represents the ending point of the timeline.\n\nThis value can be provided as a number, as an epoch time, or as a `Date` object.\n\n```js\n// set the end time to July 5th, 2023 (GMT)\n\ntimeline.endTime = 1688515200000\ntimeline.endTime = '2023-07-05T00:00Z'\ntimeline.endTime = new Date('2023-07-05T00:00Z')\n```\n\n#### Timeline.zoom\n\nThe `zoom` property represents the length at which time appears in the timeline.\n\nThis value can be provided as a number.\n\n```js\n// zoom out to 1/100th the current size\ntimeline.zoom = 0.01\n\n// zoom in to 100x the current size\ntimeline.zoom = 1000\n```\n\n#### Timeline.tracks\n\nThe `tracks` property represents the list of tracks within the timeline.\n\nThe `tracks` property returns the DOM [children](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) representing all of the tracks.\nWhen set as an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), its value replaces all of the current tracks.\n\n```js\nconst firstTrack = timeline.tracks[0]\n```\n\n#### Timeline.addTrack\n\nThe `addTrack` method adds a new track to the given timeline.\n\n```js\ntimeline.addTrack({\n  header: 'My Track',\n  open: true,\n})\n```\n\nThe `addTrack` method accepts the following options:\n\n- The `header` property defines the header content for the given track.\n- The `open` property determines whether the track should display expanded or collapsed.\n\n---\n\n### TimelineTrack\n\nThe `TimelineTrack` interface represents a grouping for related events along a timeline.\nTracks contain events, and they can also container other tracks; subtracks.\n\n```js\ntrack.header = 'My Track'\n\ntrack.addEvent({\n  content: 'My Event\",\n  startTime: '2022-07-04T05:00Z',\n  endTime: '2022-07-04T08:00Z',\n})\n```\n\n#### TimelineTrack.header\n\nThe `header` property represents the header content for the given track.\nIt returns the DOM [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) container for the track header.\nWhen set, its value is appended to the track header.\n\n```js\ntrack.header = 'My Track'\n\ntrack.header.classList.add('my-track')\n```\n\n#### TimelineTrack.tracks\n\nThe `tracks` property represents the list of subtracks within a given track.\n\nThe `tracks` property returns the DOM [children](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) representing all of the subtracks.\nWhen set as an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), its value replaces all of the current tracks.\n\n```js\nconst firstSubTrack = track.tracks[0]\n```\n\n#### TimelineTrack.open\n\nThe `open` property represents whether the track is expanded or collapsed.\n\nThe `open` property returns `true` or `false`.\nWhen set as an [Boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean), it will expand or collapse the track if it contains subtracks.\n\n#### TimelineTrack.addEvent\n\nThe `addEvent` method adds a new event to the given track.\n\n```js\ntrack.addEvent({\n  content: 'My Event',\n  startTime: '2022-07-04T05:00Z',\n  endTime: '2022-07-04T08:00Z',\n  status: 'standby',\n})\n```\n\nThe `addEvent` method accepts the following options:\n\n- The `content` property defines the content for the given event.\n- The `startTime` property determines the starting point of the given event.\n- The `endTime` property determines the ending point of the given event.\n\n#### TimelineTrack.addTrack\n\nThe `addTrack` method adds a new subtrack to the given track.\n\n```js\ntrack.addTrack({\n  header: 'My Sub-Track',\n  open: true,\n})\n```\n\nThe `addTrack` method accepts the following options:\n\n- The `header` property defines the header content for the given track.\n- The `open` property determines whether the track should display expanded or collapsed.\n\n---\n\n### TimelineEvent\n\nThe `TimelineEvent` interface represents an event within a given track.\n\n#### TimelineEvent.startTime\n\nThe `startTime` property represents the starting point of a given event.\n\nThis value can be provided as a number, as an epoch time, or as a `Date` object.\n\n```js\n// set the start time to 8 hours into July 4th, 2023 (GMT)\n\nevent.startTime = 1688457600000\nevent.startTime = '2023-07-04T08:00Z'\nevent.startTime = new Date('2023-07-04T08:00Z')\n```\n\n#### TimelineEvent.endTime\n\nThe `endTime` property represents the ending point of a given event.\n\nThis value can be provided as a number, as an epoch time, or as a `Date` object.\n\n```js\n// set the end time to 12 hours into July 4th, 2023 (GMT)\n\nevent.endTime = 1688472000000\nevent.endTime = '2023-07-04T12:00Z'\nevent.endTime = new Date('2023-07-04T12:00Z')\n```\n\n#### TimelineEvent.content\n\nThe `content` property represents the content of the event.\nIt returns the DOM [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) container.\nWhen set, its value is appended to the event.\n\n```js\nevent.content = 'My Event'\n\nevent.content.classList.add('my-event')\n```\n\n---\n\n### Defining Styles\n\nThe `track` part can be used to style the outermost area of tracks.\n\n```css\nweb-timeline::part(track) {\n  background-color: Indigo;\n}\n```\n\nThe `track-header` part can be used to style the header area of tracks.\n\n```css\nweb-timeline::part(track-header) {\n  background-color: Indigo;\n}\n```\n\nThe `event` part can be used to style the outermost area of events.\n\n```css\nweb-timeline::part(event) {\n  background-color: Indigo;\n}\n```\n\n<br />\n\n### Defining HTML Content\n\nThe `content` property of an `event` can be used to target or replace the content of a given event.\n\n```js\nconst template = document.createElement('template')\n\ntemplate.innerHTML = 'This is <strong>my event</strong>'\n\nevent.content = template.content\n```\n\n[stackblitz-img]: https://img.shields.io/badge/-Open%20in%20Stackblitz-%231374EF?color=%23444&labelColor=%231374EF&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDggMTIgMTgiIGhlaWdodD0iMTgiIGZpbGw9IiNGRkYiPjxwYXRoIGQ9Ik0xMCAxNy42aDUuMmwtMyA3LjRMMjIgMTQuNGgtNS4ybDMtNy40TDEwIDE3LjZaIi8+PC9zdmc+&style=for-the-badge\n[stackblitz-url]: https://stackblitz.com/github/jonathantneal/timeline-web-component?file=README.md&initialpath=/themed/\n","readmeFilename":"README.md"}