a07edd485b
Angular 19 component library for timelines and event tracking: timeline, Gantt chart, event cards, date markers, connectors, and custom event templates. Includes signal-based services, SCSS design tokens with dark mode, and TypeScript type definitions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
76 lines
2.2 KiB
HTML
76 lines
2.2 KiB
HTML
<div class="tl-horizontal-timeline">
|
|
@if (showNavArrows && canScrollLeft) {
|
|
<ui-button
|
|
class="tl-horizontal-timeline__nav tl-horizontal-timeline__nav--left"
|
|
|
|
|
|
(click)="scrollLeft()"
|
|
aria-label="Scroll left"
|
|
>
|
|
<ui-icon name="chevron-left" />
|
|
</ui-button>
|
|
}
|
|
|
|
<div
|
|
class="tl-horizontal-timeline__container"
|
|
#scrollContainer
|
|
(scroll)="updateScrollState()"
|
|
>
|
|
@if (loading) {
|
|
<div class="tl-horizontal-timeline__loading">
|
|
@for (i of getLoadingItems(); track i) {
|
|
<div class="tl-horizontal-timeline__skeleton">
|
|
<ui-skeleton width="32px" height="32px" variant="circle" />
|
|
<ui-skeleton width="120px" height="60px" />
|
|
</div>
|
|
}
|
|
</div>
|
|
} @else if (items.length === 0) {
|
|
<div class="tl-horizontal-timeline__empty">
|
|
<ui-icon name="calendar" />
|
|
<p>{{ emptyMessage }}</p>
|
|
</div>
|
|
} @else {
|
|
<div class="tl-horizontal-timeline__track">
|
|
@for (item of sortedItems; track item.id; let idx = $index) {
|
|
<div class="tl-horizontal-timeline__item" (click)="onItemClick(item, idx)">
|
|
<div
|
|
class="tl-horizontal-timeline__marker"
|
|
[style.background-color]="getMarkerColor(item)"
|
|
[uiTooltip]="item.title"
|
|
>
|
|
@if (item.icon) {
|
|
<ui-icon [name]="item.icon" />
|
|
}
|
|
</div>
|
|
|
|
<div class="tl-horizontal-timeline__content">
|
|
<time class="tl-horizontal-timeline__time">{{ formatTime(item) }}</time>
|
|
<h4 class="tl-horizontal-timeline__title">{{ item.title }}</h4>
|
|
@if (item.description) {
|
|
<p class="tl-horizontal-timeline__description">{{ item.description }}</p>
|
|
}
|
|
</div>
|
|
|
|
@if (!$last) {
|
|
<div class="tl-horizontal-timeline__connector"></div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@if (showNavArrows && canScrollRight) {
|
|
<ui-button
|
|
class="tl-horizontal-timeline__nav tl-horizontal-timeline__nav--right"
|
|
|
|
|
|
(click)="scrollRight()"
|
|
aria-label="Scroll right"
|
|
>
|
|
<ui-icon name="chevron-right" />
|
|
</ui-button>
|
|
}
|
|
</div>
|