Timeline API

Full surface of oge-timeline: its inputs, the three structural template slots and the config provider.

Properties Slots Types

OgeTimeline

oge-timeline

Name	Type	Default	Description
`items`	`readonly OgeTimelineItem[]`	`[]`	The entries, in display order — the list's order is its meaning. Fields: `key?`, `title?`, `description?`, `time?: Date \| string`, `opposite?`, `severity?`, `variant?`, `icon?` (SVG path data).
`orientation`	`'vertical' \| 'horizontal'`	`config ?? 'vertical'`	Axis of the timeline. Horizontal entries share a row and the list scrolls inline when they do not fit.
`align`	`'start' \| 'end' \| 'alternate' \| 'alternate-reverse'`	`config ?? 'end'`	Side of the axis the content sits on — logical, so RTL mirrors. `alternate` starts at the end side and swaps per entry, `alternate-reverse` starts at the start side; both render the opposite column (the entry’s `opposite`, else its time).
`dateFormat`	`Intl.DateTimeFormatOptions \| undefined`	`config ?? { dateStyle: 'medium', timeStyle: 'short' }`	Format of `Date` times (through the core Intl cache). String times are shown verbatim.
`locale`	`string \| undefined`	`config ?? LOCALE_ID`	BCP 47 locale of `Date` times.
`ariaLabel`	`string \| undefined`	—	Accessible name of the `<ol>` ("Order history"). Recommended when a page has more than one list.

Name	Type	Description
`OgeTimelineContentTemplate`	`[ogeTimelineContentTemplate]`	Structural directive replacing the built-in time / title / description block of every entry. Interactive content stays in the Tab order.
`OgeTimelineMarkerTemplate`	`[ogeTimelineMarkerTemplate]`	Replaces the dot on the axis (a step number, an avatar). The marker column is `aria-hidden`, so say the same thing in the content.
`OgeTimelineOppositeTemplate`	`[ogeTimelineOppositeTemplate]`	Replaces the opposite-side text of an alternating timeline.
`OgeTimelineItemTemplateContext`	`{ $implicit: OgeTimelineItem; index: number; side: 'start' \| 'end'; first: boolean; last: boolean }`	Context of all three slots.

Name	Type	Description
`OgeTimelineItem`	`interface`	One entry: `key?`, `title?`, `description?`, `time?: Date \| string`, `opposite?`, `severity?`, `variant?`, `icon?` (SVG path data). A `Date` time is written into `<time datetime>` from its local fields (never `toISOString`).
`OgeTimelineOrientation`	`'vertical' \| 'horizontal'`	Axis union.
`OgeTimelineAlign`	`'start' \| 'end' \| 'alternate' \| 'alternate-reverse'`	Content side union.
`OgeTimelineSeverity`	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	Marker colour union (default `accent`).
`OgeTimelineMarkerVariant`	`'filled' \| 'outlined'`	Solid marker, or a ring for pending / future entries.

Name	Type	Description
`provideOgeTimelineConfig(config)`	`(config: OgeTimelineConfigInput \| (() => OgeTimelineConfigInput)) => Provider`	Application- or component-scoped defaults for `orientation`, `align`, `dateFormat` and `locale` (a function makes it live). There is deliberately no `messages` block: the timeline renders no user-facing strings of its own.
`OGE_TIMELINE_CONFIG`	`InjectionToken<OgeTimelineConfig>`	The token behind `provideOgeTimelineConfig()`, with `OGE_DEFAULT_TIMELINE_CONFIG` as its factory default.

Name	Type	Description
`OgeTimelineConfig / OgeTimelineConfigInput`	`interface`	The config shape (`orientation?`, `align?`, `dateFormat?`, `locale?`) and its partial input; `OGE_DEFAULT_TIMELINE_CONFIG` is the resolved default.