@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
@@ -6,7 +6,7 @@ import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, QueryList, Ren
6
6
  import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
7
7
  import { Subscription } from 'rxjs';
8
8
  import { TimelineCardComponent } from './timeline-card.component';
9
- import { Keys, ResizeSensorComponent, guid, isChanged, isDocumentAvailable, isPresent, normalizeNumpadKeys } from '@progress/kendo-angular-common';
9
+ import { Keys, ResizeSensorComponent, guid, isChanged, isDocumentAvailable, isPresent, normalizeKeys } from '@progress/kendo-angular-common';
10
10
  import { animate, state, style, transition, trigger } from '@angular/animations';
11
11
  import { TimelineService } from './timeline.service';
12
12
  import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -14,7 +14,7 @@ import { TimelineCardBodyTemplateDirective } from './templates/timeline-card-bod
14
14
  import { TimelineCardHeaderTemplateDirective } from './templates/timeline-card-header.directive';
15
15
  import { TimelineCardActionsTemplateDirective } from './templates/timeline-card-actions.directive';
16
16
  import { DatePipe } from '@progress/kendo-angular-intl';
17
- import { NgFor, NgIf, NgStyle } from '@angular/common';
17
+ import { NgStyle } from '@angular/common';
18
18
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
19
19
  import * as i0 from "@angular/core";
20
20
  import * as i1 from "./timeline.service";
@@ -140,13 +140,7 @@ export class TimelineHorizontalComponent {
140
140
  }
141
141
  this.trackItems.push(event);
142
142
  });
143
- this.visibleEvents = this.trackItems
144
- .slice(this.firstCircleInView, this.firstCircleInView + this.visibleTabsCount)
145
- .filter(event => !event.isFlag);
146
- this.selectedEvent = this.events[0];
147
- this.cdr.detectChanges();
148
- this.calloutStyle = this.calloutOffset;
149
- this.focusTrackItem(0);
143
+ this.navigateToFirstInterval();
150
144
  }
151
145
  }
152
146
  }
@@ -306,7 +300,7 @@ export class TimelineHorizontalComponent {
306
300
  if (!this.navigable) {
307
301
  return;
308
302
  }
309
- const code = normalizeNumpadKeys(event);
303
+ const code = normalizeKeys(event);
310
304
  event.preventDefault();
311
305
  if (code === Keys.Home) {
312
306
  this.onHomeKey();
@@ -481,105 +475,112 @@ export class TimelineHorizontalComponent {
481
475
  this.cdr.markForCheck();
482
476
  }
483
477
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineHorizontalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.TimelineService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
484
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineHorizontalComponent, isStandalone: true, selector: "kendo-timeline-horizontal", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventHeight: "eventHeight", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "trackElementRef", first: true, predicate: ["track"], descendants: true }, { propertyName: "scrollableTrackElementRef", first: true, predicate: ["scrollableTrack"], descendants: true }, { propertyName: "cardElementRefs", predicate: ["card"], descendants: true, read: ElementRef }, { propertyName: "circleElementRefs", predicate: ["trackCircle"], descendants: true }, { propertyName: "flagElementRefs", predicate: ["trackFlag"], descendants: true }, { propertyName: "cardComponents", predicate: TimelineCardComponent, descendants: true }], exportAs: ["kendoTimelineHorizontal"], usesOnChanges: true, ngImport: i0, template: `
478
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineHorizontalComponent, isStandalone: true, selector: "kendo-timeline-horizontal", inputs: { events: "events", alterMode: "alterMode", collapsibleEvents: "collapsibleEvents", navigable: "navigable", showDateLabels: "showDateLabels", animationDuration: "animationDuration", eventHeight: "eventHeight", dateFormat: "dateFormat", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate" }, providers: [], viewQueries: [{ propertyName: "trackElementRef", first: true, predicate: ["track"], descendants: true }, { propertyName: "scrollableTrackElementRef", first: true, predicate: ["scrollableTrack"], descendants: true }, { propertyName: "cardElementRefs", predicate: ["card"], descendants: true, read: ElementRef }, { propertyName: "circleElementRefs", predicate: ["trackCircle"], descendants: true }, { propertyName: "flagElementRefs", predicate: ["trackFlag"], descendants: true }, { propertyName: "cardComponents", predicate: TimelineCardComponent, descendants: true }], exportAs: ["kendoTimelineHorizontal"], usesOnChanges: true, ngImport: i0, template: `
485
479
  <div class="k-timeline-track-wrap" #track>
