@progress/kendo-angular-buttons 7.0.2 → 8.0.0-next.202202081332

package/{dist/fesm2015/index.js → fesm2015/kendo-angular-buttons.js}

@@ -2,35 +2,21 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { __decorate, __metadata, __param } from 'tslib';
-import { Injectable, EventEmitter, Input, Output, HostBinding, HostListener, Directive, Optional, ElementRef, Renderer2, NgZone, isDevMode, ContentChildren, QueryList, Component, NgModule, TemplateRef, ViewContainerRef, InjectionToken, Inject, ContentChild, ViewChild, ChangeDetectorRef, forwardRef } from '@angular/core';
-import { Subject, fromEvent, merge, Subscription } from 'rxjs';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Directive, Optional, Input, Output, HostBinding, HostListener, isDevMode, Component, ContentChildren, NgModule, InjectionToken, Inject, forwardRef, ElementRef, ViewContainerRef, ContentChild, ViewChild } from '@angular/core';
+import * as i8 from '@progress/kendo-angular-common';
 import { Keys, isChanged, isDocumentAvailable, hasObservers, guid, EventsModule } from '@progress/kendo-angular-common';
+import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
+import { Subject, fromEvent, merge, Subscription } from 'rxjs';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
+import * as i3 from '@progress/kendo-angular-popup';
+import { PopupModule } from '@progress/kendo-angular-popup';
 import { filter, take } from 'rxjs/operators';
-import { sequence, query, style, stagger, animate, AnimationBuilder } from '@angular/animations';
-
-/**
- * @hidden
- */
-let KendoButtonService = class KendoButtonService {
-    /**
-     * @hidden
-     */
-    constructor() {
-        this.buttonClicked = new Subject();
-        this.buttonClicked$ = this.buttonClicked.asObservable();
-    }
-    click(button) {
-        this.buttonClicked.next(button);
-    }
-};
-KendoButtonService = __decorate([
-    Injectable()
-], KendoButtonService);
+import * as i4 from '@angular/animations';
+import { sequence, query, style, stagger, animate } from '@angular/animations';
 
 /**
  * @hidden
@@ -39,13 +25,13 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642682315,
+    publishDate: 1644327071,
     version: '',
     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'
 };
 
-/* tslint:disable:no-null-keyword */
-/* tslint:disable:no-bitwise */
+/* eslint-disable no-null-keyword */
+/* eslint-disable no-bitwise */
 const resolvedPromise = Promise.resolve(null);
 /**
  * @hidden
@@ -136,11 +122,29 @@ const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousVal
     };
 };
 
+/**
+ * @hidden
+ */
+class KendoButtonService {
+    constructor() {
+        this.buttonClicked = new Subject();
+        this.buttonClicked$ = this.buttonClicked.asObservable();
+    }
+    click(button) {
+        this.buttonClicked.next(button);
+    }
+}
+KendoButtonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KendoButtonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KendoButtonService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KendoButtonService, decorators: [{
+            type: Injectable
+        }] });
+
 const SPAN_TAG_NAME = 'SPAN';
 /**
  * Represents the Kendo UI Button component for Angular.
  */
-let ButtonDirective = class ButtonDirective {
+class ButtonDirective {
     constructor(element, renderer, service, localization, ngZone) {
         this.service = service;
         this.ngZone = ngZone;
@@ -645,155 +649,94 @@ let ButtonDirective = class ButtonDirective {
             }
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ButtonDirective.prototype, "toggleable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], ButtonDirective.prototype, "togglable", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], ButtonDirective.prototype, "selected", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], ButtonDirective.prototype, "tabIndex", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ButtonDirective.prototype, "icon", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ButtonDirective.prototype, "iconClass", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ButtonDirective.prototype, "imageUrl", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], ButtonDirective.prototype, "disabled", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ButtonDirective.prototype, "size", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ButtonDirective.prototype, "rounded", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ButtonDirective.prototype, "fillMode", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ButtonDirective.prototype, "themeColor", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ButtonDirective.prototype, "shape", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ButtonDirective.prototype, "role", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ButtonDirective.prototype, "selectedChange", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ButtonDirective.prototype, "click", void 0);
-__decorate([
-    HostBinding('class.k-button'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "classButton", null);
-__decorate([
-    HostBinding('class.k-toggle-button'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "isToggleable", null);
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "roleSetter", null);
-__decorate([
-    HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "classDisabled", null);
-__decorate([
-    HostBinding('class.k-selected'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "classActive", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ButtonDirective.prototype, "getDirection", null);
-__decorate([
-    HostListener('focus'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], ButtonDirective.prototype, "onFocus", null);
-__decorate([
-    HostListener('blur'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], ButtonDirective.prototype, "onBlur", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], ButtonDirective.prototype, "primary", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ButtonDirective.prototype, "look", null);
-ButtonDirective = __decorate([
-    Directive({
-        exportAs: 'kendoButton',
-        providers: [
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.button'
-            }
-        ],
-        selector: 'button[kendoButton], span[kendoButton]',
-    }),
-    __param(2, Optional()),
-    __metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        KendoButtonService,
+}
+ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: { toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", shape: "shape", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
         LocalizationService,
-        NgZone])
-], ButtonDirective);
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.button'
+        }
+    ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'kendoButton',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.button'
+                        }
+                    ],
+                    selector: 'button[kendoButton], span[kendoButton]' // eslint-disable-line
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: KendoButtonService, decorators: [{
+                    type: Optional
+                }] }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { toggleable: [{
+                type: Input
+            }], togglable: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], shape: [{
+                type: Input
+            }], role: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], click: [{
+                type: Output
+            }], classButton: [{
+                type: HostBinding,
+                args: ['class.k-button']
+            }], isToggleable: [{
+                type: HostBinding,
+                args: ['class.k-toggle-button']
+            }], roleSetter: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], classDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], classActive: [{
+                type: HostBinding,
+                args: ['class.k-selected']
+            }], getDirection: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], primary: [{
+                type: Input
+            }], look: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
@@ -826,7 +769,7 @@ const tabindex = 'tabindex';
 /**
  * Represents the Kendo UI ButtonGroup component for Angular.
  */
