@progress/kendo-angular-layout 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/timeline/templates/timeline-card-header.directive.mjs

@@ -13,13 +13,14 @@ import * as i0 from "@angular/core";
  * - `let-index="index"` (`number`) - The current event index.
  */
 export class TimelineCardHeaderTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCardHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TimelineCardHeaderTemplateDirective, isStandalone: true, selector: "[kendoTimelineCardHeaderTemplate]", ngImport: i0 });
 }
-TimelineCardHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TimelineCardHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineCardHeaderTemplateDirective, isStandalone: true, selector: "[kendoTimelineCardHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCardHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTimelineCardHeaderTemplate]',

package/{esm2020 → esm2022}/timeline/timeline-card.component.mjs

@@ -25,19 +25,23 @@ import * as i1 from "./timeline.service";
  * @hidden
  */
 export class TimelineCardComponent {
-    constructor(element, timelineService, renderer) {
-        this.element = element;
-        this.timelineService = timelineService;
-        this.renderer = renderer;
-        this.expanded = false;
-        this.collapsible = true;
-        this.reversed = false;
-        this.hostClass = true;
-        this.calloutSvgIcon = chevronRightIcon;
-        this.calloutFontIcon = 'arrow-chevron-right';
-        this.animationState = this.expanded ? 'expanded' : 'collapsed';
-        this.animationInProgress = false;
-    }
+    element;
+    timelineService;
+    renderer;
+    event;
+    expanded = false;
+    collapsible = true;
+    reversed = false;
+    orientation;
+    navigable;
+    tabIndex;
+    animationDuration;
+    index;
+    eventWidth;
+    eventHeight;
+    headerTemplate;
+    bodyTemplate;
+    actionsTemplate;
     set calloutStyle(value) {
         // applies only to horizontal orientation where the callout points upwards
         if (!this.calloutElementRef || !this.calloutElementRef.nativeElement.classList.contains('k-callout-n')) {
@@ -45,6 +49,8 @@ export class TimelineCardComponent {
         }
         this.calloutElementRef.nativeElement.style.left = value?.left;
     }
+    calloutElementRef;
+    hostClass = true;
     get collapsedClass() {
         return !this.expanded && !this.animationInProgress && this.animationState === 'collapsed';
     }
@@ -68,6 +74,15 @@ export class TimelineCardComponent {
     get ariaExpanded() {
         return this.orientation === 'vertical' ? this.expanded : null;
     }
+    calloutSvgIcon = chevronRightIcon;
+    calloutFontIcon = 'arrow-chevron-right';
+    animationState = this.expanded ? 'expanded' : 'collapsed';
+    animationInProgress = false;
+    constructor(element, timelineService, renderer) {
+        this.element = element;
+        this.timelineService = timelineService;
+        this.renderer = renderer;
+    }
     ngAfterViewInit() {
         this.makeOverflowVisible();
     }
@@ -123,9 +138,8 @@ export class TimelineCardComponent {
             this.renderer.setStyle(cardBody, 'overflow', 'auto');
         }
     }
-}
-TimelineCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardComponent, deps: [{ token: i0.ElementRef }, { token: i1.TimelineService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineCardComponent, isStandalone: true, selector: "kendo-timeline-card", inputs: { event: "event", expanded: "expanded", collapsible: "collapsible", reversed: "reversed", orientation: "orientation", navigable: "navigable", tabIndex: "tabIndex", animationDuration: "animationDuration", index: "index", eventWidth: "eventWidth", eventHeight: "eventHeight", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate", calloutStyle: "calloutStyle" }, host: { listeners: { "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-timeline-card": "this.hostClass", "class.k-collapsed": "this.collapsedClass" } }, providers: [], viewQueries: [{ propertyName: "calloutElementRef", first: true, predicate: ["callout"], descendants: true }], exportAs: ["kendoTimelineCard"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCardComponent, deps: [{ token: i0.ElementRef }, { token: i1.TimelineService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimelineCardComponent, isStandalone: true, selector: "kendo-timeline-card", inputs: { event: "event", expanded: "expanded", collapsible: "collapsible", reversed: "reversed", orientation: "orientation", navigable: "navigable", tabIndex: "tabIndex", animationDuration: "animationDuration", index: "index", eventWidth: "eventWidth", eventHeight: "eventHeight", headerTemplate: "headerTemplate", bodyTemplate: "bodyTemplate", actionsTemplate: "actionsTemplate", calloutStyle: "calloutStyle" }, host: { listeners: { "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-timeline-card": "this.hostClass", "class.k-collapsed": "this.collapsedClass" } }, providers: [], viewQueries: [{ propertyName: "calloutElementRef", first: true, predicate: ["callout"], descendants: true }], exportAs: ["kendoTimelineCard"], usesOnChanges: true, ngImport: i0, template: `
         <kendo-card
             [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
             [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
@@ -220,23 +234,24 @@ TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             </div>
         </kendo-card>
     `, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { 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: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
-        trigger('toggle', [
-            state('collapsed', style({
-                height: '0',
-                'overflow-y': 'hidden',
-                display: 'none'
-            })),
-            state('expanded', style({
-                height: '*',
-                'overflow-y': 'hidden',
-                display: 'block'
-            })),
-            transition('collapsed <=> expanded', [
-                animate('{{animationDuration}}ms')
-            ], { params: { animationDuration: '400' } }),
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardComponent, decorators: [{
+            trigger('toggle', [
+                state('collapsed', style({
+                    height: '0',
+                    'overflow-y': 'hidden',
+                    display: 'none'
+                })),
+                state('expanded', style({
+                    height: '*',
+                    'overflow-y': 'hidden',
+                    display: 'block'
+                })),
+                transition('collapsed <=> expanded', [
+                    animate('{{animationDuration}}ms')
+                ], { params: { animationDuration: '400' } }),
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCardComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [

package/{esm2020 → esm2022}/timeline/timeline-horizontal.component.mjs

@@ -4,9 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, QueryList, Renderer2, ViewChild, ViewChildren, } from '@angular/core';
 import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
-import { Subscription, fromEvent } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { TimelineCardComponent } from './timeline-card.component';
-import { Keys, guid, isChanged, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
+import { Keys, ResizeSensorComponent, guid, isChanged, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { TimelineService } from './timeline.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -26,27 +26,28 @@ const TRANSITION_EVENTS_COUNT = 3;
  * @hidden
  */
 export class TimelineHorizontalComponent {
-    constructor(cdr, _zone, renderer, timelineService, localization) {
-        this.cdr = cdr;
-        this._zone = _zone;
-        this.renderer = renderer;
-        this.timelineService = timelineService;
-        this.localization = localization;
-        this.events = [];
-        this.svgLeftIcon = caretAltLeftIcon;
-        this.svgRightIcon = caretAltRightIcon;
-        this.animationState = 'center';
-        this.translateValue = 0;
-        this.eventsInInterval = [0, 1, 2];
-        this.selectedCardIndex = 0;
-        this.tabWidth = DEFAULT_TAB_WIDTH;
-        this.firstCircleInView = 0;
-        this.visibleEvents = [];
-        this.trackItems = [];
-        this.previousTitle = 'previous';
-        this.nextTitle = 'next';
-        this.subscriptions = new Subscription();
-    }
+    cdr;
+    _zone;
+    renderer;
+    timelineService;
+    localization;
+    events = [];
+    alterMode;
+    collapsibleEvents;
+    navigable;
+    showDateLabels;
+    animationDuration;
+    eventHeight;
+    dateFormat;
+    headerTemplate;
+    bodyTemplate;
+    actionsTemplate;
+    cardElementRefs;
+    circleElementRefs;
+    flagElementRefs;
+    trackElementRef;
+    scrollableTrackElementRef;
+    cardComponents;
     get selectedEvent() {
         return this._selectedEvent;
     }
@@ -62,8 +63,35 @@ export class TimelineHorizontalComponent {
         this.selectedEventIndex = newSelectedIndex;
         this.calloutStyle = this.calloutOffset;
     }
+    trackWrapWidth;
+    scrollableTrackWidth;
+    cardWidth;
+    svgLeftIcon = caretAltLeftIcon;
+    svgRightIcon = caretAltRightIcon;
+    calloutStyle;
+    animationState = 'center';
+    translateValue = 0;
+    eventsInInterval = [0, 1, 2];
+    selectedCardIndex = 0;
+    selectedEventIndex;
+    tabFlex;
+    tabWidth = DEFAULT_TAB_WIDTH;
+    visibleTabsCount;
+    firstCircleInView = 0;
+    visibleEvents = [];
+    trackItems = [];
+    previousTitle = 'previous';
+    nextTitle = 'next';
+    _selectedEvent;
+    subscriptions = new Subscription();
+    constructor(cdr, _zone, renderer, timelineService, localization) {
+        this.cdr = cdr;
+        this._zone = _zone;
+        this.renderer = renderer;
+        this.timelineService = timelineService;
+        this.localization = localization;
+    }
     ngOnInit() {
-        this._zone.runOutsideAngular(() => isDocumentAvailable() && this.subscriptions.add(fromEvent(window, 'resize').subscribe(this.handleWindowResize.bind(this))));
         this.l10nChange();
         this.subscriptions.add(this.localization.changes.subscribe(this.l10nChange.bind(this)));
         if (this.events.length > 0) {
@@ -125,7 +153,7 @@ export class TimelineHorizontalComponent {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    handleWindowResize() {
+    onResize() {
         if (!isDocumentAvailable()) {
             return;
         }
@@ -451,31 +479,30 @@ export class TimelineHorizontalComponent {
         }
         this.cdr.markForCheck();
     }
-}
-TimelineHorizontalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineHorizontalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.TimelineService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineHorizontalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.TimelineService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: `
         <div class="k-timeline-track-wrap" #track>
             <button
                 kendoButton
                 [svgIcon]="svgLeftIcon"
+                icon="caret-alt-left"
                 class="k-timeline-arrow k-timeline-arrow-left"
                 rounded="full"
                 [title]="previousTitle"
                 (click)="previousClick()"
                 [disabled]="isFirstRange"
-                [attr.aria-hidden]="true"
                 tabindex="-1"
                 type="button"
             ></button>
             <button
                 kendoButton
                 [svgIcon]="svgRightIcon"
+                icon="caret-alt-right"
                 class="k-timeline-arrow k-timeline-arrow-right"
                 rounded="full"
                 [title]="nextTitle"
                 (click)="nextClick()"
                 [disabled]="isLastRange"
-                [attr.aria-hidden]="true"
                 tabindex="-1"
                 type="button"
             ></button>
@@ -549,29 +576,31 @@ TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                     </kendo-timeline-card>
                 </li>
             </ul>
+            <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
         </div>
-    `, 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" }], animations: [
-        trigger('trackSlide', [
-            state('left', style({
-                transform: `translateX({{transformValue}}%)`,
-            }), { params: { transformValue: '0' } }),
-            state('right', style({
-                transform: `translateX({{transformValue}}%)`,
-            }), { params: { transformValue: '0' } }),
-            state('center', style({
-                transform: `translateX(0)`,
-            }))
-        ]),
-        trigger('eventsSlide', [
-            transition('* => right', [
-                animate('{{animationDuration}}ms', style({ transform: `translateX(-100%)` }))
-            ], { params: { animationDuration: '400' } }),
-            transition('* => left', [
-                animate('{{animationDuration}}ms', style({ transform: `translateX(100%)` }))
-            ], { params: { animationDuration: '400' } })
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineHorizontalComponent, decorators: [{
+    `, 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: [
+            trigger('trackSlide', [
+                state('left', style({
+                    transform: `translateX({{transformValue}}%)`,
+                }), { params: { transformValue: '0' } }),
+                state('right', style({
+                    transform: `translateX({{transformValue}}%)`,
+                }), { params: { transformValue: '0' } }),
+                state('center', style({
+                    transform: `translateX(0)`,
+                }))
+            ]),
+            trigger('eventsSlide', [
+                transition('* => right', [
+                    animate('{{animationDuration}}ms', style({ transform: `translateX(-100%)` }))
+                ], { params: { animationDuration: '400' } }),
+                transition('* => left', [
+                    animate('{{animationDuration}}ms', style({ transform: `translateX(100%)` }))
+                ], { params: { animationDuration: '400' } })
+            ])
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineHorizontalComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -603,24 +632,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             <button
                 kendoButton
                 [svgIcon]="svgLeftIcon"
+                icon="caret-alt-left"
                 class="k-timeline-arrow k-timeline-arrow-left"
                 rounded="full"
                 [title]="previousTitle"
                 (click)="previousClick()"
                 [disabled]="isFirstRange"
-                [attr.aria-hidden]="true"
                 tabindex="-1"
                 type="button"
             ></button>
             <button
                 kendoButton
                 [svgIcon]="svgRightIcon"
+                icon="caret-alt-right"
                 class="k-timeline-arrow k-timeline-arrow-right"
                 rounded="full"
                 [title]="nextTitle"
                 (click)="nextClick()"
                 [disabled]="isLastRange"
-                [attr.aria-hidden]="true"
                 tabindex="-1"
                 type="button"
             ></button>
@@ -694,10 +723,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     </kendo-timeline-card>
                 </li>
             </ul>
+            <kendo-resize-sensor (resize)="onResize()" [rateLimit]="10"></kendo-resize-sensor>
         </div>
     `,
                     standalone: true,
-                    imports: [ButtonComponent, NgFor, NgIf, NgStyle, TimelineCardComponent, DatePipe]
+                    imports: [ButtonComponent, NgFor, NgIf, NgStyle, TimelineCardComponent, DatePipe, ResizeSensorComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.TimelineService }, { type: i2.LocalizationService }]; }, propDecorators: { events: [{
                 type: Input

package/{esm2020 → esm2022}/timeline/timeline-vertical.component.mjs

@@ -16,10 +16,24 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class TimelineVerticalComponent {
+    renderer;
+    events = [];
+    alterMode;
+    collapsibleEvents;
+    navigable;
+    showDateLabels;
+    animationDuration;
+    eventWidth;
+    dateFormat;
+    headerTemplate;
+    bodyTemplate;
+    actionsTemplate;
+    cards;
+    dateElementRefs;
+    innerDateElementRefs;
+    subscriptions = new Subscription();
     constructor(renderer) {
         this.renderer = renderer;
-        this.events = [];
-        this.subscriptions = new Subscription();
     }
     ngAfterViewInit() {
         this.ariaDescribedByAllEvents();
@@ -64,9 +78,8 @@ export class TimelineVerticalComponent {
         this.renderer.setAttribute(dateElement, 'id', dateLabelId);
         this.renderer.setAttribute(cardElement, 'aria-describedby', dateLabelId);
     }
-}
-TimelineVerticalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-TimelineVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: `
         <ul *ngIf="events && events.length > 0">
             <ng-container *ngFor="let event of events; let i = index">
                 <li class="k-timeline-flag-wrap" *ngIf="event.flag">
@@ -100,7 +113,8 @@ TimelineVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             </ng-container>
         </ul>
     `, 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" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineVerticalComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineVerticalComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [],