@progress/kendo-angular-layout 17.0.0-develop.3 → 17.0.0-develop.31

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'"
@@ -219,24 +233,25 @@ TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 </kendo-card-actions>
             </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], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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: [{
+    `, 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: "16.2.12", ngImport: i0, type: TimelineCardComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [

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

@@ -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,6 +63,34 @@ 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();
@@ -451,9 +480,8 @@ 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
@@ -550,28 +578,29 @@ TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
                 </li>
             </ul>
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "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" }], 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: [

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: [],

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

@@ -27,63 +27,7 @@ const DEFAULT_DATE_FORMAT = 'MMMM dd, yyyy';
  * Represents the [Kendo UI Timeline component for Angular]({% slug overview_timeline %}).
  */
 export class TimelineComponent {
-    constructor(timelineService) {
-        this.timelineService = timelineService;
-        /**
-         * Specifies the orientation of the axis.
-         *
-         * @default 'vertical'
-         */
-        this.orientation = 'vertical';
-        /**
-         * Specifies whether to render events alternatingly on both sides of the axis.
-         * Applicable when `orientation` is set to `vertical`.
-         *
-         * @default false
-         */
-        this.alterMode = false;
-        /**
-         * Specifies whether the event cards can be collapsed.
-         *
-         * @default true
-         */
-        this.collapsibleEvents = true;
-        /**
-         * Specifies whether the user can use dedicated shortcuts to interact with the Timeline.
-         *
-         * @default true
-         */
-        this.navigable = true;
-        /**
-         * Specifies whether an event's date label will be visible.
-         *
-         * @default true
-         */
-        this.showDateLabels = true;
-        this.hostClass = true;
-        /**
-         * Fires when a card is toggled.
-         * This event is supported only in `vertical` mode.
-         */
-        this.onToggle = new EventEmitter();
-        /**
-         * Fires when a card's action is clicked.
-         */
-        this.onActionClick = new EventEmitter();
-        /**
-         * Fires when the left or right arrow is clicked.
-         * This event is supported only in `horizontal` mode.
-         */
-        this.onNavigate = new EventEmitter();
-        this._events = [];
-        this._modelFields = defaultModelFields;
-        this._eventWidth = DEFAULT_EVENT_WIDTH;
-        this._eventHeight = DEFAULT_EVENT_HEIGHT;
-        this._dateFormat = DEFAULT_DATE_FORMAT;
-        this.originalData = [];
-        this.subscriptions = new Subscription();
-        this.timelineService.timeline = this;
-    }
+    timelineService;
     /**
      * An array of event instances which will be shown by the Timeline.
      */
@@ -121,6 +65,44 @@ export class TimelineComponent {
     get modelFields() {
         return this._modelFields;
     }
+    /**
+     * Specifies the orientation of the axis.
+     *
+     * @default 'vertical'
+     */
+    orientation = 'vertical';
+    /**
+     * Specifies whether to render events alternatingly on both sides of the axis.
+     * Applicable when `orientation` is set to `vertical`.
+     *
+     * @default false
+     */
+    alterMode = false;
+    /**
+     * Specifies whether the event cards can be collapsed.
+     *
+     * @default true
+     */
+    collapsibleEvents = true;
+    /**
+     * Specifies whether the user can use dedicated shortcuts to interact with the Timeline.
+     *
+     * @default true
+     */
+    navigable = true;
+    /**
+     * Specifies whether an event's date label will be visible.
+     *
+     * @default true
+     */
+    showDateLabels = true;
+    /**
+     * Specifies the time for sliding to the next event in `horizontal` mode and the time for collapsing the event in `vertical` mode.
+     * The default animation duration values are `300ms` for `horizontal` mode and `400ms` for `vertical` mode.
+     *
+     * @default true
+     */
+    animation;
     /**
      * Sets a specific width for the event.
      * This setting is supported only in `vertical` mode.
@@ -183,6 +165,7 @@ export class TimelineComponent {
     get dateFormat() {
         return this._dateFormat;
     }
+    hostClass = true;
     get verticalClass() {
         return this.orientation === 'vertical';
     }
@@ -195,6 +178,63 @@ export class TimelineComponent {
     get collapsibleClass() {
         return this.collapsibleEvents === true && this.orientation === 'vertical';
     }
+    /**
+     * @hidden
+     */
+    timelineHorizontal;
+    /**
+     * @hidden
+     */
+    timelineVertical;
+    /**
+     * @hidden
+     */
+    cardHeaderTemplate;
+    /**
+     * @hidden
+     */
+    cardBodyTemplate;
+    /**
+     * @hidden
+     */
+    cardActionsTemplate;
+    /**
+     * Fires when a card is toggled.
+     * This event is supported only in `vertical` mode.
+     */
+    onToggle = new EventEmitter();
+    /**
+     * Fires when a card's action is clicked.
+     */
+    onActionClick = new EventEmitter();
+    /**
+     * Fires when the left or right arrow is clicked.
+     * This event is supported only in `horizontal` mode.
+     */
+    onNavigate = new EventEmitter();
+    /**
+     * @hidden
+     */
+    headerTemplate;
+    /**
+     * @hidden
+     */
+    bodyTemplate;
+    /**
+     * @hidden
+     */
+    actionsTemplate;
+    _events = [];
+    _modelFields = defaultModelFields;
+    _eventWidth = DEFAULT_EVENT_WIDTH;
+    _eventHeight = DEFAULT_EVENT_HEIGHT;
+    _dateFormat = DEFAULT_DATE_FORMAT;
+    originalData = [];
+    subscriptions = new Subscription();
+    constructor(timelineService) {
+        this.timelineService = timelineService;
+        this.timelineService.timeline = this;
+    }
     ngAfterContentInit() {
         this.initTemplates();
     }
@@ -250,16 +290,15 @@ export class TimelineComponent {
             this.actionsTemplate = this.cardActionsTemplate?.first || null;
         }));
     }
-}
-TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineComponent, deps: [{ token: i1.TimelineService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: [
-        TimelineService,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.timeline'
-        }
-    ], 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineComponent, deps: [{ token: i1.TimelineService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
+            TimelineService,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.timeline'
+            }
+        ], 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: `
         <ng-container kendoTimelineLocalizedMessages
             i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
             previous="previous"
@@ -300,7 +339,8 @@ TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         >
         </kendo-timeline-horizontal>
     `, 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/timeline/timeline.service.mjs

@@ -8,6 +8,7 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class TimelineService {
+    timeline;
     onToggle(event) {
         if (this.timeline) {
             this.timeline['onToggle']?.emit(event);
@@ -23,9 +24,9 @@ export class TimelineService {
             this.timeline['onNavigate']?.emit(event);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineService });
 }
-TimelineService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TimelineService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/timeline.module.mjs

@@ -19,11 +19,11 @@ import * as i5 from "./timeline/templates/timeline-card-header.directive";
  * - `TimelineComponent`—The `TimelineComponent` component class.
  */
 export class TimelineModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TimelineModule, imports: [i1.TimelineComponent, i2.TimelineCustomMessagesComponent, i3.TimelineCardActionsTemplateDirective, i4.TimelineCardBodyTemplateDirective, i5.TimelineCardHeaderTemplateDirective], exports: [i1.TimelineComponent, i2.TimelineCustomMessagesComponent, i3.TimelineCardActionsTemplateDirective, i4.TimelineCardBodyTemplateDirective, i5.TimelineCardHeaderTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineModule, imports: [i1.TimelineComponent] });
 }
-TimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TimelineModule, imports: [i1.TimelineComponent, i2.TimelineCustomMessagesComponent, i3.TimelineCardActionsTemplateDirective, i4.TimelineCardBodyTemplateDirective, i5.TimelineCardHeaderTemplateDirective], exports: [i1.TimelineComponent, i2.TimelineCustomMessagesComponent, i3.TimelineCardActionsTemplateDirective, i4.TimelineCardBodyTemplateDirective, i5.TimelineCardHeaderTemplateDirective] });
-TimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineModule, imports: [i1.TimelineComponent, i2.TimelineCustomMessagesComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_TIMELINE],

package/expansionpanel/events/action-event.d.ts

@@ -6,7 +6,7 @@ import { PreventableEvent } from "@progress/kendo-angular-common";
 /**
  * The type of the action that will take place upon interaction with the ExpansionPanel.
  */
-export declare type ExpansionPanelAction = 'expand' | 'collapse';
+export type ExpansionPanelAction = 'expand' | 'collapse';
 /**
  * Arguments for the `action` event of the ExpansionPanel.
  */

package/expansionpanel/expansionpanel.component.d.ts

@@ -176,5 +176,5 @@ export declare class ExpansionPanelComponent implements OnInit, AfterViewInit, O
     private addContentHiddenClass;
     private removeContentHiddenClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<ExpansionPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ExpansionPanelComponent, "kendo-expansionpanel", ["kendoExpansionPanel"], { "title": "title"; "subtitle": "subtitle"; "disabled": "disabled"; "expanded": "expanded"; "svgExpandIcon": "svgExpandIcon"; "svgCollapseIcon": "svgCollapseIcon"; "expandIcon": "expandIcon"; "collapseIcon": "collapseIcon"; "animation": "animation"; }, { "expandedChange": "expandedChange"; "action": "action"; "expand": "expand"; "collapse": "collapse"; }, ["titleTemplate"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ExpansionPanelComponent, "kendo-expansionpanel", ["kendoExpansionPanel"], { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "svgExpandIcon": { "alias": "svgExpandIcon"; "required": false; }; "svgCollapseIcon": { "alias": "svgCollapseIcon"; "required": false; }; "expandIcon": { "alias": "expandIcon"; "required": false; }; "collapseIcon": { "alias": "collapseIcon"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; }, { "expandedChange": "expandedChange"; "action": "action"; "expand": "expand"; "collapse": "collapse"; }, ["titleTemplate"], ["*"], true, never>;
 }