@progress/kendo-angular-layout 16.0.0-develop.4 → 16.0.0-develop.5

package/fesm2020/progress-kendo-angular-layout.mjs

@@ -7,12 +7,12 @@ import { Injectable, Directive, Optional, isDevMode, Component, SkipSelf, Host,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i5 from '@progress/kendo-angular-common';
-import { Keys, shouldShowValidationUI, PreventableEvent as PreventableEvent$1, isDocumentAvailable, guid, hasObservers, focusableSelector, isChanged, WatermarkModule, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { Keys, shouldShowValidationUI, PreventableEvent as PreventableEvent$1, isDocumentAvailable, guid, hasObservers, focusableSelector, isChanged, WatermarkModule, EventsModule, DraggableModule, ResizeSensorModule, isPresent as isPresent$1 } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$1 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
-import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
-import { chevronUpIcon, chevronDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, checkCircleIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
+import { Subject, BehaviorSubject, Subscription, of, fromEvent } from 'rxjs';
+import { chevronUpIcon, chevronDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretAltDownIcon, xIcon, checkCircleIcon, exclamationCircleIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@progress/kendo-angular-icons';
@@ -23,6 +23,8 @@ import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i4 from '@progress/kendo-angular-progressbar';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
 import { Draggable } from '@progress/kendo-draggable';
+import * as i6 from '@progress/kendo-angular-intl';
+import { IntlModule } from '@progress/kendo-angular-intl';
 
 /**
  * @hidden
@@ -31,8 +33,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1714109383,
-    version: '16.0.0-develop.4',
+    publishDate: 1714129718,
+    version: '16.0.0-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -9561,13 +9563,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['style.min-height']
             }] } });
 
-const exportedModules$a = [
+const exportedModules$b = [
     AvatarComponent,
     AvatarCustomMessagesComponent
 ];
-const declarations$a = [
+const declarations$b = [
     LocalizedAvatarMessagesDirective,
-    ...exportedModules$a
+    ...exportedModules$b
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -9583,8 +9585,8 @@ AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AvatarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$a],
-                    exports: [exportedModules$a],
+                    declarations: [declarations$b],
+                    exports: [exportedModules$b],
                     imports: [CommonModule, IconsModule]
                 }]
         }] });
@@ -9595,7 +9597,7 @@ const cardDirectives = [
     CardSeparatorDirective,
     CardMediaDirective
 ];
-const exportedModules$9 = [
+const exportedModules$a = [
     CardComponent,
     CardHeaderComponent,
     CardBodyComponent,
@@ -9603,7 +9605,7 @@ const exportedModules$9 = [
     CardActionsComponent,
     ...cardDirectives
 ];
-const declarations$9 = [...exportedModules$9];
+const declarations$a = [...exportedModules$a];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Card component.
@@ -9630,8 +9632,8 @@ CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$9],
-                    exports: [exportedModules$9],
+                    declarations: [declarations$a],
+                    exports: [exportedModules$a],
                     imports: [CommonModule]
                 }]
         }] });
@@ -9642,16 +9644,16 @@ const templateDirectives$1 = [
     DrawerFooterTemplateDirective,
     DrawerItemTemplateDirective
 ];
-const exportedModules$8 = [
+const exportedModules$9 = [
     DrawerComponent,
     DrawerContainerComponent,
     DrawerContentComponent,
     ...templateDirectives$1
 ];
-const declarations$8 = [
+const declarations$9 = [
     DrawerItemComponent,
     DrawerListComponent,
-    ...exportedModules$8
+    ...exportedModules$9
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -9676,18 +9678,18 @@ DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DrawerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$8],
-                    exports: [exportedModules$8],
+                    declarations: [declarations$9],
+                    exports: [exportedModules$9],
                     imports: [CommonModule, IconsModule, WatermarkModule]
                 }]
         }] });
 
-const exportedModules$7 = [
+const exportedModules$8 = [
     ExpansionPanelComponent,
     ExpansionPanelTitleDirective
 ];
-const declarations$7 = [
-    ...exportedModules$7
+const declarations$8 = [
+    ...exportedModules$8
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -9703,21 +9705,21 @@ ExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ExpansionPanelModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$7],
-                    exports: [exportedModules$7],
+                    declarations: [declarations$8],
+                    exports: [exportedModules$8],
                     imports: [CommonModule, EventsModule, IconsModule]
                 }]
         }] });
 
-const exportedModules$6 = [
+const exportedModules$7 = [
     PanelBarComponent,
     PanelBarItemComponent,
     PanelBarContentDirective,
     PanelBarItemTemplateDirective,
     PanelBarItemTitleDirective
 ];
-const declarations$6 = [
-    ...exportedModules$6
+const declarations$7 = [
+    ...exportedModules$7
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -9746,19 +9748,19 @@ PanelBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PanelBarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$6],
-                    exports: [exportedModules$6],
+                    declarations: [declarations$7],
+                    exports: [exportedModules$7],
                     imports: [CommonModule, IconsModule, WatermarkModule]
                 }]
         }] });
 
-const exportedModules$5 = [
+const exportedModules$6 = [
     SplitterComponent,
     SplitterPaneComponent
 ];
-const declarations$5 = [
+const declarations$6 = [
     SplitterBarComponent,
-    ...exportedModules$5
+    ...exportedModules$6
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -9782,8 +9784,8 @@ SplitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SplitterModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$5],
-                    exports: [exportedModules$5],
+                    declarations: [declarations$6],
+                    exports: [exportedModules$6],
                     imports: [
                         CommonModule,
                         DraggableModule,
@@ -9797,16 +9799,16 @@ const templateDirectives = [
     StepperLabelTemplateDirective,
     StepperIndicatorTemplateDirective
 ];
-const exportedModules$4 = [
+const exportedModules$5 = [
     StepperComponent,
     StepperCustomMessagesComponent,
     ...templateDirectives
 ];
-const declarations$4 = [
+const declarations$5 = [
     StepperStepComponent,
     StepperListComponent,
     LocalizedStepperMessagesDirective,
-    ...exportedModules$4
+    ...exportedModules$5
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -9828,13 +9830,13 @@ StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StepperModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$4],
-                    exports: [exportedModules$4],
+                    declarations: [declarations$5],
+                    exports: [exportedModules$5],
                     imports: [CommonModule, ProgressBarModule, IconsModule]
                 }]
         }] });
 
-const exportedModules$3 = [
+const exportedModules$4 = [
     TabStripComponent,
     TabStripTabComponent,
     TabContentDirective,
@@ -9844,8 +9846,8 @@ const exportedModules$3 = [
     LocalizedTabStripMessagesDirective,
     TabTemplateDirective
 ];
-const declarations$3 = [
-    ...exportedModules$3,
+const declarations$4 = [
+    ...exportedModules$4,
     TabStripScrollableButtonComponent
 ];
 /**
@@ -9880,21 +9882,21 @@ TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabStripModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$3],
-                    exports: [exportedModules$3],
+                    declarations: [declarations$4],
+                    exports: [exportedModules$4],
                     imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule]
                 }]
         }] });
 
-const exportedModules$2 = [
+const exportedModules$3 = [
     TileLayoutComponent,
     TileLayoutItemComponent,
     TileLayoutItemHeaderComponent,
     TileLayoutItemBodyComponent,
     TileLayoutResizeHandleDirective
 ];
-const declarations$2 = [
-    ...exportedModules$2
+const declarations$3 = [
+    ...exportedModules$3
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -9922,8 +9924,8 @@ TileLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TileLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$2],
-                    exports: [exportedModules$2],
+                    declarations: [declarations$3],
+                    exports: [exportedModules$3],
                     imports: [CommonModule, WatermarkModule]
                 }]
         }] });
@@ -10160,11 +10162,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
-const exportedModules$1 = [
+const exportedModules$2 = [
     StackLayoutComponent
 ];
-const declarations$1 = [
-    ...exportedModules$1
+const declarations$2 = [
+    ...exportedModules$2
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -10178,8 +10180,8 @@ StackLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: StackLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$1],
-                    exports: [exportedModules$1],
+                    declarations: [declarations$2],
+                    exports: [exportedModules$2],
                     imports: [CommonModule]
                 }]
         }] });
@@ -10354,12 +10356,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
-const exportedModules = [
+const exportedModules$1 = [
     GridLayoutComponent,
     GridLayoutItemComponent
 ];
-const declarations = [
-    ...exportedModules
+const declarations$1 = [
+    ...exportedModules$1
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -10375,12 +10377,1913 @@ GridLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations],
-                    exports: [exportedModules],
+                    declarations: [declarations$1],
+                    exports: [exportedModules$1],
                     imports: [CommonModule]
                 }]
         }] });
 
+/**
+ * @hidden
+ */
+const defaultModelFields = {
+    title: 'title',
+    subtitle: 'subtitle',
+    description: 'description',
+    date: 'date',
+    expanded: 'expanded',
+    images: 'images',
+    actions: 'actions',
+};
+
+/**
+ * @hidden
+ */
+const processItems = (items, fields) => {
+    return items.map((item) => parseItem(item, fields));
+};
+/**
+ * @hidden
+ */
+const parseItem = (item, fields) => ({
+    title: item[fields.title] || item.title,
+    date: item[fields.date] || item.date,
+    subtitle: item[fields.subtitle] || item.subtitle,
+    description: item[fields.description] || item.description,
+    expanded: item[fields.expanded] || item.expanded,
+    images: item[fields.images] || item.images,
+    actions: item[fields.actions] || item.actions,
+});
+/**
+ * @hidden
+ */
+const MAX_VISIBLE_EVENTS = 3;
+
+/**
+ * @hidden
+ */
+class TimelineService {
+    onToggle(event) {
+        if (this.timeline) {
+            this.timeline['onToggle']?.emit(event);
+        }
+    }
+    onActionClick(event) {
+        if (this.timeline) {
+            this.timeline['onActionClick']?.emit(event);
+        }
+    }
+    onNavigate(event) {
+        if (this.timeline) {
+            this.timeline['onNavigate']?.emit(event);
+        }
+    }
+}
+TimelineService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Specifies the header of each timeline card. To define a header template, nest an `<ng-template>` tag
+ * with the `kendoTimelineCardHeaderTemplate` directive inside the `<kendo-timeline>` tag.
+ *
+ * The following values are available as context variables:
+ * - `let-event="event"` (`TimelineEvent`) - The current card's event. Also available as implicit context variable.
+ * - `let-index="index"` (`number`) - The current event index.
+ */
+class TimelineCardHeaderTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+TimelineCardHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineCardHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TimelineCardHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TimelineCardHeaderTemplateDirective, selector: "[kendoTimelineCardHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineCardHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTimelineCardHeaderTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Specifies the body of each timeline card. To define a body template, nest an `<ng-template>` tag
+ * with the `kendoTimelineCardBodyTemplate` directive inside the `<kendo-timeline>` tag.
+ *
+ * The following values are available as context variables:
+ * - `let-event="event"` (`TimelineEvent`) - The current card's event. Also available as implicit context variable.
+ * - `let-index="index"` (`number`) - The current event index.
+ */
+class TimelineCardBodyTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+TimelineCardBodyTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineCardBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TimelineCardBodyTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TimelineCardBodyTemplateDirective, selector: "[kendoTimelineCardBodyTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineCardBodyTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTimelineCardBodyTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Specifies the actions of each timeline card. To define an actions template, nest an `<ng-template>` tag
+ * with the `kendoTimelineCardActionsTemplate` directive inside the `<kendo-timeline>` tag.
+ *
+ * The following values are available as context variables:
+ * - `let-event="event"` (`TimelineEvent`) - The current card's event. Also available as implicit context variable.
+ * - `let-index="index"` (`number`) - The current event index.
+ */
+class TimelineCardActionsTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+TimelineCardActionsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineCardActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TimelineCardActionsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TimelineCardActionsTemplateDirective, selector: "[kendoTimelineCardActionsTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineCardActionsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTimelineCardActionsTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+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;
+    }
+    set calloutStyle(value) {
+        // applies only to horizontal orientation where the callout points upwards
+        if (!this.calloutElementRef || !this.calloutElementRef.nativeElement.classList.contains('k-callout-n')) {
+            return;
+        }
+        this.calloutElementRef.nativeElement.style.left = value?.left;
+    }
+    get collapsedClass() {
+        return !this.expanded && !this.animationInProgress && this.animationState === 'collapsed';
+    }
+    onComponentKeyDown(event) {
+        if (!this.navigable) {
+            return;
+        }
+        if (event.keyCode === Keys.Space || event.keyCode === Keys.Enter) {
+            event.preventDefault();
+            if (this.collapsible && this.orientation === 'vertical') {
+                this.expanded = !this.expanded;
+            }
+        }
+    }
+    get role() {
+        return this.orientation === 'vertical' ? 'button' : 'tabpanel';
+    }
+    get ariaLive() {
+        return this.orientation === 'vertical' ? 'polite' : null;
+    }
+    get ariaExpanded() {
+        return this.orientation === 'vertical' ? this.expanded : null;
+    }
+    ngAfterViewInit() {
+        this.makeOverflowVisible();
+    }
+    ngOnChanges(changes) {
+        if (isChanged('collapsible', changes, false)) {
+            if (!this.collapsible) {
+                this.expanded = true;
+            }
+        }
+    }
+    toggle() {
+        if (this.orientation === 'vertical') {
+            this.expanded = this.collapsible ? !this.expanded : true;
+            this.timelineService.onToggle(this.index);
+        }
+    }
+    expand() {
+        if (!this.expanded) {
+            this.expanded = true;
+            this.timelineService.onToggle(this.index);
+        }
+    }
+    collapse() {
+        if (!this.collapsible || !this.expanded) {
+            return;
+        }
+        this.expanded = false;
+        this.timelineService.onToggle(this.index);
+    }
+    onActionClick(event) {
+        event.stopPropagation();
+        this.timelineService.onActionClick(this.index);
+    }
+    animationStart() {
+        this.animationInProgress = true;
+    }
+    animationDone(event) {
+        this.animationInProgress = false;
+        if (event.toState === 'expanded' && event.fromState !== 'expanded') {
+            this.animationState = 'expanded';
+            this.makeOverflowVisible();
+        }
+        else if (event.toState === 'collapsed' && event.fromState !== 'collapsed') {
+            this.animationState = 'collapsed';
+        }
+    }
+    makeOverflowVisible() {
+        if (this.orientation === 'vertical') {
+            return;
+        }
+        const cardBody = this.element?.nativeElement.querySelector('.k-card-body');
+        if (cardBody) {
+            this.renderer.setStyle(cardBody, 'overflow', 'auto');
+        }
+    }
+}
+TimelineCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineCardComponent, deps: [{ token: i0.ElementRef }, { token: TimelineService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineCardComponent, 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'"
+            class="k-card-with-callout k-card-vertical"
+            (click)="toggle()"
+            [attr.role]="role"
+            [attr.aria-live]="ariaLive"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.tabindex]="tabIndex"
+        >
+            <span
+                #callout
+                *ngIf="event"
+                class="k-timeline-card-callout k-card-callout"
+                [ngClass]="{
+                    'k-callout-n': orientation === 'horizontal',
+                    'k-callout-w': orientation === 'vertical' && !this.reversed,
+                    'k-callout-e': orientation === 'vertical' && this.reversed
+                }"
+            >
+            </span>
+            <div *ngIf="event" class="k-card-inner">
+                <kendo-card-header>
+                    <ng-template
+                        *ngIf="headerTemplate"
+                        [ngTemplateOutlet]="headerTemplate?.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                    >
+                    </ng-template>
+
+                    <div kendoCardTitle *ngIf="!headerTemplate">
+                        <span class="k-event-title">{{ event.title }}</span>
+                        <button 
+                            kendoButton
+                            *ngIf="collapsible && orientation === 'vertical'"
+                            [icon]="calloutFontIcon"
+                            [svgIcon]="calloutSvgIcon"
+                            class="k-event-collapse"
+                            fillMode="flat"
+                            [attr.aria-hidden]="true"
+                            tabindex="-1"
+                            type="button"
+                        ></button>
+                    </div>
+                    <div kendoCardSubtitle  *ngIf="!headerTemplate">{{ event.subtitle }}</div>
+                </kendo-card-header>
+
+                <kendo-card-body
+                    *ngIf="event.description || event.images"
+                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                    (@toggle.start)="animationStart()"
+                    (@toggle.done)="animationDone($event)"
+                >
+                    <ng-template
+                        *ngIf="bodyTemplate"
+                        [ngTemplateOutlet]="bodyTemplate?.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                    >
+                    </ng-template>
+
+                    <div *ngIf="!bodyTemplate" class="k-card-description">
+                        <p *ngIf="event.description">{{ event.description }}</p>
+                        <ng-container *ngFor="let image of event.images">
+                            <img *ngIf="image.alt" kendoCardMedia [src]="image.src" [alt]="image.alt" />
+                            <img *ngIf="!image.alt" kendoCardMedia [src]="image.src" />
+                        </ng-container>
+                    </div>
+                </kendo-card-body>
+
+                <kendo-card-actions
+                    *ngIf="event.actions"
+                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                >
+                    <ng-template
+                        *ngIf="actionsTemplate"
+                        [ngTemplateOutlet]="actionsTemplate?.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                    >
+                    </ng-template>
+
+                    <ng-container *ngIf="!actionsTemplate">
+                        <a *ngFor="let action of event.actions"
+                            [href]="action.url"
+                            [target]="action.target === 'blank' ? '_blank' : '_self'"
+                            (click)="onActionClick($event)"
+                            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
+                            role="button"
+                        >
+                            {{ action.text }}
+                        </a>
+                    </ng-container>
+                </kendo-card-actions>
+            </div>
+        </kendo-card>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: i3$1.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"] }], 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.0.4", ngImport: i0, type: TimelineCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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' } }),
+                        ])
+                    ],
+                    providers: [],
+                    exportAs: 'kendoTimelineCard',
+                    selector: 'kendo-timeline-card',
+                    template: `
+        <kendo-card
+            [ngStyle]="{ 'height': orientation === 'horizontal' ? eventHeight + 'px' : null }"
+            [width]="orientation === 'horizontal' ? 'auto' : eventWidth + 'px'"
+            class="k-card-with-callout k-card-vertical"
+            (click)="toggle()"
+            [attr.role]="role"
+            [attr.aria-live]="ariaLive"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.tabindex]="tabIndex"
+        >
+            <span
+                #callout
+                *ngIf="event"
+                class="k-timeline-card-callout k-card-callout"
+                [ngClass]="{
+                    'k-callout-n': orientation === 'horizontal',
+                    'k-callout-w': orientation === 'vertical' && !this.reversed,
+                    'k-callout-e': orientation === 'vertical' && this.reversed
+                }"
+            >
+            </span>
+            <div *ngIf="event" class="k-card-inner">
+                <kendo-card-header>
+                    <ng-template
+                        *ngIf="headerTemplate"
+                        [ngTemplateOutlet]="headerTemplate?.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                    >
+                    </ng-template>
+
+                    <div kendoCardTitle *ngIf="!headerTemplate">
+                        <span class="k-event-title">{{ event.title }}</span>
+                        <button 
+                            kendoButton
+                            *ngIf="collapsible && orientation === 'vertical'"
+                            [icon]="calloutFontIcon"
+                            [svgIcon]="calloutSvgIcon"
+                            class="k-event-collapse"
+                            fillMode="flat"
+                            [attr.aria-hidden]="true"
+                            tabindex="-1"
+                            type="button"
+                        ></button>
+                    </div>
+                    <div kendoCardSubtitle  *ngIf="!headerTemplate">{{ event.subtitle }}</div>
+                </kendo-card-header>
+
+                <kendo-card-body
+                    *ngIf="event.description || event.images"
+                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                    (@toggle.start)="animationStart()"
+                    (@toggle.done)="animationDone($event)"
+                >
+                    <ng-template
+                        *ngIf="bodyTemplate"
+                        [ngTemplateOutlet]="bodyTemplate?.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                    >
+                    </ng-template>
+
+                    <div *ngIf="!bodyTemplate" class="k-card-description">
+                        <p *ngIf="event.description">{{ event.description }}</p>
+                        <ng-container *ngFor="let image of event.images">
+                            <img *ngIf="image.alt" kendoCardMedia [src]="image.src" [alt]="image.alt" />
+                            <img *ngIf="!image.alt" kendoCardMedia [src]="image.src" />
+                        </ng-container>
+                    </div>
+                </kendo-card-body>
+
+                <kendo-card-actions
+                    *ngIf="event.actions"
+                    [@toggle]="{value: expanded ? 'expanded' : 'collapsed', params: {animationDuration: this.animationDuration || 0}}"
+                >
+                    <ng-template
+                        *ngIf="actionsTemplate"
+                        [ngTemplateOutlet]="actionsTemplate?.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: event, index: index}">
+                    >
+                    </ng-template>
+
+                    <ng-container *ngIf="!actionsTemplate">
+                        <a *ngFor="let action of event.actions"
+                            [href]="action.url"
+                            [target]="action.target === 'blank' ? '_blank' : '_self'"
+                            (click)="onActionClick($event)"
+                            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary"
+                            role="button"
+                        >
+                            {{ action.text }}
+                        </a>
+                    </ng-container>
+                </kendo-card-actions>
+            </div>
+        </kendo-card>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TimelineService }, { type: i0.Renderer2 }]; }, propDecorators: { event: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], collapsible: [{
+                type: Input
+            }], reversed: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], eventWidth: [{
+                type: Input
+            }], eventHeight: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], bodyTemplate: [{
+                type: Input
+            }], actionsTemplate: [{
+                type: Input
+            }], calloutStyle: [{
+                type: Input
+            }], calloutElementRef: [{
+                type: ViewChild,
+                args: ['callout']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-timeline-card']
+            }], collapsedClass: [{
+                type: HostBinding,
+                args: ['class.k-collapsed']
+            }], onComponentKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+const DEFAULT_TAB_WIDTH = 200;
+const SPACE_BETWEEN_TABS = 25;
+const TRANSITION_EVENTS_COUNT = 3;
+/**
+ * @hidden
+ */
+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();
+    }
+    get selectedEvent() {
+        return this._selectedEvent;
+    }
+    set selectedEvent(value) {
+        if (this._selectedEvent === value) {
+            return;
+        }
+        const newSelectedIndex = this.events.findIndex(event => event === value);
+        if (newSelectedIndex === -1 && value !== null) {
+            return;
+        }
+        this._selectedEvent = value;
+        this.selectedEventIndex = newSelectedIndex;
+        this.calloutStyle = this.calloutOffset;
+    }
+    ngOnInit() {
+        this._zone.runOutsideAngular(() => 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) {
+            this.selectedEvent = this.events[0];
+        }
+        this.events.forEach(event => {
+            if (event.flag) {
+                this.trackItems.push({ isFlag: event.flag });
+            }
+            this.trackItems.push(event);
+        });
+    }
+    ngAfterViewInit() {
+        this.subscriptions.add(this.renderer.listen(this.trackElementRef.nativeElement, 'keydown', this.onKeyDown.bind(this)));
+        this.trackWrapWidth = this.trackElementRef.nativeElement.getBoundingClientRect().width;
+        this.scrollableTrackWidth = this.scrollableTrackElementRef.nativeElement.getBoundingClientRect().width;
+        this._zone.runOutsideAngular(() => {
+            this.onCirclesChange();
+            this.subscriptions.add(this.circleElementRefs.changes.subscribe(this.onCirclesChange.bind(this)));
+            this.subscriptions.add(this.cardElementRefs.changes.subscribe(this.onCardsChange.bind(this)));
+        });
+        if (this.events.length === 0) {
+            return;
+        }
+        this.onCardsChange();
+        if (this.cardComponents.get(this.selectedCardIndex)) {
+            this.cardComponents.get(this.selectedCardIndex).calloutStyle = this.calloutOffset;
+            this.focusTrackItem(0);
+        }
+    }
+    ngOnChanges(changes) {
+        if (isChanged('events', changes)) {
+            if (!this.events || this.events.length === 0) {
+                this.selectedEvent = null;
+                this.trackItems = [];
+                this.visibleEvents = [];
+            }
+            else {
+                this.trackItems = [];
+                this.events.forEach(event => {
+                    if (event.flag) {
+                        this.trackItems.push({ isFlag: event.flag });
+                    }
+                    this.trackItems.push(event);
+                });
+                this.visibleEvents = this.trackItems
+                    .slice(this.firstCircleInView, this.firstCircleInView + this.visibleTabsCount)
+                    .filter(event => !event.isFlag);
+                this.selectedEvent = this.events[0];
+                this.cdr.detectChanges();
+                this.calloutStyle = this.calloutOffset;
+                this.focusTrackItem(0);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    handleWindowResize() {
+        if (this.trackWrapWidth === this.trackElementRef.nativeElement.getBoundingClientRect().width) {
+            return;
+        }
+        this.cardWidth = this.cardComponents.get(this.selectedCardIndex).element.nativeElement.offsetWidth;
+        this.transformCards();
+        this.trackWrapWidth = this.trackElementRef.nativeElement.getBoundingClientRect().width;
+        this.scrollableTrackWidth = this.scrollableTrackElementRef.nativeElement.getBoundingClientRect().width;
+        this.changeTabsCount();
+        this._zone.run(() => {
+            this.cardComponents.get(this.selectedCardIndex).calloutStyle = this.calloutOffset;
+        });
+    }
+    onTransitionEnd() {
+        this.cardElementRefs?.forEach(card => this.renderer.removeStyle(card.nativeElement, 'transition-duration'));
+        this.cardComponents.get(this.selectedCardIndex).event = this.selectedEvent;
+        this.calloutStyle = this.calloutOffset;
+    }
+    onTrackTransitionEnd() {
+        this.calloutStyle = this.calloutOffset;
+    }
+    onSlideDone() {
+        this.calloutStyle = this.calloutOffset;
+    }
+    previous() {
+        if (this.firstCircleInView === 0) {
+            return;
+        }
+        this.updateInterval(false);
+    }
+    previousClick() {
+        this.previous();
+        this.timelineService.onNavigate('previous');
+    }
+    next() {
+        if (!this.visibleTabsCount || this.firstCircleInView + this.visibleTabsCount > this.trackItems.length) {
+            return;
+        }
+        this.updateInterval(true);
+    }
+    nextClick() {
+        this.next();
+        this.timelineService.onNavigate('next');
+    }
+    open(index) {
+        if (index < 0 || index >= this.events.length) {
+            return;
+        }
+        if (this.visibleEvents.findIndex(event => event === this.events[index]) === -1) {
+            // determine the start and end of the interval that the event belongs to, regardless of its position in the interval
+            const trackItemIndex = this.trackItems.findIndex(event => event === this.events[index]);
+            const start = Math.floor(trackItemIndex / this.visibleTabsCount) * this.visibleTabsCount;
+            this.navigateToInterval(start, index);
+        }
+        this.selectedEvent = this.events[index];
+        this.selectedCardIndex = this.getOtherSelectedCardIndex(index > this.selectedEventIndex);
+        this.calloutStyle = this.calloutOffset;
+        this.focusTrackItem(this.selectedEventIndex);
+        this.animateCards();
+    }
+    navigateToEvent(index) {
+        const eventIndex = this.events.findIndex(event => event === this.trackItems[index]);
+        if (this.selectedEventIndex === eventIndex) {
+            return;
+        }
+        this.selectedEvent = this.events[eventIndex];
+        this.selectedCardIndex = this.getOtherSelectedCardIndex(index > eventIndex);
+        this.calloutStyle = this.calloutOffset;
+        this.animateCards();
+    }
+    getOtherSelectedCardIndex(forward) {
+        // change the selected card which changes all cards' transform styles
+        if (forward) {
+            return this.selectedCardIndex === 0 ? TRANSITION_EVENTS_COUNT - 1 : this.selectedCardIndex - 1;
+        }
+        return this.selectedCardIndex === TRANSITION_EVENTS_COUNT - 1 ? 0 : this.selectedCardIndex + 1;
+    }
+    tabStyle() {
+        if (!this.tabFlex) {
+            return {};
+        }
+        return { 'flex': `1 0 ${this.tabFlex}%` };
+    }
+    getTransformation(width, position) {
+        if (position === this.selectedCardIndex - 1 || position === this.selectedCardIndex + 2) {
+            return `translate3d(${-width}px, 0, 0)`;
+        }
+        if (position === this.selectedCardIndex + 1 || position === this.selectedCardIndex - 2) {
+            return `translate3d(${width}px, 0, 0)`;
+        }
+        return `translate3d(0, 0, 0)`;
+    }
+    getState(position) {
+        if (position === this.selectedCardIndex) {
+            return 'center';
+        }
+        if (position === this.selectedCardIndex - 1 || position === this.selectedCardIndex + 2) {
+            return 'left';
+        }
+        return 'right';
+    }
+    get calloutOffset() {
+        if (!this.circleElementRefs?.first || !this.trackElementRef || !isPresent$1(this.selectedEventIndex)) {
+            return {};
+        }
+        const circleCenter = this.circleElementRefs.get(this.selectedEventIndex).nativeElement.getBoundingClientRect().left +
+            this.circleElementRefs.get(this.selectedEventIndex).nativeElement.offsetWidth / 2;
+        const trackOffset = this.trackElementRef.nativeElement.getBoundingClientRect().left;
+        return { left: `${circleCenter - trackOffset}px` };
+    }
+    get isFirstRange() {
+        return this.firstCircleInView === 0;
+    }
+    get isLastRange() {
+        if (!this.circleElementRefs?.first && !this.flagElementRefs?.first) {
+            return false;
+        }
+        return this.trackItems.length === 0 ||
+            this.firstCircleInView + this.visibleTabsCount >= this.trackItems.length;
+    }
+    onCardsChange() {
+        if (this.cardElementRefs?.get(this.selectedCardIndex)) {
+            this.cardWidth = this.cardElementRefs.get(this.selectedCardIndex).nativeElement.offsetWidth;
+            this.transformCards();
+        }
+    }
+    onCirclesChange() {
+        if (!this.circleElementRefs?.first) {
+            return;
+        }
+        this.circleElementRefs
+            .map(element => element.nativeElement)
+            .forEach((element, index) => {
+            this.subscriptions.add(this.renderer.listen(element, 'click', () => {
+                this.focusTrackItem(index);
+            }));
+        });
+        const width = this.circleElementRefs.first.nativeElement.getBoundingClientRect().width;
+        if (width > DEFAULT_TAB_WIDTH) {
+            this.tabWidth = this.circleElementRefs.first.nativeElement.getBoundingClientRect().width + SPACE_BETWEEN_TABS;
+        }
+        this.changeTabsCount();
+        this.visibleEvents = this.trackItems
+            .slice(this.firstCircleInView, this.firstCircleInView + this.visibleTabsCount)
+            .filter(event => !event.isFlag);
+    }
+    onKeyDown(event) {
+        if (!this.navigable) {
+            return;
+        }
+        if (event.keyCode === Keys.Home) {
+            this.onHomeKey();
+        }
+        else if (event.keyCode === Keys.End) {
+            this.onEndKey();
+        }
+        else if (event.keyCode === Keys.ArrowRight) {
+            this.onArrowRightKey();
+        }
+        else if (event.keyCode === Keys.ArrowLeft) {
+            this.onArrowLeftKey();
+        }
+    }
+    focusTrackItem(index) {
+        if (!this.circleElementRefs || index < 0 || index >= this.circleElementRefs.length) {
+            return;
+        }
+        const selectedTrackItem = this.circleElementRefs
+            .find(element => element.nativeElement.hasAttribute('aria-selected'));
+        if (selectedTrackItem) {
+            this.removeTrackItemAttributes(selectedTrackItem);
+            this.removeCardsAttributes();
+        }
+        const newTrackItem = this.circleElementRefs.get(index).nativeElement;
+        this.setTrackItemAttributes(newTrackItem, index);
+    }
+    setTrackItemAttributes(element, index) {
+        const innerCard = this.cardComponents.get(this.selectedCardIndex).element.nativeElement.querySelector('.k-card');
+        const selectedCircle = this.circleElementRefs.get(index).nativeElement;
+        this.renderer.addClass(element, 'k-focus');
+        this.renderer.setAttribute(element, 'aria-selected', 'true');
+        this.assignAriaLabel(innerCard, selectedCircle);
+        this.assignAriaDescribedBy(innerCard, selectedCircle);
+    }
+    removeTrackItemAttributes(element) {
+        this.renderer.removeClass(element.nativeElement, 'k-focus');
+        this.renderer.removeAttribute(element.nativeElement, 'aria-selected');
+        this.renderer.removeAttribute(element.nativeElement, 'id');
+        this.renderer.removeAttribute(element.nativeElement, 'aria-describedby');
+    }
+    removeCardsAttributes() {
+        this.cardElementRefs.forEach(card => {
+            this.renderer.removeAttribute(card.nativeElement.querySelector('.k-card'), 'id');
+            this.renderer.removeAttribute(card.nativeElement.querySelector('.k-card'), 'aria-label');
+        });
+    }
+    assignAriaLabel(cardElement, dateElement) {
+        const dateLabelId = `k-${guid()}`;
+        this.renderer.setAttribute(dateElement, 'id', dateLabelId);
+        this.renderer.setAttribute(cardElement, 'aria-label', dateLabelId);
+    }
+    assignAriaDescribedBy(cardElement, dateElement) {
+        const cardId = `k-${guid()}`;
+        this.renderer.setAttribute(cardElement, 'id', cardId);
+        this.renderer.setAttribute(dateElement, 'aria-describedby', cardId);
+    }
+    updateInterval(forward) {
+        let start = forward ? this.firstCircleInView + this.visibleTabsCount : this.firstCircleInView - this.visibleTabsCount;
+        if (start < 0 || start >= this.trackItems.length) {
+            start = 0;
+        }
+        this.navigateToInterval(start, 0, forward, !forward);
+    }
+    onHomeKey() {
+        this.navigateToFirstInterval();
+    }
+    onEndKey() {
+        this.navigateToLastInterval();
+    }
+    onArrowRightKey() {
+        this.navigateToOtherEvent(true);
+    }
+    onArrowLeftKey() {
+        this.navigateToOtherEvent(false);
+    }
+    navigateToFirstInterval() {
+        this.navigateToInterval(0);
+    }
+    navigateToLastInterval() {
+        const start = Math.floor(this.trackItems.length / this.visibleTabsCount) * this.visibleTabsCount;
+        this.navigateToInterval(start, this.events.length - 1);
+    }
+    navigateToOtherEvent(direction) {
+        const offset = direction ? 1 : -1;
+        const newIndex = this.selectedEventIndex + offset;
+        if (newIndex < 0 || newIndex >= this.events.length) {
+            return;
+        }
+        if (this.visibleEvents.findIndex(event => event === this.events[newIndex]) === -1) {
+            this.updateInterval(direction);
+        }
+        else {
+            this.selectedEvent = this.events[newIndex];
+            this.selectedCardIndex = this.getOtherSelectedCardIndex(direction);
+            this.focusTrackItem(this.selectedEventIndex);
+            this.animateCards();
+            this.cdr.markForCheck();
+        }
+    }
+    navigateToInterval(start, selectedIndex = 0, selectFirst = false, selectLast = false) {
+        const end = start + this.visibleTabsCount < this.trackItems.length ? start + this.visibleTabsCount : undefined;
+        const forward = this.firstCircleInView < start;
+        this.firstCircleInView = start;
+        const interval = Math.floor(start / this.visibleTabsCount);
+        this.translateValue = interval * -100;
+        this.animationState = forward ? 'right' : 'left';
+        this.visibleEvents = this.trackItems.slice(this.firstCircleInView, end).filter(event => !event.isFlag);
+        if (selectFirst) {
+            this.selectedEvent = this.visibleEvents[0];
+        }
+        else if (selectLast) {
+            this.selectedEvent = this.visibleEvents[this.visibleEvents.length - 1];
+        }
+        else {
+            this.selectedEvent = this.events[selectedIndex];
+        }
+        this.selectedCardIndex = this.getOtherSelectedCardIndex(forward);
+        this.cdr.detectChanges();
+        this.focusTrackItem(this.selectedEventIndex);
+        this.animateCards();
+        this.calloutStyle = this.calloutOffset;
+        this.cdr.markForCheck();
+    }
+    animateCards() {
+        if (this.animationDuration) {
+            this.cardComponents.get(this.selectedCardIndex).event = null;
+        }
+        this.cardElementRefs.forEach((card, index) => {
+            this.renderer.setStyle(card.nativeElement, 'transform', this.getTransformation(this.cardWidth, index));
+            this.renderer.setStyle(card.nativeElement, 'transition-duration', `${this.animationDuration || 0}ms`);
+        });
+    }
+    transformCards() {
+        this.cardElementRefs.forEach((card, index) => this.renderer.setStyle(card.nativeElement, 'transform', this.getTransformation(this.cardWidth, index)));
+    }
+    changeTabsCount() {
+        this.visibleTabsCount = Math.round(this.scrollableTrackWidth / this.tabWidth);
+        if (this.tabFlex !== 100 / this.visibleTabsCount) {
+            this.tabFlex = 100 / this.visibleTabsCount;
+            this.circleElementRefs.forEach(item => this.renderer.setStyle(item.nativeElement, 'flex', `1 0 ${this.tabFlex}%`));
+            this.flagElementRefs.forEach(item => this.renderer.setStyle(item.nativeElement, 'flex', `1 0 ${this.tabFlex}%`));
+            this.cdr.detectChanges();
+            this.visibleEvents = this.trackItems
+                .slice(this.firstCircleInView, this.firstCircleInView + this.visibleTabsCount)
+                .filter(event => !event.isFlag);
+            if (!this.visibleEvents.find(event => event === this.selectedEvent)) {
+                const trackItemIndex = this.trackItems.findIndex(event => event === this.selectedEvent);
+                this.navigateToInterval(trackItemIndex, this.selectedEventIndex);
+            }
+        }
+    }
+    l10nChange() {
+        if (this.localization.get('previous')) {
+            this.previousTitle = this.localization.get('previous');
+        }
+        if (this.localization.get('next')) {
+            this.nextTitle = this.localization.get('next');
+        }
+        this.cdr.markForCheck();
+    }
+}
+TimelineHorizontalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineHorizontalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: TimelineService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineHorizontalComponent, 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"
+                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"
+                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>
+            <div class="k-timeline-track">
+                <ul class="k-timeline-scrollable-wrap"
+                    #scrollableTrack
+                    [attr.role]="'tablist'"
+                    [attr.tabindex]="'0'"
+                    [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
+                    (@trackSlide.done)="onSlideDone()"
+                    (transitionend)="onTrackTransitionEnd()"
+                >
+                    <ng-container *ngFor="let event of trackItems; let index = index">
+                        <li
+                            #trackFlag
+                            *ngIf="event.isFlag"
+                            class="k-timeline-flag-wrap k-timeline-track-item"
+                            [attr.role]="'none'"
+                            [attr.aria-hidden]="true"
+                            [ngStyle]="tabStyle()"
+                        >
+                            <span class="k-timeline-flag">{{ event.isFlag }}</span>
+                        </li>
+                        <li
+                            *ngIf="!event.isFlag"
+                            #trackCircle
+                            class="k-timeline-track-item"
+                            [attr.role]="'tab'"
+                            (click)="navigateToEvent(index)"
+                            [ngStyle]="tabStyle()"
+                        >
+                            <div class="k-timeline-date-wrap">
+                                <span *ngIf="showDateLabels" class="k-timeline-date">
+                                    {{ event.date | kendoDate: dateFormat }}
+                                </span>
+                            </div>
+                            <span class="k-timeline-circle"></span>
+                        </li>
+                    </ng-container>
+                </ul>
+            </div>
+        </div>
+        <div class="k-timeline-events-list">
+            <ul
+                *ngIf="selectedEvent"
+                class="k-timeline-scrollable-wrap"
+                [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
+                (@eventsSlide.done)="onSlideDone()"
+                [ngStyle]="{'transform-origin': 'left top'}"
+            >
+                <li *ngFor="let event of eventsInInterval; let index = index"
+                    #card
+                    class="k-timeline-event"
+                    (transitionend)="onTransitionEnd()"
+                >
+                    <kendo-timeline-card
+                        [event]="selectedCardIndex === index ? selectedEvent : null"
+                        [expanded]="true"
+                        [collapsible]="collapsibleEvents"
+                        [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
+                        [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
+                        [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
+                        [navigable]="navigable"
+                        [index]="selectedEventIndex"
+                        [headerTemplate]="headerTemplate"
+                        [bodyTemplate]="bodyTemplate"
+                        [actionsTemplate]="actionsTemplate"
+                        [eventHeight]="eventHeight"
+                        orientation="horizontal"
+                    >
+                    </kendo-timeline-card>
+                </li>
+            </ul>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.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: "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: i6.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.0.4", ngImport: i0, type: TimelineHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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' } })
+                        ])
+                    ],
+                    providers: [],
+                    exportAs: 'kendoTimelineHorizontal',
+                    selector: 'kendo-timeline-horizontal',
+                    template: `
+        <div class="k-timeline-track-wrap" #track>
+            <button
+                kendoButton
+                [svgIcon]="svgLeftIcon"
+                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"
+                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>
+            <div class="k-timeline-track">
+                <ul class="k-timeline-scrollable-wrap"
+                    #scrollableTrack
+                    [attr.role]="'tablist'"
+                    [attr.tabindex]="'0'"
+                    [@trackSlide]="{value: animationState, params: {transformValue: this.translateValue}}"
+                    (@trackSlide.done)="onSlideDone()"
+                    (transitionend)="onTrackTransitionEnd()"
+                >
+                    <ng-container *ngFor="let event of trackItems; let index = index">
+                        <li
+                            #trackFlag
+                            *ngIf="event.isFlag"
+                            class="k-timeline-flag-wrap k-timeline-track-item"
+                            [attr.role]="'none'"
+                            [attr.aria-hidden]="true"
+                            [ngStyle]="tabStyle()"
+                        >
+                            <span class="k-timeline-flag">{{ event.isFlag }}</span>
+                        </li>
+                        <li
+                            *ngIf="!event.isFlag"
+                            #trackCircle
+                            class="k-timeline-track-item"
+                            [attr.role]="'tab'"
+                            (click)="navigateToEvent(index)"
+                            [ngStyle]="tabStyle()"
+                        >
+                            <div class="k-timeline-date-wrap">
+                                <span *ngIf="showDateLabels" class="k-timeline-date">
+                                    {{ event.date | kendoDate: dateFormat }}
+                                </span>
+                            </div>
+                            <span class="k-timeline-circle"></span>
+                        </li>
+                    </ng-container>
+                </ul>
+            </div>
+        </div>
+        <div class="k-timeline-events-list">
+            <ul
+                *ngIf="selectedEvent"
+                class="k-timeline-scrollable-wrap"
+                [@eventsSlide]="{value: animationState, params: {animationDuration: this.animationDuration || 0}}"
+                (@eventsSlide.done)="onSlideDone()"
+                [ngStyle]="{'transform-origin': 'left top'}"
+            >
+                <li *ngFor="let event of eventsInInterval; let index = index"
+                    #card
+                    class="k-timeline-event"
+                    (transitionend)="onTransitionEnd()"
+                >
+                    <kendo-timeline-card
+                        [event]="selectedCardIndex === index ? selectedEvent : null"
+                        [expanded]="true"
+                        [collapsible]="collapsibleEvents"
+                        [calloutStyle]="selectedCardIndex === index ? calloutStyle : {}"
+                        [ngStyle]="{visibility: selectedCardIndex === index ? 'visible' : 'hidden' }"
+                        [tabIndex]="selectedCardIndex === index ? '0' : '-1'"
+                        [navigable]="navigable"
+                        [index]="selectedEventIndex"
+                        [headerTemplate]="headerTemplate"
+                        [bodyTemplate]="bodyTemplate"
+                        [actionsTemplate]="actionsTemplate"
+                        [eventHeight]="eventHeight"
+                        orientation="horizontal"
+                    >
+                    </kendo-timeline-card>
+                </li>
+            </ul>
+        </div>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: TimelineService }, { type: i1.LocalizationService }]; }, propDecorators: { events: [{
+                type: Input
+            }], alterMode: [{
+                type: Input
+            }], collapsibleEvents: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], showDateLabels: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], eventHeight: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], bodyTemplate: [{
+                type: Input
+            }], actionsTemplate: [{
+                type: Input
+            }], cardElementRefs: [{
+                type: ViewChildren,
+                args: ['card', { read: ElementRef }]
+            }], circleElementRefs: [{
+                type: ViewChildren,
+                args: ['trackCircle']
+            }], flagElementRefs: [{
+                type: ViewChildren,
+                args: ['trackFlag']
+            }], trackElementRef: [{
+                type: ViewChild,
+                args: ['track']
+            }], scrollableTrackElementRef: [{
+                type: ViewChild,
+                args: ['scrollableTrack']
+            }], cardComponents: [{
+                type: ViewChildren,
+                args: [TimelineCardComponent]
+            }] } });
+
+/**
+ * @hidden
+ */
+class TimelineVerticalComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.events = [];
+        this.subscriptions = new Subscription();
+    }
+    ngAfterViewInit() {
+        this.ariaDescribedByAllEvents();
+        this.subscriptions.add(this.innerDateElementRefs.changes.subscribe(() => {
+            if (this.innerDateElementRefs?.length > 0) {
+                this.ariaDescribedByAllEvents();
+            }
+            else {
+                this.removeAriaDescribedBy();
+            }
+        }));
+    }
+    expand(index) {
+        if (index < 0 || index >= this.cards.length) {
+            return;
+        }
+        this.cards.get(index).expand();
+    }
+    collapse(index) {
+        if (index < 0 || index >= this.cards.length) {
+            return;
+        }
+        this.cards.get(index).collapse();
+    }
+    ariaDescribedByAllEvents() {
+        this.cards?.forEach((card, index) => {
+            const innerCard = card.element.nativeElement.querySelector('.k-card');
+            const innerDate = this.dateElementRefs.get(index).nativeElement.querySelector('.k-timeline-date');
+            if (innerDate) {
+                this.assignAriaDescribedBy(innerCard, innerDate);
+            }
+        });
+    }
+    removeAriaDescribedBy() {
+        this.cards?.forEach(card => {
+            const innerCard = card.element.nativeElement.querySelector('.k-card');
+            this.renderer.removeAttribute(innerCard, 'aria-describedby');
+        });
+    }
+    assignAriaDescribedBy(cardElement, dateElement) {
+        const dateLabelId = `k-${guid()}`;
+        this.renderer.setAttribute(dateElement, 'id', dateLabelId);
+        this.renderer.setAttribute(cardElement, 'aria-describedby', dateLabelId);
+    }
+}
+TimelineVerticalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+TimelineVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineVerticalComponent, 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">
+                    <span class="k-timeline-flag">{{ event.flag }}</span>
+                </li>
+                <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
+                    <div class="k-timeline-date-wrap" #dateWrap>
+                        <span *ngIf="showDateLabels" class="k-timeline-date" #innerDate>
+                            {{ event.date | kendoDate: dateFormat }}
+                        </span>
+                    </div>
+                    <span class="k-timeline-circle"></span>
+                    <kendo-timeline-card
+                        #card
+                        [event]="event"
+                        [expanded]="event.expanded || !collapsibleEvents"
+                        [collapsible]="collapsibleEvents"
+                        [reversed]="alterMode && i % 2 === 0"
+                        [tabIndex]="'0'"
+                        [navigable]="navigable"
+                        [animationDuration]="animationDuration"
+                        [headerTemplate]="headerTemplate"
+                        [bodyTemplate]="bodyTemplate"
+                        [actionsTemplate]="actionsTemplate"
+                        [index]="i"
+                        [eventWidth]="eventWidth"
+                        orientation="vertical"
+                    >
+                    </kendo-timeline-card>
+                </li>
+            </ng-container>
+        </ul>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i6.DatePipe, name: "kendoDate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineVerticalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [],
+                    exportAs: 'kendoTimelineVertical',
+                    selector: 'kendo-timeline-vertical',
+                    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">
+                    <span class="k-timeline-flag">{{ event.flag }}</span>
+                </li>
+                <li class="k-timeline-event" [ngClass]="{ 'k-reverse': alterMode && i % 2 === 0 }">
+                    <div class="k-timeline-date-wrap" #dateWrap>
+                        <span *ngIf="showDateLabels" class="k-timeline-date" #innerDate>
+                            {{ event.date | kendoDate: dateFormat }}
+                        </span>
+                    </div>
+                    <span class="k-timeline-circle"></span>
+                    <kendo-timeline-card
+                        #card
+                        [event]="event"
+                        [expanded]="event.expanded || !collapsibleEvents"
+                        [collapsible]="collapsibleEvents"
+                        [reversed]="alterMode && i % 2 === 0"
+                        [tabIndex]="'0'"
+                        [navigable]="navigable"
+                        [animationDuration]="animationDuration"
+                        [headerTemplate]="headerTemplate"
+                        [bodyTemplate]="bodyTemplate"
+                        [actionsTemplate]="actionsTemplate"
+                        [index]="i"
+                        [eventWidth]="eventWidth"
+                        orientation="vertical"
+                    >
+                    </kendo-timeline-card>
+                </li>
+            </ng-container>
+        </ul>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { events: [{
+                type: Input
+            }], alterMode: [{
+                type: Input
+            }], collapsibleEvents: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], showDateLabels: [{
+                type: Input
+            }], animationDuration: [{
+                type: Input
+            }], eventWidth: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], bodyTemplate: [{
+                type: Input
+            }], actionsTemplate: [{
+                type: Input
+            }], cards: [{
+                type: ViewChildren,
+                args: ['card']
+            }], dateElementRefs: [{
+                type: ViewChildren,
+                args: ['dateWrap']
+            }], innerDateElementRefs: [{
+                type: ViewChildren,
+                args: ['innerDate']
+            }] } });
+
+/**
+ * @hidden
+ */
+class TimelineMessages extends ComponentMessages {
+}
+TimelineMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TimelineMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: TimelineMessages, selector: "kendo-timeline-messages-base", inputs: { previous: "previous", next: "next" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineMessages, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-timeline-messages-base'
+                }]
+        }], propDecorators: { previous: [{
+                type: Input
+            }], next: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedTimelineMessagesDirective extends TimelineMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedTimelineMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LocalizedTimelineMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedTimelineMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]", providers: [
+        {
+            provide: TimelineMessages,
+            useExisting: forwardRef(() => LocalizedTimelineMessagesDirective),
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LocalizedTimelineMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: TimelineMessages,
+                            useExisting: forwardRef(() => LocalizedTimelineMessagesDirective),
+                        },
+                    ],
+                    selector: `[kendoTimelineLocalizedMessages]`
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const DEFAULT_HORIZONTAL_ANIMATION_DURATION = 400;
+const DEFAULT_VERTICAL_ANIMATION_DURATION = 300;
+const DEFAULT_EVENT_WIDTH = 400;
+const DEFAULT_EVENT_HEIGHT = 600;
+const DEFAULT_DATE_FORMAT = 'MMMM dd, yyyy';
+/**
+ * Represents the [Kendo UI Timeline component for Angular]({% slug overview_timeline %}).
+ */
+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 true
+         */
+        this.alterMode = true;
+        /**
+         * 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 emitted in vertical mode only.
+         */
+        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 emitted in horizontal mode only.
+         */
+        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;
+    }
+    /**
+     * An array of event instances which will be shown by the Timeline.
+     */
+    set events(events) {
+        if (!isPresent$1(events)) {
+            return;
+        }
+        this.originalData = events;
+        this._events = processItems(this.originalData, this.modelFields);
+        this._events.sort((a, b) => {
+            return a.date.getTime() - b.date.getTime();
+        });
+        if (this._events.length > 0) {
+            let flag = this._events[0].date.getFullYear() - 1;
+            this._events.forEach((event) => {
+                if (event.date.getFullYear() !== flag) {
+                    flag = event.date.getFullYear();
+                    event.flag = flag;
+                }
+            });
+        }
+    }
+    get events() {
+        return this._events;
+    }
+    /**
+     * The names of the model fields from which the Timeline will read its data.
+     */
+    set modelFields(value) {
+        this._modelFields = { ...defaultModelFields, ...value };
+        if (this.originalData) {
+            this.events = this.originalData;
+        }
+    }
+    get modelFields() {
+        return this._modelFields;
+    }
+    /**
+     * Sets a specific width for the event.
+     * This setting is supported only in vertical mode.
+     *
+     * @default 400
+     */
+    get eventWidth() {
+        return this._eventWidth;
+    }
+    set eventWidth(value) {
+        if (value) {
+            this._eventWidth = value;
+        }
+        else {
+            this._eventWidth = DEFAULT_EVENT_WIDTH;
+        }
+    }
+    /**
+     * Sets a specific height for the event.
+     * > This setting is supported only in horizontal mode.
+     *
+     * @default 600
+     */
+    get eventHeight() {
+        return this._eventHeight;
+    }
+    set eventHeight(value) {
+        if (value) {
+            this._eventHeight = value;
+        }
+        else {
+            this._eventHeight = DEFAULT_EVENT_HEIGHT;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get animationDuration() {
+        if (typeof this.animation === 'number') {
+            return this.animation;
+        }
+        if (typeof this.animation === 'boolean' && this.animation) {
+            return this.orientation === 'horizontal' ? DEFAULT_HORIZONTAL_ANIMATION_DURATION : DEFAULT_VERTICAL_ANIMATION_DURATION;
+        }
+        return 0;
+    }
+    /**
+     * Specifies the date format for displaying the event date.
+     *
+     * @default 'MMMM dd, yyyy'
+     */
+    set dateFormat(value) {
+        if (isPresent$1(value) && value !== '') {
+            this._dateFormat = value;
+        }
+        else {
+            this._dateFormat = DEFAULT_DATE_FORMAT;
+        }
+    }
+    get dateFormat() {
+        return this._dateFormat;
+    }
+    get verticalClass() {
+        return this.orientation === 'vertical';
+    }
+    get horizontalClass() {
+        return this.orientation === 'horizontal';
+    }
+    get alternatingClass() {
+        return this.alterMode === true && this.orientation === 'vertical';
+    }
+    get collapsibleClass() {
+        return this.collapsibleEvents === true && this.orientation === 'vertical';
+    }
+    ngAfterContentInit() {
+        this.initTemplates();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * Switches to the previous portion of events.
+     * > This method is supported only in horizontal mode.
+     */
+    previous() {
+        this.timelineHorizontal?.previous();
+    }
+    /**
+     * Switches to the next portion of events.
+     * > This method is supported only in horizontal mode.
+     */
+    next() {
+        this.timelineHorizontal?.next();
+    }
+    /**
+     * Open event details.
+     * > This method is supported only in horizontal mode.
+     */
+    open(index) {
+        this.timelineHorizontal?.open(index);
+    }
+    /**
+     * Expands an event.
+     * > This method is supported only in vertical mode.
+     */
+    expand(index) {
+        this.timelineVertical?.expand(index);
+    }
+    /**
+     * Collapses an event.
+     * > This method is supported only in vertical mode.
+     */
+    collapse(index) {
+        this.timelineVertical?.collapse(index);
+    }
+    initTemplates() {
+        this.headerTemplate = this.cardHeaderTemplate?.first;
+        this.bodyTemplate = this.cardBodyTemplate?.first;
+        this.actionsTemplate = this.cardActionsTemplate?.first;
+        this.subscriptions.add(this.cardHeaderTemplate?.changes.subscribe(() => {
+            this.headerTemplate = this.cardHeaderTemplate?.first || null;
+        }));
+        this.subscriptions.add(this.cardBodyTemplate?.changes.subscribe(() => {
+            this.bodyTemplate = this.cardBodyTemplate?.first || null;
+        }));
+        this.subscriptions.add(this.cardActionsTemplate?.changes.subscribe(() => {
+            this.actionsTemplate = this.cardActionsTemplate?.first || null;
+        }));
+    }
+}
+TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineComponent, deps: [{ token: TimelineService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineComponent, 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"
+        >
+        </ng-container>
+        <ng-container kendoTimelineLocalizedMessages
+            i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
+            next="next"
+        >
+        </ng-container>
+        <kendo-timeline-vertical
+            *ngIf="orientation === 'vertical'"
+            [events]="events"
+            [alterMode]="alterMode"
+            [collapsibleEvents]="collapsibleEvents"
+            [navigable]="navigable"
+            [showDateLabels]="showDateLabels"
+            [animationDuration]="animationDuration"
+            [eventWidth]="eventWidth"
+            [dateFormat]="dateFormat"
+            [headerTemplate]="headerTemplate"
+            [bodyTemplate]="bodyTemplate"
+            [actionsTemplate]="actionsTemplate"
+        >
+        </kendo-timeline-vertical>
+        <kendo-timeline-horizontal
+            *ngIf="orientation === 'horizontal'"
+            [events]="events"
+            [collapsibleEvents]="false"
+            [navigable]="navigable"
+            [showDateLabels]="showDateLabels"
+            [animationDuration]="animationDuration"
+            [eventHeight]="eventHeight"
+            [dateFormat]="dateFormat"
+            [headerTemplate]="headerTemplate"
+            [bodyTemplate]="bodyTemplate"
+            [actionsTemplate]="actionsTemplate"
+        >
+        </kendo-timeline-horizontal>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.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"] }, { kind: "directive", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        TimelineService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.timeline'
+                        }
+                    ],
+                    exportAs: 'kendoTimeline',
+                    selector: 'kendo-timeline',
+                    template: `
+        <ng-container kendoTimelineLocalizedMessages
+            i18n-previous="kendo.timeline.previous|The title of the previous button in horizontal orientation."
+            previous="previous"
+        >
+        </ng-container>
+        <ng-container kendoTimelineLocalizedMessages
+            i18n-next="kendo.timeline.next|The title of the next button in horizontal orientation."
+            next="next"
+        >
+        </ng-container>
+        <kendo-timeline-vertical
+            *ngIf="orientation === 'vertical'"
+            [events]="events"
+            [alterMode]="alterMode"
+            [collapsibleEvents]="collapsibleEvents"
+            [navigable]="navigable"
+            [showDateLabels]="showDateLabels"
+            [animationDuration]="animationDuration"
+            [eventWidth]="eventWidth"
+            [dateFormat]="dateFormat"
+            [headerTemplate]="headerTemplate"
+            [bodyTemplate]="bodyTemplate"
+            [actionsTemplate]="actionsTemplate"
+        >
+        </kendo-timeline-vertical>
+        <kendo-timeline-horizontal
+            *ngIf="orientation === 'horizontal'"
+            [events]="events"
+            [collapsibleEvents]="false"
+            [navigable]="navigable"
+            [showDateLabels]="showDateLabels"
+            [animationDuration]="animationDuration"
+            [eventHeight]="eventHeight"
+            [dateFormat]="dateFormat"
+            [headerTemplate]="headerTemplate"
+            [bodyTemplate]="bodyTemplate"
+            [actionsTemplate]="actionsTemplate"
+        >
+        </kendo-timeline-horizontal>
+    `,
+                }]
+        }], ctorParameters: function () { return [{ type: TimelineService }]; }, propDecorators: { events: [{
+                type: Input
+            }], modelFields: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], alterMode: [{
+                type: Input
+            }], collapsibleEvents: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], showDateLabels: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], eventWidth: [{
+                type: Input
+            }], eventHeight: [{
+                type: Input
+            }], dateFormat: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-timeline']
+            }], verticalClass: [{
+                type: HostBinding,
+                args: ['class.k-timeline-vertical']
+            }], horizontalClass: [{
+                type: HostBinding,
+                args: ['class.k-timeline-horizontal']
+            }], alternatingClass: [{
+                type: HostBinding,
+                args: ['class.k-timeline-alternating']
+            }], collapsibleClass: [{
+                type: HostBinding,
+                args: ['class.k-timeline-collapsible']
+            }], timelineHorizontal: [{
+                type: ViewChild,
+                args: [TimelineHorizontalComponent]
+            }], timelineVertical: [{
+                type: ViewChild,
+                args: [TimelineVerticalComponent]
+            }], cardHeaderTemplate: [{
+                type: ContentChildren,
+                args: [TimelineCardHeaderTemplateDirective, { descendants: false }]
+            }], cardBodyTemplate: [{
+                type: ContentChildren,
+                args: [TimelineCardBodyTemplateDirective, { descendants: false }]
+            }], cardActionsTemplate: [{
+                type: ContentChildren,
+                args: [TimelineCardActionsTemplateDirective, { descendants: false }]
+            }], onToggle: [{
+                type: Output
+            }], onActionClick: [{
+                type: Output
+            }], onNavigate: [{
+                type: Output
+            }] } });
+
+/**
+ * Custom component messages override default component messages.
+ */
+class TimelineCustomMessagesComponent extends TimelineMessages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+TimelineCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TimelineCustomMessagesComponent, selector: "kendo-timeline-messages", providers: [
+        {
+            provide: TimelineMessages,
+            useExisting: forwardRef(() => TimelineCustomMessagesComponent),
+        },
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: TimelineMessages,
+                            useExisting: forwardRef(() => TimelineCustomMessagesComponent),
+                        },
+                    ],
+                    selector: 'kendo-timeline-messages',
+                    template: ``,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const exportedModules = [
+    TimelineComponent,
+    TimelineCustomMessagesComponent,
+    TimelineCardHeaderTemplateDirective,
+    TimelineCardBodyTemplateDirective,
+    TimelineCardActionsTemplateDirective
+];
+const declarations = [
+    ...exportedModules,
+    TimelineVerticalComponent,
+    TimelineHorizontalComponent,
+    TimelineCardComponent,
+    LocalizedTimelineMessagesDirective,
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Timeline component.
+ *
+ * The module registers:
+ * - `TimelineComponent`&mdash;The `TimelineComponent` component class.
+ */
+class TimelineModule {
+}
+TimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: TimelineModule, declarations: [TimelineComponent,
+        TimelineCustomMessagesComponent,
+        TimelineCardHeaderTemplateDirective,
+        TimelineCardBodyTemplateDirective,
+        TimelineCardActionsTemplateDirective, TimelineVerticalComponent,
+        TimelineHorizontalComponent,
+        TimelineCardComponent,
+        LocalizedTimelineMessagesDirective], imports: [CommonModule, CardModule, ButtonModule, IconsModule, IntlModule], exports: [TimelineComponent,
+        TimelineCustomMessagesComponent,
+        TimelineCardHeaderTemplateDirective,
+        TimelineCardBodyTemplateDirective,
+        TimelineCardActionsTemplateDirective] });
+TimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineModule, imports: [CommonModule, CardModule, ButtonModule, IconsModule, IntlModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimelineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations],
+                    exports: [exportedModules],
+                    imports: [CommonModule, CardModule, ButtonModule, IconsModule, IntlModule]
+                }]
+        }] });
+
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Layout components.
@@ -10425,7 +12328,8 @@ LayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         TabStripModule,
         TileLayoutModule,
         StackLayoutModule,
-        GridLayoutModule] });
+        GridLayoutModule,
+        TimelineModule] });
 LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LayoutModule, imports: [AvatarModule,
         CardModule,
         DrawerModule,
@@ -10436,7 +12340,8 @@ LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         TabStripModule,
         TileLayoutModule,
         StackLayoutModule,
-        GridLayoutModule] });
+        GridLayoutModule,
+        TimelineModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LayoutModule, decorators: [{
             type: NgModule,
             args: [{
@@ -10451,7 +12356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         TabStripModule,
                         TileLayoutModule,
                         StackLayoutModule,
-                        GridLayoutModule
+                        GridLayoutModule,
+                        TimelineModule,
                     ]
                 }]
         }] });
@@ -10460,5 +12366,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemClickEvent, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTemplateDirective, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
+export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemClickEvent, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTemplateDirective, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective, TimelineCardActionsTemplateDirective, TimelineCardBodyTemplateDirective, TimelineCardHeaderTemplateDirective, TimelineComponent, TimelineCustomMessagesComponent, TimelineModule };