486
- <button
487
- kendoButton
488
- [svgIcon]="svgLeftIcon"
489
- icon="caret-alt-left"
490
- class="k-timeline-arrow k-timeline-arrow-left"
491
- rounded="full"
492
- [title]="previousTitle"
493
- (click)="previousClick()"
494
- [disabled]="isFirstRange"
495
- tabindex="-1"
496
- type="button"
497
- ></button>
498
- <button
499
- kendoButton
500
- [svgIcon]="svgRightIcon"
501
- icon="caret-alt-right"
502
- class="k-timeline-arrow k-timeline-arrow-right"
503
- rounded="full"
504
- [title]="nextTitle"
505
- (click)="nextClick()"
506
- [disabled]="isLastRange"
507
- tabindex="-1"
508
- type="button"
509
- ></button>
510
- <div class="k-timeline-track">
511
- <ul class="k-timeline-scrollable-wrap"
512
- #scrollableTrack
513
- [attr.role]="'tablist'"
514
- [attr.tabindex]="'0'"
515
- [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
516
- (@trackSlide.done)="onSlideDone()"
517
- (transitionend)="onTrackTransitionEnd()"
518
- >
519
- <ng-container *ngFor="let event of trackItems; let index = index">
520
- <li
521
- #trackFlag
522
- *ngIf="event.isFlag"
523
- class="k-timeline-flag-wrap k-timeline-track-item"
524
- [attr.role]="'none'"
525
- [attr.aria-hidden]="true"
526
- [ngStyle]="tabStyle()"
527
- >
528
- <span class="k-timeline-flag">{{ event.isFlag }}</span>
529
- </li>
530
- <li
531
- *ngIf="!event.isFlag"
532
- #trackCircle
533
- class="k-timeline-track-item"
534
- [attr.role]="'tab'"
535
- (click)="navigateToEvent(index)"
536
- [ngStyle]="tabStyle()"
537
- >
538
- <div class="k-timeline-date-wrap">
539
- <span *ngIf="showDateLabels" class="k-timeline-date">
540
- {{ event.date | kendoDate: dateFormat }}
541
- </span>
542
- </div>
543
- <span class="k-timeline-circle"></span>
544
- </li>
545
- </ng-container>
546
- </ul>
547
- </div>
480
+ <button
481
+ kendoButton
482
+ [svgIcon]="svgLeftIcon"
483
+ icon="caret-alt-left"
484
+ class="k-timeline-arrow k-timeline-arrow-left"
485
+ rounded="full"
486
+ [title]="previousTitle"
487
+ (click)="previousClick()"
488
+ [disabled]="isFirstRange"
489
+ tabindex="-1"
490
+ type="button"
491
+ ></button>
492
+ <button
493
+ kendoButton
494
+ [svgIcon]="svgRightIcon"
495
+ icon="caret-alt-right"
496
+ class="k-timeline-arrow k-timeline-arrow-right"
497
+ rounded="full"
498
+ [title]="nextTitle"
499
+ (click)="nextClick()"
500
+ [disabled]="isLastRange"
501
+ tabindex="-1"
502
+ type="button"
503
+ ></button>
504
+ <div class="k-timeline-track">
505
+ <ul class="k-timeline-scrollable-wrap"
506
+ #scrollableTrack
507
+ [attr.role]="'tablist'"
508
+ [attr.tabindex]="'0'"
509
+ [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
510
+ (@trackSlide.done)="onSlideDone()"
511
+ (transitionend)="onTrackTransitionEnd()"
512
+ >
513
+ @for (event of trackItems; track event; let index = $index) {
514
+ @if (event.isFlag) {
515
+ <li
516
+ #trackFlag
517
+ class="k-timeline-flag-wrap k-timeline-track-item"
518
+ [attr.role]="'none'"
519
+ [attr.aria-hidden]="true"
520
+ [ngStyle]="tabStyle()"
521
+ >
522
+ <span class="k-timeline-flag">{{ event.isFlag }}</span>
523
+ </li>
524
+ }
525
+ @if (!event.isFlag) {
526
+ <li
527
+ #trackCircle
528
+ class="k-timeline-track-item"
529
+ [attr.role]="'tab'"
530
+ (click)="navigateToEvent(index)"
531
+ [ngStyle]="tabStyle()"
532
+ >
533
+ <div class="k-timeline-date-wrap">
534
+ @if (showDateLabels) {
535
+ <span class="k-timeline-date">
536
+ {{ event.date | kendoDate: dateFormat }}
537
+ </span>
538
+ }
539
+ </div>
540
+ <span class="k-timeline-circle"></span>
541
+ </li>
542
+ }
543
+ }
544
+ </ul>
545
+ </div>
548
546
  </div>
549
547
  <div class="k-timeline-events-list">
548
+ @if (selectedEvent) {
550
549
  <ul
551
- *ngIf="selectedEvent"
552
- class="k-timeline-scrollable-wrap"
553
- [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
554
- (@eventsSlide.done)="onSlideDone()"
555
- [ngStyle]="{'transform-origin': 'left top'}"
556
- >
557
- <li *ngFor="let event of eventsInInterval; let index = index"
558
- #card
559
- class="k-timeline-event"
560
- (transitionend)="onTransitionEnd()"
561
- >
562
- <kendo-timeline-card
563
- [event]="selectedCardIndex === index ? selectedEvent : null"
564
- [expanded]="true"
565
- [collapsible]="collapsibleEvents"
566
- [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
567
- [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
568
- [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
569
- [navigable]="navigable"
570
- [index]="selectedEventIndex"
571
- [headerTemplate]="headerTemplate"
572
- [bodyTemplate]="bodyTemplate"
573
- [actionsTemplate]="actionsTemplate"
574
- [eventHeight]="eventHeight"
575
- orientation="horizontal"
550
+ class="k-timeline-scrollable-wrap"
551
+ [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
552
+ (@eventsSlide.done)="onSlideDone()"
553
+ [ngStyle]="{'transform-origin': 'left top'}"
554
+ >
555
+ @for (event of eventsInInterval; track event; let index = $index) {
556
+ <li
557
+ #card
558
+ class="k-timeline-event"
559
+ (transitionend)="onTransitionEnd()"
560
+ >
561
+ <kendo-timeline-card
562
+ [event]="selectedCardIndex === index ? selectedEvent : null"
563
+ [expanded]="true"
564
+ [collapsible]="collapsibleEvents"
565
+ [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
566
+ [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
567
+ [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
568
+ [navigable]="navigable"
569
+ [index]="selectedEventIndex"
570
+ [headerTemplate]="headerTemplate"
571
+ [bodyTemplate]="bodyTemplate"
572
+ [actionsTemplate]="actionsTemplate"
573
+ [eventHeight]="eventHeight"
574
+ orientation="horizontal"
576
575
  >
577
- </kendo-timeline-card>
576
+ </kendo-timeline-card>
578
577
  </li>
578
+ }
579
579
  </ul>
580
- <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
580
+ }
581
+ <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
581
582
  </div>
582
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], animations: [
583
+ `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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" }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], animations: [
583
584
  trigger('trackSlide', [
584
585
  state('left', style({
585
586
  transform: `translateX({{transformValue}}%)`,
@@ -630,105 +631,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
630
631
  selector: 'kendo-timeline-horizontal',
631
632
  template: `
632
633
  <div class="k-timeline-track-wrap" #track>
633
- <button
634
- kendoButton
635
- [svgIcon]="svgLeftIcon"
636
- icon="caret-alt-left"
637
- class="k-timeline-arrow k-timeline-arrow-left"
638
- rounded="full"
639
- [title]="previousTitle"
640
- (click)="previousClick()"
641
- [disabled]="isFirstRange"
642
- tabindex="-1"
643
- type="button"
644
- ></button>
645
- <button
646
- kendoButton
647
- [svgIcon]="svgRightIcon"
648
- icon="caret-alt-right"
649
- class="k-timeline-arrow k-timeline-arrow-right"
650
- rounded="full"
651
- [title]="nextTitle"
652
- (click)="nextClick()"
653
- [disabled]="isLastRange"
654
- tabindex="-1"
655
- type="button"
656
- ></button>
657
- <div class="k-timeline-track">
658
- <ul class="k-timeline-scrollable-wrap"
659
- #scrollableTrack
660
- [attr.role]="'tablist'"
661
- [attr.tabindex]="'0'"
662
- [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
663
- (@trackSlide.done)="onSlideDone()"
664
- (transitionend)="onTrackTransitionEnd()"
665
- >
666
- <ng-container *ngFor="let event of trackItems; let index = index">
667
- <li
668
- #trackFlag
669
- *ngIf="event.isFlag"
670
- class="k-timeline-flag-wrap k-timeline-track-item"
671
- [attr.role]="'none'"
672
- [attr.aria-hidden]="true"
673
- [ngStyle]="tabStyle()"
674
- >
675
- <span class="k-timeline-flag">{{ event.isFlag }}</span>
676
- </li>
677
- <li
678
- *ngIf="!event.isFlag"
679
- #trackCircle
680
- class="k-timeline-track-item"
681
- [attr.role]="'tab'"
682
- (click)="navigateToEvent(index)"
683
- [ngStyle]="tabStyle()"
684
- >
685
- <div class="k-timeline-date-wrap">
686
- <span *ngIf="showDateLabels" class="k-timeline-date">
687
- {{ event.date | kendoDate: dateFormat }}
688
- </span>
689
- </div>
690
- <span class="k-timeline-circle"></span>
691
- </li>
692
- </ng-container>
693
- </ul>
694
- </div>
634
+ <button
635
+ kendoButton
636
+ [svgIcon]="svgLeftIcon"
637
+ icon="caret-alt-left"
638
+ class="k-timeline-arrow k-timeline-arrow-left"
639
+ rounded="full"
640
+ [title]="previousTitle"
641
+ (click)="previousClick()"
642
+ [disabled]="isFirstRange"
643
+ tabindex="-1"
644
+ type="button"
645
+ ></button>
646
+ <button
647
+ kendoButton
648
+ [svgIcon]="svgRightIcon"
649
+ icon="caret-alt-right"
650
+ class="k-timeline-arrow k-timeline-arrow-right"
651
+ rounded="full"
652
+ [title]="nextTitle"
653
+ (click)="nextClick()"
654
+ [disabled]="isLastRange"
655
+ tabindex="-1"
656
+ type="button"
657
+ ></button>
658
+ <div class="k-timeline-track">
659
+ <ul class="k-timeline-scrollable-wrap"
660
+ #scrollableTrack
661
+ [attr.role]="'tablist'"
662
+ [attr.tabindex]="'0'"
663
+ [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
664
+ (@trackSlide.done)="onSlideDone()"
665
+ (transitionend)="onTrackTransitionEnd()"
666
+ >
667
+ @for (event of trackItems; track event; let index = $index) {
668
+ @if (event.isFlag) {
669
+ <li
670
+ #trackFlag
671
+ class="k-timeline-flag-wrap k-timeline-track-item"
672
+ [attr.role]="'none'"
673
+ [attr.aria-hidden]="true"
674
+ [ngStyle]="tabStyle()"
675
+ >
676
+ <span class="k-timeline-flag">{{ event.isFlag }}</span>
677
+ </li>
678
+ }
679
+ @if (!event.isFlag) {
680
+ <li
681
+ #trackCircle
682
+ class="k-timeline-track-item"
683
+ [attr.role]="'tab'"
684
+ (click)="navigateToEvent(index)"
685
+ [ngStyle]="tabStyle()"
686
+ >
687
+ <div class="k-timeline-date-wrap">
688
+ @if (showDateLabels) {
689
+ <span class="k-timeline-date">
690
+ {{ event.date | kendoDate: dateFormat }}
691
+ </span>
692
+ }
693
+ </div>
694
+ <span class="k-timeline-circle"></span>
695
+ </li>
696
+ }
697
+ }
698
+ </ul>
699
+ </div>
695
700
  </div>
696
701
  <div class="k-timeline-events-list">
702
+ @if (selectedEvent) {
697
703
  <ul
698
- *ngIf="selectedEvent"
699
- class="k-timeline-scrollable-wrap"
700
- [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
701
- (@eventsSlide.done)="onSlideDone()"
702
- [ngStyle]="{'transform-origin': 'left top'}"
703
- >
704
- <li *ngFor="let event of eventsInInterval; let index = index"
705
- #card
706
- class="k-timeline-event"
707
- (transitionend)="onTransitionEnd()"
708
- >
709
- <kendo-timeline-card
710
- [event]="selectedCardIndex === index ? selectedEvent : null"
711
- [expanded]="true"
712
- [collapsible]="collapsibleEvents"
713
- [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
714
- [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
715
- [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
716
- [navigable]="navigable"
717
- [index]="selectedEventIndex"
718
- [headerTemplate]="headerTemplate"
719
- [bodyTemplate]="bodyTemplate"
720
- [actionsTemplate]="actionsTemplate"
721
- [eventHeight]="eventHeight"
722
- orientation="horizontal"
704
+ class="k-timeline-scrollable-wrap"
705
+ [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
706
+ (@eventsSlide.done)="onSlideDone()"
707
+ [ngStyle]="{'transform-origin': 'left top'}"
708
+ >
709
+ @for (event of eventsInInterval; track event; let index = $index) {
710
+ <li
711
+ #card
712
+ class="k-timeline-event"
713
+ (transitionend)="onTransitionEnd()"
714
+ >
715
+ <kendo-timeline-card
716
+ [event]="selectedCardIndex === index ? selectedEvent : null"
717
+ [expanded]="true"
718
+ [collapsible]="collapsibleEvents"
719
+ [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
720
+ [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
721
+ [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
722
+ [navigable]="navigable"
723
+ [index]="selectedEventIndex"
724
+ [headerTemplate]="headerTemplate"
725
+ [bodyTemplate]="bodyTemplate"
726
+ [actionsTemplate]="actionsTemplate"
727
+ [eventHeight]="eventHeight"
728
+ orientation="horizontal"
723
729
  >
724
- </kendo-timeline-card>
730
+ </kendo-timeline-card>
725
731
  </li>
732
+ }
726
733
  </ul>
727
- <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
734
+ }
735
+ <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
728
736
  </div>
729
- `,
737
+ `,
730
738
  standalone: true,
731
- imports: [ButtonComponent, NgFor, NgIf, NgStyle, TimelineCardComponent, DatePipe, ResizeSensorComponent]
739
+ imports: [ButtonComponent, NgStyle, TimelineCardComponent, DatePipe, ResizeSensorComponent]
732
740
  }]
733
741
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.TimelineService }, { type: i2.LocalizationService }], propDecorators: { events: [{
734
742
  type: Input