-let ButtonGroupComponent = class ButtonGroupComponent {
+class ButtonGroupComponent {
     constructor(service, localization, element) {
         this.service = service;
         this.element = element;
@@ -1012,110 +955,85 @@ let ButtonGroupComponent = class ButtonGroupComponent {
     isSelectionSingle() {
         return this.selection === 'single';
     }
-};
-__decorate([
-    Input('disabled'),
-    __metadata("design:type", Boolean)
-], ButtonGroupComponent.prototype, "disabled", void 0);
-__decorate([
-    Input('selection'),
-    __metadata("design:type", String)
-], ButtonGroupComponent.prototype, "selection", void 0);
-__decorate([
-    Input('width'),
-    __metadata("design:type", String)
-], ButtonGroupComponent.prototype, "width", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], ButtonGroupComponent.prototype, "tabIndex", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ButtonGroupComponent.prototype, "navigate", void 0);
-__decorate([
-    ContentChildren(ButtonDirective),
-    __metadata("design:type", QueryList)
-], ButtonGroupComponent.prototype, "buttons", void 0);
-__decorate([
-    HostBinding('class.k-button-group'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "wrapperClass", null);
-__decorate([
-    HostBinding('class.k-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "disabledClass", null);
-__decorate([
-    HostBinding('class.k-button-group-stretched'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "stretchedClass", null);
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "getRole", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "dir", null);
-__decorate([
-    HostBinding('attr.aria-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "ariaDisabled", null);
-__decorate([
-    HostBinding('style.width'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "wrapperWidth", null);
-__decorate([
-    HostBinding('attr.tabindex'),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "wrapperTabIndex", null);
-__decorate([
-    HostListener('keydown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], ButtonGroupComponent.prototype, "keydown", null);
-__decorate([
-    HostListener('focus'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], ButtonGroupComponent.prototype, "onFocus", null);
-__decorate([
-    HostListener('focusout', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], ButtonGroupComponent.prototype, "focusout", null);
-ButtonGroupComponent = __decorate([
-    Component({
-        exportAs: 'kendoButtonGroup',
-        providers: [
-            KendoButtonService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.buttongroup'
-            }
-        ],
-        selector: 'kendo-buttongroup',
-        template: `
+}
+ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex" }, outputs: { navigate: "navigate" }, host: { listeners: { "keydown": "keydown($event)", "focus": "onFocus()", "focusout": "focusout($event)" }, properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.getRole", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
+        KendoButtonService,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.buttongroup'
+        }
+    ], queries: [{ propertyName: "buttons", predicate: ButtonDirective }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-content select="[kendoButton]"></ng-content>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoButtonGroup',
+                    providers: [
+                        KendoButtonService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.buttongroup'
+                        }
+                    ],
+                    selector: 'kendo-buttongroup',
+                    template: `
         <ng-content select="[kendoButton]"></ng-content>
     `
-    }),
-    __metadata("design:paramtypes", [KendoButtonService,
-        LocalizationService,
-        ElementRef])
-], ButtonGroupComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: KendoButtonService }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
+                type: Input,
+                args: ['disabled']
+            }], selection: [{
+                type: Input,
+                args: ['selection']
+            }], width: [{
+                type: Input,
+                args: ['width']
+            }], tabIndex: [{
+                type: Input
+            }], navigate: [{
+                type: Output
+            }], buttons: [{
+                type: ContentChildren,
+                args: [ButtonDirective]
+            }], wrapperClass: [{
+                type: HostBinding,
+                args: ['class.k-button-group']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], stretchedClass: [{
+                type: HostBinding,
+                args: ['class.k-button-group-stretched']
+            }], getRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], wrapperWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], wrapperTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], keydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], focusout: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
 
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
@@ -1148,14 +1066,18 @@ ButtonGroupComponent = __decorate([
  *
  * ```
  */
-let ButtonModule = class ButtonModule {
-};
-ButtonModule = __decorate([
-    NgModule({
-        declarations: [ButtonDirective],
-        exports: [ButtonDirective]
-    })
-], ButtonModule);
+class ButtonModule {
+}
+ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule, declarations: [ButtonDirective], exports: [ButtonDirective] });
+ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ButtonDirective],
+                    exports: [ButtonDirective]
+                }]
+        }] });
 
 /**
  * @hidden
@@ -1165,186 +1087,24 @@ ButtonModule = __decorate([
  * The package exports:
  * - `ButtonGroupComponent`&mdash;The ButtonGroupComponent component class.
  */
-let ButtonGroupModule = class ButtonGroupModule {
-};
-ButtonGroupModule = __decorate([
-    NgModule({
-        declarations: [ButtonGroupComponent],
-        exports: [ButtonGroupComponent],
-        imports: [CommonModule, ButtonModule]
-    })
-], ButtonGroupModule);
-
-/**
- * Used for rendering the list item content.
- *
- * To define the item template, nest a `<ng-template>` tag with the `kendo<ComponentName>ItemTemplate` directive inside the component tag.
- *
- * For the DropDownButton, use the `kendoDropDownButtonItemTemplate` directive.
- * For the SplitButton, use the `kendoSplitButtonItemTemplate` directive.
- *
- * The template context is set to the current component. To get a reference to the current data item, use the `let-dataItem` directive.
- *
- * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-splitbutton [data]="listItems">
- *    <ng-template kendoSplitButtonItemTemplate let-dataItem>
- *      <span>{{dataItem}} option</span>
- *    </ng-template>
- *  </kendo-splitbutton>
- *  <kendo-dropdownbutton [data]="listItems">
- *    <ng-template kendoDropDownButtonItemTemplate let-dataItem>
- *      <span>{{dataItem}} option</span>
- *    </ng-template>
- *  </kendo-dropdownbutton>
- * `
- * })
- * class AppComponent {
- *   public listItems: Array<any> = [{
- *      text: 'item1',
- *      icon: 'refresh',
- *      disabled: false,
- *      click: (dataItem: any) => {
- *          //action
- *      }
- *  }, {
- *      text: 'item2',
- *      icon: 'refresh',
- *      disabled: false,
- *      click: (dataItem: any) => {
- *          //action
- *      }
- *  }]
- * }
- * ```
- *
- * For more examples, refer to the article on the [DropDownList templates]({% slug overview_ddl %}#templates).
- */
-let ButtonItemTemplateDirective = class ButtonItemTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-};
-ButtonItemTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]'
-    }),
-    __metadata("design:paramtypes", [TemplateRef])
-], ButtonItemTemplateDirective);
-
-/**
- * @hidden
- */
-let ListComponent = class ListComponent {
-    constructor() {
-        this.onItemClick = new EventEmitter();
-        this.onItemBlur = new EventEmitter();
-        this.sizeClass = '';
-        validatePackage(packageMetadata);
-    }
-    set size(size) {
-        if (size) {
-            this.sizeClass = `k-menu-group-${SIZES[size]}`;
-        }
-        else {
-            this.sizeClass = '';
-        }
-    }
-    getText(dataItem) {
-        if (dataItem) {
-            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
-        }
-        return undefined;
-    }
-    getIconClasses(dataItem) {
-        const icon = dataItem.icon ? 'k-icon k-i-' + dataItem.icon : undefined;
-        const classes = {};
-        classes[icon || dataItem.iconClass] = true;
-        return classes;
-    }
-    onClick(index) {
-        this.onItemClick.emit(index);
-    }
-    onBlur() {
-        this.onItemBlur.emit();
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], ListComponent.prototype, "data", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ListComponent.prototype, "textField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", ButtonItemTemplateDirective)
-], ListComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListComponent.prototype, "onItemClick", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListComponent.prototype, "onItemBlur", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ListComponent.prototype, "size", null);
-ListComponent = __decorate([
-    Component({
-        selector: 'kendo-button-list',
-        template: `
-        <ul class="k-group k-menu-group k-reset" [ngClass]="sizeClass" unselectable="on" role="menu">
-            <li role="menuitem" unselectable="on"
-                kendoButtonFocusable
-                *ngFor="let dataItem of data; let index = index;"
-                class="k-item k-menu-item"
-                (click)="onClick(index)"
-                (blur)="onBlur()"
-                [attr.aria-disabled]="dataItem.disabled ? true : false">
-                <ng-template [ngIf]="itemTemplate?.templateRef">
-                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
-                        <ng-template [templateContext]="{templateRef: itemTemplate?.templateRef, $implicit: dataItem}"></ng-template>
-                    </span>
-                </ng-template>
-                <ng-template [ngIf]="!itemTemplate?.templateRef">
-                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
-                        <span
-                            *ngIf="dataItem.icon || dataItem.iconClass"
-                            [ngClass]="getIconClasses(dataItem)"
-                        ></span>
-                        <img
-                            *ngIf="dataItem.imageUrl"
-                            class="k-image"
-                            [src]="dataItem.imageUrl"
-                            alt=""
-                        >
-                        <span *ngIf="getText(dataItem)" class="k-menu-link-text">
-                        {{ getText(dataItem) }}
-                        </span>
-                    </span>
-                </ng-template>
-            </li>
-        </ul>
-      `
-    }),
-    __metadata("design:paramtypes", [])
-], ListComponent);
+class ButtonGroupModule {
+}
+ButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroupComponent], imports: [CommonModule, ButtonModule], exports: [ButtonGroupComponent] });
+ButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, imports: [[CommonModule, ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ButtonGroupComponent],
+                    exports: [ButtonGroupComponent],
+                    imports: [CommonModule, ButtonModule]
+                }]
+        }] });
 
 /**
  * @hidden
  */
-let FocusService = class FocusService {
-    /**
-     * @hidden
-     */
+class FocusService {
     constructor() {
         this.onFocus = new EventEmitter();
     }
@@ -1368,15 +1128,17 @@ let FocusService = class FocusService {
         this.focusedIndex = index;
         this.onFocus.emit(index);
     }
-};
-FocusService = __decorate([
-    Injectable()
-], FocusService);
+}
+FocusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FocusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, decorators: [{
+            type: Injectable
+        }] });
 
 /**
  * @hidden
  */
-let FocusableDirective = class FocusableDirective {
+class FocusableDirective {
     constructor(focusService, elementRef, renderer) {
         this.focusService = focusService;
         this.renderer = renderer;
@@ -1419,22 +1181,22 @@ let FocusableDirective = class FocusableDirective {
             this.focusSubscription.unsubscribe();
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FocusableDirective.prototype, "index", void 0);
-FocusableDirective = __decorate([
-    Directive({
-        selector: '[kendoButtonFocusable]'
-    }),
-    __metadata("design:paramtypes", [FocusService, ElementRef, Renderer2])
-], FocusableDirective);
+}
+FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusableDirective, deps: [{ token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoButtonFocusable]'
+                }]
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
  */
-let TemplateContextDirective = class TemplateContextDirective {
+class TemplateContextDirective {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
@@ -1447,100 +1209,406 @@ let TemplateContextDirective = class TemplateContextDirective {
             this.insertedViewRef = this.viewContainerRef.createEmbeddedView(context.templateRef, context);
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], TemplateContextDirective.prototype, "templateContext", null);
-TemplateContextDirective = __decorate([
-    Directive({
-        selector: '[templateContext]' // tslint:disable-line:directive-selector
-    }),
-    __metadata("design:paramtypes", [ViewContainerRef])
-], TemplateContextDirective);
-
-const EXPORTED_DIRECTIVES = [
-    ListComponent,
-    FocusableDirective,
-    ButtonItemTemplateDirective,
-    TemplateContextDirective
-];
-/**
- * @hidden
- */
-let ListModule = class ListModule {
-};
-ListModule = __decorate([
-    NgModule({
-        declarations: [EXPORTED_DIRECTIVES],
-        exports: [EXPORTED_DIRECTIVES],
-        imports: [CommonModule]
-    })
-], ListModule);
-
-/**
- * @hidden
- */
-var KeyEvents;
-(function (KeyEvents) {
-    KeyEvents[KeyEvents["keydown"] = 0] = "keydown";
-    KeyEvents[KeyEvents["keypress"] = 1] = "keypress";
-    KeyEvents[KeyEvents["keyup"] = 2] = "keyup";
-})(KeyEvents || (KeyEvents = {}));
-
-/**
- * @hidden
- */
-var NavigationAction;
-(function (NavigationAction) {
-    NavigationAction[NavigationAction["Undefined"] = 0] = "Undefined";
-    NavigationAction[NavigationAction["Open"] = 1] = "Open";
-    NavigationAction[NavigationAction["Close"] = 2] = "Close";
-    NavigationAction[NavigationAction["Enter"] = 3] = "Enter";
-    NavigationAction[NavigationAction["EnterPress"] = 4] = "EnterPress";
-    NavigationAction[NavigationAction["EnterUp"] = 5] = "EnterUp";
-    NavigationAction[NavigationAction["Tab"] = 6] = "Tab";
-    NavigationAction[NavigationAction["Esc"] = 7] = "Esc";
-    NavigationAction[NavigationAction["Navigate"] = 8] = "Navigate";
-})(NavigationAction || (NavigationAction = {}));
+}
+TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[templateContext]' // eslint-disable-line directive-selector
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { templateContext: [{
+                type: Input
+            }] } });
 
-/* tslint:disable:deprecation */
 /**
  * @hidden
  */
