@progress/kendo-angular-layout 21.1.1-develop.2 → 21.2.0-develop.10

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.
Files changed (37) hide show
  1. package/codemods/utils.js +805 -394
  2. package/codemods/v19/tabstrip-mousescrollspeed.js +11 -15
  3. package/esm2022/avatar/avatar.component.mjs +63 -59
  4. package/esm2022/card/card-actions.component.mjs +51 -41
  5. package/esm2022/drawer/drawer-container.component.mjs +10 -8
  6. package/esm2022/drawer/drawer.component.mjs +69 -55
  7. package/esm2022/drawer/item.component.mjs +79 -69
  8. package/esm2022/drawer/list.component.mjs +30 -27
  9. package/esm2022/expansionpanel/expansionpanel.component.mjs +75 -65
  10. package/esm2022/package-metadata.mjs +2 -2
  11. package/esm2022/panelbar/panelbar-item.component.mjs +169 -135
  12. package/esm2022/panelbar/panelbar.component.mjs +58 -47
  13. package/esm2022/splitter/splitter-bar.component.mjs +34 -27
  14. package/esm2022/splitter/splitter-pane.component.mjs +16 -10
  15. package/esm2022/splitter/splitter.component.mjs +29 -31
  16. package/esm2022/stepper/list.component.mjs +33 -33
  17. package/esm2022/stepper/step.component.mjs +141 -111
  18. package/esm2022/stepper/stepper.component.mjs +59 -55
  19. package/esm2022/stepper/stepper.service.mjs +2 -2
  20. package/esm2022/tabstrip/rendering/tab.component.mjs +49 -39
  21. package/esm2022/tabstrip/tabstrip.component.mjs +251 -233
  22. package/esm2022/tabstrip/tabstrip.service.mjs +2 -2
  23. package/esm2022/tabstrip/util.mjs +1 -1
  24. package/esm2022/tilelayout/keyboard-navigation.service.mjs +2 -2
  25. package/esm2022/tilelayout/tilelayout-item.component.mjs +28 -23
  26. package/esm2022/tilelayout/tilelayout.component.mjs +24 -21
  27. package/esm2022/timeline/models/events-order.mjs +5 -0
  28. package/esm2022/timeline/timeline-card.component.mjs +185 -151
  29. package/esm2022/timeline/timeline-horizontal.component.mjs +200 -192
  30. package/esm2022/timeline/timeline-vertical.component.mjs +79 -67
  31. package/esm2022/timeline/timeline.component.mjs +61 -34
  32. package/fesm2022/progress-kendo-angular-layout.mjs +1781 -1514
  33. package/index.d.ts +1 -0
  34. package/package.json +10 -11
  35. package/timeline/models/events-order.d.ts +10 -0
  36. package/timeline/timeline.component.d.ts +12 -1
  37. package/codemods/template-transformer/index.js +0 -93
@@ -10,7 +10,7 @@ import { TimelineCardBodyTemplateDirective } from './templates/timeline-card-bod
10
10
  import { TimelineCardHeaderTemplateDirective } from './templates/timeline-card-header.directive';
11
11
  import { TimelineCardActionsTemplateDirective } from './templates/timeline-card-actions.directive';
12
12
  import { DatePipe } from '@progress/kendo-angular-intl';
13
- import { NgIf, NgFor, NgClass } from '@angular/common';
13
+ import { NgClass } from '@angular/common';
14
14
  import * as i0 from "@angular/core";
