@progress/kendo-angular-layout 16.0.0-develop.2 → 16.0.0-develop.21

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

@@ -6,23 +6,25 @@ import * as i0 from '@angular/core';
 import { Directive, Optional, Injectable, isDevMode, Component, SkipSelf, Host, Input, ViewChild, HostBinding, ViewChildren, ContentChildren, EventEmitter, Output, ContentChild, HostListener, Inject, QueryList, NgZone, forwardRef, ElementRef, ViewEncapsulation, TemplateRef, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
-import * as i1$1 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 * as i5 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$2 from '@angular/animations';
+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 * as i2 from '@progress/kendo-angular-icons';
-import { IconsModule } from '@progress/kendo-angular-icons';
-import * as i3 from '@angular/common';
+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';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { delay, takeUntil, map, tap, filter, switchMap, take } from 'rxjs/operators';
-import * as i2$1 from '@progress/kendo-angular-buttons';
+import * as i3$1 from '@progress/kendo-angular-buttons';
 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: 1714067415,
-    version: '16.0.0-develop.2',
+    publishDate: 1715351226,
+    version: '16.0.0-develop.21',
     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'
 };
 
@@ -72,9 +74,9 @@ class PanelBarContentDirective {
         this.templateRef = templateRef;
     }
 }
-PanelBarContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-PanelBarContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarContentDirective, selector: "[kendoPanelBarContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarContentDirective, decorators: [{
+PanelBarContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+PanelBarContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarContentDirective, selector: "[kendoPanelBarContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[kendoPanelBarContent]"
@@ -112,9 +114,9 @@ class PanelBarItemTitleDirective {
         this.templateRef = templateRef;
     }
 }
-PanelBarItemTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarItemTitleDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PanelBarItemTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarItemTitleDirective, decorators: [{
+PanelBarItemTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemTitleDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+PanelBarItemTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarItemTitleDirective, selector: "[kendoPanelBarItemTitle]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPanelBarItemTitle]'
@@ -280,9 +282,9 @@ class PanelBarService {
         this.parentSource.next(false);
     }
 }
-PanelBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PanelBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarService, decorators: [{
+PanelBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PanelBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -374,9 +376,6 @@ class PanelBarItemComponent {
     get animate() {
         return this.eventService.animate;
     }
-    get kStateDefaultClass() {
-        return !this.disabled;
-    }
     get kStateExpandedClass() {
         return !this.disabled && this.expanded && (this.hasChildItems || this.hasContent);
     }
@@ -548,8 +547,8 @@ class PanelBarItemComponent {
         this.wrapperFocused = focused;
     }
 }
-PanelBarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarItemComponent, deps: [{ token: PanelBarItemComponent, host: true, optional: true, skipSelf: true }, { token: PanelBarService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-state-default": "this.kStateDefaultClass", "class.k-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
+PanelBarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemComponent, deps: [{ token: PanelBarItemComponent, host: true, optional: true, skipSelf: true }, { token: PanelBarService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
             <span
                 #header
                 [class.k-link]="true"
@@ -607,7 +606,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     *ngIf="hasChildItems && !items?.length"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-panel k-group k-panelbar-group"
+                    class="k-panelbar-group"
                 >
                     <ng-content select="kendo-panelbar-item"></ng-content>
                 </div>
@@ -615,7 +614,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     *ngIf="hasContent && !content"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-content k-panelbar-content">
+                    class="k-panelbar-content">
                     <ng-template
                         [ngTemplateOutlet]="contentTemplate.first.templateRef"
                         [ngTemplateOutletContext]="{
@@ -633,7 +632,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 <div *ngIf="hasItems"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-panel k-group k-panelbar-group">
+                    class="k-panelbar-group">
                     <ng-container *ngFor="let item of items">
                         <kendo-panelbar-item *ngIf="!item.hidden"
                             [title]="item.title"
@@ -655,7 +654,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     *ngIf="content"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-content k-panelbar-content">
+                    class="k-panelbar-content">
                     <ng-template
                         [ngTemplateOutlet]="template"
                         [ngTemplateOutletContext]="{
@@ -671,7 +670,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     </ng-template>
                     <ng-template [ngIf]="!template">{{content}}</ng-template>
                 </div>
-            </div>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+            </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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], animations: [
         trigger('toggle', [
             state('inactive', style({ display: 'none' })),
             transition('* => active', [
@@ -684,7 +683,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             ])
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -760,7 +759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     *ngIf="hasChildItems && !items?.length"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-panel k-group k-panelbar-group"
+                    class="k-panelbar-group"
                 >
                     <ng-content select="kendo-panelbar-item"></ng-content>
                 </div>
@@ -768,7 +767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     *ngIf="hasContent && !content"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-content k-panelbar-content">
+                    class="k-panelbar-content">
                     <ng-template
                         [ngTemplateOutlet]="contentTemplate.first.templateRef"
                         [ngTemplateOutletContext]="{
@@ -786,7 +785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 <div *ngIf="hasItems"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-panel k-group k-panelbar-group">
+                    class="k-panelbar-group">
                     <ng-container *ngFor="let item of items">
                         <kendo-panelbar-item *ngIf="!item.hidden"
                             [title]="item.title"
@@ -808,7 +807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     *ngIf="content"
                     [style.overflow]="contentOverflow"
                     [style.height]="contentHeight"
-                    class="k-content k-panelbar-content">
+                    class="k-panelbar-content">
                     <ng-template
                         [ngTemplateOutlet]="template"
                         [ngTemplateOutletContext]="{
@@ -873,9 +872,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], kItemClass: [{
                 type: HostBinding,
                 args: ['class.k-panelbar-item']
-            }], kStateDefaultClass: [{
-                type: HostBinding,
-                args: ['class.k-state-default']
             }], kStateExpandedClass: [{
                 type: HostBinding,
                 args: ['class.k-expanded']
@@ -916,9 +912,9 @@ class PanelBarItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-PanelBarItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PanelBarItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarItemTemplateDirective, selector: "[kendoPanelBarItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarItemTemplateDirective, decorators: [{
+PanelBarItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+PanelBarItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarItemTemplateDirective, selector: "[kendoPanelBarItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPanelBarItemTemplate]'
@@ -1461,8 +1457,8 @@ class PanelBarComponent {
         return flattedItems;
     }
 }
-PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: PanelBarService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
+PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: PanelBarService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
         PanelBarService,
         LocalizationService,
         {
@@ -1492,8 +1488,8 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </ng-template>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { type: i1$1.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarComponent, decorators: [{
+    `, 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: "component", type: i5.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoPanelbar',
@@ -1556,9 +1552,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-panelbar']
-            }, {
-                type: HostBinding,
-                args: ['class.k-pos-relative']
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabIndex']
@@ -1759,12 +1752,12 @@ class SplitterPaneComponent {
         this.renderer.setStyle(element, 'order', this.order);
     }
 }
-SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", separatorLabel: "separatorLabel", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
+SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", separatorLabel: "separatorLabel", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
         <ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
         <div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterPaneComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSplitterPane',
@@ -2004,9 +1997,9 @@ class SplitterService {
         }
     }
 }
-SplitterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-SplitterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterService, decorators: [{
+SplitterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+SplitterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -2211,8 +2204,8 @@ class SplitterBarComponent {
         }
     }
 }
-SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
+SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i5.DraggableDirective, host: true }, { token: i1.LocalizationService }, { token: SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
         <div *ngIf="shouldShowIcon('prev')" class="k-collapse-prev" (click)="togglePrevious()">
             <kendo-icon-wrapper
                 size="xsmall"
@@ -2228,8 +2221,8 @@ SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [svgIcon]="nextSVGArrowClass()"
             ></kendo-icon-wrapper>
         </div>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterBarComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
@@ -2252,7 +2245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     `
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$1.DraggableDirective, decorators: [{
+        return [{ type: i5.DraggableDirective, decorators: [{
                         type: Host
                     }] }, { type: i1.LocalizationService }, { type: SplitterService }, { type: i0.ElementRef }, { type: i0.Renderer2 }];
     }, propDecorators: { ariaRole: [{
@@ -2421,8 +2414,8 @@ class SplitterComponent {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
 }
-SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SplitterComponent, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
+SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterComponent, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
         SplitterService,
         LocalizationService,
         {
@@ -2447,8 +2440,8 @@ SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
           }">
         </kendo-splitter-bar>
       </ng-container>
-    `, isInline: true, components: [{ type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterComponent, decorators: [{
+    `, 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: "directive", type: i5.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSplitter',
@@ -2556,9 +2549,9 @@ class TabContentDirective {
         this.templateRef = templateRef;
     }
 }
-TabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TabContentDirective, selector: "[kendoTabContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabContentDirective, decorators: [{
+TabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TabContentDirective, selector: "[kendoTabContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTabContent]'
@@ -2605,9 +2598,9 @@ class TabTitleDirective {
         this.templateRef = templateRef;
     }
 }
-TabTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TabTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TabTitleDirective, selector: "[kendoTabTitle]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTitleDirective, decorators: [{
+TabTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TabTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TabTitleDirective, selector: "[kendoTabTitle]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTabTitle]'
@@ -2622,9 +2615,9 @@ class TabTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-TabTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-TabTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TabTemplateDirective, selector: "[kendoTabTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabTemplateDirective, decorators: [{
+TabTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TabTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TabTemplateDirective, selector: "[kendoTabTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTabTemplate]'
@@ -2662,9 +2655,9 @@ class TabStripTabComponent {
         return this._tabDirective.first;
     }
 }
-TabStripTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripTabComponent, decorators: [{
+TabStripTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabStripTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: { title: "title", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", selected: "selected", closable: "closable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, queries: [{ propertyName: "_tabDirective", predicate: TabTemplateDirective }, { propertyName: "_tabContent", predicate: TabContentDirective }, { propertyName: "_tabTitleDirective", predicate: TabTitleDirective }], exportAs: ["kendoTabStripTab"], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripTabComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoTabStripTab',
@@ -2979,9 +2972,9 @@ class TabStripService {
         return selectedIndex + 1;
     }
 }
-TabStripService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TabStripService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripService, decorators: [{
+TabStripService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+TabStripService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }]; } });
 
@@ -3179,9 +3172,9 @@ class ScrollService {
         this.scrollButtonActiveStateChange.next({ buttonType, active });
     }
 }
-ScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollService, decorators: [{
+ScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -3219,167 +3212,6 @@ class TabScrollEvent extends PreventableEvent$1 {
     }
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * @hidden
- */
-class TabStripScrollableButtonComponent {
-    constructor(host, renderer, ngZone, localization) {
-        this.host = host;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.localization = localization;
-        this.prev = false;
-        this.tabScroll = new EventEmitter();
-        this.onClick = new EventEmitter();
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.caretAltUpIcon = caretAltUpIcon;
-        this.caretAltDownIcon = caretAltDownIcon;
-        this.subs = new Subscription();
-        this.clickHandler = (scrollEvent) => {
-            const tabStripScrollEvent = this.emitScrollEvent(scrollEvent);
-            const isTabStripScrollEventPrevented = tabStripScrollEvent.isDefaultPrevented();
-            if (isTabStripScrollEventPrevented) {
-                return;
-            }
-            const buttonType = this.prev ? 'prev' : 'next';
-            this.onClick.emit(buttonType);
-        };
-    }
-    get prevClass() {
-        return this.prev;
-    }
-    get nextClass() {
-        return !this.prev;
-    }
-    get hostBoundingClientRect() {
-        return this.host.nativeElement.getBoundingClientRect();
-    }
-    get iconClass() {
-        return this.scrollButtonIconClass;
-    }
-    get customIconClass() {
-        return this.customScrollButtonIconClass;
-    }
-    get svgIcon() {
-        return this.scrollButtonSVGIcon;
-    }
-    ngAfterViewInit() {
-        this.ngZone.runOutsideAngular(() => {
-            this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', this.clickHandler));
-        });
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    toggle(show) {
-        this.renderer[show ? 'removeClass' : 'addClass'](this.host.nativeElement, HIDDEN_CLASS);
-    }
-    get scrollButtonIconClass() {
-        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ?
-            !this.localization.rtl ?
-                DIRECTION_CLASSES.left :
-                DIRECTION_CLASSES.right :
-            DIRECTION_CLASSES.up;
-        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ?
-            !this.localization.rtl ?
-                DIRECTION_CLASSES.right :
-                DIRECTION_CLASSES.left :
-            DIRECTION_CLASSES.down;
-        if (typeof this.scrollable === 'object') {
-            const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
-            const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
-            if (prevIcon && this.prev) {
-                return prevIcon;
-            }
-            else if (nextIcon && !this.prev) {
-                return nextIcon;
-            }
-        }
-    }
-    get customScrollButtonIconClass() {
-        if (typeof this.scrollable === 'object') {
-            const prevIcon = this.scrollable.prevButtonIcon;
-            const nextIcon = this.scrollable.nextButtonIcon;
-            if (prevIcon && this.prev) {
-                return `k-icon ${prevIcon}`;
-            }
-            if (nextIcon && !this.prev) {
-                return `k-icon ${nextIcon}`;
-            }
-        }
-    }
-    get scrollButtonSVGIcon() {
-        const defaultPrevSVGIcon = isTablistHorizontal(this.tabPosition) ?
-            !this.localization.rtl ?
-                this.caretAltLeftIcon :
-                this.caretAltRightIcon :
-            this.caretAltUpIcon;
-        const defaultNextSVGIcon = isTablistHorizontal(this.tabPosition) ?
-            !this.localization.rtl ?
-                this.caretAltRightIcon :
-                this.caretAltLeftIcon :
-            this.caretAltDownIcon;
-        if (typeof this.scrollable === 'object') {
-            const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : defaultPrevSVGIcon;
-            const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : defaultNextSVGIcon;
-            if (prevIcon || nextIcon) {
-                return this.prev ? prevIcon : nextIcon;
-            }
-        }
-    }
-    emitScrollEvent(event) {
-        const scrollEvent = new TabScrollEvent({
-            originalEvent: event
-        });
-        this.tabScroll.emit(scrollEvent);
-        return scrollEvent;
-    }
-}
-TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            [name]="iconClass"
-            [customFontClass]="customIconClass"
-            [svgIcon]="svgIcon"
-            innerCssClass="k-button-icon"
-        >
-        </kendo-icon-wrapper>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: `
-        <kendo-icon-wrapper
-            [name]="iconClass"
-            [customFontClass]="customIconClass"
-            [svgIcon]="svgIcon"
-            innerCssClass="k-button-icon"
-        >
-        </kendo-icon-wrapper>
-    `,
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[kendoTabStripScrollableButton]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { prevClass: [{
-                type: HostBinding,
-                args: ['class.k-tabstrip-prev']
-            }], nextClass: [{
-                type: HostBinding,
-                args: ['class.k-tabstrip-next']
-            }], prev: [{
-                type: Input
-            }], tabPosition: [{
-                type: Input
-            }], scrollable: [{
-                type: Input
-            }], tabScroll: [{
-                type: Output
-            }], onClick: [{
-                type: Output
-            }] } });
-
 /**
  * @hidden
  */
@@ -3443,8 +3275,8 @@ class TabComponent {
         this.tabClose.emit(closeArgs);
     }
 }
-TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
+TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabComponent, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
         <ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
             <span class="k-link" *ngIf="!tab.tabTitle">{{ tab.title }}</span>
             <span class="k-link" *ngIf="tab.tabTitle">
@@ -3470,8 +3302,8 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             (click)="closeTab(index)"
             class="k-remove-tab k-icon-button"
         ></button>
-    `, isInline: true, components: [{ type: i2$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"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -3549,9 +3381,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  */
 class TabStripMessages extends ComponentMessages {
 }
-TabStripMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TabStripMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TabStripMessages, selector: "kendo-tabstrip-messages-base", inputs: { closeTitle: "closeTitle", previousTabButton: "previousTabButton", nextTabButton: "nextTabButton" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripMessages, decorators: [{
+TabStripMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TabStripMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TabStripMessages, selector: "kendo-tabstrip-messages-base", inputs: { closeTitle: "closeTitle", previousTabButton: "previousTabButton", nextTabButton: "nextTabButton" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3574,14 +3406,14 @@ class LocalizedTabStripMessagesDirective extends TabStripMessages {
         this.service = service;
     }
 }
-LocalizedTabStripMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedTabStripMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedTabStripMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]", providers: [
+LocalizedTabStripMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedTabStripMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedTabStripMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]", providers: [
         {
             provide: TabStripMessages,
             useExisting: forwardRef(() => LocalizedTabStripMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedTabStripMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedTabStripMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -3594,96 +3426,257 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}).
+ * @hidden
  */
-class TabStripComponent {
-    constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
-        this.localization = localization;
+class TabStripScrollableButtonComponent {
+    constructor(host, renderer, ngZone, localization) {
+        this.host = host;
         this.renderer = renderer;
-        this.wrapper = wrapper;
-        this.tabstripService = tabstripService;
-        this.scrollService = scrollService;
         this.ngZone = ngZone;
-        /**
-         * Enables the tab animation.
-         *
-         * @default true
-         */
-        this.animate = true;
-        /**
-         * Sets the position of the tabs. Defaults to `top`.
-         *
-         * @default 'top'
-         */
-        this.tabPosition = 'top';
-        /**
-         * When set to `true`, the component renders all tabs and they are persisted in the DOM.
-         * By default, `keepTabContent` is `false`.
-         *
-         * @default false
-         */
-        this.keepTabContent = false;
-        /**
-         * When set to `true`, a close button will be rendered inside each tab.
-         * By default, `closable` is `false`.
-         *
-         * @default false
-         */
-        this.closable = false;
-        /**
-         * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
-         */
-        this.closeIcon = 'x';
-        /**
-         * Determines whether the content associated with each tab will be rendered.
-         *
-         * @default true
-         */
-        this.showContentArea = true;
-        /**
-         * Fires each time the user selects a tab ([see example]({% slug overview_tabstrip %}#toc-basic-usage)).
-         * The event data contains the index of the selected tab and its title.
-         */
-        this.tabSelect = new EventEmitter();
-        /**
-         * Fires each time the user closes a tab.
-         * The event data contains the index of the closed tab and its instance.
-         */
-        this.tabClose = new EventEmitter();
-        /**
-         * Fires each time the user scrolls the TabStrip list.
-         * The event is preventable.
-         */
+        this.localization = localization;
+        this.prev = false;
         this.tabScroll = new EventEmitter();
-        this.hostClasses = true;
-        /**
-         * A query list of all declared tabs.
-         */
-        this.tabs = new QueryList();
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        this._scrollableSettings = normalizeScrollableSettings(false);
-        this.subscriptions = new Subscription();
-        this.subscriptionsArePresent = false;
-        this.tabStripId = guid();
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.tabstripService.owner = this;
-        this.scrollService.owner = this;
-        this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-            if (this.hasScrollButtons) {
-                const action = activeButtonSettings.active ? 'remove' : 'add';
-                this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
-            }
-        }));
-    }
-    /**
-     * Sets the height of the TabStrip.
-     */
-    set height(value) {
+        this.onClick = new EventEmitter();
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltUpIcon = caretAltUpIcon;
+        this.caretAltDownIcon = caretAltDownIcon;
+        this.subs = new Subscription();
+        this.clickHandler = (scrollEvent) => {
+            const tabStripScrollEvent = this.emitScrollEvent(scrollEvent);
+            const isTabStripScrollEventPrevented = tabStripScrollEvent.isDefaultPrevented();
+            if (isTabStripScrollEventPrevented) {
+                return;
+            }
+            const buttonType = this.prev ? 'prev' : 'next';
+            this.onClick.emit(buttonType);
+        };
+    }
+    get prevClass() {
+        return this.prev;
+    }
+    get nextClass() {
+        return !this.prev;
+    }
+    get hostBoundingClientRect() {
+        return this.host.nativeElement.getBoundingClientRect();
+    }
+    get iconClass() {
+        return this.scrollButtonIconClass;
+    }
+    get customIconClass() {
+        return this.customScrollButtonIconClass;
+    }
+    get svgIcon() {
+        return this.scrollButtonSVGIcon;
+    }
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', this.clickHandler));
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    toggle(show) {
+        this.renderer[show ? 'removeClass' : 'addClass'](this.host.nativeElement, HIDDEN_CLASS);
+    }
+    get scrollButtonIconClass() {
+        const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                DIRECTION_CLASSES.left :
+                DIRECTION_CLASSES.right :
+            DIRECTION_CLASSES.up;
+        const defaultNextIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                DIRECTION_CLASSES.right :
+                DIRECTION_CLASSES.left :
+            DIRECTION_CLASSES.down;
+        if (typeof this.scrollable === 'object') {
+            const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
+            const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
+            if (prevIcon && this.prev) {
+                return prevIcon;
+            }
+            else if (nextIcon && !this.prev) {
+                return nextIcon;
+            }
+        }
+    }
+    get customScrollButtonIconClass() {
+        if (typeof this.scrollable === 'object') {
+            const prevIcon = this.scrollable.prevButtonIcon;
+            const nextIcon = this.scrollable.nextButtonIcon;
+            if (prevIcon && this.prev) {
+                return `k-icon ${prevIcon}`;
+            }
+            if (nextIcon && !this.prev) {
+                return `k-icon ${nextIcon}`;
+            }
+        }
+    }
+    get scrollButtonSVGIcon() {
+        const defaultPrevSVGIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                this.caretAltLeftIcon :
+                this.caretAltRightIcon :
+            this.caretAltUpIcon;
+        const defaultNextSVGIcon = isTablistHorizontal(this.tabPosition) ?
+            !this.localization.rtl ?
+                this.caretAltRightIcon :
+                this.caretAltLeftIcon :
+            this.caretAltDownIcon;
+        if (typeof this.scrollable === 'object') {
+            const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : defaultPrevSVGIcon;
+            const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : defaultNextSVGIcon;
+            if (prevIcon || nextIcon) {
+                return this.prev ? prevIcon : nextIcon;
+            }
+        }
+    }
+    emitScrollEvent(event) {
+        const scrollEvent = new TabScrollEvent({
+            originalEvent: event
+        });
+        this.tabScroll.emit(scrollEvent);
+        return scrollEvent;
+    }
+}
+TabStripScrollableButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TabStripScrollableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [customFontClass]="customIconClass"
+            [svgIcon]="svgIcon"
+            innerCssClass="k-button-icon"
+        >
+        </kendo-icon-wrapper>
+    `, isInline: true, dependencies: [{ kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [customFontClass]="customIconClass"
+            [svgIcon]="svgIcon"
+            innerCssClass="k-button-icon"
+        >
+        </kendo-icon-wrapper>
+    `,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoTabStripScrollableButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { prevClass: [{
+                type: HostBinding,
+                args: ['class.k-tabstrip-prev']
+            }], nextClass: [{
+                type: HostBinding,
+                args: ['class.k-tabstrip-next']
+            }], prev: [{
+                type: Input
+            }], tabPosition: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], tabScroll: [{
+                type: Output
+            }], onClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}).
+ */
+class TabStripComponent {
+    constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
+        this.localization = localization;
+        this.renderer = renderer;
+        this.wrapper = wrapper;
+        this.tabstripService = tabstripService;
+        this.scrollService = scrollService;
+        this.ngZone = ngZone;
+        /**
+         * Enables the tab animation.
+         *
+         * @default true
+         */
+        this.animate = true;
+        /**
+         * Sets the position of the tabs. Defaults to `top`.
+         *
+         * @default 'top'
+         */
+        this.tabPosition = 'top';
+        /**
+         * When set to `true`, the component renders all tabs and they are persisted in the DOM.
+         * By default, `keepTabContent` is `false`.
+         *
+         * @default false
+         */
+        this.keepTabContent = false;
+        /**
+         * When set to `true`, a close button will be rendered inside each tab.
+         * By default, `closable` is `false`.
+         *
+         * @default false
+         */
+        this.closable = false;
+        /**
+         * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
+         */
+        this.closeIcon = 'x';
+        /**
+         * Determines whether the content associated with each tab will be rendered.
+         *
+         * @default true
+         */
+        this.showContentArea = true;
+        /**
+         * Fires each time the user selects a tab ([see example]({% slug overview_tabstrip %}#toc-basic-usage)).
+         * The event data contains the index of the selected tab and its title.
+         */
+        this.tabSelect = new EventEmitter();
+        /**
+         * Fires each time the user closes a tab.
+         * The event data contains the index of the closed tab and its instance.
+         */
+        this.tabClose = new EventEmitter();
+        /**
+         * Fires each time the user scrolls the TabStrip list.
+         * The event is preventable.
+         */
+        this.tabScroll = new EventEmitter();
+        this.hostClasses = true;
+        /**
+         * A query list of all declared tabs.
+         */
+        this.tabs = new QueryList();
+        /**
+         * @hidden
+         */
+        this.showLicenseWatermark = false;
+        this._scrollableSettings = normalizeScrollableSettings(false);
+        this.subscriptions = new Subscription();
+        this.subscriptionsArePresent = false;
+        this.tabStripId = guid();
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.tabstripService.owner = this;
+        this.scrollService.owner = this;
+        this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
+            if (this.hasScrollButtons) {
+                const action = activeButtonSettings.active ? 'remove' : 'add';
+                this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
+            }
+        }));
+    }
+    /**
+     * Sets the height of the TabStrip.
+     */
+    set height(value) {
         this._height = value;
         this.renderer.setStyle(this.wrapper.nativeElement, 'height', value);
     }
@@ -3756,8 +3749,10 @@ class TabStripComponent {
         });
         this.initDomEvents();
         this.tabsChangesSub = this.tabs.changes.subscribe(() => {
-            this.toggleScrollButtons(this.scrollService.tabsOverflow);
-            this.scrollService.toggleScrollButtonsState();
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.toggleScrollButtons(this.scrollService.tabsOverflow);
+                this.scrollService.toggleScrollButtonsState();
+            });
         });
     }
     ngOnChanges(changes) {
@@ -3976,8 +3971,8 @@ class TabStripComponent {
         });
     }
 }
-TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
+TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
         TabStripService,
         ScrollService,
         LocalizationService,
@@ -4075,7 +4070,6 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                     role="tabpanel"
                     [id]="getTabPanelId(i)"
                     [attr.aria-hidden]="!tab.selected"
-                    [attr.aria-expanded]="tab.selected"
                     [attr.aria-labelledby]="getTabId(i)"
                     [attr.aria-disabled]="tab.disabled"
                 >
@@ -4086,7 +4080,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </ng-template>
         <kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, components: [{ type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i1$1.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+    `, 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: i5.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: i5.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { kind: "directive", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { kind: "component", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }], animations: [
         trigger('state', [
             state('active', style({ opacity: 1 })),
             transition('* => active', [
@@ -4095,7 +4089,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             ])
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -4208,7 +4202,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     role="tabpanel"
                     [id]="getTabPanelId(i)"
                     [attr.aria-hidden]="!tab.selected"
-                    [attr.aria-expanded]="tab.selected"
                     [attr.aria-labelledby]="getTabId(i)"
                     [attr.aria-disabled]="tab.disabled"
                 >
@@ -4303,14 +4296,14 @@ class TabStripCustomMessagesComponent extends TabStripMessages {
         return true;
     }
 }
-TabStripCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TabStripCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripCustomMessagesComponent, selector: "kendo-tabstrip-messages", providers: [
+TabStripCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TabStripCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripCustomMessagesComponent, selector: "kendo-tabstrip-messages", providers: [
         {
             provide: TabStripMessages,
             useExisting: forwardRef(() => TabStripCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -4336,9 +4329,9 @@ class DrawerTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-DrawerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DrawerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DrawerTemplateDirective, selector: "[kendoDrawerTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerTemplateDirective, decorators: [{
+DrawerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DrawerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerTemplateDirective, selector: "[kendoDrawerTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDrawerTemplate]'
@@ -4359,9 +4352,9 @@ class DrawerItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-DrawerItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DrawerItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DrawerItemTemplateDirective, selector: "[kendoDrawerItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerItemTemplateDirective, decorators: [{
+DrawerItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DrawerItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerItemTemplateDirective, selector: "[kendoDrawerItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDrawerItemTemplate]'
@@ -4382,9 +4375,9 @@ class DrawerHeaderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-DrawerHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DrawerHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DrawerHeaderTemplateDirective, selector: "[kendoDrawerHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerHeaderTemplateDirective, decorators: [{
+DrawerHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DrawerHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerHeaderTemplateDirective, selector: "[kendoDrawerHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDrawerHeaderTemplate]'
@@ -4405,9 +4398,9 @@ class DrawerFooterTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-DrawerFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DrawerFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DrawerFooterTemplateDirective, selector: "[kendoDrawerFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerFooterTemplateDirective, decorators: [{
+DrawerFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DrawerFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerFooterTemplateDirective, selector: "[kendoDrawerFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDrawerFooterTemplate]'
@@ -4511,9 +4504,9 @@ class DrawerService {
         this.selectedIndices = [];
     }
 }
-DrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerService, decorators: [{
+DrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerService, decorators: [{
             type: Injectable
         }] });
 
@@ -4738,8 +4731,8 @@ class DrawerItemComponent {
         return this.viewItem.item;
     }
 }
-DrawerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerItemComponent, deps: [{ token: DrawerService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: { viewItem: "viewItem", index: "index", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
+DrawerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerItemComponent, deps: [{ token: DrawerService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: { viewItem: "viewItem", index: "index", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
         <ng-template *ngIf="itemTemplate; else defaultTemplate"
             [ngTemplateOutlet]="itemTemplate"
             [ngTemplateOutletContext]="{
@@ -4762,6 +4755,7 @@ DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-icon-wrapper>
 
                 <span class="k-item-text">{{ item.text }}</span>
+                <span *ngIf="viewItem.hasChildren" class="k-spacer"></span>
                 <kendo-icon-wrapper
                     *ngIf="viewItem.hasChildren"
                     [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
@@ -4781,8 +4775,8 @@ DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerItemComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -4810,6 +4804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </kendo-icon-wrapper>
 
                 <span class="k-item-text">{{ item.text }}</span>
+                <span *ngIf="viewItem.hasChildren" class="k-spacer"></span>
                 <kendo-icon-wrapper
                     *ngIf="viewItem.hasChildren"
                     [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
@@ -4953,9 +4948,9 @@ class DrawerListComponent {
         }
     }
 }
-DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerListComponent, deps: [{ token: DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                role=\"menuitem\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                role=\"separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerListComponent, decorators: [{
+DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerListComponent, deps: [{ token: DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                role=\"menuitem\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                role=\"separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -5262,8 +5257,8 @@ class DrawerComponent {
         return player;
     }
 }
-DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AnimationBuilder }, { token: i1.LocalizationService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DrawerComponent, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
+DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.AnimationBuilder }, { token: i1.LocalizationService }, { token: DrawerService }], target: i0.ɵɵFactoryTarget.Component });
+DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerComponent, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         DrawerService,
         {
@@ -5299,8 +5294,8 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         </div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, components: [{ type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }, { type: i1$1.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoDrawer',
@@ -5344,7 +5339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.AnimationBuilder }, { type: i1.LocalizationService }, { type: DrawerService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.AnimationBuilder }, { type: i1.LocalizationService }, { type: DrawerService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-drawer']
             }], startPositionClass: [{
@@ -5453,8 +5448,8 @@ class DrawerContainerComponent {
         }
     }
 }
-DrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerContainerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DrawerContainerComponent, selector: "kendo-drawer-container", host: { properties: { "class.k-drawer-container": "this.hostClass", "class.k-drawer-overlay": "this.overlayClass", "class.k-drawer-mini": "this.miniClass", "class.k-drawer-push": "this.pushClass", "class.k-drawer-expanded": "this.isExpandedClass", "attr.dir": "this.direction" } }, providers: [
+DrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerContainerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerContainerComponent, selector: "kendo-drawer-container", host: { properties: { "class.k-drawer-container": "this.hostClass", "class.k-drawer-overlay": "this.overlayClass", "class.k-drawer-mini": "this.miniClass", "class.k-drawer-push": "this.pushClass", "class.k-drawer-expanded": "this.isExpandedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -5463,8 +5458,8 @@ DrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
     ], queries: [{ propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], ngImport: i0, template: `
         <div class="k-overlay" *ngIf="overlay" (click)="closeDrawer()"></div>
         <ng-content></ng-content>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerContainerComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-drawer-container',
@@ -5511,11 +5506,11 @@ class DrawerContentComponent {
         this.hostClasses = true;
     }
 }
-DrawerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DrawerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DrawerContentComponent, selector: "kendo-drawer-content", host: { properties: { "class.k-drawer-content": "this.hostClasses" } }, ngImport: i0, template: `
+DrawerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DrawerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerContentComponent, selector: "kendo-drawer-content", host: { properties: { "class.k-drawer-content": "this.hostClasses" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-drawer-content',
@@ -5552,9 +5547,9 @@ class StepperStepTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-StepperStepTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperStepTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-StepperStepTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: StepperStepTemplateDirective, selector: "[kendoStepperStepTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperStepTemplateDirective, decorators: [{
+StepperStepTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperStepTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+StepperStepTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: StepperStepTemplateDirective, selector: "[kendoStepperStepTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperStepTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoStepperStepTemplate]'
@@ -5575,9 +5570,9 @@ class StepperLabelTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-StepperLabelTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperLabelTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-StepperLabelTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: StepperLabelTemplateDirective, selector: "[kendoStepperLabelTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperLabelTemplateDirective, decorators: [{
+StepperLabelTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperLabelTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+StepperLabelTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: StepperLabelTemplateDirective, selector: "[kendoStepperLabelTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperLabelTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoStepperLabelTemplate]'
@@ -5598,9 +5593,9 @@ class StepperIndicatorTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-StepperIndicatorTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-StepperIndicatorTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: StepperIndicatorTemplateDirective, selector: "[kendoStepperIndicatorTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperIndicatorTemplateDirective, decorators: [{
+StepperIndicatorTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+StepperIndicatorTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: StepperIndicatorTemplateDirective, selector: "[kendoStepperIndicatorTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperIndicatorTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoStepperIndicatorTemplate]'
@@ -5629,7 +5624,7 @@ handlersRTL[Keys.ArrowRight] = 'left';
 /**
  * @hidden
  */
-class StepperActivateEvent$1 extends PreventableEvent$1 {
+let StepperActivateEvent$1 = class StepperActivateEvent extends PreventableEvent$1 {
     /**
      * @hidden
      */
@@ -5637,7 +5632,7 @@ class StepperActivateEvent$1 extends PreventableEvent$1 {
         super();
         Object.assign(this, args);
     }
-}
+};
 /**
  * @hidden
  */
@@ -5758,9 +5753,9 @@ class StepperService {
         return this.owner.orientation === 'horizontal';
     }
 }
-StepperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
-StepperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperService, decorators: [{
+StepperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
+StepperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; } });
 
@@ -5941,8 +5936,8 @@ class StepperStepComponent {
         }
     }
 }
-StepperStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperStepComponent, deps: [{ token: StepperService }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+StepperStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperStepComponent, deps: [{ token: StepperService }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: { step: "step", index: "index", current: "current", type: "type", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, host: { properties: { "class.k-step-error": "this.errorStepClass", "class.k-step-success": "this.successStepClass" } }, viewQueries: [{ propertyName: "stepLink", first: true, predicate: ["stepLink"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <a href='#' class='k-step-link' #stepLink
             [attr.tabindex]='tabIndexAttr'
             [attr.title]='step.label'
@@ -6000,8 +5995,8 @@ StepperStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </span>
             </ng-container>
         </a>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperStepComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperStepComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -6179,9 +6174,9 @@ class StepperListComponent {
         }
     }
 }
-StepperListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-StepperListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StepperListComponent, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        <ng-container *ngFor='let step of steps; let idx = index'>\n            <li kendoStepperStep\n                [attr.data-kendo-stepper-index]='idx'\n                [type]='stepType'\n                [step]='step'\n                [index]='idx'\n                [current]='currentStep'\n                [successIcon]='successIcon'\n                [successSVGIcon]='successSVGIcon'\n                [errorIcon]='errorIcon'\n                [errorSVGIcon]='errorSVGIcon'\n                [svgIcon]='svgIcon'\n                [indicatorTemplate]='indicatorTemplate'\n                [labelTemplate]='labelTemplate'\n                [stepTemplate]='stepTemplate'\n                class='k-step'\n                [class.k-step-first]='idx === 0'\n                [class.k-step-last]='idx === steps.length - 1'\n                [class.k-step-done]='idx < currentStep'\n                [class.k-step-current]='idx === currentStep'\n                [class.k-step-optional]='step.optional'\n                [class.k-disabled]='step.disabled'\n                [class.k-focus]='idx === focusedStep'\n                [ngClass]='step.cssClass'\n                [ngStyle]='step.cssStyle'\n                [style.max-width.%] = 'maxStepWidth'\n                [style.max-height.%] = 'maxStepHeight'\n            >\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperListComponent, decorators: [{
+StepperListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: StepperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+StepperListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepperListComponent, selector: "[kendoStepperList]", inputs: { linear: "linear", stepType: "stepType", orientation: "orientation", currentStep: "currentStep", steps: "steps", successIcon: "successIcon", successSVGIcon: "successSVGIcon", errorIcon: "errorIcon", errorSVGIcon: "errorSVGIcon", svgIcon: "svgIcon", indicatorTemplate: "indicatorTemplate", labelTemplate: "labelTemplate", stepTemplate: "stepTemplate" }, outputs: { listKeydown: "listKeydown", listClick: "listClick" }, ngImport: i0, template: "\n        <ng-container *ngFor='let step of steps; let idx = index'>\n            <li kendoStepperStep\n                [attr.data-kendo-stepper-index]='idx'\n                [type]='stepType'\n                [step]='step'\n                [index]='idx'\n                [current]='currentStep'\n                [successIcon]='successIcon'\n                [successSVGIcon]='successSVGIcon'\n                [errorIcon]='errorIcon'\n                [errorSVGIcon]='errorSVGIcon'\n                [svgIcon]='svgIcon'\n                [indicatorTemplate]='indicatorTemplate'\n                [labelTemplate]='labelTemplate'\n                [stepTemplate]='stepTemplate'\n                class='k-step'\n                [class.k-step-first]='idx === 0'\n                [class.k-step-last]='idx === steps.length - 1'\n                [class.k-step-done]='idx < currentStep'\n                [class.k-step-current]='idx === currentStep'\n                [class.k-step-optional]='step.optional'\n                [class.k-disabled]='step.disabled'\n                [class.k-focus]='idx === focusedStep'\n                [ngClass]='step.cssClass'\n                [ngStyle]='step.cssStyle'\n                [style.max-width.%] = 'maxStepWidth'\n                [style.max-height.%] = 'maxStepHeight'\n            >\n            </li>\n        </ng-container>\n    ", 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StepperStepComponent, selector: "[kendoStepperStep]", inputs: ["step", "index", "current", "type", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -6256,9 +6251,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  */
 class StepperMessages extends ComponentMessages {
 }
-StepperMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-StepperMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: StepperMessages, selector: "kendo-stepper-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperMessages, decorators: [{
+StepperMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+StepperMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: StepperMessages, selector: "kendo-stepper-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -6277,14 +6272,14 @@ class LocalizedStepperMessagesDirective extends StepperMessages {
         this.service = service;
     }
 }
-LocalizedStepperMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedStepperMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedStepperMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    ", providers: [
+LocalizedStepperMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedStepperMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedStepperMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    ", providers: [
         {
             provide: StepperMessages,
             useExisting: forwardRef(() => LocalizedStepperMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedStepperMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedStepperMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -6513,8 +6508,8 @@ class StepperComponent {
         return this.orientation === 'horizontal';
     }
 }
-StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: StepperService }], target: i0.ɵɵFactoryTarget.Component });
-StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StepperComponent, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", svgIcon: "svgIcon", successSVGIcon: "successSVGIcon", errorSVGIcon: "errorSVGIcon", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
+StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: StepperService }], target: i0.ɵɵFactoryTarget.Component });
+StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepperComponent, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", svgIcon: "svgIcon", successSVGIcon: "successSVGIcon", errorSVGIcon: "errorSVGIcon", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
         LocalizationService,
         StepperService,
         {
@@ -6559,8 +6554,8 @@ StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [value]='currentStep'
             [ngStyle]='progressBarStyling'>
         </kendo-progressbar>
-    `, isInline: true, components: [{ type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }], directives: [{ type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n      [kendoStepperLocalizedMessages]\n    " }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoStepper',
@@ -6691,14 +6686,14 @@ class StepperCustomMessagesComponent extends StepperMessages {
         return true;
     }
 }
-StepperCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-StepperCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StepperCustomMessagesComponent, selector: "kendo-stepper-messages", providers: [
+StepperCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+StepperCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepperCustomMessagesComponent, selector: "kendo-stepper-messages", providers: [
         {
             provide: StepperMessages,
             useExisting: forwardRef(() => StepperCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -6717,9 +6712,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, selector: "kendoAvatarMessages", inputs: { avatarAlt: "avatarAlt" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, selector: "kendoAvatarMessages", inputs: { avatarAlt: "avatarAlt" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -6739,14 +6734,14 @@ class LocalizedAvatarMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedAvatarMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedAvatarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedAvatarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]", providers: [
+LocalizedAvatarMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedAvatarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedAvatarMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedAvatarMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedAvatarMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedAvatarMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -6986,8 +6981,8 @@ class AvatarComponent {
         return this.localization.get(key);
     }
 }
-AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AvatarComponent, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, providers: [
+AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AvatarComponent, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -7023,8 +7018,8 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 </kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -7128,14 +7123,14 @@ class AvatarCustomMessagesComponent extends Messages {
         return true;
     }
 }
-AvatarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-AvatarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AvatarCustomMessagesComponent, selector: "kendo-avatar-messages", providers: [
+AvatarCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AvatarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AvatarCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AvatarCustomMessagesComponent, selector: "kendo-avatar-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => AvatarCustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AvatarCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -7192,8 +7187,8 @@ class CardComponent {
         }
     }
 }
-CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CardComponent, selector: "kendo-card", inputs: { orientation: "orientation", width: "width" }, host: { properties: { "class.k-card": "this.hostClass", "style.width": "this.widthStyle", "class.k-card-vertical": "this.vertical", "class.k-card-horizontal": "this.horizontal", "attr.dir": "this.direction" } }, providers: [
+CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "kendo-card", inputs: { orientation: "orientation", width: "width" }, host: { properties: { "class.k-card": "this.hostClass", "style.width": "this.widthStyle", "class.k-card-vertical": "this.vertical", "class.k-card-horizontal": "this.horizontal", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -7202,7 +7197,7 @@ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
     ], ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-card',
@@ -7246,11 +7241,11 @@ class CardHeaderComponent {
         this.hostClass = true;
     }
 }
-CardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CardHeaderComponent, selector: "kendo-card-header", host: { properties: { "class.k-card-header": "this.hostClass" } }, ngImport: i0, template: `
+CardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardHeaderComponent, selector: "kendo-card-header", host: { properties: { "class.k-card-header": "this.hostClass" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-card-header',
@@ -7271,11 +7266,11 @@ class CardBodyComponent {
         this.hostClass = true;
     }
 }
-CardBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CardBodyComponent, selector: "kendo-card-body", host: { properties: { "class.k-card-body": "this.hostClass" } }, ngImport: i0, template: `
+CardBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardBodyComponent, selector: "kendo-card-body", host: { properties: { "class.k-card-body": "this.hostClass" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardBodyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-card-body',
@@ -7296,11 +7291,11 @@ class CardFooterComponent {
         this.hostClass = true;
     }
 }
-CardFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CardFooterComponent, selector: "kendo-card-footer", host: { properties: { "class.k-card-footer": "this.hostClass" } }, ngImport: i0, template: `
+CardFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardFooterComponent, selector: "kendo-card-footer", host: { properties: { "class.k-card-footer": "this.hostClass" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-card-footer',
@@ -7381,8 +7376,8 @@ class CardActionsComponent {
         this.action.emit(action);
     }
 }
-CardActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CardActionsComponent, selector: "kendo-card-actions", inputs: { orientation: "orientation", layout: "layout", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.k-actions": "this.hostClass", "class.k-card-actions": "this.hostClass", "class.k-actions-stretched": "this.stretchedClass", "class.k-actions-start": "this.startClass", "class.k-actions-end": "this.endClass", "class.k-actions-center": "this.centerClass", "class.k-actions-vertical": "this.verticalClass", "class.k-actions-horizontal": "this.horizontalClass" } }, ngImport: i0, template: `
+CardActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardActionsComponent, selector: "kendo-card-actions", inputs: { orientation: "orientation", layout: "layout", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.k-actions": "this.hostClass", "class.k-card-actions": "this.hostClass", "class.k-actions-stretched": "this.stretchedClass", "class.k-actions-start": "this.startClass", "class.k-actions-end": "this.endClass", "class.k-actions-center": "this.centerClass", "class.k-actions-vertical": "this.verticalClass", "class.k-actions-horizontal": "this.horizontalClass" } }, ngImport: i0, template: `
         <ng-content *ngIf="!actionsArray && !actionsTemplate"></ng-content>
 
         <ng-container *ngIf="actionsArray">
@@ -7403,8 +7398,8 @@ CardActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </ng-container>
 
         <ng-template [ngTemplateOutlet]="actionsTemplate" *ngIf="actionsTemplate"></ng-template>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardActionsComponent, decorators: [{
+    `, 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-card-actions',
@@ -7487,9 +7482,9 @@ class CardSeparatorDirective {
         return this.orientation === 'horizontal';
     }
 }
-CardSeparatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CardSeparatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CardSeparatorDirective, selector: "[kendoCardSeparator]", inputs: { color: "color", orientation: "orientation" }, host: { properties: { "class.k-card-separator": "this.hostClass", "class.k-separator-vertical": "this.verticalClass", "class.k-separator-horizontal": "this.horizontalClass", "style.color": "this.color" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardSeparatorDirective, decorators: [{
+CardSeparatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CardSeparatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardSeparatorDirective, selector: "[kendoCardSeparator]", inputs: { color: "color", orientation: "orientation" }, host: { properties: { "class.k-card-separator": "this.hostClass", "class.k-separator-vertical": "this.verticalClass", "class.k-separator-horizontal": "this.horizontalClass", "style.color": "this.color" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardSeparatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCardSeparator]'
@@ -7520,9 +7515,9 @@ class CardTitleDirective {
         this.hostClass = true;
     }
 }
-CardTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CardTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CardTitleDirective, selector: "[kendoCardTitle]", host: { properties: { "class.k-card-title": "this.hostClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardTitleDirective, decorators: [{
+CardTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CardTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardTitleDirective, selector: "[kendoCardTitle]", host: { properties: { "class.k-card-title": "this.hostClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCardTitle]'
@@ -7540,9 +7535,9 @@ class CardSubtitleDirective {
         this.hostClass = true;
     }
 }
-CardSubtitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CardSubtitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]", host: { properties: { "class.k-card-subtitle": "this.hostClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardSubtitleDirective, decorators: [{
+CardSubtitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CardSubtitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]", host: { properties: { "class.k-card-subtitle": "this.hostClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCardSubtitle]'
@@ -7560,9 +7555,9 @@ class CardMediaDirective {
         this.hostClass = true;
     }
 }
-CardMediaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CardMediaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CardMediaDirective, selector: "[kendoCardMedia]", host: { properties: { "class.k-card-media": "this.hostClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardMediaDirective, decorators: [{
+CardMediaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CardMediaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardMediaDirective, selector: "[kendoCardMedia]", host: { properties: { "class.k-card-media": "this.hostClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardMediaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCardMedia]'
@@ -7589,9 +7584,9 @@ class ExpansionPanelTitleDirective {
         this.templateRef = templateRef;
     }
 }
-ExpansionPanelTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelTitleDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ExpansionPanelTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ExpansionPanelTitleDirective, selector: "[kendoExpansionPanelTitleDirective]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelTitleDirective, decorators: [{
+ExpansionPanelTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelTitleDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ExpansionPanelTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ExpansionPanelTitleDirective, selector: "[kendoExpansionPanelTitleDirective]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoExpansionPanelTitleDirective]'
@@ -7952,8 +7947,8 @@ class ExpansionPanelComponent {
         this.renderer.removeClass(this.content.nativeElement, CONTENT_HIDDEN_CLASS);
     }
 }
-ExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i1$2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
+ExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i1$1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -7996,8 +7991,8 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <ng-content></ng-content>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoExpansionPanel',
@@ -8048,7 +8043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i1$2.AnimationBuilder }]; }, propDecorators: { title: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i1$1.AnimationBuilder }]; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
@@ -8734,9 +8729,9 @@ class TileLayoutDraggingService {
         return hintHeight;
     }
 }
-TileLayoutDraggingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutDraggingService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-TileLayoutDraggingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutDraggingService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutDraggingService, decorators: [{
+TileLayoutDraggingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutDraggingService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+TileLayoutDraggingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutDraggingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutDraggingService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; } });
 
@@ -8765,11 +8760,11 @@ class TileLayoutItemHeaderComponent {
         }
     }
 }
-TileLayoutItemHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutItemHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-TileLayoutItemHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header", inputs: { reorderable: "reorderable" }, host: { properties: { "class.k-tilelayout-item-header": "this.hostClass", "class.k-card-header": "this.hostClass" } }, ngImport: i0, template: `
+TileLayoutItemHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutItemHeaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+TileLayoutItemHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header", inputs: { reorderable: "reorderable" }, host: { properties: { "class.k-tilelayout-item-header": "this.hostClass", "class.k-card-header": "this.hostClass" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutItemHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutItemHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item-header',
@@ -8855,7 +8850,6 @@ class TileLayoutKeyboardNavigationService {
     getAllFocusableChildren(parent) {
         return Array.from(parent.querySelectorAll(focusableSelector)).filter((element) => element.offsetParent !== null);
     }
-    ;
     resizeItem(keyCode, focusedTile, settings, col) {
         const { resizeRight, resizeLeft, resizeDown, resizeUp } = shouldResize(keyCode, col, focusedTile, settings);
         const resizeHorizontal = resizeLeft || resizeRight;
@@ -8914,14 +8908,13 @@ class TileLayoutKeyboardNavigationService {
         const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
         return [firstFocusable, lastFocusable];
     }
-    ;
     targetTile(focusedTile, items, offset) {
         return items.find(item => item.order === focusedTile.order + offset);
     }
 }
-TileLayoutKeyboardNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutKeyboardNavigationService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-TileLayoutKeyboardNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutKeyboardNavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutKeyboardNavigationService, decorators: [{
+TileLayoutKeyboardNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutKeyboardNavigationService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+TileLayoutKeyboardNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutKeyboardNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutKeyboardNavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; } });
 
@@ -8962,9 +8955,9 @@ class TileLayoutResizeHandleDirective {
         }
     }
 }
-TileLayoutResizeHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutResizeHandleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-TileLayoutResizeHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: { resizeDirection: "resizeDirection", rtl: "rtl" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutResizeHandleDirective, decorators: [{
+TileLayoutResizeHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutResizeHandleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+TileLayoutResizeHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: { resizeDirection: "resizeDirection", rtl: "rtl" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTileLayoutResizeHandle]'
@@ -9137,8 +9130,8 @@ class TileLayoutItemComponent {
         }
     }
 }
-TileLayoutItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-TileLayoutItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
+TileLayoutItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+TileLayoutItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
         <kendo-tilelayout-item-header [reorderable]="isReorderable" *ngIf="title">
             <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
         </kendo-tilelayout-item-header>
@@ -9152,8 +9145,8 @@ TileLayoutItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 [resizeDirection]="dir">
             </div>
         </ng-container>
-    `, isInline: true, components: [{ type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header", inputs: ["reorderable"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
+    `, 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: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header", inputs: ["reorderable"] }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item',
@@ -9465,8 +9458,8 @@ class TileLayoutComponent {
         });
     }
 }
-TileLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TileLayoutComponent, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "class.k-pos-relative": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
+TileLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TileLayoutComponent, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "class.k-pos-relative": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         TileLayoutDraggingService,
         TileLayoutKeyboardNavigationService,
@@ -9486,8 +9479,8 @@ TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [style.zIndex]="'1'">
         </div>
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, components: [{ type: i1$1.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout',
@@ -9569,11 +9562,11 @@ class TileLayoutItemBodyComponent {
         this.minHeight = 0;
     }
 }
-TileLayoutItemBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TileLayoutItemBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TileLayoutItemBodyComponent, selector: "kendo-tilelayout-item-body", host: { properties: { "class.k-tilelayout-item-body": "this.hostClass", "class.k-card-body": "this.hostClass", "style.min-height": "this.minHeight" } }, ngImport: i0, template: `
+TileLayoutItemBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TileLayoutItemBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TileLayoutItemBodyComponent, selector: "kendo-tilelayout-item-body", host: { properties: { "class.k-tilelayout-item-body": "this.hostClass", "class.k-card-body": "this.hostClass", "style.min-height": "this.minHeight" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutItemBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutItemBodyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item-body',
@@ -9592,13 +9585,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 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'])
@@ -9606,16 +9599,16 @@ const declarations$a = [
  */
 class AvatarModule {
 }
-AvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarModule, declarations: [LocalizedAvatarMessagesDirective, AvatarComponent,
+AvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AvatarModule, declarations: [LocalizedAvatarMessagesDirective, AvatarComponent,
         AvatarCustomMessagesComponent], imports: [CommonModule, IconsModule], exports: [AvatarComponent,
         AvatarCustomMessagesComponent] });
-AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarModule, imports: [[CommonModule, IconsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AvatarModule, decorators: [{
+AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AvatarModule, imports: [CommonModule, IconsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AvatarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$a],
-                    exports: [exportedModules$a],
+                    declarations: [declarations$b],
+                    exports: [exportedModules$b],
                     imports: [CommonModule, IconsModule]
                 }]
         }] });
@@ -9626,7 +9619,7 @@ const cardDirectives = [
     CardSeparatorDirective,
     CardMediaDirective
 ];
-const exportedModules$9 = [
+const exportedModules$a = [
     CardComponent,
     CardHeaderComponent,
     CardBodyComponent,
@@ -9634,15 +9627,15 @@ 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.
  */
 class CardModule {
 }
-CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardModule, declarations: [CardComponent,
+CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CardModule, declarations: [CardComponent,
         CardHeaderComponent,
         CardBodyComponent,
         CardFooterComponent,
@@ -9657,12 +9650,12 @@ CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         CardSubtitleDirective,
         CardSeparatorDirective,
         CardMediaDirective] });
-CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardModule, decorators: [{
+CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$9],
-                    exports: [exportedModules$9],
+                    declarations: [declarations$a],
+                    exports: [exportedModules$a],
                     imports: [CommonModule]
                 }]
         }] });
@@ -9673,16 +9666,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'])
@@ -9690,8 +9683,8 @@ const declarations$8 = [
  */
 class DrawerModule {
 }
-DrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerModule, declarations: [DrawerItemComponent,
+DrawerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DrawerModule, declarations: [DrawerItemComponent,
         DrawerListComponent, DrawerComponent,
         DrawerContainerComponent,
         DrawerContentComponent, DrawerTemplateDirective,
@@ -9703,22 +9696,22 @@ DrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DrawerHeaderTemplateDirective,
         DrawerFooterTemplateDirective,
         DrawerItemTemplateDirective] });
-DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerModule, imports: [[CommonModule, IconsModule, WatermarkModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerModule, decorators: [{
+DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerModule, imports: [CommonModule, IconsModule, WatermarkModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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'])
@@ -9726,29 +9719,29 @@ const declarations$7 = [
  */
 class ExpansionPanelModule {
 }
-ExpansionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ExpansionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelModule, declarations: [ExpansionPanelComponent,
+ExpansionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ExpansionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelModule, declarations: [ExpansionPanelComponent,
         ExpansionPanelTitleDirective], imports: [CommonModule, EventsModule, IconsModule], exports: [ExpansionPanelComponent,
         ExpansionPanelTitleDirective] });
-ExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelModule, imports: [[CommonModule, EventsModule, IconsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExpansionPanelModule, decorators: [{
+ExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExpansionPanelModule, imports: [CommonModule, EventsModule, IconsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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'])
@@ -9763,8 +9756,8 @@ const declarations$6 = [
  */
 class PanelBarModule {
 }
-PanelBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PanelBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarModule, declarations: [PanelBarComponent,
+PanelBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PanelBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, declarations: [PanelBarComponent,
         PanelBarItemComponent,
         PanelBarContentDirective,
         PanelBarItemTemplateDirective,
@@ -9773,23 +9766,23 @@ PanelBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         PanelBarContentDirective,
         PanelBarItemTemplateDirective,
         PanelBarItemTitleDirective] });
-PanelBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarModule, imports: [[CommonModule, IconsModule, WatermarkModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarModule, decorators: [{
+PanelBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, imports: [CommonModule, IconsModule, WatermarkModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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'])
@@ -9801,22 +9794,20 @@ const declarations$5 = [
  */
 class SplitterModule {
 }
-SplitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SplitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterModule, declarations: [SplitterBarComponent, SplitterComponent,
+SplitterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SplitterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SplitterModule, declarations: [SplitterBarComponent, SplitterComponent,
         SplitterPaneComponent], imports: [CommonModule,
         DraggableModule,
         IconsModule], exports: [SplitterComponent,
         SplitterPaneComponent] });
-SplitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterModule, imports: [[
-            CommonModule,
-            DraggableModule,
-            IconsModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SplitterModule, decorators: [{
+SplitterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterModule, imports: [CommonModule,
+        DraggableModule,
+        IconsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$5],
-                    exports: [exportedModules$5],
+                    declarations: [declarations$6],
+                    exports: [exportedModules$6],
                     imports: [
                         CommonModule,
                         DraggableModule,
@@ -9830,16 +9821,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'])
@@ -9847,8 +9838,8 @@ const declarations$4 = [
  */
 class StepperModule {
 }
-StepperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperModule, declarations: [StepperStepComponent,
+StepperModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: StepperModule, declarations: [StepperStepComponent,
         StepperListComponent,
         LocalizedStepperMessagesDirective, StepperComponent,
         StepperCustomMessagesComponent, StepperStepTemplateDirective,
@@ -9857,17 +9848,17 @@ StepperModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         StepperCustomMessagesComponent, StepperStepTemplateDirective,
         StepperLabelTemplateDirective,
         StepperIndicatorTemplateDirective] });
-StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperModule, imports: [[CommonModule, ProgressBarModule, IconsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StepperModule, decorators: [{
+StepperModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepperModule, imports: [CommonModule, ProgressBarModule, IconsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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,
@@ -9877,8 +9868,8 @@ const exportedModules$3 = [
     LocalizedTabStripMessagesDirective,
     TabTemplateDirective
 ];
-const declarations$3 = [
-    ...exportedModules$3,
+const declarations$4 = [
+    ...exportedModules$4,
     TabStripScrollableButtonComponent
 ];
 /**
@@ -9893,8 +9884,8 @@ const declarations$3 = [
  */
 class TabStripModule {
 }
-TabStripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, declarations: [TabStripComponent,
+TabStripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, declarations: [TabStripComponent,
         TabStripTabComponent,
         TabContentDirective,
         TabTitleDirective,
@@ -9909,25 +9900,25 @@ TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TabStripCustomMessagesComponent,
         LocalizedTabStripMessagesDirective,
         TabTemplateDirective] });
-TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, imports: [[CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, decorators: [{
+TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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'])
@@ -9941,8 +9932,8 @@ const declarations$2 = [
  */
 class TileLayoutModule {
 }
-TileLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TileLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutModule, declarations: [TileLayoutComponent,
+TileLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TileLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutModule, declarations: [TileLayoutComponent,
         TileLayoutItemComponent,
         TileLayoutItemHeaderComponent,
         TileLayoutItemBodyComponent,
@@ -9951,12 +9942,12 @@ TileLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TileLayoutItemHeaderComponent,
         TileLayoutItemBodyComponent,
         TileLayoutResizeHandleDirective] });
-TileLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutModule, imports: [[CommonModule, WatermarkModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutModule, decorators: [{
+TileLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutModule, imports: [CommonModule, WatermarkModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$2],
-                    exports: [exportedModules$2],
+                    declarations: [declarations$3],
+                    exports: [exportedModules$3],
                     imports: [CommonModule, WatermarkModule]
                 }]
         }] });
@@ -10147,8 +10138,8 @@ class StackLayoutComponent {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
 }
-StackLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StackLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-StackLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StackLayoutComponent, selector: "kendo-stacklayout", inputs: { align: "align", gap: "gap", orientation: "orientation" }, host: { properties: { "class.k-stack-layout": "this.hostClass", "class.k-hstack": "this.horizontalClass", "class.k-vstack": "this.verticalClass", "attr.dir": "this.dir" } }, providers: [
+StackLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+StackLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StackLayoutComponent, selector: "kendo-stacklayout", inputs: { align: "align", gap: "gap", orientation: "orientation" }, host: { properties: { "class.k-stack-layout": "this.hostClass", "class.k-hstack": "this.horizontalClass", "class.k-vstack": "this.verticalClass", "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -10157,7 +10148,7 @@ StackLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
     ], exportAs: ["kendoStackLayout"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StackLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoStackLayout',
@@ -10193,11 +10184,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 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'])
@@ -10205,14 +10196,14 @@ const declarations$1 = [
  */
 class StackLayoutModule {
 }
-StackLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StackLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-StackLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StackLayoutModule, declarations: [StackLayoutComponent], imports: [CommonModule], exports: [StackLayoutComponent] });
-StackLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StackLayoutModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StackLayoutModule, decorators: [{
+StackLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+StackLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutModule, declarations: [StackLayoutComponent], imports: [CommonModule], exports: [StackLayoutComponent] });
+StackLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$1],
-                    exports: [exportedModules$1],
+                    declarations: [declarations$2],
+                    exports: [exportedModules$2],
                     imports: [CommonModule]
                 }]
         }] });
@@ -10303,8 +10294,8 @@ class GridLayoutComponent {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
 }
-GridLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-GridLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GridLayoutComponent, selector: "kendo-gridlayout", inputs: { rows: "rows", cols: "cols", gap: "gap", align: "align" }, host: { properties: { "class.k-grid-layout": "this.hostClass", "attr.dir": "this.dir" } }, providers: [
+GridLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+GridLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridLayoutComponent, selector: "kendo-gridlayout", inputs: { rows: "rows", cols: "cols", gap: "gap", align: "align" }, host: { properties: { "class.k-grid-layout": "this.hostClass", "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -10313,7 +10304,7 @@ GridLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
     ], exportAs: ["kendoGridLayout"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoGridLayout',
@@ -10365,11 +10356,11 @@ class GridLayoutItemComponent {
         this.renderer.setStyle(this.element.nativeElement, 'grid-area', gridAreaStyle);
     }
 }
-GridLayoutItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridLayoutItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GridLayoutItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GridLayoutItemComponent, selector: "kendo-gridlayout-item", inputs: { row: "row", col: "col", rowSpan: "rowSpan", colSpan: "colSpan" }, usesOnChanges: true, ngImport: i0, template: `
+GridLayoutItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+GridLayoutItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridLayoutItemComponent, selector: "kendo-gridlayout-item", inputs: { row: "row", col: "col", rowSpan: "rowSpan", colSpan: "colSpan" }, usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridLayoutItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gridlayout-item',
@@ -10387,12 +10378,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 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'])
@@ -10400,20 +10391,1953 @@ const declarations = [
  */
 class GridLayoutModule {
 }
-GridLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-GridLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridLayoutModule, declarations: [GridLayoutComponent,
+GridLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GridLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutModule, declarations: [GridLayoutComponent,
         GridLayoutItemComponent], imports: [CommonModule], exports: [GridLayoutComponent,
         GridLayoutItemComponent] });
-GridLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridLayoutModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridLayoutModule, decorators: [{
+GridLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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) {
+        var _a;
+        if (this.timeline) {
+            (_a = this.timeline['onToggle']) === null || _a === void 0 ? void 0 : _a.emit(event);
+        }
+    }
+    onActionClick(event) {
+        var _a;
+        if (this.timeline) {
+            (_a = this.timeline['onActionClick']) === null || _a === void 0 ? void 0 : _a.emit(event);
+        }
+    }
+    onNavigate(event) {
+        var _a;
+        if (this.timeline) {
+            (_a = this.timeline['onNavigate']) === null || _a === void 0 ? void 0 : _a.emit(event);
+        }
+    }
+}
+TimelineService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TimelineService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @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 === null || value === void 0 ? void 0 : 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() {
+        var _a;
+        if (this.orientation === 'vertical') {
+            return;
+        }
+        const cardBody = (_a = this.element) === null || _a === void 0 ? void 0 : _a.nativeElement.querySelector('.k-card-body');
+        if (cardBody) {
+            this.renderer.setStyle(cardBody, 'overflow', 'auto');
+        }
+    }
+}
+TimelineCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardComponent, deps: [{ token: i0.ElementRef }, { token: TimelineService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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
+                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.2.10", 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
+                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() {
+        var _a;
+        (_a = this.cardElementRefs) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a;
+        if (!((_a = this.circleElementRefs) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a, _b;
+        if (!((_a = this.circleElementRefs) === null || _a === void 0 ? void 0 : _a.first) && !((_b = this.flagElementRefs) === null || _b === void 0 ? void 0 : _b.first)) {
+            return false;
+        }
+        return this.trackItems.length === 0 ||
+            this.firstCircleInView + this.visibleTabsCount >= this.trackItems.length;
+    }
+    onCardsChange() {
+        var _a;
+        if ((_a = this.cardElementRefs) === null || _a === void 0 ? void 0 : _a.get(this.selectedCardIndex)) {
+            this.cardWidth = this.cardElementRefs.get(this.selectedCardIndex).nativeElement.offsetWidth;
+            this.transformCards();
+        }
+    }
+    onCirclesChange() {
+        var _a;
+        if (!((_a = this.circleElementRefs) === null || _a === void 0 ? void 0 : _a.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;
+        }
+        event.preventDefault();
+        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() {
+        if (this.selectedEvent === this.events[0]) {
+            return;
+        }
+        this.navigateToFirstInterval();
+    }
+    onEndKey() {
+        if (this.selectedEvent === this.events[this.events.length - 1]) {
+            return;
+        }
+        this.navigateToLastInterval();
+    }
+    onArrowRightKey() {
+        this.navigateToOtherEvent(true);
+    }
+    onArrowLeftKey() {
+        this.navigateToOtherEvent(false);
+    }
+    navigateToFirstInterval() {
+        this.navigateToInterval(0);
+    }
+    navigateToLastInterval() {
+        const start = Math.floor((this.trackItems.length - 1) / 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.2.10", 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.2.10", 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.2.10", 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(() => {
+            var _a;
+            if (((_a = this.innerDateElementRefs) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a;
+        (_a = this.cards) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a;
+        (_a = this.cards) === null || _a === void 0 ? void 0 : _a.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.2.10", ngImport: i0, type: TimelineVerticalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+TimelineVerticalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineVerticalComponent, 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.2.10", 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']
+            }] } });
+
+/**
+ * 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.2.10", ngImport: i0, type: TimelineCardBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TimelineCardBodyTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineCardBodyTemplateDirective, selector: "[kendoTimelineCardBodyTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardBodyTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTimelineCardBodyTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * 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.2.10", ngImport: i0, type: TimelineCardHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TimelineCardHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineCardHeaderTemplateDirective, selector: "[kendoTimelineCardHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTimelineCardHeaderTemplate]'
+                }]
+        }], 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.2.10", ngImport: i0, type: TimelineCardActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TimelineCardActionsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineCardActionsTemplateDirective, selector: "[kendoTimelineCardActionsTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardActionsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoTimelineCardActionsTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * @hidden
+ */
+class TimelineMessages extends ComponentMessages {
+}
+TimelineMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TimelineMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineMessages, selector: "kendo-timeline-messages-base", inputs: { previous: "previous", next: "next" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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.2.10", ngImport: i0, type: LocalizedTimelineMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedTimelineMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedTimelineMessagesDirective, selector: "[kendoTimelineLocalizedMessages]", providers: [
+        {
+            provide: TimelineMessages,
+            useExisting: forwardRef(() => LocalizedTimelineMessagesDirective),
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 false
+         */
+        this.alterMode = false;
+        /**
+         * Specifies whether the event cards can be collapsed.
+         *
+         * @default true
+         */
+        this.collapsibleEvents = true;
+        /**
+         * Specifies whether the user can use dedicated shortcuts to interact with the Timeline.
+         *
+         * @default true
+         */
+        this.navigable = true;
+        /**
+         * Specifies whether an event's date label will be visible.
+         *
+         * @default true
+         */
+        this.showDateLabels = true;
+        this.hostClass = true;
+        /**
+         * Fires when a card is toggled.
+         * This event is supported only in `vertical` mode.
+         */
+        this.onToggle = new EventEmitter();
+        /**
+         * Fires when a card's action is clicked.
+         */
+        this.onActionClick = new EventEmitter();
+        /**
+         * Fires when the left or right arrow is clicked.
+         * This event is supported only in `horizontal` mode.
+         */
+        this.onNavigate = new EventEmitter();
+        this._events = [];
+        this._modelFields = defaultModelFields;
+        this._eventWidth = DEFAULT_EVENT_WIDTH;
+        this._eventHeight = DEFAULT_EVENT_HEIGHT;
+        this._dateFormat = DEFAULT_DATE_FORMAT;
+        this.originalData = [];
+        this.subscriptions = new Subscription();
+        this.timelineService.timeline = this;
+    }
+    /**
+     * 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 = Object.assign(Object.assign({}, 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) || !isPresent$1(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() {
+        var _a;
+        (_a = this.timelineHorizontal) === null || _a === void 0 ? void 0 : _a.previous();
+    }
+    /**
+     * Switches to the next portion of events.
+     * This method is supported only in `horizontal` mode.
+     */
+    next() {
+        var _a;
+        (_a = this.timelineHorizontal) === null || _a === void 0 ? void 0 : _a.next();
+    }
+    /**
+     * Open event details.
+     * This method is supported only in `horizontal` mode.
+     */
+    open(index) {
+        var _a;
+        (_a = this.timelineHorizontal) === null || _a === void 0 ? void 0 : _a.open(index);
+    }
+    /**
+     * Expands an event.
+     * This method is supported only in `vertical` mode.
+     */
+    expand(index) {
+        var _a;
+        (_a = this.timelineVertical) === null || _a === void 0 ? void 0 : _a.expand(index);
+    }
+    /**
+     * Collapses an event.
+     * This method is supported only in `vertical` mode.
+     */
+    collapse(index) {
+        var _a;
+        (_a = this.timelineVertical) === null || _a === void 0 ? void 0 : _a.collapse(index);
+    }
+    initTemplates() {
+        var _a, _b, _c, _d, _e, _f;
+        this.headerTemplate = (_a = this.cardHeaderTemplate) === null || _a === void 0 ? void 0 : _a.first;
+        this.bodyTemplate = (_b = this.cardBodyTemplate) === null || _b === void 0 ? void 0 : _b.first;
+        this.actionsTemplate = (_c = this.cardActionsTemplate) === null || _c === void 0 ? void 0 : _c.first;
+        this.subscriptions.add((_d = this.cardHeaderTemplate) === null || _d === void 0 ? void 0 : _d.changes.subscribe(() => {
+            var _a;
+            this.headerTemplate = ((_a = this.cardHeaderTemplate) === null || _a === void 0 ? void 0 : _a.first) || null;
+        }));
+        this.subscriptions.add((_e = this.cardBodyTemplate) === null || _e === void 0 ? void 0 : _e.changes.subscribe(() => {
+            var _a;
+            this.bodyTemplate = ((_a = this.cardBodyTemplate) === null || _a === void 0 ? void 0 : _a.first) || null;
+        }));
+        this.subscriptions.add((_f = this.cardActionsTemplate) === null || _f === void 0 ? void 0 : _f.changes.subscribe(() => {
+            var _a;
+            this.actionsTemplate = ((_a = this.cardActionsTemplate) === null || _a === void 0 ? void 0 : _a.first) || null;
+        }));
+    }
+}
+TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineComponent, deps: [{ token: TimelineService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.2.10", 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.2.10", ngImport: i0, type: TimelineCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.2.10", 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.2.10", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TimelineModule, 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.2.10", ngImport: i0, type: TimelineModule, imports: [CommonModule, CardModule, ButtonModule, IconsModule, IntlModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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.
@@ -10447,8 +12371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  */
 class LayoutModule {
 }
-LayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LayoutModule, exports: [AvatarModule,
+LayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: LayoutModule, exports: [AvatarModule,
         CardModule,
         DrawerModule,
         PanelBarModule,
@@ -10458,8 +12382,9 @@ LayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TabStripModule,
         TileLayoutModule,
         StackLayoutModule,
-        GridLayoutModule] });
-LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LayoutModule, imports: [AvatarModule,
+        GridLayoutModule,
+        TimelineModule] });
+LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LayoutModule, imports: [AvatarModule,
         CardModule,
         DrawerModule,
         PanelBarModule,
@@ -10469,8 +12394,9 @@ LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         TabStripModule,
         TileLayoutModule,
         StackLayoutModule,
-        GridLayoutModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LayoutModule, decorators: [{
+        GridLayoutModule,
+        TimelineModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -10484,7 +12410,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         TabStripModule,
                         TileLayoutModule,
                         StackLayoutModule,
-                        GridLayoutModule
+                        GridLayoutModule,
+                        TimelineModule,
                     ]
                 }]
         }] });
@@ -10493,5 +12420,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * 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 };