-class ListButton {
-    constructor(focusService, navigationService, wrapperRef, _zone, localization, cdr) {
-        this.focusService = focusService;
-        this.navigationService = navigationService;
-        this.wrapperRef = wrapperRef;
-        this._zone = _zone;
-        this.cdr = cdr;
-        this._open = false;
-        this._disabled = false;
-        this._active = false;
-        this._popupSettings = { animate: true, popupClass: '' };
-        this.listId = guid();
-        this._isFocused = false;
+class ListComponent {
+    constructor() {
+        this.onItemClick = new EventEmitter();
+        this.onItemBlur = new EventEmitter();
+        this.sizeClass = '';
         validatePackage(packageMetadata);
-        this.focusService = focusService;
-        this.navigationService = navigationService;
-        this.wrapper = wrapperRef.nativeElement;
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
-        this.subscribeEvents();
     }
-    get popupClasses() {
-        const popupClasses = ['k-menu-popup'];
-        if (this._popupSettings.popupClass) {
-            popupClasses.push(this._popupSettings.popupClass);
+    set size(size) {
+        if (size) {
+            this.sizeClass = `k-menu-group-${SIZES[size]}`;
+        }
+        else {
+            this.sizeClass = '';
         }
-        return popupClasses.join(' ');
     }
-    get openState() {
-        return this._open;
+    getText(dataItem) {
+        if (dataItem) {
+            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
+        }
+        return undefined;
     }
-    set openState(open) {
-        this._open = open;
+    getIconClasses(dataItem) {
+        const icon = dataItem.icon ? 'k-icon k-i-' + dataItem.icon : undefined;
+        const classes = {};
+        classes[icon || dataItem.iconClass] = true;
+        return classes;
+    }
+    onClick(index) {
+        this.onItemClick.emit(index);
+    }
+    onBlur() {
+        this.onItemBlur.emit();
+    }
+}
+ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
+        <ul class="k-group k-menu-group k-reset" [ngClass]="sizeClass" unselectable="on" role="menu">
+            <li role="menuitem" unselectable="on"
+                kendoButtonFocusable
+                *ngFor="let dataItem of data; let index = index;"
+                class="k-item k-menu-item"
+                (click)="onClick(index)"
+                (blur)="onBlur()"
+                [attr.aria-disabled]="dataItem.disabled ? true : false">
+                <ng-template [ngIf]="itemTemplate?.templateRef">
+                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
+                        <ng-template [templateContext]="{templateRef: itemTemplate?.templateRef, $implicit: dataItem}"></ng-template>
+                    </span>
+                </ng-template>
+                <ng-template [ngIf]="!itemTemplate?.templateRef">
+                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
+                        <span
+                            *ngIf="dataItem.icon || dataItem.iconClass"
+                            [ngClass]="getIconClasses(dataItem)"
+                        ></span>
+                        <img
+                            *ngIf="dataItem.imageUrl"
+                            class="k-image"
+                            [src]="dataItem.imageUrl"
+                            alt=""
+                        >
+                        <span *ngIf="getText(dataItem)" class="k-menu-link-text">
+                        {{ getText(dataItem) }}
+                        </span>
+                    </span>
+                </ng-template>
+            </li>
+        </ul>
+      `, isInline: true, directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-button-list',
+                    template: `
+        <ul class="k-group k-menu-group k-reset" [ngClass]="sizeClass" unselectable="on" role="menu">
+            <li role="menuitem" unselectable="on"
+                kendoButtonFocusable
+                *ngFor="let dataItem of data; let index = index;"
+                class="k-item k-menu-item"
+                (click)="onClick(index)"
+                (blur)="onBlur()"
+                [attr.aria-disabled]="dataItem.disabled ? true : false">
+                <ng-template [ngIf]="itemTemplate?.templateRef">
+                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
+                        <ng-template [templateContext]="{templateRef: itemTemplate?.templateRef, $implicit: dataItem}"></ng-template>
+                    </span>
+                </ng-template>
+                <ng-template [ngIf]="!itemTemplate?.templateRef">
+                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
+                        <span
+                            *ngIf="dataItem.icon || dataItem.iconClass"
+                            [ngClass]="getIconClasses(dataItem)"
+                        ></span>
+                        <img
+                            *ngIf="dataItem.imageUrl"
+                            class="k-image"
+                            [src]="dataItem.imageUrl"
+                            alt=""
+                        >
+                        <span *ngIf="getText(dataItem)" class="k-menu-link-text">
+                        {{ getText(dataItem) }}
+                        </span>
+                    </span>
+                </ng-template>
+            </li>
+        </ul>
+      `
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], onItemClick: [{
+                type: Output
+            }], onItemBlur: [{
+                type: Output
+            }], size: [{
+                type: Input
+            }] } });
+
+/* eslint-disable directive-selector-name */
+/**
+ * Used for rendering the list item content.
+ *
+ * To define the item template, nest a `<ng-template>` tag with the `kendo<ComponentName>ItemTemplate` directive inside the component tag.
+ *
+ * For the DropDownButton, use the `kendoDropDownButtonItemTemplate` directive.
+ * For the SplitButton, use the `kendoSplitButtonItemTemplate` directive.
+ *
+ * The template context is set to the current component. To get a reference to the current data item, use the `let-dataItem` directive.
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-splitbutton [data]="listItems">
+ *    <ng-template kendoSplitButtonItemTemplate let-dataItem>
+ *      <span>{{dataItem}} option</span>
+ *    </ng-template>
+ *  </kendo-splitbutton>
+ *  <kendo-dropdownbutton [data]="listItems">
+ *    <ng-template kendoDropDownButtonItemTemplate let-dataItem>
+ *      <span>{{dataItem}} option</span>
+ *    </ng-template>
+ *  </kendo-dropdownbutton>
+ * `
+ * })
+ * class AppComponent {
+ *   public listItems: Array<any> = [{
+ *      text: 'item1',
+ *      icon: 'refresh',
+ *      disabled: false,
+ *      click: (dataItem: any) => {
+ *          //action
+ *      }
+ *  }, {
+ *      text: 'item2',
+ *      icon: 'refresh',
+ *      disabled: false,
+ *      click: (dataItem: any) => {
+ *          //action
+ *      }
+ *  }]
+ * }
+ * ```
+ *
+ * For more examples, refer to the article on the [DropDownList templates]({% slug overview_ddl %}#templates).
+ */
+class ButtonItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ButtonItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ButtonItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+const EXPORTED_DIRECTIVES = [
+    ListComponent,
+    FocusableDirective,
+    ButtonItemTemplateDirective,
+    TemplateContextDirective
+];
+/**
+ * @hidden
+ */
+class ListModule {
+}
+ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListModule, declarations: [ListComponent,
+        FocusableDirective,
+        ButtonItemTemplateDirective,
+        TemplateContextDirective], imports: [CommonModule], exports: [ListComponent,
+        FocusableDirective,
+        ButtonItemTemplateDirective,
+        TemplateContextDirective] });
+ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [EXPORTED_DIRECTIVES],
+                    exports: [EXPORTED_DIRECTIVES],
+                    imports: [CommonModule]
+                }]
+        }] });
+
+/**
+ * @hidden
+ */
+var KeyEvents;
+(function (KeyEvents) {
+    KeyEvents[KeyEvents["keydown"] = 0] = "keydown";
+    KeyEvents[KeyEvents["keypress"] = 1] = "keypress";
+    KeyEvents[KeyEvents["keyup"] = 2] = "keyup";
+})(KeyEvents || (KeyEvents = {}));
+
+/**
+ * @hidden
+ */
+var NavigationAction;
+(function (NavigationAction) {
+    NavigationAction[NavigationAction["Undefined"] = 0] = "Undefined";
+    NavigationAction[NavigationAction["Open"] = 1] = "Open";
+    NavigationAction[NavigationAction["Close"] = 2] = "Close";
+    NavigationAction[NavigationAction["Enter"] = 3] = "Enter";
+    NavigationAction[NavigationAction["EnterPress"] = 4] = "EnterPress";
+    NavigationAction[NavigationAction["EnterUp"] = 5] = "EnterUp";
+    NavigationAction[NavigationAction["Tab"] = 6] = "Tab";
+    NavigationAction[NavigationAction["Esc"] = 7] = "Esc";
+    NavigationAction[NavigationAction["Navigate"] = 8] = "Navigate";
+})(NavigationAction || (NavigationAction = {}));
+
+/**
+ * @hidden
+ */
+const NAVIGATION_CONFIG = new InjectionToken('navigation.config');
+
+/**
+ * @hidden
+ */
+class NavigationService {
+    constructor(config) {
+        this.navigate = new EventEmitter();
+        this.open = new EventEmitter();
+        this.close = new EventEmitter();
+        this.enter = new EventEmitter();
+        this.enterpress = new EventEmitter();
+        this.enterup = new EventEmitter();
+        this.tab = new EventEmitter();
+        this.esc = new EventEmitter();
+        this.useLeftRightArrows = config.useLeftRightArrows;
+    }
+    process(args) {
+        const keyCode = args.keyCode;
+        const keyEvent = args.keyEvent;
+        let index;
+        let action = NavigationAction.Undefined;
+        if (keyEvent === KeyEvents.keypress) {
+            if (this.isEnter(keyCode)) {
+                action = NavigationAction.EnterPress;
+            }
+        }
+        else if (keyEvent === KeyEvents.keyup) {
+            if (this.isEnter(keyCode)) {
+                action = NavigationAction.EnterUp;
+            }
+        }
+        else {
+            if (args.altKey && keyCode === Keys.ArrowDown) {
+                action = NavigationAction.Open;
+            }
+            else if (args.altKey && keyCode === Keys.ArrowUp) {
+                action = NavigationAction.Close;
+            }
+            else if (this.isEnter(keyCode)) {
+                action = NavigationAction.Enter;
+            }
+            else if (keyCode === Keys.Escape) {
+                action = NavigationAction.Esc;
+            }
+            else if (keyCode === Keys.Tab) {
+                action = NavigationAction.Tab;
+            }
+            else if (keyCode === Keys.ArrowUp || (this.useLeftRightArrows && keyCode === Keys.ArrowLeft)) {
+                const step = args.flipNavigation ? 1 : -1;
+                const start = args.flipNavigation ? args.min : args.max;
+                const end = args.flipNavigation ? args.max : args.min;
+                index = this.next({
+                    current: args.current,
+                    start: start,
+                    end: end,
+                    step: step
+                });
+                action = NavigationAction.Navigate;
+            }
+            else if (keyCode === Keys.ArrowDown || (this.useLeftRightArrows && keyCode === Keys.ArrowRight)) {
+                const step = args.flipNavigation ? -1 : 1;
+                const start = args.flipNavigation ? args.max : args.min;
+                const end = args.flipNavigation ? args.min : args.max;
+                index = this.next({
+                    current: args.current,
+                    start: start,
+                    end: end,
+                    step: step
+                });
+                action = NavigationAction.Navigate;
+            }
+            else if (keyCode === Keys.Home) {
+                index = args.min;
+                action = NavigationAction.Navigate;
+            }
+            else if (keyCode === Keys.End) {
+                index = args.max;
+                action = NavigationAction.Navigate;
+            }
+        }
+        if (action !== NavigationAction.Undefined) {
+            this[NavigationAction[action].toLowerCase()].emit(index);
+        }
+        return action;
+    }
+    isEnter(keyCode) {
+        return keyCode === Keys.Enter || keyCode === Keys.Space;
+    }
+    next(args) {
+        if (!isPresent(args.current)) {
+            return args.start;
+        }
+        else {
+            return args.current !== args.end ? args.current + args.step : args.end;
+        }
+    }
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: NAVIGATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NAVIGATION_CONFIG]
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+class ListButton {
+    constructor(focusService, navigationService, wrapperRef, _zone, localization, cdr) {
+        this.focusService = focusService;
+        this.navigationService = navigationService;
+        this.wrapperRef = wrapperRef;
+        this._zone = _zone;
+        this.cdr = cdr;
+        this._open = false;
+        this._disabled = false;
+        this._active = false;
+        this._popupSettings = { animate: true, popupClass: '' };
+        this.listId = guid();
+        this._isFocused = false;
+        validatePackage(packageMetadata);
+        this.focusService = focusService;
+        this.navigationService = navigationService;
+        this.wrapper = wrapperRef.nativeElement;
+        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
+        this.subscribeEvents();
+    }
+    get popupClasses() {
+        const popupClasses = ['k-menu-popup'];
+        if (this._popupSettings.popupClass) {
+            popupClasses.push(this._popupSettings.popupClass);
+        }
+        return popupClasses.join(' ');
+    }
+    get openState() {
+        return this._open;
+    }
+    set openState(open) {
+        this._open = open;
     }
     /**
      * @hidden
@@ -1608,7 +1676,7 @@ class ListButton {
         });
         this.closeSubscription = merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper());
     }
-    enterHandler() { } // tslint:disable-line
+    enterHandler() { } // eslint-disable-line
     unsubscribeEvents() {
         if (!isDocumentAvailable()) {
             return;
@@ -1716,121 +1784,67 @@ class ListButton {
         this.blurWrapper(false);
     }
 }
+ListButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ListButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListButton, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListButton, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
  * @hidden
  */
-const NAVIGATION_CONFIG = new InjectionToken('navigation.config');
+class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-splitbutton-messages-base'
+                }]
+        }], propDecorators: { splitButtonLabel: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
  */
-let NavigationService = class NavigationService {
-    constructor(config) {
-        this.navigate = new EventEmitter();
-        this.open = new EventEmitter();
-        this.close = new EventEmitter();
-        this.enter = new EventEmitter();
-        this.enterpress = new EventEmitter();
-        this.enterup = new EventEmitter();
-        this.tab = new EventEmitter();
-        this.esc = new EventEmitter();
-        this.useLeftRightArrows = config.useLeftRightArrows;
-    }
-    process(args) {
-        const keyCode = args.keyCode;
-        const keyEvent = args.keyEvent;
-        let index;
-        let action = NavigationAction.Undefined;
-        if (keyEvent === KeyEvents.keypress) {
-            if (this.isEnter(keyCode)) {
-                action = NavigationAction.EnterPress;
-            }
-        }
-        else if (keyEvent === KeyEvents.keyup) {
-            if (this.isEnter(keyCode)) {
-                action = NavigationAction.EnterUp;
-            }
-        }
-        else {
-            if (args.altKey && keyCode === Keys.ArrowDown) {
-                action = NavigationAction.Open;
-            }
-            else if (args.altKey && keyCode === Keys.ArrowUp) {
-                action = NavigationAction.Close;
-            }
-            else if (this.isEnter(keyCode)) {
-                action = NavigationAction.Enter;
-            }
-            else if (keyCode === Keys.Escape) {
-                action = NavigationAction.Esc;
-            }
-            else if (keyCode === Keys.Tab) {
-                action = NavigationAction.Tab;
-            }
-            else if (keyCode === Keys.ArrowUp || (this.useLeftRightArrows && keyCode === Keys.ArrowLeft)) {
-                const step = args.flipNavigation ? 1 : -1;
-                const start = args.flipNavigation ? args.min : args.max;
-                const end = args.flipNavigation ? args.max : args.min;
-                index = this.next({
-                    current: args.current,
-                    start: start,
-                    end: end,
-                    step: step
-                });
-                action = NavigationAction.Navigate;
-            }
-            else if (keyCode === Keys.ArrowDown || (this.useLeftRightArrows && keyCode === Keys.ArrowRight)) {
-                const step = args.flipNavigation ? -1 : 1;
-                const start = args.flipNavigation ? args.max : args.min;
-                const end = args.flipNavigation ? args.min : args.max;
-                index = this.next({
-                    current: args.current,
-                    start: start,
-                    end: end,
-                    step: step
-                });
-                action = NavigationAction.Navigate;
-            }
-            else if (keyCode === Keys.Home) {
-                index = args.min;
-                action = NavigationAction.Navigate;
-            }
-            else if (keyCode === Keys.End) {
-                index = args.max;
-                action = NavigationAction.Navigate;
-            }
-        }
-        if (action !== NavigationAction.Undefined) {
-            this[NavigationAction[action].toLowerCase()].emit(index);
-        }
-        return action;
-    }
-    isEnter(keyCode) {
-        return keyCode === Keys.Enter || keyCode === Keys.Space;
-    }
-    next(args) {
-        if (!isPresent(args.current)) {
-            return args.start;
-        }
-        else {
-            return args.current !== args.end ? args.current + args.step : args.end;
-        }
+class LocalizedSplitButtonMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
     }
-};
-NavigationService = __decorate([
-    Injectable(),
-    __param(0, Inject(NAVIGATION_CONFIG)),
-    __metadata("design:paramtypes", [Object])
-], NavigationService);
+}
+LocalizedSplitButtonMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedSplitButtonMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoSplitButtonLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
-const NAVIGATION_SETTINGS = {
+/* eslint-disable no-access-missing-member */
+const NAVIGATION_SETTINGS$2 = {
     useLeftRightArrows: true
 };
-const ɵ0 = NAVIGATION_SETTINGS;
-const NAVIGATION_SETTINGS_PROVIDER = {
+const NAVIGATION_SETTINGS_PROVIDER$2 = {
     provide: NAVIGATION_CONFIG,
-    useValue: ɵ0
+    useValue: NAVIGATION_SETTINGS$2
 };
 /**
  * Represents the Kendo UI SplitButton component for Angular.
@@ -1873,7 +1887,7 @@ const NAVIGATION_SETTINGS_PROVIDER = {
  * }
  * ```
  */
-let SplitButtonComponent = class SplitButtonComponent extends ListButton {
+class SplitButtonComponent extends ListButton {
     constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
         super(focusService, navigationService, wrapperRef, zone, localization, cdr);
         this.popupService = popupService;
@@ -1995,11 +2009,11 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         /**
          * Fires each time the SplitButton gets focused.
          */
-        this.onFocus = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onFocus = new EventEmitter(); //eslint-disable-line no-output-rename
         /**
          * Fires each time the SplitButton gets blurred.
          */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onBlur = new EventEmitter(); //eslint-disable-line no-output-rename
         /**
          * Fires each time the popup is about to open.
          * This event is preventable. If you cancel the event, the popup will remain closed.
@@ -2385,173 +2399,103 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "text", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "icon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "iconClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "type", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "imageUrl", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "size", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], SplitButtonComponent.prototype, "rounded", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], SplitButtonComponent.prototype, "fillMode", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "themeColor", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], SplitButtonComponent.prototype, "disabled", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], SplitButtonComponent.prototype, "popupSettings", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], SplitButtonComponent.prototype, "tabIndex", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "textField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], SplitButtonComponent.prototype, "data", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], SplitButtonComponent.prototype, "buttonClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], SplitButtonComponent.prototype, "arrowButtonClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], SplitButtonComponent.prototype, "arrowButtonIcon", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "buttonClick", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "itemClick", void 0);
-__decorate([
-    Output('focus'),
-    __metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "onFocus", void 0);
-__decorate([
-    Output('blur'),
-    __metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "onBlur", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "open", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], SplitButtonComponent.prototype, "close", void 0);
-__decorate([
-    ContentChild(ButtonItemTemplateDirective, { static: false }),
-    __metadata("design:type", ButtonItemTemplateDirective)
-], SplitButtonComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    ViewChild('button', { static: true }),
-    __metadata("design:type", ElementRef)
-], SplitButtonComponent.prototype, "button", void 0);
-__decorate([
-    ViewChild('arrowButton', { static: true, read: ElementRef }),
-    __metadata("design:type", ElementRef)
-], SplitButtonComponent.prototype, "arrowButton", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], SplitButtonComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    __metadata("design:type", ViewContainerRef)
-], SplitButtonComponent.prototype, "containerRef", void 0);
-__decorate([
-    HostBinding('class.k-focus'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], SplitButtonComponent.prototype, "isFocused", null);
-__decorate([
-    HostBinding('class.k-split-button'),
-    HostBinding('class.k-button-group'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], SplitButtonComponent.prototype, "widgetClasses", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], SplitButtonComponent.prototype, "dir", null);
-__decorate([
-    HostListener('keydown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], SplitButtonComponent.prototype, "keydown", null);
-__decorate([
-    HostListener('keypress', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], SplitButtonComponent.prototype, "keypress", null);
-__decorate([
-    HostListener('keyup', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], SplitButtonComponent.prototype, "keyup", null);
-SplitButtonComponent = __decorate([
-    Component({
-        exportAs: 'kendoSplitButton',
-        providers: [
-            FocusService,
-            NavigationService,
-            NAVIGATION_SETTINGS_PROVIDER,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.splitbutton'
-            }
-        ],
-        selector: 'kendo-splitbutton',
-        template: `
+}
+SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+        FocusService,
+        NavigationService,
+        NAVIGATION_SETTINGS_PROVIDER$2,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.splitbutton'
+        }
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "arrowButton", first: true, predicate: ["arrowButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoSplitButtonLocalizedMessages
+            i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
+            splitButtonLabel="{{ '{buttonText} splitbutton' }}">
+        </ng-container>
+        <button
+            kendoButton
+            #button
+            [type]="type"
+            [tabindex]="componentTabIndex"
+            [disabled]="disabled"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="themeColor"
+            [icon]="icon"
+            [class.k-active]="active"
+            [class.k-icon-button]="!text && icon"
+            [iconClass]="iconClass"
+            [imageUrl]="imageUrl"
+            [ngClass]="buttonClass"
+            (focus)="onButtonFocus()"
+            (click)="onButtonClick()"
+            (blur)="onButtonBlur()"
+            (mousedown)="toggleButtonActiveState(true)"
+            (mouseup)="toggleButtonActiveState(false)"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="openState"
+            [attr.aria-haspopup]="true"
+            [attr.aria-owns]="listId"
+            [attr.aria-label]="ariaLabel"
+        >
+            <span *ngIf="text" class="k-button-text">
+                {{ text }}
+            </span><ng-content></ng-content>
+        </button>
+        <button
+            kendoButton
+            #arrowButton
+            type="button"
+            [class.k-active]="activeArrow"
+            [disabled]="disabled"
+            [icon]="arrowButtonIcon"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            [tabindex]="-1"
+            [ngClass]="arrowButtonClass"
+            (click)="onArrowButtonClick()"
+            (mousedown)="toggleArrowButtonActiveState(true)"
+            (mouseup)="toggleArrowButtonActiveState(false)"
+        ></button>
+        <ng-template #popupTemplate>
+            <kendo-button-list
+                [id]="listId"
+                [data]="data"
+                [textField]="textField"
+                [itemTemplate]="itemTemplate"
+                (onItemClick)="onItemClick($event)"
+                (keydown)="keyDownHandler($event)"
+                (keypress)="keyPressHandler($event)"
+                (keyup)="keyUpHandler($event)"
+                [attr.dir]="dir"
+                [size]="size"
+            >
+            </kendo-button-list>
+        </ng-template>
+        <ng-container #container></ng-container>
+    `, isInline: true, components: [{ type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoSplitButton',
+                    providers: [
+                        FocusService,
+                        NavigationService,
+                        NAVIGATION_SETTINGS_PROVIDER$2,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.splitbutton'
+                        }
+                    ],
+                    selector: 'kendo-splitbutton',
+                    template: `
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
             splitButtonLabel="{{ '{buttonText} splitbutton' }}">
@@ -2621,57 +2565,98 @@ SplitButtonComponent = __decorate([
         </ng-template>
         <ng-container #container></ng-container>
     `
-    }),
-    __metadata("design:paramtypes", [FocusService,
-        NavigationService,
-        ElementRef,
-        NgZone,
-        PopupService,
-        ElementRef,
-        LocalizationService,
-        ChangeDetectorRef,
-        Renderer2])
-], SplitButtonComponent);
-
-/**
- * @hidden
- */
-class Messages extends ComponentMessages {
-}
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], Messages.prototype, "splitButtonLabel", void 0);
-
-var LocalizedSplitButtonMessagesDirective_1;
-/**
- * @hidden
- */
-let LocalizedSplitButtonMessagesDirective = LocalizedSplitButtonMessagesDirective_1 = class LocalizedSplitButtonMessagesDirective extends Messages {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-};
-LocalizedSplitButtonMessagesDirective = LocalizedSplitButtonMessagesDirective_1 = __decorate([
-    Directive({
-        providers: [
-            {
-                provide: Messages,
-                useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective_1)
-            }
-        ],
-        selector: '[kendoSplitButtonLocalizedMessages]'
-    }),
-    __metadata("design:paramtypes", [LocalizationService])
-], LocalizedSplitButtonMessagesDirective);
+                }]
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], arrowButtonClass: [{
+                type: Input
+            }], arrowButtonIcon: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }], itemClick: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [ButtonItemTemplateDirective, { static: false }]
+            }], button: [{
+                type: ViewChild,
+                args: ['button', { static: true }]
+            }], arrowButton: [{
+                type: ViewChild,
+                args: ['arrowButton', { static: true, read: ElementRef }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], isFocused: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }], widgetClasses: [{
+                type: HostBinding,
+                args: ['class.k-split-button']
+            }, {
+                type: HostBinding,
+                args: ['class.k-button-group']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], keydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], keypress: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }], keyup: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
 
