@progress/kendo-angular-buttons 7.0.6 → 8.0.0-dev.202204190655

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

@@ -2,36 +2,22 @@
 * 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 { isDocumentAvailable, Keys, isChanged, 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 { Subject, Subscription, fromEvent, merge } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
+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
@@ -40,12 +26,14 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1648649426,
+    publishDate: 1650351322,
     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 */
+/**
+ * @hidden
+ */
 const resolvedPromise = Promise.resolve(null);
 /**
  * @hidden
@@ -107,18 +95,17 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
         case 'size':
             return {
                 toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
             };
         case 'rounded':
             return {
                 toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
-                toAdd: newValue ? `k-rounded-${ROUNDNESS[newValue]}` : null
+                toAdd: newValue !== 'none' ? `k-rounded-${ROUNDNESS[newValue]}` : ''
             };
         case 'fillMode':
-        case 'shape':
             return {
                 toRemove: `k-${componentType}-${previousValue}`,
-                toAdd: newValue ? `k-${componentType}-${newValue}` : null
+                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
             };
         default:
             break;
@@ -132,7 +119,7 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
 const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousValue, newValue) => {
     return {
         toRemove: `k-${componentType}-${prevFillMode}-${previousValue}`,
-        toAdd: newValue ? `k-${componentType}-${fillMode}-${newValue}` : null
+        toAdd: newValue !== 'none' ? `k-${componentType}-${fillMode}-${newValue}` : ''
     };
 };
 /**
@@ -146,11 +133,33 @@ const isFirefox = (userAgent) => {
     return (desktopBrowser && desktopBrowser.mozilla) || (mobileOS && mobileOS.browser === 'firefox');
 };
 
+/**
+ * @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';
+const DEFAULT_ROUNDED$2 = 'medium';
+const DEFAULT_SIZE$1 = 'medium';
+const DEFAULT_THEME_COLOR$1 = 'base';
+const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * 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;
@@ -176,16 +185,15 @@ let ButtonDirective = class ButtonDirective {
         this.isDisabled = false;
         this.isIcon = false;
         this.isIconClass = false;
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._shape = 'rectangle';
-        this._fillMode = 'solid';
-        this._themeColor = 'base';
+        this._size = DEFAULT_SIZE$1;
+        this._rounded = DEFAULT_ROUNDED$2;
+        this._fillMode = DEFAULT_FILL_MODE$2;
+        this._themeColor = DEFAULT_THEME_COLOR$1;
         this._focused = false;
-        this.domEvents = [];
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.element = element.nativeElement;
         this.renderer = renderer;
     }
@@ -286,14 +294,15 @@ let ButtonDirective = class ButtonDirective {
      * ([see example]({% slug appearance_button %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE$1;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -303,15 +312,16 @@ let ButtonDirective = class ButtonDirective {
      * ([see example]({% slug appearance_button %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -321,16 +331,17 @@ let ButtonDirective = class ButtonDirective {
      * ([see example]({% slug appearance_button %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'flat'`
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `'clear'`
-     * * `'link'`
-     * * `null`
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `clear`
+     * * `link`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -341,40 +352,27 @@ let ButtonDirective = class ButtonDirective {
      * ([see example]({% slug appearance_button %}#toc-themeColor)).
      *
      * The possible values are:
-     * * `'base'` (default)
-     * * `'primary'`
-     * * `'secondary'`
-     * * `'tertiary'`
-     * * `'info'`
-     * * `'success'`
-     * * `'warning'`
-     * * `'error'`
-     * * `'dark'`
-     * * `'light`'
-     * * `'inverse'`
+     * * `base` (default)
+     * * `primary`
+     * * `secondary`
+     * * `tertiary`
+     * * `info`
+     * * `success`
+     * * `warning`
+     * * `error`
+     * * `dark`
+     * * `light`
+     * * `inverse`
+     * * `none`
      */
     set themeColor(themeColor) {
-        this.handleThemeColor(themeColor);
-        this._themeColor = themeColor;
+        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR$1;
+        this.handleThemeColor(newThemeColor);
+        this._themeColor = newThemeColor;
     }
     get themeColor() {
         return this._themeColor;
     }
-    /**
-     * The shape property specifies if the Button will form a rectangle or square.
-     * ([see example]({% slug appearance_button %}#toc-shape)).
-     *
-     * The possible values are:
-     * * `'square'`
-     * * `'rectangle'` (default)
-     */
-    set shape(shape) {
-        this.handleClasses(shape, 'shape');
-        this._shape = shape;
-    }
-    get shape() {
-        return this._shape;
-    }
     set isFocused(isFocused) {
         this.toggleClass('k-focus', isFocused);
         this._focused = isFocused;
@@ -441,8 +439,8 @@ let ButtonDirective = class ButtonDirective {
             this.setAttribute('role', this.role);
         }
         this.ngZone.runOutsideAngular(() => {
-            this.domEvents.push(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
-            this.domEvents.push(this.renderer.listen(this.element, 'keydown', (event) => {
+            this.subs.add(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
+            this.subs.add(this.renderer.listen(this.element, 'keydown', (event) => {
                 const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
                 if (isSpan && isSpaceOrEnter) {
                     this.click.emit(event);
@@ -457,7 +455,7 @@ let ButtonDirective = class ButtonDirective {
         }
     }
     ngAfterViewInit() {
-        const stylingOptions = ['size', 'rounded', 'shape', 'fillMode'];
+        const stylingOptions = ['size', 'rounded', 'fillMode'];
         stylingOptions.forEach(input => {
             this.handleClasses(this[input], input);
         });
@@ -470,9 +468,8 @@ let ButtonDirective = class ButtonDirective {
         this.iconNode = null;
         this.iconSpanNode = null;
         this.renderer = null;
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
         clearTimeout(this.deferTimeout);
-        this.domEvents.forEach(unbindHandler => unbindHandler());
     }
     /**
      * Focuses the Button component.
@@ -655,161 +652,98 @@ let ButtonDirective = class ButtonDirective {
         const addFillMode = fillMode ? fillMode : this.fillMode;
         const themeColorClass = getThemeColorClasses('button', removeFillMode, addFillMode, this.themeColor, value);
         this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== null && fillMode !== null) {
+        if (addFillMode !== 'none' && fillMode !== 'none') {
             if (themeColorClass.toAdd) {
                 this.renderer.addClass(elem, themeColorClass.toAdd);
             }
         }
     }
-};
-__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", 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
+            }], 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
@@ -842,7 +776,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;
@@ -856,8 +790,9 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         this.navigate = new EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
     /**
      * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
@@ -922,7 +857,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         }
     }
     ngOnInit() {
-        this.subscription = this.service.buttonClicked$.subscribe((button) => {
+        this.subs.add(this.service.buttonClicked$.subscribe((button) => {
             let newSelectionValue;
             if (this.isSelectionSingle()) {
                 newSelectionValue = true;
@@ -936,7 +871,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
                 button.setSelected(newSelectionValue);
             }
             button.setAttribute(tabindex, '0');
-        });
+        }));
     }
     ngOnChanges(change) {
         if (isChanged('disabled', change)) {
@@ -964,8 +899,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         }
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.localizationChangeSubscription.unsubscribe();
+        this.subs.unsubscribe();
     }
     ngAfterContentChecked() {
         this.verifySettings();
@@ -1028,110 +962,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'] }})
@@ -1164,14 +1073,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
@@ -1181,188 +1094,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;"
-                [index]="index"
-                tabindex="-1"
-                class="k-item k-menu-item"
-                (click)="onClick(index)"
-                (blur)="onBlur()"
-                [attr.aria-disabled]="dataItem.disabled ? true : false">
-                <ng-template [ngIf]="itemTemplate?.templateRef">
-                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
-                        <ng-template [templateContext]="{templateRef: itemTemplate?.templateRef, $implicit: dataItem}"></ng-template>
-                    </span>
-                </ng-template>
-                <ng-template [ngIf]="!itemTemplate?.templateRef">
-                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
-                        <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();
     }
@@ -1386,18 +1135,21 @@ 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;
+        this.subs = new Subscription();
         this.element = elementRef.nativeElement;
         this.subscribeEvents();
     }
@@ -1413,13 +1165,13 @@ let FocusableDirective = class FocusableDirective {
      * @hidden
      */
     ngOnDestroy() {
-        this.unsubscribeEvents();
+        this.subs.unsubscribe();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.focusSubscription = this.focusService.onFocus.subscribe((index) => {
+        this.subs.add(this.focusService.onFocus.subscribe((index) => {
             if (this.index === index) {
                 this.renderer.addClass(this.element, 'k-focus');
                 this.element.focus();
@@ -1427,32 +1179,24 @@ let FocusableDirective = class FocusableDirective {
             else {
                 this.renderer.removeClass(this.element, 'k-focus');
             }
-        });
-    }
-    unsubscribeEvents() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        if (this.focusSubscription) {
-            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;
     }
@@ -1465,86 +1209,398 @@ 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: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[templateContext]'
+                }]
+        }], 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;
+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();
+    }
+}
+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;"
+                [index]="index"
+                tabindex="-1"
+                class="k-item k-menu-item"
+                (click)="onClick(index)"
+                (blur)="onBlur()"
+                [attr.aria-disabled]="dataItem.disabled ? true : false">
+                <ng-template [ngIf]="itemTemplate?.templateRef">
+                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
+                        <ng-template [templateContext]="{templateRef: itemTemplate?.templateRef, $implicit: dataItem}"></ng-template>
+                    </span>
+                </ng-template>
+                <ng-template [ngIf]="!itemTemplate?.templateRef">
+                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
+                        <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;"
+                [index]="index"
+                tabindex="-1"
+                class="k-item k-menu-item"
+                (click)="onClick(index)"
+                (blur)="onBlur()"
+                [attr.aria-disabled]="dataItem.disabled ? true : false">
+                <ng-template [ngIf]="itemTemplate?.templateRef">
+                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
+                        <ng-template [templateContext]="{templateRef: itemTemplate?.templateRef, $implicit: dataItem}"></ng-template>
+                    </span>
+                </ng-template>
+                <ng-template [ngIf]="!itemTemplate?.templateRef">
+                    <span class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled">
+                        <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
+            }] } });
+
+/**
+ * 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) {
+    // eslint-disable-next-line id-denylist
+    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;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.focusService = focusService;
         this.navigationService = navigationService;
         this.wrapper = wrapperRef.nativeElement;
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr'));
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.subscribeEvents();
     }
     get popupClasses() {
@@ -1581,12 +1637,9 @@ class ListButton {
     }
     ngOnDestroy() {
         this.openState = false;
-        this.unsubscribeEvents();
         clearTimeout(this.focusFirstTimeout);
         clearTimeout(this.blurTimeout);
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
@@ -1597,25 +1650,25 @@ class ListButton {
         this.subscribeNavigationEvents();
     }
     subscribeListItemFocusEvent() {
-        this.focusSubscription = this.focusService.onFocus.subscribe(() => {
+        this.subs.add(this.focusService.onFocus.subscribe(() => {
             this._isFocused = true;
-        });
+        }));
     }
     subscribeComponentBlurredEvent() {
         this._zone.runOutsideAngular(() => {
-            this.tabSubscription = this.navigationService.tab.pipe(filter(() => this._isFocused)).subscribe(this.handleTab.bind(this));
-            this.componentBlurredSubscription = fromEvent(document, 'click')
+            this.subs.add(this.navigationService.tab.pipe(filter(() => this._isFocused)).subscribe(this.handleTab.bind(this)));
+            this.subs.add(fromEvent(document, 'click')
                 .pipe(filter((event) => !this.wrapperContains(event.target)), filter(() => this._isFocused))
-                .subscribe(() => this._zone.run(() => this.blurWrapper()));
+                .subscribe(() => this._zone.run(() => this.blurWrapper())));
         });
     }
     subscribeNavigationEvents() {
-        this.navigationSubscription = this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService));
-        this.enterUpSubscription = this.navigationService.enterup.subscribe(() => {
+        this.subs.add(this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService)));
+        this.subs.add(this.navigationService.enterup.subscribe(() => {
             this.enterHandler();
             this.focusWrapper();
-        });
-        this.openSubscription = this.navigationService.open.subscribe(() => {
+        }));
+        this.subs.add(this.navigationService.open.subscribe(() => {
             if (!this._open) {
                 this.togglePopupVisibility();
                 this.focusFirstItem();
@@ -1623,28 +1676,10 @@ class ListButton {
             else {
                 this.focusWrapper();
             }
-        });
-        this.closeSubscription = merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper());
-    }
-    enterHandler() { } // tslint:disable-line
-    unsubscribeEvents() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.unsubscribe(this.componentBlurredSubscription);
-        this.unsubscribe(this.focusSubscription);
-        this.unsubscribe(this.navigationSubscription);
-        this.unsubscribe(this.enterPressSubscription);
-        this.unsubscribe(this.enterUpSubscription);
-        this.unsubscribe(this.openSubscription);
-        this.unsubscribe(this.closeSubscription);
-        this.unsubscribe(this.tabSubscription);
-    }
-    unsubscribe(subscription) {
-        if (subscription) {
-            subscription.unsubscribe();
-        }
+        }));
+        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper()));
     }
+    enterHandler() { } // eslint-disable-line
     /**
      * @hidden
      */
@@ -1734,122 +1769,70 @@ 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: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    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 = {
+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
 };
+const DEFAULT_ROUNDED$1 = 'medium';
+const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -1891,7 +1874,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;
@@ -1926,10 +1909,10 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
          * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
          *
          * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `null`
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `none`
          */
         this.size = 'medium';
         /**
@@ -1949,6 +1932,7 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
          * * `dark`&mdash; Applies coloring based on the `dark` theme color.
          * * `light`&mdash; Applies coloring based on the `light` theme color.
          * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+         * * `none`&mdash; Removes the built in theme color.
          */
         this.themeColor = 'base';
         /**
@@ -2013,11 +1997,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();
         /**
          * Fires each time the SplitButton gets blurred.
          */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onBlur = new EventEmitter();
         /**
          * Fires each time the popup is about to open.
          * This event is preventable. If you cancel the event, the popup will remain closed.
@@ -2035,8 +2019,9 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
         this.listId = guid();
         this.buttonText = '';
         this.lockFocus = false;
-        this._rounded = 'medium';
-        this._fillMode = "solid";
+        this._rounded = DEFAULT_ROUNDED$1;
+        this._fillMode = DEFAULT_FILL_MODE$1;
+        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -2045,15 +2030,16 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
      * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -2069,7 +2055,8 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
      * * `link`
      */
     set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
+        this._fillMode = fillMode === 'clear' ? 'flat' : newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -2384,11 +2371,12 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
             popupAlign: this.popupAlign,
             popupClass: this.popupClasses
         });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false));
-        this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this));
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false)));
+        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
     }
     destroyPopup() {
         if (this.popupRef) {
+            this.popupSubs.unsubscribe();
             this.popupRef.close();
             this.popupRef = null;
         }
@@ -2403,173 +2391,18 @@ 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' }}">
@@ -2605,19 +2438,100 @@ SplitButtonComponent = __decorate([
                 {{ text }}
             </span><ng-content></ng-content>
         </button>
+        <button kendoButton #arrowButton type="button"
+            class="k-split-button-arrow"
+            [class.k-active]="activeArrow"
+            [ngClass]="arrowButtonClass"
+            [disabled]="disabled"
+            [icon]="arrowButtonIcon"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="themeColor"
+            [tabindex]="-1"
+            (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", "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' }}">
+        </ng-container>
         <button
             kendoButton
-            #arrowButton
-            type="button"
+            #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-split-button-arrow"
             [class.k-active]="activeArrow"
+            [ngClass]="arrowButtonClass"
             [disabled]="disabled"
             [icon]="arrowButtonIcon"
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             [tabindex]="-1"
-            [ngClass]="arrowButtonClass"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -2639,57 +2553,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;
@@ -2697,20 +2652,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
@@ -2720,24 +2678,28 @@ 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]
+                }]
+        }] });
 
 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
 };
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
@@ -2766,7 +2728,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;
@@ -2788,32 +2750,22 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
          * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
          *
          * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `null`
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `none`
          */
         this.size = 'medium';