15
15
  /**
16
16
  * @hidden
@@ -79,40 +79,46 @@ export class TimelineVerticalComponent {
79
79
  this.renderer.setAttribute(cardElement, 'aria-describedby', dateLabelId);
80
80
  }
81
81
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
82
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineVerticalComponent, isStandalone: true, selector: "kendo-timeline-vertical", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventWidth: "eventWidth", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "cards", predicate: ["card"], descendants: true }, { propertyName: "dateElementRefs", predicate: ["dateWrap"], descendants: true }, { propertyName: "innerDateElementRefs", predicate: ["innerDate"], descendants: true }], exportAs: ["kendoTimelineVertical"], ngImport: i0, template: `
83
- <ul *ngIf="events && events.length > 0">
84
- <ng-container *ngFor="let event of events; let i = index">
85
- <li class="k-timeline-flag-wrap" *ngIf="event.flag">
86
- <span class="k-timeline-flag">{{ event.flag }}</span>
82
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineVerticalComponent, isStandalone: true, selector: "kendo-timeline-vertical", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventWidth: "eventWidth", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "cards", predicate: ["card"], descendants: true }, { propertyName: "dateElementRefs", predicate: ["dateWrap"], descendants: true }, { propertyName: "innerDateElementRefs", predicate: ["innerDate"], descendants: true }], exportAs: ["kendoTimelineVertical"], ngImport: i0, template: `
83
+ @if (events && events.length > 0) {
84
+ <ul>
85
+ @for (event of events; track event; let i = $index) {
86
+ @if (event.flag) {
87
+ <li class="k-timeline-flag-wrap">
88
+ <span class="k-timeline-flag">{{ event.flag }}</span>
87
89
  </li>
88
- <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
89
- <div class="k-timeline-date-wrap" #dateWrap>
90
- <span *ngIf="showDateLabels" class="k-timeline-date" #innerDate>
91
- {{ event.date | kendoDate: dateFormat }}
92
- </span>
93
- </div>
94
- <span class="k-timeline-circle"></span>
95
- <kendo-timeline-card
96
- #card
97
- [event]="event"
98
- [expanded]="event.expanded || !collapsibleEvents"
99
- [collapsible]="collapsibleEvents"
100
- [reversed]="alterMode && i % 2 === 0"
101
- [tabIndex]="'0'"
102
- [navigable]="navigable"
103
- [animationDuration]="animationDuration"
104
- [headerTemplate]="headerTemplate"
105
- [bodyTemplate]="bodyTemplate"
106
- [actionsTemplate]="actionsTemplate"
107
- [index]="i"
108
- [eventWidth]="eventWidth"
109
- orientation="vertical"
110
- >
111
- </kendo-timeline-card>
112
- </li>
113
- </ng-container>
114
- </ul>
115
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }] });
90
+ }
91
+ <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
92
+ <div class="k-timeline-date-wrap" #dateWrap>
93
+ @if (showDateLabels) {
94
+ <span class="k-timeline-date" #innerDate>
95
+ {{ event.date | kendoDate: dateFormat }}
96
+ </span>
97
+ }
98
+ </div>
99
+ <span class="k-timeline-circle"></span>
100
+ <kendo-timeline-card
101
+ #card
102
+ [event]="event"
103
+ [expanded]="event.expanded || !collapsibleEvents"
104
+ [collapsible]="collapsibleEvents"
105
+ [reversed]="alterMode && i % 2 === 0"
106
+ [tabIndex]="'0'"
107
+ [navigable]="navigable"
108
+ [animationDuration]="animationDuration"
109
+ [headerTemplate]="headerTemplate"
110
+ [bodyTemplate]="bodyTemplate"
111
+ [actionsTemplate]="actionsTemplate"
112
+ [index]="i"
113
+ [eventWidth]="eventWidth"
114
+ orientation="vertical"
115
+ >
116
+ </kendo-timeline-card>
117
+ </li>
118
+ }
119
+ </ul>
120
+ }
121
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }] });
116
122
  }
117
123
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineVerticalComponent, decorators: [{
118
124
  type: Component,
@@ -121,41 +127,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
121
127
  exportAs: 'kendoTimelineVertical',
122
128
  selector: 'kendo-timeline-vertical',
123
129
  template: `
124
- <ul *ngIf="events && events.length > 0">
125
- <ng-container *ngFor="let event of events; let i = index">
126
- <li class="k-timeline-flag-wrap" *ngIf="event.flag">
127
- <span class="k-timeline-flag">{{ event.flag }}</span>
130
+ @if (events && events.length > 0) {
131
+ <ul>
132
+ @for (event of events; track event; let i = $index) {
133
+ @if (event.flag) {
134
+ <li class="k-timeline-flag-wrap">
135
+ <span class="k-timeline-flag">{{ event.flag }}</span>
128
136
  </li>
129
- <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
130
- <div class="k-timeline-date-wrap" #dateWrap>
131
- <span *ngIf="showDateLabels" class="k-timeline-date" #innerDate>
132
- {{ event.date | kendoDate: dateFormat }}
133
- </span>
134
- </div>
135
- <span class="k-timeline-circle"></span>
136
- <kendo-timeline-card
137
- #card
138
- [event]="event"
139
- [expanded]="event.expanded || !collapsibleEvents"
140
- [collapsible]="collapsibleEvents"
141
- [reversed]="alterMode && i % 2 === 0"
142
- [tabIndex]="'0'"
143
- [navigable]="navigable"
144
- [animationDuration]="animationDuration"
145
- [headerTemplate]="headerTemplate"
146
- [bodyTemplate]="bodyTemplate"
147
- [actionsTemplate]="actionsTemplate"
148
- [index]="i"
149
- [eventWidth]="eventWidth"
150
- orientation="vertical"
151
- >
152
- </kendo-timeline-card>
153
- </li>
154
- </ng-container>
155
- </ul>
156
- `,
137
+ }
138
+ <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
139
+ <div class="k-timeline-date-wrap" #dateWrap>
140
+ @if (showDateLabels) {
141
+ <span class="k-timeline-date" #innerDate>
142
+ {{ event.date | kendoDate: dateFormat }}
143
+ </span>
144
+ }
145
+ </div>
146
+ <span class="k-timeline-circle"></span>
147
+ <kendo-timeline-card
148
+ #card
149
+ [event]="event"
150
+ [expanded]="event.expanded || !collapsibleEvents"
151
+ [collapsible]="collapsibleEvents"
152
+ [reversed]="alterMode && i % 2 === 0"
153
+ [tabIndex]="'0'"
154
+ [navigable]="navigable"
155
+ [animationDuration]="animationDuration"
156
+ [headerTemplate]="headerTemplate"
157
+ [bodyTemplate]="bodyTemplate"
158
+ [actionsTemplate]="actionsTemplate"
159
+ [index]="i"
160
+ [eventWidth]="eventWidth"
161
+ orientation="vertical"
162
+ >
163
+ </kendo-timeline-card>
164
+ </li>
165
+ }
166
+ </ul>
167
+ }
168
+ `,
157
169
  standalone: true,
158
- imports: [NgIf, NgFor, NgClass, TimelineCardComponent, DatePipe]
170
+ imports: [NgClass, TimelineCardComponent, DatePipe]
159
171
  }]
160
172
  }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { events: [{
161
173
  type: Input
@@ -14,7 +14,6 @@ import { TimelineCardHeaderTemplateDirective } from './templates/timeline-card-h
14
14
  import { Subscription } from 'rxjs';
15
15
  import { TimelineCardActionsTemplateDirective } from './templates/timeline-card-actions.directive';
16
16
  import { isPresent } from '@progress/kendo-angular-common';
17
- import { NgIf } from '@angular/common';
18
17
  import { LocalizedTimelineMessagesDirective } from './localization/localized-messages.directive';
19
18
  import * as i0 from "@angular/core";
20
19
  import * as i1 from "./timeline.service";
@@ -41,7 +40,8 @@ export class TimelineComponent {
41
40
  this.originalData = events;
42
41
  this._events = processItems(this.originalData, this.modelFields);
43
42
  this._events.sort((a, b) => {
44
- return a.date.getTime() - b.date.getTime();
43
+ const order = this.eventsOrder === 'asc' ? 1 : -1;
44
+ return order * (a.date.getTime() - b.date.getTime());
45
45
  });
46
46
  if (this._events.length > 0) {
47
47
  let flag = this._events[0].date.getFullYear() - 1;
@@ -106,6 +106,26 @@ export class TimelineComponent {
106
106
  * @default true
107
107
  */