-var SplitButtonCustomMessagesComponent_1;
 /**
  * Custom component messages override default component messages
  * ([see example]({% slug rtl_buttons %}).
  */
-let SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 = class SplitButtonCustomMessagesComponent extends Messages {
+class SplitButtonCustomMessagesComponent extends Messages {
     constructor(service) {
         super();
         this.service = service;
@@ -2679,20 +2664,23 @@ let SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 =
     get override() {
         return true;
     }
-};
-SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 = __decorate([
-    Component({
-        providers: [
-            {
-                provide: Messages,
-                useExisting: forwardRef(() => SplitButtonCustomMessagesComponent_1)
-            }
-        ],
-        selector: 'kendo-splitbutton-messages',
-        template: ``
-    }),
-    __metadata("design:paramtypes", [LocalizationService])
-], SplitButtonCustomMessagesComponent);
+}
+SplitButtonCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SplitButtonCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitButtonCustomMessagesComponent, selector: "kendo-splitbutton-messages", providers: [{
+            provide: Messages,
+            useExisting: forwardRef(() => SplitButtonCustomMessagesComponent)
+        }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{
+                            provide: Messages,
+                            useExisting: forwardRef(() => SplitButtonCustomMessagesComponent)
+                        }],
+                    selector: 'kendo-splitbutton-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
  * @hidden
@@ -2702,23 +2690,27 @@ SplitButtonCustomMessagesComponent = SplitButtonCustomMessagesComponent_1 = __de
  * The package exports:
  * - `SplitButtonComponent`&mdash;The SplitButtonComponent component class.
  */
-let SplitButtonModule = class SplitButtonModule {
-};
-SplitButtonModule = __decorate([
-    NgModule({
-        declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
-        exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
-        imports: [CommonModule, PopupModule, ButtonModule, ListModule]
-    })
-], SplitButtonModule);
+class SplitButtonModule {
+}
+SplitButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SplitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent], imports: [CommonModule, PopupModule, ButtonModule, ListModule], exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent] });
+SplitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, imports: [[CommonModule, PopupModule, ButtonModule, ListModule], ListModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
+                    exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
+                    imports: [CommonModule, PopupModule, ButtonModule, ListModule]
+                }]
+        }] });
 