-        /**
-         * The shape property specifies if the DropDownButton will be a square or rectangle.
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-shape)).
-         *
-         * The possible values are:
-         * * `'rectangle'` (default)
-         * * `'square'`
-         * * `null`
-         */
-        this.shape = 'rectangle';
         /**
          * The rounded property specifies the border radius of the DropDownButton
          * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
          *
          * The possible values are:
-         * * `'small'`
-         * * `'medium'` (default)
-         * * `'large'`
-         * * `'full'`
-         * * `null`
+         * * `small`
+         * * `medium` (default)
+         * * `large`
+         * * `full`
+         * * `none`
          */
         this.rounded = 'medium';
         /**
@@ -2833,7 +2785,7 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
          * * `dark`&mdash; Applies coloring based on the `dark` theme color.
          * * `light`&mdash; Applies coloring based on the `light` theme color.
          * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
-         * * `null` &mdash;Removes the default CSS class (no class would be rendered).
+         * * `none` &mdash;Removes the default CSS class (no class would be rendered).
          */
         this.themeColor = 'base';
         /**
@@ -2857,13 +2809,14 @@ 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();
         /**
          * Fires each time the DropDownButton gets blurred.
          */
-        this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
+        this.onBlur = new EventEmitter();
         this.listId = guid();
-        this._fillMode = 'solid';
+        this._fillMode = DEFAULT_FILL_MODE;
+        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -2914,7 +2867,7 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
      * * `flat`
      * * `outline`
      * * `link`
