@kteneyck/cesium-timeline-angular 0.1.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import * as Cesium from 'cesium';
|
|
4
|
-
import { splitForDisplay, formatDateTime, MIN_SPAN_MS, MAX_SPAN_MS, drawTimeline, hitTestSwimLane, hitTestLaneLabel, isInSwimLaneRegion, zoomRange, DEFAULT_LANE_HEIGHT, LANE_GAP, totalSwimLaneHeight, TICK_AREA_HEIGHT, SWIM_LANE_SCROLL_SPEED, defaultTheme, toJulianDate } from '@kteneyck/cesium-timeline-core';
|
|
4
|
+
import { splitForDisplay, formatDateTime, getTimezoneAbbr, MIN_SPAN_MS, MAX_SPAN_MS, drawTimeline, hitTestSwimLane, hitTestLaneLabel, isInSwimLaneRegion, zoomRange, DEFAULT_LANE_HEIGHT, LANE_GAP, totalSwimLaneHeight, TICK_AREA_HEIGHT, SWIM_LANE_SCROLL_SPEED, defaultTheme, toJulianDate } from '@kteneyck/cesium-timeline-core';
|
|
5
5
|
export * from '@kteneyck/cesium-timeline-core';
|
|
6
6
|
export { TICK_AREA_HEIGHT } from '@kteneyck/cesium-timeline-core';
|
|
7
7
|
|
|
@@ -10,9 +10,12 @@ class TimelineControlsComponent {
|
|
|
10
10
|
isPlaying = false;
|
|
11
11
|
multiplier = 1;
|
|
12
12
|
dateTimeFormat;
|
|
13
|
+
timezone;
|
|
13
14
|
isLive = false;
|
|
14
15
|
hasStartTime = false;
|
|
15
16
|
hasEndTime = false;
|
|
17
|
+
showJumpToStart;
|
|
18
|
+
showJumpToEnd;
|
|
16
19
|
theme;
|
|
17
20
|
swimLanesVisible;
|
|
18
21
|
dateTimeClick = new EventEmitter();
|
|
@@ -34,8 +37,9 @@ class TimelineControlsComponent {
|
|
|
34
37
|
get hasSwimLaneToggle() { return this.swimLanesVisible != null; }
|
|
35
38
|
get timeFormat() { return splitForDisplay(this.dateTimeFormat).timeFormat; }
|
|
36
39
|
get dateFormat() { return splitForDisplay(this.dateTimeFormat).dateFormat; }
|
|
37
|
-
get formattedTime() { return formatDateTime(this.currentTime, this.timeFormat); }
|
|
38
|
-
get formattedDate() { return formatDateTime(this.currentTime, this.dateFormat); }
|
|
40
|
+
get formattedTime() { return formatDateTime(this.currentTime, this.timeFormat, this.timezone); }
|
|
41
|
+
get formattedDate() { return formatDateTime(this.currentTime, this.dateFormat, this.timezone); }
|
|
42
|
+
get timezoneAbbr() { return getTimezoneAbbr(this.currentTime, this.timezone); }
|
|
39
43
|
ngAfterViewInit() {
|
|
40
44
|
const el = this.containerRef?.nativeElement;
|
|
41
45
|
if (!el)
|
|
@@ -49,7 +53,7 @@ class TimelineControlsComponent {
|
|
|
49
53
|
this.ro?.disconnect();
|
|
50
54
|
}
|
|
51
55
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TimelineControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TimelineControlsComponent, isStandalone: true, selector: "ct-timeline-controls", inputs: { currentTime: "currentTime", isPlaying: "isPlaying", multiplier: "multiplier", dateTimeFormat: "dateTimeFormat", isLive: "isLive", hasStartTime: "hasStartTime", hasEndTime: "hasEndTime", theme: "theme", swimLanesVisible: "swimLanesVisible" }, outputs: { dateTimeClick: "dateTimeClick", playPause: "playPause", jumpToStart: "jumpToStart", rewind: "rewind", fastForward: "fastForward", jumpToEnd: "jumpToEnd", jumpToLive: "jumpToLive", resetSpeed: "resetSpeed", toggleSwimLanes: "toggleSwimLanes" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
|
|
56
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TimelineControlsComponent, isStandalone: true, selector: "ct-timeline-controls", inputs: { currentTime: "currentTime", isPlaying: "isPlaying", multiplier: "multiplier", dateTimeFormat: "dateTimeFormat", timezone: "timezone", isLive: "isLive", hasStartTime: "hasStartTime", hasEndTime: "hasEndTime", showJumpToStart: "showJumpToStart", showJumpToEnd: "showJumpToEnd", theme: "theme", swimLanesVisible: "swimLanesVisible" }, outputs: { dateTimeClick: "dateTimeClick", playPause: "playPause", jumpToStart: "jumpToStart", rewind: "rewind", fastForward: "fastForward", jumpToEnd: "jumpToEnd", jumpToLive: "jumpToLive", resetSpeed: "resetSpeed", toggleSwimLanes: "toggleSwimLanes" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
|
|
53
57
|
<div
|
|
54
58
|
#container
|
|
55
59
|
[style.display]="isNarrow ? 'flex' : 'grid'"
|
|
@@ -75,8 +79,16 @@ class TimelineControlsComponent {
|
|
|
75
79
|
</div>
|
|
76
80
|
}
|
|
77
81
|
@if (dateFormat) {
|
|
78
|
-
<div
|
|
79
|
-
|
|
82
|
+
<div style="display:flex;align-items:center;gap:6px">
|
|
83
|
+
<span [style.color]="theme.buttonActiveColor" style="font-size:1.15em;letter-spacing:0.03em">
|
|
84
|
+
{{ formattedDate }}
|
|
85
|
+
</span>
|
|
86
|
+
@if (timezoneAbbr) {
|
|
87
|
+
<span
|
|
88
|
+
[style.color]="theme.labelColor"
|
|
89
|
+
style="font-size:1.04em;font-weight:bold;letter-spacing:0.04em;opacity:0.7"
|
|
90
|
+
>{{ timezoneAbbr }}</span>
|
|
91
|
+
}
|
|
80
92
|
</div>
|
|
81
93
|
}
|
|
82
94
|
</div>
|
|
@@ -118,12 +130,15 @@ class TimelineControlsComponent {
|
|
|
118
130
|
[style.flex]="isNarrow ? '1' : undefined"
|
|
119
131
|
[style.justify-content]="isNarrow ? 'center' : undefined"
|
|
120
132
|
>
|
|
121
|
-
@if (
|
|
133
|
+
@if (showJumpToStart !== false) {
|
|
122
134
|
<button
|
|
123
|
-
(click)="jumpToStart.emit()"
|
|
135
|
+
(click)="hasStartTime && jumpToStart.emit()"
|
|
136
|
+
[disabled]="!hasStartTime"
|
|
124
137
|
[style.color]="theme.buttonColor"
|
|
138
|
+
[style.opacity]="hasStartTime ? 1 : 0.3"
|
|
139
|
+
[style.cursor]="hasStartTime ? 'pointer' : 'default'"
|
|
125
140
|
class="ct-btn"
|
|
126
|
-
title="Jump to start"
|
|
141
|
+
[title]="hasStartTime ? 'Jump to start' : 'No start time set'"
|
|
127
142
|
>⏮</button>
|
|
128
143
|
}
|
|
129
144
|
|
|
@@ -173,12 +188,15 @@ class TimelineControlsComponent {
|
|
|
173
188
|
}
|
|
174
189
|
</button>
|
|
175
190
|
|
|
176
|
-
@if (
|
|
191
|
+
@if (showJumpToEnd !== false) {
|
|
177
192
|
<button
|
|
178
|
-
(click)="jumpToEnd.emit()"
|
|
193
|
+
(click)="hasEndTime && jumpToEnd.emit()"
|
|
194
|
+
[disabled]="!hasEndTime"
|
|
179
195
|
[style.color]="theme.buttonColor"
|
|
196
|
+
[style.opacity]="hasEndTime ? 1 : 0.3"
|
|
197
|
+
[style.cursor]="hasEndTime ? 'pointer' : 'default'"
|
|
180
198
|
class="ct-btn"
|
|
181
|
-
title="Jump to end"
|
|
199
|
+
[title]="hasEndTime ? 'Jump to end' : 'No end time set'"
|
|
182
200
|
>⏭</button>
|
|
183
201
|
}
|
|
184
202
|
</div>
|
|
@@ -255,8 +273,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
255
273
|
</div>
|
|
256
274
|
}
|
|
257
275
|
@if (dateFormat) {
|
|
258
|
-
<div
|
|
259
|
-
|
|
276
|
+
<div style="display:flex;align-items:center;gap:6px">
|
|
277
|
+
<span [style.color]="theme.buttonActiveColor" style="font-size:1.15em;letter-spacing:0.03em">
|
|
278
|
+
{{ formattedDate }}
|
|
279
|
+
</span>
|
|
280
|
+
@if (timezoneAbbr) {
|
|
281
|
+
<span
|
|
282
|
+
[style.color]="theme.labelColor"
|
|
283
|
+
style="font-size:1.04em;font-weight:bold;letter-spacing:0.04em;opacity:0.7"
|
|
284
|
+
>{{ timezoneAbbr }}</span>
|
|
285
|
+
}
|
|
260
286
|
</div>
|
|
261
287
|
}
|
|
262
288
|
</div>
|
|
@@ -298,12 +324,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
298
324
|
[style.flex]="isNarrow ? '1' : undefined"
|
|
299
325
|
[style.justify-content]="isNarrow ? 'center' : undefined"
|
|
300
326
|
>
|
|
301
|
-
@if (
|
|
327
|
+
@if (showJumpToStart !== false) {
|
|
302
328
|
<button
|
|
303
|
-
(click)="jumpToStart.emit()"
|
|
329
|
+
(click)="hasStartTime && jumpToStart.emit()"
|
|
330
|
+
[disabled]="!hasStartTime"
|
|
304
331
|
[style.color]="theme.buttonColor"
|
|
332
|
+
[style.opacity]="hasStartTime ? 1 : 0.3"
|
|
333
|
+
[style.cursor]="hasStartTime ? 'pointer' : 'default'"
|
|
305
334
|
class="ct-btn"
|
|
306
|
-
title="Jump to start"
|
|
335
|
+
[title]="hasStartTime ? 'Jump to start' : 'No start time set'"
|
|
307
336
|
>⏮</button>
|
|
308
337
|
}
|
|
309
338
|
|
|
@@ -353,12 +382,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
353
382
|
}
|
|
354
383
|
</button>
|
|
355
384
|
|
|
356
|
-
@if (
|
|
385
|
+
@if (showJumpToEnd !== false) {
|
|
357
386
|
<button
|
|
358
|
-
(click)="jumpToEnd.emit()"
|
|
387
|
+
(click)="hasEndTime && jumpToEnd.emit()"
|
|
388
|
+
[disabled]="!hasEndTime"
|
|
359
389
|
[style.color]="theme.buttonColor"
|
|
390
|
+
[style.opacity]="hasEndTime ? 1 : 0.3"
|
|
391
|
+
[style.cursor]="hasEndTime ? 'pointer' : 'default'"
|
|
360
392
|
class="ct-btn"
|
|
361
|
-
title="Jump to end"
|
|
393
|
+
[title]="hasEndTime ? 'Jump to end' : 'No end time set'"
|
|
362
394
|
>⏭</button>
|
|
363
395
|
}
|
|
364
396
|
</div>
|
|
@@ -414,12 +446,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
414
446
|
type: Input
|
|
415
447
|
}], dateTimeFormat: [{
|
|
416
448
|
type: Input
|
|
449
|
+
}], timezone: [{
|
|
450
|
+
type: Input
|
|
417
451
|
}], isLive: [{
|
|
418
452
|
type: Input
|
|
419
453
|
}], hasStartTime: [{
|
|
420
454
|
type: Input
|
|
421
455
|
}], hasEndTime: [{
|
|
422
456
|
type: Input
|
|
457
|
+
}], showJumpToStart: [{
|
|
458
|
+
type: Input
|
|
459
|
+
}], showJumpToEnd: [{
|
|
460
|
+
type: Input
|
|
423
461
|
}], theme: [{
|
|
424
462
|
type: Input
|
|
425
463
|
}], swimLanesVisible: [{
|
|
@@ -461,6 +499,7 @@ class TimelineCanvasComponent {
|
|
|
461
499
|
defaultEndMs;
|
|
462
500
|
theme;
|
|
463
501
|
maxTicks;
|
|
502
|
+
timezone;
|
|
464
503
|
swimLanes;
|
|
465
504
|
showSwimLanes;
|
|
466
505
|
timeChange = new EventEmitter();
|
|
@@ -536,7 +575,7 @@ class TimelineCanvasComponent {
|
|
|
536
575
|
this.draw();
|
|
537
576
|
}
|
|
538
577
|
}
|
|
539
|
-
if (changes['theme'] || changes['maxTicks']) {
|
|
578
|
+
if (changes['theme'] || changes['maxTicks'] || changes['timezone']) {
|
|
540
579
|
this.draw();
|
|
541
580
|
}
|
|
542
581
|
if (changes['swimLanes']) {
|
|
@@ -662,6 +701,7 @@ class TimelineCanvasComponent {
|
|
|
662
701
|
currentMs: this.curMs,
|
|
663
702
|
theme: this.theme,
|
|
664
703
|
maxTicks: this.maxTicks,
|
|
704
|
+
timezone: this.timezone,
|
|
665
705
|
swimLanes: this.swimLanesState,
|
|
666
706
|
showSwimLanes: this.showSwimLanesState,
|
|
667
707
|
scrollTop: this.scrollTop,
|
|
@@ -1069,7 +1109,7 @@ class TimelineCanvasComponent {
|
|
|
1069
1109
|
}
|
|
1070
1110
|
}
|
|
1071
1111
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TimelineCanvasComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1072
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: TimelineCanvasComponent, isStandalone: true, selector: "ct-timeline-canvas", inputs: { currentTime: "currentTime", defaultStartMs: "defaultStartMs", defaultEndMs: "defaultEndMs", theme: "theme", maxTicks: "maxTicks", swimLanes: "swimLanes", showSwimLanes: "showSwimLanes" }, outputs: { timeChange: "timeChange", dragStart: "dragStart", dragEnd: "dragEnd", swimLaneItemClick: "swimLaneItemClick", swimLaneItemHover: "swimLaneItemHover", swimLaneItemDoubleClick: "swimLaneItemDoubleClick", swimLaneItemContextMenu: "swimLaneItemContextMenu", swimLaneReorder: "swimLaneReorder" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<canvas #canvas
|
|
1112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: TimelineCanvasComponent, isStandalone: true, selector: "ct-timeline-canvas", inputs: { currentTime: "currentTime", defaultStartMs: "defaultStartMs", defaultEndMs: "defaultEndMs", theme: "theme", maxTicks: "maxTicks", timezone: "timezone", swimLanes: "swimLanes", showSwimLanes: "showSwimLanes" }, outputs: { timeChange: "timeChange", dragStart: "dragStart", dragEnd: "dragEnd", swimLaneItemClick: "swimLaneItemClick", swimLaneItemHover: "swimLaneItemHover", swimLaneItemDoubleClick: "swimLaneItemDoubleClick", swimLaneItemContextMenu: "swimLaneItemContextMenu", swimLaneReorder: "swimLaneReorder" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<canvas #canvas
|
|
1073
1113
|
style="width:100%;flex:1;min-height:0;display:block;cursor:default"
|
|
1074
1114
|
(mousedown)="onCanvasMouseDown($event)"
|
|
1075
1115
|
(mousemove)="onCanvasMouseMove($event)"
|
|
@@ -1100,6 +1140,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1100
1140
|
type: Input
|
|
1101
1141
|
}], maxTicks: [{
|
|
1102
1142
|
type: Input
|
|
1143
|
+
}], timezone: [{
|
|
1144
|
+
type: Input
|
|
1103
1145
|
}], swimLanes: [{
|
|
1104
1146
|
type: Input
|
|
1105
1147
|
}], showSwimLanes: [{
|
|
@@ -1137,6 +1179,8 @@ class TimelineComponent {
|
|
|
1137
1179
|
clock;
|
|
1138
1180
|
height;
|
|
1139
1181
|
showControls = true;
|
|
1182
|
+
showJumpToStart;
|
|
1183
|
+
showJumpToEnd;
|
|
1140
1184
|
enableDrag = true;
|
|
1141
1185
|
dateTimeFormat;
|
|
1142
1186
|
jumpToTime;
|
|
@@ -1145,6 +1189,7 @@ class TimelineComponent {
|
|
|
1145
1189
|
rwSpeeds = DEFAULT_RW_SPEEDS;
|
|
1146
1190
|
theme;
|
|
1147
1191
|
cssClass;
|
|
1192
|
+
timezone;
|
|
1148
1193
|
swimLanes;
|
|
1149
1194
|
showSwimLanes;
|
|
1150
1195
|
swimLaneTransition = 'animated';
|
|
@@ -1384,7 +1429,7 @@ class TimelineComponent {
|
|
|
1384
1429
|
this.cdr.markForCheck();
|
|
1385
1430
|
}
|
|
1386
1431
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TimelineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1387
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TimelineComponent, isStandalone: true, selector: "ct-timeline", inputs: { startTime: "startTime", endTime: "endTime", currentTime: "currentTime", clock: "clock", height: "height", showControls: "showControls", enableDrag: "enableDrag", dateTimeFormat: "dateTimeFormat", jumpToTime: "jumpToTime", maxTicks: "maxTicks", ffSpeeds: "ffSpeeds", rwSpeeds: "rwSpeeds", theme: "theme", cssClass: "cssClass", swimLanes: "swimLanes", showSwimLanes: "showSwimLanes", swimLaneTransition: "swimLaneTransition" }, outputs: { timeChange: "timeChange", playPause: "playPause", multiplierChange: "multiplierChange", dateTimeClick: "dateTimeClick", showSwimLanesChange: "showSwimLanesChange", swimLaneItemClick: "swimLaneItemClick", swimLaneItemHover: "swimLaneItemHover", swimLaneItemDoubleClick: "swimLaneItemDoubleClick", swimLaneItemContextMenu: "swimLaneItemContextMenu", swimLaneReorder: "swimLaneReorder" }, viewQueries: [{ propertyName: "canvasComp", first: true, predicate: TimelineCanvasComponent, descendants: true }, { propertyName: "controlsRef", first: true, predicate: ["controlsEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
1432
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: TimelineComponent, isStandalone: true, selector: "ct-timeline", inputs: { startTime: "startTime", endTime: "endTime", currentTime: "currentTime", clock: "clock", height: "height", showControls: "showControls", showJumpToStart: "showJumpToStart", showJumpToEnd: "showJumpToEnd", enableDrag: "enableDrag", dateTimeFormat: "dateTimeFormat", jumpToTime: "jumpToTime", maxTicks: "maxTicks", ffSpeeds: "ffSpeeds", rwSpeeds: "rwSpeeds", theme: "theme", cssClass: "cssClass", timezone: "timezone", swimLanes: "swimLanes", showSwimLanes: "showSwimLanes", swimLaneTransition: "swimLaneTransition" }, outputs: { timeChange: "timeChange", playPause: "playPause", multiplierChange: "multiplierChange", dateTimeClick: "dateTimeClick", showSwimLanesChange: "showSwimLanesChange", swimLaneItemClick: "swimLaneItemClick", swimLaneItemHover: "swimLaneItemHover", swimLaneItemDoubleClick: "swimLaneItemDoubleClick", swimLaneItemContextMenu: "swimLaneItemContextMenu", swimLaneReorder: "swimLaneReorder" }, viewQueries: [{ propertyName: "canvasComp", first: true, predicate: TimelineCanvasComponent, descendants: true }, { propertyName: "controlsRef", first: true, predicate: ["controlsEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
1388
1433
|
<div
|
|
1389
1434
|
[class]="cssClass"
|
|
1390
1435
|
[style.width]="'100%'"
|
|
@@ -1404,7 +1449,10 @@ class TimelineComponent {
|
|
|
1404
1449
|
[isLive]="isLive"
|
|
1405
1450
|
[hasStartTime]="startTime != null"
|
|
1406
1451
|
[hasEndTime]="endTime != null"
|
|
1452
|
+
[showJumpToStart]="showJumpToStart"
|
|
1453
|
+
[showJumpToEnd]="showJumpToEnd"
|
|
1407
1454
|
[dateTimeFormat]="dateTimeFormat"
|
|
1455
|
+
[timezone]="timezone"
|
|
1408
1456
|
[theme]="finalTheme"
|
|
1409
1457
|
[swimLanesVisible]="hasSwimLanes ? swimLanesExpanded : undefined"
|
|
1410
1458
|
(playPause)="handlePlayPause($event)"
|
|
@@ -1427,6 +1475,7 @@ class TimelineComponent {
|
|
|
1427
1475
|
[defaultEndMs]="defaultEndMs"
|
|
1428
1476
|
[theme]="finalTheme"
|
|
1429
1477
|
[maxTicks]="maxTicks"
|
|
1478
|
+
[timezone]="timezone"
|
|
1430
1479
|
[swimLanes]="swimLanes"
|
|
1431
1480
|
[showSwimLanes]="swimLanesExpanded"
|
|
1432
1481
|
(timeChange)="handleTimeChange($event)"
|
|
@@ -1440,7 +1489,7 @@ class TimelineComponent {
|
|
|
1440
1489
|
/>
|
|
1441
1490
|
}
|
|
1442
1491
|
</div>
|
|
1443
|
-
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TimelineControlsComponent, selector: "ct-timeline-controls", inputs: ["currentTime", "isPlaying", "multiplier", "dateTimeFormat", "isLive", "hasStartTime", "hasEndTime", "theme", "swimLanesVisible"], outputs: ["dateTimeClick", "playPause", "jumpToStart", "rewind", "fastForward", "jumpToEnd", "jumpToLive", "resetSpeed", "toggleSwimLanes"] }, { kind: "component", type: TimelineCanvasComponent, selector: "ct-timeline-canvas", inputs: ["currentTime", "defaultStartMs", "defaultEndMs", "theme", "maxTicks", "swimLanes", "showSwimLanes"], outputs: ["timeChange", "dragStart", "dragEnd", "swimLaneItemClick", "swimLaneItemHover", "swimLaneItemDoubleClick", "swimLaneItemContextMenu", "swimLaneReorder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1492
|
+
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TimelineControlsComponent, selector: "ct-timeline-controls", inputs: ["currentTime", "isPlaying", "multiplier", "dateTimeFormat", "timezone", "isLive", "hasStartTime", "hasEndTime", "showJumpToStart", "showJumpToEnd", "theme", "swimLanesVisible"], outputs: ["dateTimeClick", "playPause", "jumpToStart", "rewind", "fastForward", "jumpToEnd", "jumpToLive", "resetSpeed", "toggleSwimLanes"] }, { kind: "component", type: TimelineCanvasComponent, selector: "ct-timeline-canvas", inputs: ["currentTime", "defaultStartMs", "defaultEndMs", "theme", "maxTicks", "timezone", "swimLanes", "showSwimLanes"], outputs: ["timeChange", "dragStart", "dragEnd", "swimLaneItemClick", "swimLaneItemHover", "swimLaneItemDoubleClick", "swimLaneItemContextMenu", "swimLaneReorder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1444
1493
|
}
|
|
1445
1494
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TimelineComponent, decorators: [{
|
|
1446
1495
|
type: Component,
|
|
@@ -1464,7 +1513,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1464
1513
|
[isLive]="isLive"
|
|
1465
1514
|
[hasStartTime]="startTime != null"
|
|
1466
1515
|
[hasEndTime]="endTime != null"
|
|
1516
|
+
[showJumpToStart]="showJumpToStart"
|
|
1517
|
+
[showJumpToEnd]="showJumpToEnd"
|
|
1467
1518
|
[dateTimeFormat]="dateTimeFormat"
|
|
1519
|
+
[timezone]="timezone"
|
|
1468
1520
|
[theme]="finalTheme"
|
|
1469
1521
|
[swimLanesVisible]="hasSwimLanes ? swimLanesExpanded : undefined"
|
|
1470
1522
|
(playPause)="handlePlayPause($event)"
|
|
@@ -1487,6 +1539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1487
1539
|
[defaultEndMs]="defaultEndMs"
|
|
1488
1540
|
[theme]="finalTheme"
|
|
1489
1541
|
[maxTicks]="maxTicks"
|
|
1542
|
+
[timezone]="timezone"
|
|
1490
1543
|
[swimLanes]="swimLanes"
|
|
1491
1544
|
[showSwimLanes]="swimLanesExpanded"
|
|
1492
1545
|
(timeChange)="handleTimeChange($event)"
|
|
@@ -1513,6 +1566,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1513
1566
|
type: Input
|
|
1514
1567
|
}], showControls: [{
|
|
1515
1568
|
type: Input
|
|
1569
|
+
}], showJumpToStart: [{
|
|
1570
|
+
type: Input
|
|
1571
|
+
}], showJumpToEnd: [{
|
|
1572
|
+
type: Input
|
|
1516
1573
|
}], enableDrag: [{
|
|
1517
1574
|
type: Input
|
|
1518
1575
|
}], dateTimeFormat: [{
|
|
@@ -1529,6 +1586,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
1529
1586
|
type: Input
|
|
1530
1587
|
}], cssClass: [{
|
|
1531
1588
|
type: Input
|
|
1589
|
+
}], timezone: [{
|
|
1590
|
+
type: Input
|
|
1532
1591
|
}], swimLanes: [{
|
|
1533
1592
|
type: Input
|
|
1534
1593
|
}], showSwimLanes: [{
|