+/* eslint-disable no-access-missing-member */
 const NAVIGATION_SETTINGS$1 = {
     useLeftRightArrows: true
 };
-const ɵ0$1 = NAVIGATION_SETTINGS$1;
 const NAVIGATION_SETTINGS_PROVIDER$1 = {
     provide: NAVIGATION_CONFIG,
-    useValue: ɵ0$1
+    useValue: NAVIGATION_SETTINGS$1
 };
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
@@ -2748,7 +2740,7 @@ const NAVIGATION_SETTINGS_PROVIDER$1 = {
  * }
  * ```
  */
-let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
+class DropDownButtonComponent extends ListButton {
     constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr) {
         super(focusService, navigationService, wrapperRef, zone, localization, cdr);
         this.popupService = popupService;
@@ -2839,11 +2831,11 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
         /**
          * Fires each time the DropDownButton gets focused.
          */
-        this.onFocus = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onFocus = new EventEmitter(); //eslint-disable-line no-output-rename
         /**
          * Fires each time the DropDownButton gets blurred.
          */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onBlur = new EventEmitter(); //eslint-disable-line no-output-rename
         this.listId = guid();
         this._fillMode = 'solid';
         this._itemClick = this.itemClick;
@@ -3163,167 +3155,77 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
             this.popupRef = null;
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DropDownButtonComponent.prototype, "icon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DropDownButtonComponent.prototype, "iconClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DropDownButtonComponent.prototype, "imageUrl", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], DropDownButtonComponent.prototype, "popupSettings", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DropDownButtonComponent.prototype, "textField", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], DropDownButtonComponent.prototype, "disabled", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], DropDownButtonComponent.prototype, "data", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DropDownButtonComponent.prototype, "size", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DropDownButtonComponent.prototype, "shape", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DropDownButtonComponent.prototype, "rounded", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], DropDownButtonComponent.prototype, "fillMode", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], DropDownButtonComponent.prototype, "themeColor", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], DropDownButtonComponent.prototype, "buttonClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], DropDownButtonComponent.prototype, "tabIndex", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "itemClick", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "open", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "close", void 0);
-__decorate([
-    Output('focus'),
-    __metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "onFocus", void 0);
-__decorate([
-    Output('blur'),
-    __metadata("design:type", EventEmitter)
-], DropDownButtonComponent.prototype, "onBlur", void 0);
-__decorate([
-    HostBinding('class.k-focus'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "focused", null);
-__decorate([
-    HostBinding('class.k-dropdown-button'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "widgetClasses", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "dir", null);
-__decorate([
-    ContentChild(ButtonItemTemplateDirective, { static: false }),
-    __metadata("design:type", ButtonItemTemplateDirective)
-], DropDownButtonComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    ViewChild('button', { static: true }),
-    __metadata("design:type", ElementRef)
-], DropDownButtonComponent.prototype, "button", void 0);
-__decorate([
-    ViewChild('buttonList', { static: false }),
-    __metadata("design:type", ListComponent)
-], DropDownButtonComponent.prototype, "buttonList", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], DropDownButtonComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    __metadata("design:type", ViewContainerRef)
-], DropDownButtonComponent.prototype, "container", void 0);
-__decorate([
-    HostListener('keydown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "keydown", null);
-__decorate([
-    HostListener('keypress', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "keypress", null);
-__decorate([
-    HostListener('keyup', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "keyup", null);
-__decorate([
-    HostListener('mousedown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "mousedown", null);
-__decorate([
-    HostListener('mouseup', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], DropDownButtonComponent.prototype, "mouseup", null);
-DropDownButtonComponent = __decorate([
-    Component({
-        exportAs: 'kendoDropDownButton',
-        providers: [
-            FocusService,
-            NavigationService,
-            NAVIGATION_SETTINGS_PROVIDER$1,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.dropdownbutton'
-            }
-        ],
-        selector: 'kendo-dropdownbutton',
-        template: `
+}
+DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", textField: "textField", disabled: "disabled", data: "data", size: "size", shape: "shape", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", tabIndex: "tabIndex" }, outputs: { itemClick: "itemClick", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+        FocusService,
+        NavigationService,
+        NAVIGATION_SETTINGS_PROVIDER$1,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.dropdownbutton'
+        }
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoDropDownButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <button kendoButton #button
+            role="menu"
+            type="button"
+            [tabindex]="componentTabIndex"
+            [class.k-active]="active"
+            [disabled]="disabled"
+            [icon]="icon"
+            [iconClass]="iconClass"
+            [imageUrl]="imageUrl"
+            [ngClass]="buttonClass"
+            [size]="size"
+            [shape]="shape"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (click)="openPopup()"
+            (focus)="handleFocus()"
+            (blur)="onButtonBlur()"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="openState"
+            [attr.aria-haspopup]="true"
+            [attr.aria-owns]="listId"
+        >
+            <ng-content></ng-content>
+        </button>
+        <ng-template #popupTemplate>
+            <kendo-button-list
+                #buttonList
+                [id]="listId"
+                [data]="data"
+                [textField]="textField"
+                [itemTemplate]="itemTemplate"
+                (onItemClick)="onItemClick($event)"
+                (keydown)="keyDownHandler($event)"
+                (keypress)="keyPressHandler($event)"
+                (keyup)="keyUpHandler($event)"
+                [attr.dir]="dir"
+                [size]="size"
+            >
+            </kendo-button-list>
+        </ng-template>
+        <ng-container #container></ng-container>
+    `, isInline: true, components: [{ type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoDropDownButton',
+                    providers: [
+                        FocusService,
+                        NavigationService,
+                        NAVIGATION_SETTINGS_PROVIDER$1,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.dropdownbutton'
+                        }
+                    ],
+                    selector: 'kendo-dropdownbutton',
+                    template: `
         <button kendoButton #button
             role="menu"
             type="button"