108
108
  animation;
109
+ /**
110
+ * Specifies the order of the Timeline events.
111
+ * `asc` - chronological order
112
+ * `desc` - reverse-chronological order
113
+ *
114
+ * @default 'asc'
115
+ */
116
+ set eventsOrder(order) {
117
+ if (order === this._eventsOrder) {
118
+ return;
119
+ }
120
+ this._eventsOrder = order;
121
+ this._events = [...this._events].sort((a, b) => {
122
+ const sortOrder = order === 'asc' ? 1 : -1;
123
+ return sortOrder * (a.date.getTime() - b.date.getTime());
124
+ });
125
+ }
126
+ get eventsOrder() {
127
+ return this._eventsOrder;
128
+ }
109
129
  /**
110
130
  * Sets a specific width for the event.
111
131
  * This setting is supported only in `vertical` mode.
@@ -233,6 +253,7 @@ export class TimelineComponent {
233
253
  _eventHeight = DEFAULT_EVENT_HEIGHT;
234
254
  _dateFormat = DEFAULT_DATE_FORMAT;
235
255
  originalData = [];
256
+ _eventsOrder = 'asc';
236
257
  subscriptions = new Subscription();
237
258
  constructor(timelineService) {
238
259
  this.timelineService = timelineService;
@@ -294,7 +315,7 @@ export class TimelineComponent {
294
315
  }));
295
316
  }
296
317
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, deps: [{ token: i1.TimelineService }], target: i0.ɵɵFactoryTarget.Component });
297
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineComponent, isStandalone: true, selector: "kendo-timeline", inputs: { events: "events", modelFields: "modelFields", orientation: "orientation", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animation: "animation", eventWidth: "eventWidth", eventHeight: "eventHeight", dateFormat: "dateFormat" }, outputs: { onToggle: "onToggle", onActionClick: "onActionClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-timeline": "this.hostClass", "class.k-timeline-vertical": "this.verticalClass", "class.k-timeline-horizontal": "this.horizontalClass", "class.k-timeline-alternating": "this.alternatingClass", "class.k-timeline-collapsible": "this.collapsibleClass" } }, providers: [
318
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineComponent, isStandalone: true, selector: "kendo-timeline", inputs: { events: "events", modelFields: "modelFields", orientation: "orientation", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animation: "animation", eventsOrder: "eventsOrder", eventWidth: "eventWidth", eventHeight: "eventHeight", dateFormat: "dateFormat" }, outputs: { onToggle: "onToggle", onActionClick: "onActionClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-timeline": "this.hostClass", "class.k-timeline-vertical": "this.verticalClass", "class.k-timeline-horizontal": "this.horizontalClass", "class.k-timeline-alternating": "this.alternatingClass", "class.k-timeline-collapsible": "this.collapsibleClass" } }, providers: [
298
319
  TimelineService,
299
320
  LocalizationService,
300
321
  {
@@ -303,17 +324,17 @@ export class TimelineComponent {
303
324
  }
304
325
  ], queries: [{ propertyName: "cardHeaderTemplate", predicate: TimelineCardHeaderTemplateDirective }, { propertyName: "cardBodyTemplate", predicate: TimelineCardBodyTemplateDirective }, { propertyName: "cardActionsTemplate", predicate: TimelineCardActionsTemplateDirective }], viewQueries: [{ propertyName: "timelineHorizontal", first: true, predicate: TimelineHorizontalComponent, descendants: true }, { propertyName: "timelineVertical", first: true, predicate: TimelineVerticalComponent, descendants: true }], exportAs: ["kendoTimeline"], ngImport: i0, template: `
305
326
  <ng-container kendoTimelineLocalizedMessages
306
- i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
307
- previous="previous"
308
- >
327
+ i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
328
+ previous="previous"
329
+ >
309
330
  </ng-container>
310
331
  <ng-container kendoTimelineLocalizedMessages
311
- i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
312
- next="next"
313
- >
332
+ i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
333
+ next="next"
334
+ >
314
335
  </ng-container>
315
- <kendo-timeline-vertical
316
- *ngIf="orientation === 'vertical'"
336
+ @if (orientation === 'vertical') {
337
+ <kendo-timeline-vertical
317
338
  [events]="events"
318
339
  [alterMode]="alterMode"
319
340
  [collapsibleEvents]="collapsibleEvents"
@@ -325,10 +346,11 @@ export class TimelineComponent {
325
346
  [headerTemplate]="headerTemplate"
326
347
  [bodyTemplate]="bodyTemplate"
327
348
  [actionsTemplate]="actionsTemplate"
328
- >
329
- </kendo-timeline-vertical>
330
- <kendo-timeline-horizontal
331
- *ngIf="orientation === 'horizontal'"
349
+ >
350
+ </kendo-timeline-vertical>
351
+ }
352
+ @if (orientation === 'horizontal') {
353
+ <kendo-timeline-horizontal
332
354
  [events]="events"
333
355
  [collapsibleEvents]="false"
334
356
  [navigable]="navigable"
@@ -339,9 +361,10 @@ export class TimelineComponent {
339
361
  [headerTemplate]="headerTemplate"
340
362
  [bodyTemplate]="bodyTemplate"
341
363
  [actionsTemplate]="actionsTemplate"
342
- >
343
- </kendo-timeline-horizontal>
344
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TimelineVerticalComponent, selector: "kendo-timeline-vertical", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventWidth", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineVertical"] }, { kind: "component", type: TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventHeight", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineHorizontal"] }] });
364
+ >
365
+ </kendo-timeline-horizontal>
366
+ }
367
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }, { kind: "component", type: TimelineVerticalComponent, selector: "kendo-timeline-vertical", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventWidth", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineVertical"] }, { kind: "component", type: TimelineHorizontalComponent, selector: "kendo-timeline-horizontal", inputs: ["events", "alterMode", "collapsibleEvents", "navigable", "showDateLabels", "animationDuration", "eventHeight", "dateFormat", "headerTemplate", "bodyTemplate", "actionsTemplate"], exportAs: ["kendoTimelineHorizontal"] }] });
345
368
  }
346
369
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, decorators: [{
347
370
  type: Component,
@@ -358,17 +381,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
358
381
  selector: 'kendo-timeline',
359
382
  template: `
360
383
  <ng-container kendoTimelineLocalizedMessages
361
- i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
362
- previous="previous"
363
- >
384
+ i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
385
+ previous="previous"
386
+ >
364
387
  </ng-container>
365
388
  <ng-container kendoTimelineLocalizedMessages
366
- i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
367
- next="next"
368
- >
389
+ i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
390
+ next="next"
391
+ >
369
392
  </ng-container>
370
- <kendo-timeline-vertical
371
- *ngIf="orientation === 'vertical'"
393
+ @if (orientation === 'vertical') {
394
+ <kendo-timeline-vertical
372
395
  [events]="events"
373
396
  [alterMode]="alterMode"
374
397
  [collapsibleEvents]="collapsibleEvents"
@@ -380,10 +403,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
380
403
  [headerTemplate]="headerTemplate"
381
404
  [bodyTemplate]="bodyTemplate"
382
405
  [actionsTemplate]="actionsTemplate"
383
- >
384
- </kendo-timeline-vertical>
385
- <kendo-timeline-horizontal
386
- *ngIf="orientation === 'horizontal'"
406
+ >
407
+ </kendo-timeline-vertical>
408
+ }
409
+ @if (orientation === 'horizontal') {
410
+ <kendo-timeline-horizontal
387
411
  [events]="events"
388
412
  [collapsibleEvents]="false"
389
413
  [navigable]="navigable"
@@ -394,11 +418,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
394
418
  [headerTemplate]="headerTemplate"
395
419
  [bodyTemplate]="bodyTemplate"
396
420
  [actionsTemplate]="actionsTemplate"
397
- >
398
- </kendo-timeline-horizontal>
399
- `,
421
+ >
422
+ </kendo-timeline-horizontal>
423
+ }
424
+ `,
400
425
  standalone: true,
401
- imports: [LocalizedTimelineMessagesDirective, NgIf, TimelineVerticalComponent, TimelineHorizontalComponent]
426
+ imports: [LocalizedTimelineMessagesDirective, TimelineVerticalComponent, TimelineHorizontalComponent]
402
427
  }]
403
428
  }], ctorParameters: () => [{ type: i1.TimelineService }], propDecorators: { events: [{
404
429
  type: Input
@@ -416,6 +441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
416
441
  type: Input
417
442
  }], animation: [{
418
443
  type: Input
444
+ }], eventsOrder: [{
445
+ type: Input
419
446
  }], eventWidth: [{
420
447
  type: Input
421
448
  }], eventHeight: [{