-     * * `null`
+     * * `none`
      */
     set fillMode(fillMode) {
         this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
@@ -3115,11 +3068,11 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
             || (this.popupRef && this.popupRef.popupElement.contains(element));
     }
     subscribeNavigationEvents() {
-        this.navigationSubscription = this.navigationService.navigate
-            .subscribe(this.onArrowKeyNavigate.bind(this));
-        this.enterUpSubscription = this.navigationService.enterup.subscribe(this.onNavigationEnterUp.bind(this));
-        this.openSubscription = this.navigationService.open.subscribe(this.onNavigationOpen.bind(this));
-        this.closeSubscription = merge(this.navigationService.close, this.navigationService.esc).subscribe(this.onNavigationClose.bind(this));
+        this.subs.add(this.navigationService.navigate
+            .subscribe(this.onArrowKeyNavigate.bind(this)));
+        this.subs.add(this.navigationService.enterup.subscribe(this.onNavigationEnterUp.bind(this)));
+        this.subs.add(this.navigationService.open.subscribe(this.onNavigationOpen.bind(this)));
+        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(this.onNavigationClose.bind(this)));
     }
     onNavigationEnterUp() {
         if (!this._disabled && !this.openState) {
@@ -3172,176 +3125,86 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
             popupAlign: this.popupAlign,
             popupClass: this.popupClasses
         });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => this.openState = false);