@@ -3367,16 +3269,87 @@ DropDownButtonComponent = __decorate([
         </ng-template>
         <ng-container #container></ng-container>
     `
-    }),
-    __metadata("design:paramtypes", [FocusService,
-        NavigationService,
-        ElementRef,
-        NgZone,
-        PopupService,
-        ElementRef,
-        LocalizationService,
-        ChangeDetectorRef])
-], DropDownButtonComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], shape: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], focused: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }], widgetClasses: [{
+                type: HostBinding,
+                args: ['class.k-dropdown-button']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [ButtonItemTemplateDirective, { static: false }]
+            }], button: [{
+                type: ViewChild,
+                args: ['button', { static: true }]
+            }], buttonList: [{
+                type: ViewChild,
+                args: ['buttonList', { static: false }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], keydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], keypress: [{
+                type: HostListener,
+                args: ['keypress', ['$event']]
+            }], keyup: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }], mousedown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], mouseup: [{
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }] } });
 
 /**
  * @hidden
@@ -3386,20 +3359,24 @@ DropDownButtonComponent = __decorate([
  * The package exports:
  * - `DropDownButtonComponent`&mdash;The DropDownButtonComponent component class.
  */
-let DropDownButtonModule = class DropDownButtonModule {
-};
-DropDownButtonModule = __decorate([
-    NgModule({
-        declarations: [DropDownButtonComponent],
-        exports: [DropDownButtonComponent, ListModule],
-        imports: [CommonModule, PopupModule, ListModule, ButtonModule]
-    })
-], DropDownButtonModule);
+class DropDownButtonModule {
+}
+DropDownButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropDownButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, declarations: [DropDownButtonComponent], imports: [CommonModule, PopupModule, ListModule, ButtonModule], exports: [DropDownButtonComponent, ListModule] });
+DropDownButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, imports: [[CommonModule, PopupModule, ListModule, ButtonModule], ListModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DropDownButtonComponent],
+                    exports: [DropDownButtonComponent, ListModule],
+                    imports: [CommonModule, PopupModule, ListModule, ButtonModule]
+                }]
+        }] });
 
 /**
  * Displays a Chip that represents an input, attribute or an action.
  */
-let ChipComponent = class ChipComponent {
+class ChipComponent {
     constructor(element, renderer, ngZone, localizationService) {
         this.element = element;
         this.renderer = renderer;
@@ -3658,109 +3635,61 @@ let ChipComponent = class ChipComponent {
             }
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ChipComponent.prototype, "label", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ChipComponent.prototype, "icon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ChipComponent.prototype, "iconClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ChipComponent.prototype, "avatarClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ChipComponent.prototype, "selected", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ChipComponent.prototype, "removable", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ChipComponent.prototype, "removeIcon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ChipComponent.prototype, "disabled", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ChipComponent.prototype, "size", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ChipComponent.prototype, "rounded", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ChipComponent.prototype, "fillMode", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ChipComponent.prototype, "themeColor", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ChipComponent.prototype, "remove", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ChipComponent.prototype, "contentClick", void 0);
-__decorate([
-    HostBinding('attr.tabindex'),
-    __metadata("design:type", Number)
-], ChipComponent.prototype, "tabIndex", void 0);
-__decorate([
-    HostBinding('attr.aria-checked'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ChipComponent.prototype, "ariaChecked", null);
-__decorate([
-    HostBinding('class.k-chip'),
-    __metadata("design:type", Boolean)
-], ChipComponent.prototype, "hostClass", void 0);
-__decorate([
-    HostBinding('class.k-chip-has-icon'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ChipComponent.prototype, "hasIconClass", null);
-__decorate([
-    HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ChipComponent.prototype, "disabledClass", null);
-__decorate([
-    HostBinding('class.k-selected'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ChipComponent.prototype, "selectedClass", null);
-__decorate([
-    HostBinding('class.k-focus'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ChipComponent.prototype, "focusedClass", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String)
-], ChipComponent.prototype, "direction", void 0);
-ChipComponent = __decorate([
-    Component({
-        selector: 'kendo-chip',
-        template: `
+}
+ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "attr.aria-checked": "this.ariaChecked", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.chip'
+        }
+    ], ngImport: i0, template: `
+        <span
+            *ngIf="icon"
+            class="k-chip-icon k-icon"
+            [ngClass]="kendoIconClass"
+        >
+        </span>
+
+        <span
+            *ngIf="iconClass"
+            class="k-chip-icon"
+            [ngClass]="customIconClass"
+        >
+        </span>
+
+        <span
+            *ngIf="avatarClass"
+            class="k-chip-avatar k-avatar k-rounded-full"
+        >
+            <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
+        </span>
+
+        <span class="k-chip-content">
+            <span class="k-chip-label" *ngIf="label">
+                {{ label }}
+            </span>
+            <ng-content *ngIf="!label"></ng-content>
+        </span>
+
+        <span class="k-chip-actions">
+            <span class="k-chip-action k-chip-remove-action"
+                *ngIf="removable"
+                (click)="onRemoveClick($event)"
+                >
+                <span
+                    class="k-icon"
+                    [ngClass]="removeIconClass"
+                >
+                </span>
+            </span>
+        </span>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chip',
+                    template: `
         <span
             *ngIf="icon"
             class="k-chip-icon k-icon"
@@ -3802,21 +3731,72 @@ ChipComponent = __decorate([
             </span>
         </span>
     `,
-        providers: [
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.chip'
-            }
-        ]
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        NgZone,
-        LocalizationService])
-], ChipComponent);
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.chip'
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], avatarClass: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], removeIcon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }], contentClick: [{
+                type: Output
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaChecked: [{
+                type: HostBinding,
+                args: ['attr.aria-checked']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-chip']
+            }], hasIconClass: [{
+                type: HostBinding,
+                args: ['class.k-chip-has-icon']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], selectedClass: [{
+                type: HostBinding,
+                args: ['class.k-selected']
+            }], focusedClass: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }] } });
 
-let ChipListComponent = class ChipListComponent {
+class ChipListComponent {
     constructor(localizationService, renderer, element) {
         this.localizationService = localizationService;
         this.renderer = renderer;
@@ -3933,81 +3913,69 @@ let ChipListComponent = class ChipListComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
-};
-__decorate([
-    HostBinding('class.k-chip-list'),
-    __metadata("design:type", Boolean)
-], ChipListComponent.prototype, "hostClass", void 0);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String)
-], ChipListComponent.prototype, "direction", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ChipListComponent.prototype, "selection", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], ChipListComponent.prototype, "size", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ChipListComponent.prototype, "selectedChange", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ChipListComponent.prototype, "remove", void 0);
-__decorate([
-    ContentChildren(ChipComponent),
-    __metadata("design:type", QueryList)
-], ChipListComponent.prototype, "chips", void 0);
-__decorate([
-    HostBinding('class.k-selection-single'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ChipListComponent.prototype, "single", null);
-__decorate([
-    HostBinding('class.k-selection-multiple'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ChipListComponent.prototype, "multiple", null);
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", String)
-], ChipListComponent.prototype, "role", void 0);
-__decorate([
-    HostListener('click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], ChipListComponent.prototype, "onClick", null);
-ChipListComponent = __decorate([
-    Component({
-        selector: 'kendo-chiplist, kendo-chip-list',
-        template: `
+}
+ChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.chiplist'
+        }
+    ], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
+        <ng-content></ng-content>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chiplist, kendo-chip-list',
+                    template: `
         <ng-content></ng-content>
     `,
-        providers: [
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.chiplist'
-            }
-        ]
-    }),
-    __metadata("design:paramtypes", [LocalizationService,
-        Renderer2,
-        ElementRef])
-], ChipListComponent);
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.chiplist'
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-chip-list']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], selection: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], chips: [{
+                type: ContentChildren,
+                args: [ChipComponent]
+            }], single: [{
+                type: HostBinding,
+                args: ['class.k-selection-single']
+            }], multiple: [{
+                type: HostBinding,
+                args: ['class.k-selection-multiple']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
-const exportedModules = [
+const exportedModules$1 = [
     ChipComponent,
     ChipListComponent
 ];
-const declarations = [
-    ...exportedModules
+const declarations$1 = [
+    ...exportedModules$1
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -4037,15 +4005,21 @@ const declarations = [
  *
  * ```
  */
-let ChipModule = class ChipModule {
-};
-ChipModule = __decorate([
-    NgModule({
-        declarations: [declarations],
-        exports: [exportedModules],
-        imports: [CommonModule]
-    })
-], ChipModule);
+class ChipModule {
+}
+ChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, declarations: [ChipComponent,
+        ChipListComponent], imports: [CommonModule], exports: [ChipComponent,
+        ChipListComponent] });
+ChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations$1],
+                    exports: [exportedModules$1],
+                    imports: [CommonModule]
+                }]
+        }] });
 
 /**
  * @hidden
@@ -4111,51 +4085,254 @@ function closeAnimation(animationSettings) {
     ]);
 }
 
-/**
- * Represents a template that defines the content of the whole dial item.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoDialItemTemplate` directive inside the `<kendo-floatingactionbutton>` tag
- * ([see example]({% slug templates_floatingactionbutton %}#toc-dial-item-template)).
- */
-let DialItemTemplateDirective = class DialItemTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-};
-DialItemTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoDialItemTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], DialItemTemplateDirective);
+/**
+ * Represents a template that defines the content of the whole dial item.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoDialItemTemplate` directive inside the `<kendo-floatingactionbutton>` tag
+ * ([see example]({% slug templates_floatingactionbutton %}#toc-dial-item-template)).
+ */
+class DialItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+DialItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DialItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DialItemTemplateDirective, selector: "[kendoDialItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDialItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents a template that defines the content of the FloatingActionButton.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoFloatingActionButtonTemplate` directive inside the `<kendo-floatingactionbutton>` tag
+ * ([see example]({% slug templates_floatingactionbutton %}#toc-floatingactionbutton-template)).
+ */
+class FloatingActionButtonTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+FloatingActionButtonTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FloatingActionButtonTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoFloatingActionButtonTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+class DialItemComponent {
+    constructor(element, renderer, localisationService) {
+        this.element = element;
+        this.renderer = renderer;
+        this.localisationService = localisationService;
+        this.hostClass = true;
+        this.role = 'menuitem';
+    }
+    get disabledClass() {
+        return this.item.disabled;
+    }
+    get title() {
+        const label = this.item.label;
+        return label ? label : this.itemTitle;
+    }
+    get indexAttr() {
+        return this.index;
+    }
+    get iconClasses() {
+        const classes = [];
+        if (this.item.iconClass) {
+            classes.push(`${this.item.iconClass}`);
+        }
+        if (this.item.icon) {
+            classes.push(`k-fab-item-icon k-icon k-i-${this.item.icon}`);
+        }
+        return classes;
+    }
+    get itemTitle() {
+        const icon = this.item.icon;
+        const itemTitle = this.item.itemTitle;
+        return (icon && itemTitle) ? itemTitle : icon;
+    }
+    ngAfterViewInit() {
+        const element = this.element.nativeElement;
+        const rtl = this.localisationService.rtl;
+        const hAlign = this.align.horizontal;
+        this.renderer.addClass(element, this.getTextDirectionClass(rtl, hAlign));
+    }
+    getTextDirectionClass(rtl, hAlign) {
+        const dir = rtl ? 'rtl' : 'ltr';
+        const align = hAlign === 'end' ? 'end' : 'start';
+        const directions = {
+            rtl: { end: 'k-text-left', start: 'k-text-right' },
+            ltr: { start: 'k-text-left', end: 'k-text-right' }
+        };
+        return directions[dir][align];
+    }
+}
+DialItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialItemComponent, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
+        <ng-template *ngIf="dialItemTemplate"
+            [ngTemplateOutlet]="dialItemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
+        >
+        </ng-template>
+
+        <ng-container *ngIf="!dialItemTemplate">
+            <span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
+            <span *ngIf="item.icon || item.iconClass" [ngClass]="iconClasses"></span>
+        </ng-container>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoDialItem]',
+                    template: `
+        <ng-template *ngIf="dialItemTemplate"
+            [ngTemplateOutlet]="dialItemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
+        >
+        </ng-template>
+
+        <ng-container *ngIf="!dialItemTemplate">
+            <span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
+            <span *ngIf="item.icon || item.iconClass" [ngClass]="iconClasses"></span>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-fab-item']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], title: [{
+                type: HostBinding,
+                args: ['attr.title']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], indexAttr: [{
+                type: HostBinding,
+                args: ['attr.data-fab-item-index']
+            }], cssClass: [{
+                type: Input
+            }], cssStyle: [{
+                type: Input
+            }], isFocused: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], dialItemTemplate: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }] } });
 
 /**
- * Represents a template that defines the content of the FloatingActionButton.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoFloatingActionButtonTemplate` directive inside the `<kendo-floatingactionbutton>` tag
- * ([see example]({% slug templates_floatingactionbutton %}#toc-floatingactionbutton-template)).
+ * @hidden
  */
-let FloatingActionButtonTemplateDirective = class FloatingActionButtonTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+class DialListComponent {
+    constructor(focusService, cdr) {
+        this.focusService = focusService;
+        this.cdr = cdr;
+        this.hostClass = true;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.focusService.onFocus.subscribe(() => this.cdr.detectChanges()));
     }
-};
-FloatingActionButtonTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoFloatingActionButtonTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], FloatingActionButtonTemplateDirective);
+    get bottomClass() {
+        return this.align.vertical === 'top' || this.align.vertical === 'middle';
+    }
+    get topClass() {
+        return this.align.vertical === 'bottom';
+    }
+    isFocused(index) {
+        return this.focusService.isFocused(index);
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+}
+DialListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialListComponent, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
+        <ng-container *ngFor='let item of dialItems; let idx = index'>
+            <li
+                kendoButtonFocusable
+                kendoDialItem
+                [item]="dialItems[idx]"
+                [index]="idx"
+                [dialItemTemplate]="dialItemTemplate"
+                [isFocused]="isFocused(idx)"
+                [ngClass]='item.cssClass'
+                [ngStyle]='item.cssStyle'
+                [align]="align"
+            >
+            </li>
+        </ng-container>
+    `, isInline: true, components: [{ type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoDialList]',
+                    template: `
+        <ng-container *ngFor='let item of dialItems; let idx = index'>
+            <li
+                kendoButtonFocusable
+                kendoDialItem
+                [item]="dialItems[idx]"
+                [index]="idx"
+                [dialItemTemplate]="dialItemTemplate"
+                [isFocused]="isFocused(idx)"
+                [ngClass]='item.cssClass'
+                [ngStyle]='item.cssStyle'
+                [align]="align"
+            >
+            </li>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-fab-items']
+            }], bottomClass: [{
+                type: HostBinding,
+                args: ['class.k-fab-items-bottom']
+            }], topClass: [{
+                type: HostBinding,
+                args: ['class.k-fab-items-top']
+            }], dialItems: [{
+                type: Input
+            }], dialItemTemplate: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }] } });
 
-const NAVIGATION_SETTINGS$2 = {
+const NAVIGATION_SETTINGS = {
     useLeftRightArrows: false
 };
-const ɵ0$2 = NAVIGATION_SETTINGS$2;
-const NAVIGATION_SETTINGS_PROVIDER$2 = {
+const NAVIGATION_SETTINGS_PROVIDER = {
     provide: NAVIGATION_CONFIG,
-    useValue: ɵ0$2
+    useValue: NAVIGATION_SETTINGS
 };
 const SIZE_CLASSES = {
     small: 'k-fab-sm',
@@ -4182,7 +4359,7 @@ const DEFAULT_OFFSET = '16px';
  * Used to specify the primary or the most common action in an application.
  *
  */
-let FloatingActionButtonComponent = class FloatingActionButtonComponent {
+class FloatingActionButtonComponent {
     constructor(renderer, element, focusService, navigationService, ngZone, popupService, builder, localizationService) {
         this.renderer = renderer;
         this.element = element;
@@ -4789,142 +4966,18 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         }
         return DEFAULT_DURATION;
     }
-};
-__decorate([
-    HostBinding('class.k-pos-fixed'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FloatingActionButtonComponent.prototype, "fixedClass", null);
-__decorate([
-    HostBinding('class.k-pos-absolute'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], FloatingActionButtonComponent.prototype, "absoluteClass", null);
-__decorate([
-    HostBinding('attr.dir'),
-    __metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "direction", void 0);
-__decorate([
-    ViewChild('button', { static: true }),
-    __metadata("design:type", ElementRef)
-], FloatingActionButtonComponent.prototype, "button", void 0);
-__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], FloatingActionButtonComponent.prototype, "popupTemplate", void 0);
-__decorate([
-    ContentChild(DialItemTemplateDirective, { static: true }),
-    __metadata("design:type", DialItemTemplateDirective)
-], FloatingActionButtonComponent.prototype, "dialItemTemplate", void 0);
-__decorate([
-    ContentChild(FloatingActionButtonTemplateDirective, { static: true }),
-    __metadata("design:type", FloatingActionButtonTemplateDirective)
-], FloatingActionButtonComponent.prototype, "fabTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], FloatingActionButtonComponent.prototype, "themeColor", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], FloatingActionButtonComponent.prototype, "size", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], FloatingActionButtonComponent.prototype, "rounded", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], FloatingActionButtonComponent.prototype, "shape", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], FloatingActionButtonComponent.prototype, "disabled", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], FloatingActionButtonComponent.prototype, "align", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], FloatingActionButtonComponent.prototype, "offset", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "positionMode", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "icon", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "iconClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FloatingActionButtonComponent.prototype, "buttonClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FloatingActionButtonComponent.prototype, "dialClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], FloatingActionButtonComponent.prototype, "text", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], FloatingActionButtonComponent.prototype, "dialItemAnimation", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], FloatingActionButtonComponent.prototype, "tabIndex", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], FloatingActionButtonComponent.prototype, "dialItems", void 0);
-__decorate([
-    Output('blur'),
-    __metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "onBlur", void 0);
-__decorate([
-    Output('focus'),
-    __metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "onFocus", void 0);
-__decorate([
-    Output('dialItemClick'),
-    __metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "dialItemClick", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "open", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], FloatingActionButtonComponent.prototype, "close", void 0);
-FloatingActionButtonComponent = __decorate([
-    Component({
-        selector: 'kendo-floatingactionbutton',
-        providers: [
-            FocusService,
-            NavigationService,
-            NAVIGATION_SETTINGS_PROVIDER$2,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.floatingactionbutton'
-            }
-        ],
-        template: `
+}
+FloatingActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FocusService }, { token: NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", shape: "shape", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
+        FocusService,
+        NavigationService,
+        NAVIGATION_SETTINGS_PROVIDER,
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.floatingactionbutton'
+        }
+    ], queries: [{ propertyName: "dialItemTemplate", first: true, predicate: DialItemTemplateDirective, descendants: true, static: true }, { propertyName: "fabTemplate", first: true, predicate: FloatingActionButtonTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
         <button
             #button
             [attr.id]="id"
@@ -4969,224 +5022,143 @@ FloatingActionButtonComponent = __decorate([
             >
             </ul>
         </ng-template>
-    `
-    }),
-    __metadata("design:paramtypes", [Renderer2,
-        ElementRef,
-        FocusService,
-        NavigationService,
-        NgZone,
-        PopupService,
-        AnimationBuilder,
-        LocalizationService])
-], FloatingActionButtonComponent);
+    `, isInline: true, components: [{ type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-floatingactionbutton',
+                    providers: [
+                        FocusService,
+                        NavigationService,
+                        NAVIGATION_SETTINGS_PROVIDER,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.floatingactionbutton'
+                        }
+                    ],
+                    template: `
+        <button
+            #button
+            [attr.id]="id"
+            [attr.role]="role"
+            [tabIndex]="componentTabIndex"
+            type="button"
+            class="k-fab k-fab-solid"
+            [class.k-disabled]="disabled"
+            [ngClass]="buttonClass"
+            [disabled]="disabled"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-expanded]="ariaExpanded"
+            [attr.aria-haspopup]="ariaHasPopup"
+            (focus)="focusHandler()"
+            (blur)="blurHandler()"
+            [kendoEventsOutsideAngular]="{
+                keydown: keyDownHandler,
+                click: clickHandler
+            }"
+            [scope]="this"
+        >
+            <ng-template *ngIf="fabTemplate"
+                [ngTemplateOutlet]="fabTemplate?.templateRef"
+            >
+            </ng-template>
 