-        this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this));
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.openState = false));
+        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
     }
     destroyPopup() {
         if (this.popupRef) {
             this.popupRef.close();
             this.popupRef = null;
+            this.popupSubs.unsubscribe();
         }
     }
-};
-__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", 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"
+            [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", "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"
@@ -3353,7 +3216,6 @@ DropDownButtonComponent = __decorate([
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
             [size]="size"
-            [shape]="shape"
             [rounded]="rounded"
             [fillMode]="fillMode"
             [themeColor]="fillMode ? themeColor : null"
@@ -3385,16 +3247,85 @@ 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
+            }], 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
@@ -3404,20 +3335,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;
@@ -3454,6 +3389,7 @@ let ChipComponent = class ChipComponent {
         this._fillMode = 'solid';
         this._themeColor = 'base';
         this.focused = false;
+        this.subs = new Subscription();
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
@@ -3462,14 +3398,16 @@ let ChipComponent = class ChipComponent {
      * ([see example]({% slug appearance_chip %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        if (isPresent(size)) {
+            this._size = size;
+        }
+        this.handleClasses(this._size, 'size');
     }
     get size() {
         return this._size;
@@ -3479,15 +3417,17 @@ let ChipComponent = class ChipComponent {
      * ([see example]({% slug appearance_chip %}#toc-rounded)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (default)
-     * * `'large'`
-     * * `'full'`
-     * * `null`
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        if (isPresent(rounded)) {
+            this._rounded = rounded;
+        }
+        this.handleClasses(this._rounded, 'rounded');
     }
     get rounded() {
         return this._rounded;
@@ -3497,13 +3437,15 @@ let ChipComponent = class ChipComponent {
      * ([see example]({% slug appearance_chip %}#toc-fillMode)).
      *
      * The possible values are:
-     * * `'solid'` (default)
-     * * `'outline'`
-     * * `null`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
      */
     set fillMode(fillMode) {
-        this.handleClasses(fillMode, 'fillMode');
-        this._fillMode = fillMode;
+        if (isPresent(fillMode)) {
+            this._fillMode = fillMode;
+        }
+        this.handleClasses(this._fillMode, 'fillMode');
     }
     get fillMode() {
         return this._fillMode;
@@ -3514,16 +3456,18 @@ let ChipComponent = class ChipComponent {
      * ([see example]({% slug appearance_chip %}#toc-themeColor)).
      *
      * The possible values are:
-     * * `'base'` (default)
-     * * `'info'`
-     * * `'success'`
-     * * `'warning'`
-     * * `'error'`
-     * * `null`
+     * * `base` (default)
+     * * `info`
+     * * `success`
+     * * `warning`
+     * * `error`
+     * * `none`
      */
     set themeColor(themeColor) {
-        this.handleThemeColor(themeColor);
-        this._themeColor = themeColor;
+        if (isPresent(themeColor)) {
+            this._themeColor = themeColor;
+        }
+        this.handleThemeColor(this._themeColor);
     }
     get themeColor() {
         return this._themeColor;
@@ -3544,16 +3488,11 @@ let ChipComponent = class ChipComponent {
         return this.focused;
     }
     ngOnInit() {
-        this.dynamicRTLSubscription = this.localizationService.changes
-            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+        this.subs.add(this.localizationService.changes
+            .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
     ngOnDestroy() {
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-        if (this.detachDomEvents) {
-            this.detachDomEvents();
-        }
+        this.subs.unsubscribe();
     }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
@@ -3619,25 +3558,20 @@ let ChipComponent = class ChipComponent {
     }
     attachElementEventHandlers(chip) {
         this.ngZone.runOutsideAngular(() => {
-            const focusListener = this.renderer.listen(chip, 'focus', () => {
+            this.subs.add(this.renderer.listen(chip, 'focus', () => {
                 this.renderer.addClass(chip, 'k-focus');
-            });
-            const blurListener = this.renderer.listen(chip, 'blur', () => {
+            }));
+            this.subs.add(this.renderer.listen(chip, 'blur', () => {
                 this.renderer.removeClass(chip, 'k-focus');
-            });
-            const contentClickListener = this.renderer.listen(chip, 'click', (e) => {
+            }));
+            this.subs.add(this.renderer.listen(chip, 'click', (e) => {
                 const isRemoveClicked = closest(e.target, '.k-chip-remove-action');
                 if (!isRemoveClicked) {
                     this.ngZone.run(() => {
                         this.contentClick.emit({ sender: this, originalEvent: e });
                     });
                 }
-            });
-            this.detachDomEvents = () => {
-                focusListener();
-                blurListener();
-                contentClickListener();
-            };
+            }));
         });
     }
     /**
@@ -3670,115 +3604,67 @@ let ChipComponent = class ChipComponent {
         const addFillMode = fillMode ? fillMode : this.fillMode;
         const themeColorClass = getThemeColorClasses('chip', removeFillMode, addFillMode, this.themeColor, value);
         this.renderer.removeClass(elem, themeColorClass.toRemove);
-        if (addFillMode !== null && fillMode !== null) {
+        if (addFillMode !== 'none' && fillMode !== 'none') {
             if (themeColorClass.toAdd) {
                 this.renderer.addClass(elem, themeColorClass.toAdd);
             }
         }
     }
-};
-__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"
@@ -3820,21 +3706,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;
@@ -3870,11 +3807,12 @@ let ChipListComponent = class ChipListComponent {
      * * `'small'`
      * * `'medium'` (default)
      * * `'large'`
-     * * `null`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const sizeValue = size ? size : 'medium';
+        this.handleClasses(sizeValue, 'size');
+        this._size = sizeValue;
     }
     get size() {
         return this._size;
@@ -3951,81 +3889,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'] }})
@@ -4055,15 +3981,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
@@ -4129,61 +4061,262 @@ 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: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    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: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    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',
     medium: 'k-fab-md',
     large: 'k-fab-lg'
 };
-const SHAPE_CLASSES = {
-    rectangle: 'k-fab-rectangle',
-    square: 'k-fab-square'
-};
 const ROUNDED_CLASSES = {
     small: 'k-rounded-sm',
     medium: 'k-rounded-md',
@@ -4194,13 +4327,16 @@ const FILLMODE_CLASS = 'k-fab-solid';
 const DEFAULT_DURATION = 180;
 const DEFAULT_ITEM_GAP = 90;
 const DEFAULT_OFFSET = '16px';
+const DEFAULT_ROUNDED = 'full';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_THEME_COLOR = 'primary';
 /**
  *
  * Represents the [Kendo UI FloatingActionButton component for Angular]({% slug overview_floatingactionbutton %}).
  * 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;
@@ -4268,13 +4404,12 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
          * @hidden
          */
         this.id = `k-${guid()}`;
-        this._themeColor = 'primary';
-        this._size = 'medium';
-        this._shape = 'rectangle';
+        this._themeColor = DEFAULT_THEME_COLOR;
+        this._size = DEFAULT_SIZE;
+        this._rounded = DEFAULT_ROUNDED;
         this._disabled = false;
         this._align = { horizontal: 'end', vertical: 'bottom' };
         this._offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
-        this._rounded = 'full';
         this.subscriptions = new Subscription();
         this.rtl = false;
         this.animationEnd = new EventEmitter();
@@ -4298,20 +4433,22 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * The theme color will be applied as background color of the component.
      *
      * The possible values are:
-     * * `'primary'` (Default)&mdash;Applies coloring based on the `primary` theme color.
-     * * `'secondary'`&mdash;Applies coloring based on the `secondary` theme color.
-     * * `'tertiary'`&mdash; Applies coloring based on the `tertiary` theme color.
-     * * `'info'`&mdash;Applies coloring based on the `info` theme color.
-     * * `'success'`&mdash; Applies coloring based on the `success` theme color.
-     * * `'warning'`&mdash; Applies coloring based on the `warning` theme color.
-     * * `'error'`&mdash; Applies coloring based on the `error` theme color.
-     * * `'dark'`&mdash; Applies coloring based on the `dark` theme color.
-     * * `'light'`&mdash; Applies coloring based on the `light` theme color.
-     * * `'inverse'`&mdash; Applies coloring based on the `inverse` theme color.
+     * * `primary` (Default)&mdash;Applies coloring based on the `primary` theme color.
+     * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
+     * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
+     * * `info`&mdash;Applies coloring based on the `info` theme color.
+     * * `success`&mdash; Applies coloring based on the `success` theme color.
+     * * `warning`&mdash; Applies coloring based on the `warning` theme color.
+     * * `error`&mdash; Applies coloring based on the `error` theme color.
+     * * `dark`&mdash; Applies coloring based on the `dark` theme color.
+     * * `light`&mdash; Applies coloring based on the `light` theme color.
+     * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+     * * `none`&mdash; Removes the built in theme color.
      */
     set themeColor(themeColor) {
-        this.handleClasses(themeColor, 'themeColor');
-        this._themeColor = themeColor;
+        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
+        this.handleClasses(newThemeColor, 'themeColor');
+        this._themeColor = newThemeColor;
     }
     get themeColor() {
         return this._themeColor;
@@ -4321,13 +4458,15 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * ([see example]({% slug appearance_floatingactionbutton %}#toc-size)).
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'` (Default)
-     * * `'large'`
+     * * `small`
+     * * `medium` (Default)
+     * * `large`
+     * * `none`
      */
     set size(size) {
-        this.handleClasses(size, 'size');
-        this._size = size;
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -4336,35 +4475,20 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * The rounded property specifies the border radius of the FloatingActionButton.
      *
      * The possible values are:
-     * * `'small'`
-     * * `'medium'`
-     * * `'large'`
-     * * `'full'` (default)
-     * * `null`
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `full` (default)
+     * * `none`
      */
     set rounded(rounded) {
-        this.handleClasses(rounded, 'rounded');
-        this._rounded = rounded;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
     }
-    /**
-     * Specifies the shape of the FloatingActionButton
-     * ([see example]({% slug appearance_floatingactionbutton %}#toc-shape)).
-     *
-     * The possible values are:
-     * * `rectangle` (Default)&mdash;Applies rectangular shape on the FloatingActionButton.
-     * * `square`&mdash;Applies square shape on the FloatingActionButton.
-     *
-     */
-    set shape(shape) {
-        this.handleClasses(shape, 'shape');
-        this._shape = shape;
-    }
-    get shape() {
-        return this._shape;
-    }
     /**
      * Specifies whether the FloatingActionButton is disabled.
      */
@@ -4412,7 +4536,7 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         return this.disabled ? (-1) : this.tabIndex;
     }
     ngAfterViewInit() {
-        ['shape', 'size', 'rounded', 'themeColor'].forEach(option => this.handleClasses(this[option], option));
+        ['size', 'rounded', 'themeColor'].forEach(option => this.handleClasses(this[option], option));
         this.renderer.addClass(this.element.nativeElement, this.alignClass());
         this.offsetStyles();
         this.initialSetup = false;
@@ -4456,7 +4580,12 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         if (this.disabled || shouldOpen === this.isOpen) {
             return;
         }
-        shouldOpen ? setTimeout(() => this.openDial()) : this.closeDial();
+        if (shouldOpen) {
+            setTimeout(() => this.openDial());
+        }
+        else {
+            this.closeDial();
+        }
     }
     /**
      * @hidden
@@ -4562,13 +4691,11 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
             const classesToRemove = {
                 themeColor: `${FILLMODE_CLASS}-${this.themeColor}`,
                 size: SIZE_CLASSES[this.size],
-                shape: SHAPE_CLASSES[this.shape],
                 rounded: ROUNDED_CLASSES[this.rounded]
             };
             const classesToAdd = {
-                themeColor: inputValue ? `${FILLMODE_CLASS}-${inputValue}` : null,
+                themeColor: inputValue !== 'none' ? `${FILLMODE_CLASS}-${inputValue}` : '',
                 size: SIZE_CLASSES[inputValue],
-                shape: SHAPE_CLASSES[inputValue],
                 rounded: ROUNDED_CLASSES[inputValue]
             };
             this.renderer.removeClass(button, classesToRemove[input]);
@@ -4634,11 +4761,21 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
             return;
         }
         const event = new PreventableEvent();
-        open ? this.open.emit(event) : this.close.emit(event);
+        if (open) {
+            this.open.emit(event);
+        }
+        else {
+            this.close.emit(event);
+        }
         if (event.isDefaultPrevented()) {
             return;
         }
-        open ? this.openDial() : this.closeDial();
+        if (open) {
+            this.openDial();
+        }
+        else {
+            this.closeDial();
+        }
     }
     openPopup() {
         if (this.isOpen) {
@@ -4807,142 +4944,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: false }),
-    __metadata("design:type", DialItemTemplateDirective)
-], FloatingActionButtonComponent.prototype, "dialItemTemplate", void 0);
-__decorate([
-    ContentChild(FloatingActionButtonTemplateDirective, { static: false }),
-    __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", 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 }, { propertyName: "fabTemplate", first: true, predicate: FloatingActionButtonTemplateDirective, descendants: 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"
@@ -4987,224 +5000,141 @@ 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: false }]
+            }], fabTemplate: [{
+                type: ContentChild,
+                args: [FloatingActionButtonTemplateDirective, { static: false }]
+            }], themeColor: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                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
 ];
@@ -5236,15 +5166,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'] }})
@@ -5277,16 +5216,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, PreventableEvent, SplitButtonComponent as SplitButton, SplitButtonComponent, SplitButtonCustomMessagesComponent, SplitButtonModule, TemplateContextDirective };
+