-/**
- * @hidden
- */
-let DialListComponent = class DialListComponent {
-    constructor(focusService, cdr) {
-        this.focusService = focusService;
-        this.cdr = cdr;
-        this.hostClass = true;
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.focusService.onFocus.subscribe(() => this.cdr.detectChanges()));
-    }
-    get bottomClass() {
-        return this.align.vertical === 'top' || this.align.vertical === 'middle';
-    }
-    get topClass() {
-        return this.align.vertical === 'bottom';
-    }
-    isFocused(index) {
-        return this.focusService.isFocused(index);
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-};
-__decorate([
-    HostBinding('class.k-fab-items'),
-    __metadata("design:type", Boolean)
-], DialListComponent.prototype, "hostClass", void 0);
-__decorate([
-    HostBinding('class.k-fab-items-bottom'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], DialListComponent.prototype, "bottomClass", null);
-__decorate([
-    HostBinding('class.k-fab-items-top'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], DialListComponent.prototype, "topClass", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Array)
-], DialListComponent.prototype, "dialItems", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], DialListComponent.prototype, "dialItemTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], DialListComponent.prototype, "align", void 0);
-DialListComponent = __decorate([
-    Component({
-        selector: '[kendoDialList]',
-        template: `
-        <ng-container *ngFor='let item of dialItems; let idx = index'>
-            <li
-                kendoButtonFocusable
-                kendoDialItem
-                [item]="dialItems[idx]"
-                [index]="idx"
-                [dialItemTemplate]="dialItemTemplate"
-                [isFocused]="isFocused(idx)"
-                [ngClass]='item.cssClass'
-                [ngStyle]='item.cssStyle'
+            <ng-container *ngIf="!fabTemplate">
+                <span *ngIf="icon || iconClass" [ngClass]="iconClasses"></span>
+                <span *ngIf="text" class="k-fab-text">{{ text }}</span>
+            </ng-container>
+        </button>
+
+        <ng-template #popupTemplate>
+            <ul
+                kendoDialList
+                [ngClass]="dialClass"
+                [dialItems]="dialItems"
+                [dialItemTemplate]='dialItemTemplate?.templateRef'
                 [align]="align"
+                [attr.aria-labelledby]="id"
+                (click)="onItemClick($event)"
             >
-            </li>
-        </ng-container>
-    `
-    }),
-    __metadata("design:paramtypes", [FocusService, ChangeDetectorRef])
-], DialListComponent);
-
-/**
- * @hidden
- */
-let DialItemComponent = class DialItemComponent {
-    constructor(element, renderer, localisationService) {
-        this.element = element;
-        this.renderer = renderer;
-        this.localisationService = localisationService;
-        this.hostClass = true;
-        this.role = 'menuitem';
-    }
-    get disabledClass() {
-        return this.item.disabled;
-    }
-    get title() {
-        const label = this.item.label;
-        return label ? label : this.itemTitle;
-    }
-    get indexAttr() {
-        return this.index;
-    }
-    get iconClasses() {
-        const classes = [];
-        if (this.item.iconClass) {
-            classes.push(`${this.item.iconClass}`);
-        }
-        if (this.item.icon) {
-            classes.push(`k-fab-item-icon k-icon k-i-${this.item.icon}`);
-        }
-        return classes;
-    }
-    get itemTitle() {
-        const icon = this.item.icon;
-        const itemTitle = this.item.itemTitle;
-        return (icon && itemTitle) ? itemTitle : icon;
-    }
-    ngAfterViewInit() {
-        const element = this.element.nativeElement;
-        const rtl = this.localisationService.rtl;
-        const hAlign = this.align.horizontal;
-        this.renderer.addClass(element, this.getTextDirectionClass(rtl, hAlign));
-    }
-    getTextDirectionClass(rtl, hAlign) {
-        const dir = rtl ? 'rtl' : 'ltr';
-        const align = hAlign === 'end' ? 'end' : 'start';
-        const directions = {
-            rtl: { end: 'k-text-left', start: 'k-text-right' },
-            ltr: { start: 'k-text-left', end: 'k-text-right' }
-        };
-        return directions[dir][align];
-    }
-};
-__decorate([
-    HostBinding('class.k-fab-item'),
-    __metadata("design:type", Boolean)
-], DialItemComponent.prototype, "hostClass", void 0);
-__decorate([
-    HostBinding('attr.role'),
-    __metadata("design:type", String)
-], DialItemComponent.prototype, "role", void 0);
-__decorate([
-    HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], DialItemComponent.prototype, "disabledClass", null);
-__decorate([
-    HostBinding('attr.title'),
-    HostBinding('attr.aria-label'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], DialItemComponent.prototype, "title", null);
-__decorate([
-    HostBinding('attr.data-fab-item-index'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], DialItemComponent.prototype, "indexAttr", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], DialItemComponent.prototype, "cssClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], DialItemComponent.prototype, "cssStyle", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], DialItemComponent.prototype, "isFocused", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], DialItemComponent.prototype, "index", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], DialItemComponent.prototype, "item", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", TemplateRef)
-], DialItemComponent.prototype, "dialItemTemplate", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], DialItemComponent.prototype, "align", void 0);
-DialItemComponent = __decorate([
-    Component({
-        selector: '[kendoDialItem]',
-        template: `
-        <ng-template *ngIf="dialItemTemplate"
-            [ngTemplateOutlet]="dialItemTemplate"
-            [ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
-        >
+            </ul>
         </ng-template>
-
-        <ng-container *ngIf="!dialItemTemplate">
-            <span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
-            <span *ngIf="item.icon || item.iconClass" [ngClass]="iconClasses"></span>
-        </ng-container>
     `
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        LocalizationService])
-], DialItemComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: FocusService }, { type: NavigationService }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i4.AnimationBuilder }, { type: i1.LocalizationService }]; }, propDecorators: { fixedClass: [{
+                type: HostBinding,
+                args: ['class.k-pos-fixed']
+            }], absoluteClass: [{
+                type: HostBinding,
+                args: ['class.k-pos-absolute']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], button: [{
+                type: ViewChild,
+                args: ['button', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], dialItemTemplate: [{
+                type: ContentChild,
+                args: [DialItemTemplateDirective, { static: true }]
+            }], fabTemplate: [{
+                type: ContentChild,
+                args: [FloatingActionButtonTemplateDirective, { static: true }]
+            }], themeColor: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], shape: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], positionMode: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], dialClass: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], dialItemAnimation: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], dialItems: [{
+                type: Input
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], dialItemClick: [{
+                type: Output,
+                args: ['dialItemClick']
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
 
-const exportedModules$1 = [
+const exportedModules = [
     FloatingActionButtonComponent,
     DialItemTemplateDirective,
     FloatingActionButtonTemplateDirective
 ];
-const declarations$1 = [
-    ...exportedModules$1,
+const declarations = [
+    ...exportedModules,
     DialListComponent,
     DialItemComponent
 ];
@@ -5218,15 +5190,24 @@ const declarations$1 = [
  *
  * ```
  */
-let FloatingActionButtonModule = class FloatingActionButtonModule {
-};
-FloatingActionButtonModule = __decorate([
-    NgModule({
-        declarations: [declarations$1],
-        exports: [exportedModules$1],
-        imports: [CommonModule, PopupModule, ListModule, EventsModule]
-    })
-], FloatingActionButtonModule);
+class FloatingActionButtonModule {
+}
+FloatingActionButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FloatingActionButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonModule, declarations: [FloatingActionButtonComponent,
+        DialItemTemplateDirective,
+        FloatingActionButtonTemplateDirective, DialListComponent,
+        DialItemComponent], imports: [CommonModule, PopupModule, ListModule, EventsModule], exports: [FloatingActionButtonComponent,
+        DialItemTemplateDirective,
+        FloatingActionButtonTemplateDirective] });
+FloatingActionButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonModule, imports: [[CommonModule, PopupModule, ListModule, EventsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [declarations],
+                    exports: [exportedModules],
+                    imports: [CommonModule, PopupModule, ListModule, EventsModule]
+                }]
+        }] });
 
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
@@ -5259,16 +5240,21 @@ FloatingActionButtonModule = __decorate([
  *
  * ```
  */
-let ButtonsModule = class ButtonsModule {
-};
-ButtonsModule = __decorate([
-    NgModule({
-        exports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule]
-    })
-], ButtonsModule);
+class ButtonsModule {
+}
+ButtonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, exports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
+ButtonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, imports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { KendoButtonService, DialItemComponent, DialListComponent, FocusService, FocusableDirective, ButtonItemTemplateDirective, ListButton, ListComponent, ListModule, TemplateContextDirective, NAVIGATION_CONFIG, NavigationService, LocalizedSplitButtonMessagesDirective, Messages, ButtonDirective, ButtonDirective as Button, ButtonGroupComponent, ButtonGroupComponent as ButtonGroup, ButtonGroupModule, ButtonModule, ButtonsModule, SplitButtonComponent, SplitButtonComponent as SplitButton, SplitButtonModule, SplitButtonCustomMessagesComponent, DropDownButtonComponent, DropDownButtonComponent as DropDownButton, DropDownButtonModule, ChipComponent, ChipListComponent, ChipModule, FloatingActionButtonModule, FloatingActionButtonComponent, FloatingActionButtonTemplateDirective, DialItemTemplateDirective };
+export { ButtonDirective as Button, ButtonDirective, ButtonGroupComponent as ButtonGroup, ButtonGroupComponent, ButtonGroupModule, ButtonItemTemplateDirective, ButtonModule, ButtonsModule, ChipComponent, ChipListComponent, ChipModule, DialItemTemplateDirective, DropDownButtonComponent as DropDownButton, DropDownButtonComponent, DropDownButtonModule, FloatingActionButtonComponent, FloatingActionButtonModule, FloatingActionButtonTemplateDirective, FocusableDirective, ListComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonComponent as SplitButton, SplitButtonComponent, SplitButtonCustomMessagesComponent, SplitButtonModule, TemplateContextDirective };
+