@progress/kendo-angular-buttons 17.0.0-develop.21 → 17.0.0-develop.23

package/{fesm2020 → fesm2022}/progress-kendo-angular-buttons.mjs

@@ -3,9 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, isDevMode, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ContentChild, ViewChild, forwardRef, NgModule } from '@angular/core';
+import { Injectable, isDevMode, EventEmitter, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, NgModule } from '@angular/core';
 import { Subject, Subscription, fromEvent, merge } from 'rxjs';
-import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, Keys, MultiTabStop, guid, TemplateContextDirective, isPresent as isPresent$1, EventsOutsideAngularDirective, anyChanged, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, Keys, TemplateContextDirective, MultiTabStop, guid, isPresent as isPresent$1, EventsOutsideAngularDirective, anyChanged, ResizeBatchService } from '@progress/kendo-angular-common';
 export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
 import { caretAltDownIcon, xCircleIcon, moreVerticalIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
@@ -23,17 +23,15 @@ import { sequence, query, style, stagger, animate } from '@angular/animations';
  * @hidden
  */
 class KendoButtonService {
-    constructor() {
-        this.buttonClicked = new Subject();
-        this.buttonClicked$ = this.buttonClicked.asObservable();
-    }
+    buttonClicked = new Subject();
+    buttonClicked$ = this.buttonClicked.asObservable();
     click(button) {
         this.buttonClicked.next(button);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KendoButtonService });
 }
-KendoButtonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KendoButtonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KendoButtonService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KendoButtonService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KendoButtonService, decorators: [{
             type: Injectable
         }] });
 
@@ -44,8 +42,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729874032,
-    version: '17.0.0-develop.21',
+    publishDate: 1730104754,
+    version: '17.0.0-develop.23',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -158,45 +156,21 @@ const DEFAULT_FILL_MODE$3 = 'solid';
  * Please use the `button[kendoButton]` selector only.
  */
 class ButtonComponent {
-    constructor(element, renderer, service, localization, ngZone) {
-        this.renderer = renderer;
-        this.service = service;
-        this.ngZone = ngZone;
-        /**
-         * @hidden
-         * @default false
-         * required for DropDownButton arrow icon.
-         */
-        this.arrowIcon = false;
-        /**
-         * Provides visual styling that indicates if the Button is active.
-         *
-         * @default false
-         */
-        this.toggleable = false;
-        /**
-         * Fires each time the selected state of a toggleable button is changed.
-         *
-         * The event argument is the new selected state (boolean).
-         */
-        this.selectedChange = new EventEmitter();
-        /**
-         * Fires each time the user clicks the button.
-         */
-        this.click = new EventEmitter();
-        this.isDisabled = false;
-        this.caretAltDownIcon = caretAltDownIcon;
-        this._size = DEFAULT_SIZE$2;
-        this._rounded = DEFAULT_ROUNDED$3;
-        this._fillMode = DEFAULT_FILL_MODE$3;
-        this._themeColor = DEFAULT_THEME_COLOR$2;
-        this._focused = false;
-        this.subs = new Subscription();
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
-        this.element = element.nativeElement;
-    }
+    renderer;
+    service;
+    ngZone;
+    /**
+     * @hidden
+     * @default false
+     * required for DropDownButton arrow icon.
+     */
+    arrowIcon = false;
+    /**
+     * Provides visual styling that indicates if the Button is active.
+     *
+     * @default false
+     */
+    toggleable = false;
     /**
      * Backwards-compatible alias
      *
@@ -231,6 +205,11 @@ class ButtonComponent {
     get tabIndex() {
         return this.element.tabIndex;
     }
+    /**
+     * Defines a URL which is used for an `img` element inside the Button.
+     * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
+     */
+    imageUrl;
     /**
      * Defines a CSS class—or multiple classes separated by spaces—
      * which are applied to a `span` element inside the Button. Allows the usage of custom icons.
@@ -341,6 +320,30 @@ class ButtonComponent {
     get svgIcon() {
         return this._svgIcon;
     }
+    /**
+     * Fires each time the selected state of a toggleable button is changed.
+     *
+     * The event argument is the new selected state (boolean).
+     */
+    selectedChange = new EventEmitter();
+    /**
+     * Fires each time the user clicks the button.
+     */
+    click = new EventEmitter();
+    element;
+    isDisabled = false;
+    caretAltDownIcon = caretAltDownIcon;
+    _size = DEFAULT_SIZE$2;
+    _rounded = DEFAULT_ROUNDED$3;
+    _fillMode = DEFAULT_FILL_MODE$3;
+    _themeColor = DEFAULT_THEME_COLOR$2;
+    _focused = false;
+    direction;
+    _selected;
+    subs = new Subscription();
+    _iconClass;
+    _icon;
+    _svgIcon;
     set isFocused(isFocused) {
         this.toggleClass('k-focus', isFocused);
         this._focused = isFocused;
@@ -407,6 +410,15 @@ class ButtonComponent {
     get nativeElement() {
         return this.element;
     }
+    constructor(element, renderer, service, localization, ngZone) {
+        this.renderer = renderer;
+        this.service = service;
+        this.ngZone = ngZone;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.element = element.nativeElement;
+    }
     ngOnInit() {
         if (!this.element.hasAttribute('role') && this.togglable) {
             this.toggleAriaPressed(this.toggleable);
@@ -542,15 +554,14 @@ class ButtonComponent {
             }
         }
     }
-}
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", 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", "class.k-icon-button": "this.iconButtonClass", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.button'
-        }
-    ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", 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", "class.k-icon-button": "this.iconButtonClass", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.button'
+            }
+        ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
             innerCssClass="k-button-icon"
@@ -569,7 +580,8 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         </span>
         
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoButton',
@@ -674,9 +686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PreventableEvent {
-    constructor() {
-        this.prevented = false;
-    }
+    prevented = false;
     /**
      * Prevents the default action for a specified event.
      * In this way, the source component suppresses the built-in behavior that follows the event.
@@ -702,46 +712,34 @@ const tabindex = 'tabindex';
  * Represents the Kendo UI ButtonGroup component for Angular.
  */
 class ButtonGroupComponent {
-    constructor(service, localization, renderer, element) {
-        this.service = service;
-        this.renderer = renderer;
-        this.element = element;
-        /**
-         * The selection mode of the ButtonGroup.
-         * @default 'multiple'
-         */
-        this.selection = 'multiple';
-        /**
-         * When this option is set to `true` (default), the component is a single tab-stop,
-         * and focus is moved through the inner buttons via the arrow keys.
-         *
-         * When the option is set to `false`, the inner buttons are part of the natural tab sequence of the page.
-         *
-         * @default true
-         */
-        this.navigable = true;
-        /**
-         * Fires every time keyboard navigation occurs.
-         */
-        this.navigate = new EventEmitter();
-        this._tabIndex = 0;
-        this.currentTabIndex = 0;
-        this.lastFocusedIndex = -1;
-        this.subs = new Subscription();
-        this.wrapperClasses = true;
-        this.role = 'group';
-        this.focusHandler = () => {
-            this.currentTabIndex = -1;
-            this.defocus(this.buttons.toArray());
-            const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
-            const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
-            this.focus(this.buttons.filter((_current, i) => {
-                return i === index;
-            }));
-        };
-        validatePackage(packageMetadata);
-        this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
-    }
+    service;
+    renderer;
+    element;
+    /**
+     * By default, the ButtonGroup is enabled.
+     * To disable the whole group of buttons, set its `disabled` attribute to `true`.
+     *
+     * To disable a specific button, set its own `disabled` attribute to `true`
+     * and leave the `disabled` attribute of the ButtonGroup undefined.
+     * If you define the `disabled` attribute of the ButtonGroup, it will take
+     * precedence over the `disabled` attributes of the underlying buttons and they will be ignored.
+     *
+     * For more information on how to configure the Button, refer to
+     * its [API documentation]({% slug api_buttons_buttoncomponent %}).
+     */
+    disabled;
+    /**
+     * The selection mode of the ButtonGroup.
+     * @default 'multiple'
+     */
+    selection = 'multiple';
+    /**
+     * Sets the width of the ButtonGroup.
+     * If the width of the ButtonGroup is set:
+     * - The buttons resize automatically to fill the full width of the group wrapper.
+     * - The buttons acquire the same width.
+     */
+    width;
     /**
      * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -752,12 +750,33 @@ class ButtonGroupComponent {
     get tabIndex() {
         return this._tabIndex;
     }
+    /**
+     * When this option is set to `true` (default), the component is a single tab-stop,
+     * and focus is moved through the inner buttons via the arrow keys.
+     *
+     * When the option is set to `false`, the inner buttons are part of the natural tab sequence of the page.
+     *
+     * @default true
+     */
+    navigable = true;
+    /**
+     * Fires every time keyboard navigation occurs.
+     */
+    navigate = new EventEmitter();
+    buttons;
+    _tabIndex = 0;
+    currentTabIndex = 0;
+    lastFocusedIndex = -1;
+    direction;
+    subs = new Subscription();
+    wrapperClasses = true;
     get disabledClass() {
         return this.disabled;
     }
     get stretchedClass() {
         return !!this.width;
     }
+    role = 'group';
     get dir() {
         return this.direction;
     }
@@ -770,6 +789,13 @@ class ButtonGroupComponent {
     get wrapperTabIndex() {
         return this.disabled ? undefined : this.navigable ? this.currentTabIndex : undefined;
     }
+    constructor(service, localization, renderer, element) {
+        this.service = service;
+        this.renderer = renderer;
+        this.element = element;
+        validatePackage(packageMetadata);
+        this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
+    }
     ngOnInit() {
         this.subs.add(this.service.buttonClicked$.subscribe((button) => {
             let newSelectionValue;
@@ -910,19 +936,28 @@ class ButtonGroupComponent {
             .pipe(filter(predicate))
             .subscribe(handler));
     }
-}
-ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "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: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
+    focusHandler = () => {
+        this.currentTabIndex = -1;
+        this.defocus(this.buttons.toArray());
+        const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
+        const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
+        this.focus(this.buttons.filter((_current, i) => {
+            return i === index;
+        }));
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonGroupComponent, isStandalone: true, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClasses", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "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: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content select="[kendoButton]"></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoButtonGroup',
@@ -992,66 +1027,77 @@ const DEFAULT_FILL_MODE$2 = 'solid';
  * Displays a Chip that represents an input, attribute or an action.
  */
 class ChipComponent {
-    constructor(element, renderer, ngZone, localizationService) {
-        this.element = element;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.localizationService = localizationService;
-        /**
-         * Specifies the selected state of the Chip.
-         * @default false
-         */
-        this.selected = false;
-        /**
-         * Specifies if the Chip will be removable or not.
-         * If the property is set to `true`, the Chip renders a remove icon.
-         * @default false
-         */
-        this.removable = false;
-        /**
-         * @hidden
-         *
-         * Determines whether the Chip has a menu.
-         */
-        this.hasMenu = false;
-        /**
-         * If set to `true`, the Chip will be disabled.
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Fires each time the user clicks the remove icon of the Chip.
-         */
-        this.remove = new EventEmitter();
-        /**
-         * @hidden
-         *
-         * Fires each time the user clicks the menu icon of the Chip.
-         */
-        this.menuToggle = new EventEmitter();
-        /**
-         * Fires each time the user clicks the content of the Chip.
-         */
-        this.contentClick = new EventEmitter();
-        this.tabIndex = 0;
-        this.hostClass = true;
-        /**
-         * @hidden
-         */
-        this.defaultRemoveIcon = xCircleIcon;
-        /**
-         * @hidden
-         */
-        this.defaultMenuIcon = moreVerticalIcon;
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        this._themeColor = 'base';
-        this.focused = false;
-        this.subs = new Subscription();
-        validatePackage(packageMetadata);
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
-    }
+    element;
+    renderer;
+    ngZone;
+    localizationService;
+    /**
+     * Sets the label text of the Chip.
+     */
+    label;
+    /**
+     * Defines the name for an existing icon in a Kendo UI theme.
+     * The icon is rendered inside the Chip by a `span.k-icon` element.
+     */
+    icon;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) icon to be rendered inside the Chip using
+     * a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
+     */
+    svgIcon;
+    /**
+     * Defines a CSS class — or multiple classes separated by spaces —
+     * which are applied to a span element.
+     * Allows the usage of custom icons.
+     */
+    iconClass;
+    /**
+     * Use these settings to render an avatar within the Chip.
+     */
+    avatarSettings;
+    /**
+     * Specifies the selected state of the Chip.
+     * @default false
+     */
+    selected = false;
+    /**
+     * Specifies if the Chip will be removable or not.
+     * If the property is set to `true`, the Chip renders a remove icon.
+     * @default false
+     */
+    removable = false;
+    /**
+     * Specifies a custom remove font icon class that will be rendered when the Chip is removable.
+     * [see example]({% slug icons %})
+     */
+    removeIcon;
+    /**
+     * Specifies a custom remove SVG icon that will be rendered when the Chip is removable.
+     */
+    removeSvgIcon;
+    /**
+     * @hidden
+     *
+     * Determines whether the Chip has a menu.
+     */
+    hasMenu = false;
+    /**
+     * @hidden
+     *
+     * Specifies a custom menu font icon class that will be rendered when the Chip has menu.
+     */
+    menuIcon;
+    /**
+     * @hidden
+     *
+     * Specifies a custom menu SVG icon that will be rendered when the Chip has menu.
+     */
+    menuSvgIcon;
+    /**
+     * If set to `true`, the Chip will be disabled.
+     * @default false
+     */
+    disabled = false;
     /**
      * The size property specifies the padding of the Chip
      * ([see example]({% slug appearance_chip %}#toc-size)).
@@ -1127,6 +1173,22 @@ class ChipComponent {
     get themeColor() {
         return this._themeColor;
     }
+    /**
+     * Fires each time the user clicks the remove icon of the Chip.
+     */
+    remove = new EventEmitter();
+    /**
+     * @hidden
+     *
+     * Fires each time the user clicks the menu icon of the Chip.
+     */
+    menuToggle = new EventEmitter();
+    /**
+     * Fires each time the user clicks the content of the Chip.
+     */
+    contentClick = new EventEmitter();
+    tabIndex = 0;
+    hostClass = true;
     get hasIconClass() {
         return Boolean(this.icon || this.iconClass || (this.avatarSettings && !isObjectEmpty(this.avatarSettings)));
     }
@@ -1139,6 +1201,32 @@ class ChipComponent {
     get focusedClass() {
         return this.focused;
     }
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * @hidden
+     */
+    defaultRemoveIcon = xCircleIcon;
+    /**
+     * @hidden
+     */
+    defaultMenuIcon = moreVerticalIcon;
+    _size = 'medium';
+    _rounded = 'medium';
+    _fillMode = 'solid';
+    _themeColor = 'base';
+    focused = false;
+    subs = new Subscription();
+    constructor(element, renderer, ngZone, localizationService) {
+        this.element = element;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localizationService = localizationService;
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
     ngOnInit() {
         this.subs.add(this.localizationService.changes
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
@@ -1287,15 +1375,14 @@ class ChipComponent {
             });
         }
     }
-}
-ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "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'
-        }
-    ], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "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'
+            }
+        ], usesOnChanges: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
             size="small"
@@ -1351,7 +1438,8 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
             </span>
         </span>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chip',
@@ -1488,41 +1576,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class ChipListComponent {
-    constructor(localizationService, renderer, element, ngZone) {
-        this.localizationService = localizationService;
-        this.renderer = renderer;
-        this.element = element;
-        this.ngZone = ngZone;
-        this.hostClass = true;
-        this.orientation = 'horizontal';
-        /**
-         * Sets the selection mode of the ChipList.
-         *
-         * The available values are:
-         * * `none` (default)
-         * * `single`
-         * * `multiple`
-         */
-        this.selection = 'none';
-        /**
-         * Fires each time when the ChipList selection is changed.
-         */
-        this.selectedChange = new EventEmitter();
-        /**
-         * Fires each time the user clicks on the remove icon of the Chip.
-         */
-        this.remove = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.role = 'listbox';
-        this._size = 'medium';
-        this.subs = new Subscription();
-        this._navigable = true;
-        this.currentActiveIndex = 0;
-        validatePackage(packageMetadata);
-        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
-    }
+    localizationService;
+    renderer;
+    element;
+    ngZone;
+    hostClass = true;
+    orientation = 'horizontal';
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * Sets the selection mode of the ChipList.
+     *
+     * The available values are:
+     * * `none` (default)
+     * * `single`
+     * * `multiple`
+     */
+    selection = 'none';
     /**
      * The size property specifies the gap between the Chips in the ChipList
      * ([see example]({% slug appearance_chiplist %}#toc-size)).
@@ -1541,12 +1613,29 @@ class ChipListComponent {
     get size() {
         return this._size;
     }
+    /**
+     * Fires each time when the ChipList selection is changed.
+     */
+    selectedChange = new EventEmitter();
+    /**
+     * Fires each time the user clicks on the remove icon of the Chip.
+     */
+    remove = new EventEmitter();
+    chips;
     get single() {
         return this.selection === 'single';
     }
     get multiple() {
         return this.selection === 'multiple';
     }
+    /**
+     * @hidden
+     */
+    role = 'listbox';
+    dynamicRTLSubscription;
+    _size = 'medium';
+    subs = new Subscription();
+    _navigable = true;
     /**
      * @hidden
      */
@@ -1585,6 +1674,15 @@ class ChipListComponent {
     get navigable() {
         return this._navigable;
     }
+    currentActiveIndex = 0;
+    constructor(localizationService, renderer, element, ngZone) {
+        this.localizationService = localizationService;
+        this.renderer = renderer;
+        this.element = element;
+        this.ngZone = ngZone;
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
     ngOnInit() {
         this.dynamicRTLSubscription = this.localizationService.changes
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
@@ -1726,18 +1824,18 @@ class ChipListComponent {
             this.currentActiveIndex = Math.max(this.chips.length - 1, 0);
         }
     }
-}
-ChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "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: "15.2.10", ngImport: i0, type: ChipListComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chiplist, kendo-chip-list',
@@ -1843,13 +1941,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * For more examples, refer to the article on the [DropDownButton templates](slug:itemstemplates_dropdownbutton).
  */
 class ButtonItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ButtonItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
 }
-ButtonItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ButtonItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ButtonItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]',
@@ -1861,9 +1960,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class FocusService {
-    constructor() {
-        this.onFocus = new EventEmitter();
-    }
+    onFocus = new EventEmitter();
+    focusedIndex;
     isFocused(index) {
         return index === this.focused;
     }
@@ -1884,10 +1982,10 @@ class FocusService {
         this.focusedIndex = index;
         this.onFocus.emit(index);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusService });
 }
-FocusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FocusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusService, decorators: [{
             type: Injectable
         }] });
 
@@ -1927,15 +2025,16 @@ const NAVIGATION_CONFIG = new InjectionToken('navigation.config');
  * @hidden
  */
 class NavigationService {
+    navigate = new EventEmitter();
+    open = new EventEmitter();
+    close = new EventEmitter();
+    enter = new EventEmitter();
+    enterpress = new EventEmitter();
+    enterup = new EventEmitter();
+    tab = new EventEmitter();
+    esc = new EventEmitter();
+    useLeftRightArrows;
     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) {
@@ -2013,10 +2112,10 @@ class NavigationService {
             return args.current !== args.end ? args.current + args.step : args.end;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: NAVIGATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [{ token: NAVIGATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2027,99 +2126,319 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class PopupContainerService {
+    container;
+    template;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupContainerService });
 }
-PopupContainerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PopupContainerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupContainerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupContainerService, decorators: [{
             type: Injectable
         }] });
 
 /**
  * @hidden
  */
-class ListButton extends MultiTabStop {
-    constructor(focusService, navigationService, wrapperRef, _zone, popupService, elRef, localization, cdr, containerService) {
-        super();
-        this.focusService = focusService;
-        this.navigationService = navigationService;
-        this.wrapperRef = wrapperRef;
-        this._zone = _zone;
-        this.popupService = popupService;
-        this.elRef = elRef;
-        this.cdr = cdr;
-        this.containerService = containerService;
-        this._open = false;
-        this._disabled = false;
-        this._active = false;
-        this._popupSettings = { animate: true, popupClass: '' };
-        this.listId = guid();
-        this._isFocused = false;
-        this.subs = new Subscription();
-        this.popupSubs = new Subscription();
-        /**
-         * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         */
-        this.tabIndex = 0;
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Needed by the kendoToggleButtonTabStop directive
-         *
-         * @hidden
-         */
-        this.escape = new EventEmitter();
-        this.isClosePrevented = false;
-        validatePackage(packageMetadata);
+class FocusableDirective {
+    focusService;
+    renderer;
+    index;
+    element;
+    subs = new Subscription();
+    constructor(focusService, elementRef, renderer) {
         this.focusService = focusService;
-        this.navigationService = navigationService;
-        this.wrapper = wrapperRef.nativeElement;
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.renderer = renderer;
+        this.element = elementRef.nativeElement;
         this.subscribeEvents();
     }
-    /**
-     * Sets the disabled state of the DropDownButton.
-     */
-    set disabled(value) {
-        if (value && this.openState) {
-            this.openState = false;
+    ngOnInit() {
+        if (this.index === this.focusService.focused) {
+            this.renderer.addClass(this.element, 'k-focus');
+        }
+        else {
+            this.renderer.removeClass(this.element, 'k-focus');
         }
-        this._disabled = value;
-    }
-    get disabled() {
-        return this._disabled;
     }
     /**
      * @hidden
      */
-    get componentTabIndex() {
-        return this.disabled ? (-1) : this.tabIndex;
+    ngOnDestroy() {
+        this.subs.unsubscribe();
     }
-    get appendTo() {
-        const { appendTo } = this.popupSettings;
-        if (!appendTo || appendTo === 'root') {
-            return undefined;
+    subscribeEvents() {
+        if (!isDocumentAvailable()) {
+            return;
         }
-        return appendTo === 'component' ? this.containerService.container : appendTo;
-    }
-    /**
-     * Configures the popup of the DropDownButton.
-     *
-     * The available options are:
-     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
-     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
-     * - `appendTo: "root" | "component" | ViewContainerRef`&mdash;Specifies the component to which the popup will be appended.
-     * - `align: "left" | "center" | "right"`&mdash;Specifies the alignment of the popup.
-     */
-    set popupSettings(settings) {
-        this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
+        this.subs.add(this.focusService.onFocus.subscribe((index) => {
+            if (this.index === index) {
+                this.renderer.addClass(this.element, 'k-focus');
+                this.renderer.setAttribute(this.element, 'tabindex', '0');
+                this.element.focus();
+            }
+            else {
+                this.renderer.setAttribute(this.element, 'tabindex', '-1');
+                this.renderer.removeClass(this.element, 'k-focus');
+            }
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusableDirective, deps: [{ token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FocusableDirective, isStandalone: true, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoButtonFocusable]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class ListComponent {
+    data;
+    textField;
+    itemTemplate;
+    onItemClick = new EventEmitter();
+    onItemBlur = new EventEmitter();
+    set size(size) {
+        if (size) {
+            this.sizeClass = `k-menu-group-${SIZES[size]}`;
+        }
+        else {
+            this.sizeClass = '';
+        }
+    }
+    sizeClass = '';
+    constructor() {
+        validatePackage(packageMetadata);
+    }
+    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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, 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" role="list" [ngClass]="sizeClass">
+            <li kendoButtonFocusable
+                *ngFor="let dataItem of data; let index = index;"
+                [index]="index"
+                tabindex="-1"
+                class="k-item k-menu-item"
+                role="listitem"
+                [attr.aria-disabled]="dataItem.disabled ? true : false"
+                (click)="$event.stopImmediatePropagation(); onClick(index);"
+                (blur)="onBlur()">
+                <ng-template [ngIf]="itemTemplate?.templateRef">
+                    <span
+                        class="k-link k-menu-link"
+                        [class.k-disabled]="dataItem.disabled"
+                        [ngClass]="dataItem.cssClass">
+                        <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"
+                        [ngClass]="dataItem.cssClass">
+                        <kendo-icon-wrapper
+                            *ngIf="dataItem.icon || dataItem.iconClass || dataItem.svgIcon"
+                            [name]="dataItem.icon"
+                            [svgIcon]="dataItem.svgIcon"
+                            [customFontClass]="dataItem.iconClass"
+                        ></kendo-icon-wrapper>
+                        <img
+                            *ngIf="dataItem.imageUrl"
+                            class="k-image"
+                            [src]="dataItem.imageUrl"
+                            [alt]="dataItem.imageAlt"
+                        >
+                        <span *ngIf="getText(dataItem)" class="k-menu-link-text">
+                            {{ getText(dataItem) }}
+                        </span>
+                    </span>
+                </ng-template>
+            </li>
+        </ul>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-button-list',
+                    template: `
+        <ul class="k-group k-menu-group k-reset" role="list" [ngClass]="sizeClass">
+            <li kendoButtonFocusable
+                *ngFor="let dataItem of data; let index = index;"
+                [index]="index"
+                tabindex="-1"
+                class="k-item k-menu-item"
+                role="listitem"
+                [attr.aria-disabled]="dataItem.disabled ? true : false"
+                (click)="$event.stopImmediatePropagation(); onClick(index);"
+                (blur)="onBlur()">
+                <ng-template [ngIf]="itemTemplate?.templateRef">
+                    <span
+                        class="k-link k-menu-link"
+                        [class.k-disabled]="dataItem.disabled"
+                        [ngClass]="dataItem.cssClass">
+                        <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"
+                        [ngClass]="dataItem.cssClass">
+                        <kendo-icon-wrapper
+                            *ngIf="dataItem.icon || dataItem.iconClass || dataItem.svgIcon"
+                            [name]="dataItem.icon"
+                            [svgIcon]="dataItem.svgIcon"
+                            [customFontClass]="dataItem.iconClass"
+                        ></kendo-icon-wrapper>
+                        <img
+                            *ngIf="dataItem.imageUrl"
+                            class="k-image"
+                            [src]="dataItem.imageUrl"
+                            [alt]="dataItem.imageAlt"
+                        >
+                        <span *ngIf="getText(dataItem)" class="k-menu-link-text">
+                            {{ getText(dataItem) }}
+                        </span>
+                    </span>
+                </ng-template>
+            </li>
+        </ul>
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgFor, FocusableDirective, NgIf, TemplateContextDirective, IconWrapperComponent]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], onItemClick: [{
+                type: Output
+            }], onItemBlur: [{
+                type: Output
+            }], size: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class ListButton extends MultiTabStop {
+    focusService;
+    navigationService;
+    wrapperRef;
+    _zone;
+    popupService;
+    elRef;
+    cdr;
+    containerService;
+    listId = guid();
+    buttonId = guid();
+    _data;
+    _open = false;
+    _disabled = false;
+    _active = false;
+    _popupSettings = { animate: true, popupClass: '' };
+    _isFocused = false;
+    _itemClick;
+    _blur;
+    wrapper;
+    subs = new Subscription();
+    direction;
+    popupRef;
+    popupSubs = new Subscription();
+    button;
+    buttonList;
+    popupTemplate;
+    container;
+    /**
+     * Sets the disabled state of the DropDownButton.
+     */
+    set disabled(value) {
+        if (value && this.openState) {
+            this.openState = false;
+        }
+        this._disabled = value;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    /**
+     * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     */
+    tabIndex = 0;
+    /**
+     * The CSS classes that will be rendered on the main button.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    buttonClass;
+    /**
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel the event, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    /**
+     * Needed by the kendoToggleButtonTabStop directive
+     *
+     * @hidden
+     */
+    escape = new EventEmitter();
+    /**
+     * @hidden
+     */
+    get componentTabIndex() {
+        return this.disabled ? (-1) : this.tabIndex;
+    }
+    get appendTo() {
+        const { appendTo } = this.popupSettings;
+        if (!appendTo || appendTo === 'root') {
+            return undefined;
+        }
+        return appendTo === 'component' ? this.containerService.container : appendTo;
+    }
+    /**
+     * Configures the popup of the DropDownButton.
+     *
+     * The available options are:
+     * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
+     * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+     * - `appendTo: "root" | "component" | ViewContainerRef`&mdash;Specifies the component to which the popup will be appended.
+     * - `align: "left" | "center" | "right"`&mdash;Specifies the alignment of the popup.
+     */
+    set popupSettings(settings) {
+        this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
     }
     get popupSettings() {
         return this._popupSettings;
@@ -2144,6 +2463,24 @@ class ListButton extends MultiTabStop {
         }
         return align;
     }
+    isClosePrevented = false;
+    constructor(focusService, navigationService, wrapperRef, _zone, popupService, elRef, localization, cdr, containerService) {
+        super();
+        this.focusService = focusService;
+        this.navigationService = navigationService;
+        this.wrapperRef = wrapperRef;
+        this._zone = _zone;
+        this.popupService = popupService;
+        this.elRef = elRef;
+        this.cdr = cdr;
+        this.containerService = containerService;
+        validatePackage(packageMetadata);
+        this.focusService = focusService;
+        this.navigationService = navigationService;
+        this.wrapper = wrapperRef.nativeElement;
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.subscribeEvents();
+    }
     ngOnChanges(changes) {
         if (isChanged("popupSettings", changes) && isPresent(this.popupRef)) {
             const popup = this.popupRef.popup.instance;
@@ -2404,15 +2741,27 @@ class ListButton extends MultiTabStop {
             this.isClosePrevented = false;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListButton, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close", escape: "escape" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 }
-ListButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-ListButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ListButton, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close", escape: "escape" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListButton, decorators: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], 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: PopupContainerService }]; }, propDecorators: { disabled: [{
+        }], 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: PopupContainerService }]; }, propDecorators: { button: [{
+                type: ViewChild,
+                args: ['button', { read: ElementRef }]
+            }], buttonList: [{
+                type: ViewChild,
+                args: ['buttonList']
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate']
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef }]
+            }], disabled: [{
                 type: Input
             }], tabIndex: [{
                 type: Input
@@ -2428,211 +2777,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
-/**
- * @hidden
- */
-class FocusableDirective {
-    constructor(focusService, elementRef, renderer) {
-        this.focusService = focusService;
-        this.renderer = renderer;
-        this.subs = new Subscription();
-        this.element = elementRef.nativeElement;
-        this.subscribeEvents();
-    }
-    ngOnInit() {
-        if (this.index === this.focusService.focused) {
-            this.renderer.addClass(this.element, 'k-focus');
-        }
-        else {
-            this.renderer.removeClass(this.element, 'k-focus');
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    subscribeEvents() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.subs.add(this.focusService.onFocus.subscribe((index) => {
-            if (this.index === index) {
-                this.renderer.addClass(this.element, 'k-focus');
-                this.renderer.setAttribute(this.element, 'tabindex', '0');
-                this.element.focus();
-            }
-            else {
-                this.renderer.setAttribute(this.element, 'tabindex', '-1');
-                this.renderer.removeClass(this.element, 'k-focus');
-            }
-        }));
-    }
-}
-FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusableDirective, deps: [{ token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusableDirective, isStandalone: true, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoButtonFocusable]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: FocusService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-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: "15.2.10", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ListComponent, isStandalone: true, 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" role="list" [ngClass]="sizeClass">
-            <li kendoButtonFocusable
-                *ngFor="let dataItem of data; let index = index;"
-                [index]="index"
-                tabindex="-1"
-                class="k-item k-menu-item"
-                role="listitem"
-                [attr.aria-disabled]="dataItem.disabled ? true : false"
-                (click)="$event.stopImmediatePropagation(); onClick(index);"
-                (blur)="onBlur()">
-                <ng-template [ngIf]="itemTemplate?.templateRef">
-                    <span
-                        class="k-link k-menu-link"
-                        [class.k-disabled]="dataItem.disabled"
-                        [ngClass]="dataItem.cssClass">
-                        <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"
-                        [ngClass]="dataItem.cssClass">
-                        <kendo-icon-wrapper
-                            *ngIf="dataItem.icon || dataItem.iconClass || dataItem.svgIcon"
-                            [name]="dataItem.icon"
-                            [svgIcon]="dataItem.svgIcon"
-                            [customFontClass]="dataItem.iconClass"
-                        ></kendo-icon-wrapper>
-                        <img
-                            *ngIf="dataItem.imageUrl"
-                            class="k-image"
-                            [src]="dataItem.imageUrl"
-                            [alt]="dataItem.imageAlt"
-                        >
-                        <span *ngIf="getText(dataItem)" class="k-menu-link-text">
-                            {{ getText(dataItem) }}
-                        </span>
-                    </span>
-                </ng-template>
-            </li>
-        </ul>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-button-list',
-                    template: `
-        <ul class="k-group k-menu-group k-reset" role="list" [ngClass]="sizeClass">
-            <li kendoButtonFocusable
-                *ngFor="let dataItem of data; let index = index;"
-                [index]="index"
-                tabindex="-1"
-                class="k-item k-menu-item"
-                role="listitem"
-                [attr.aria-disabled]="dataItem.disabled ? true : false"
-                (click)="$event.stopImmediatePropagation(); onClick(index);"
-                (blur)="onBlur()">
-                <ng-template [ngIf]="itemTemplate?.templateRef">
-                    <span
-                        class="k-link k-menu-link"
-                        [class.k-disabled]="dataItem.disabled"
-                        [ngClass]="dataItem.cssClass">
-                        <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"
-                        [ngClass]="dataItem.cssClass">
-                        <kendo-icon-wrapper
-                            *ngIf="dataItem.icon || dataItem.iconClass || dataItem.svgIcon"
-                            [name]="dataItem.icon"
-                            [svgIcon]="dataItem.svgIcon"
-                            [customFontClass]="dataItem.iconClass"
-                        ></kendo-icon-wrapper>
-                        <img
-                            *ngIf="dataItem.imageUrl"
-                            class="k-image"
-                            [src]="dataItem.imageUrl"
-                            [alt]="dataItem.imageAlt"
-                        >
-                        <span *ngIf="getText(dataItem)" class="k-menu-link-text">
-                            {{ getText(dataItem) }}
-                        </span>
-                    </span>
-                </ng-template>
-            </li>
-        </ul>
-    `,
-                    standalone: true,
-                    imports: [NgClass, NgFor, FocusableDirective, NgIf, TemplateContextDirective, IconWrapperComponent]
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], itemTemplate: [{
-                type: Input
-            }], onItemClick: [{
-                type: Output
-            }], onItemBlur: [{
-                type: Output
-            }], size: [{
-                type: Input
-            }] } });
-
 const NAVIGATION_SETTINGS$2 = {
     useLeftRightArrows: true
 };
@@ -2670,89 +2814,34 @@ const DEFAULT_FILL_MODE$1 = 'solid';
  * ```
  */
 class DropDownButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService, renderer) {
-        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
-        this.containerService = containerService;
-        this.renderer = renderer;
-        /**
-         * Allows showing the default arrow icon or providing alternative one instead.
-         * @default false
-         */
-        this.arrowIcon = false;
-        /**
-         * Defines the name of an existing icon in the Kendo UI theme.
-         */
-        this.icon = '';
-        /**
-         * Defines the list of CSS classes which are used for styling the Button with custom icons.
-         */
-        this.iconClass = '';
-        /**
-         * Defines a URL for styling the button with a custom image.
-         */
-        this.imageUrl = '';
-        /**
-         * The size property specifies the padding of the DropDownButton
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = 'medium';
-        /**
-         * 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`
-         * * `none`
-         */
-        this.rounded = 'medium';
-        /**
-         * The DropDownButton allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-         *
-         * The possible values are:
-         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-         * * `primary` &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 default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires each time the DropDownButton gets focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the DropDownButton gets blurred.
-         */
-        this.onBlur = new EventEmitter();
-        this.listId = guid();
-        this.buttonId = guid();
-        this._fillMode = DEFAULT_FILL_MODE$1;
-        this._buttonAttributes = null;
-        this._itemClick = this.itemClick;
-        this._blur = this.onBlur;
-    }
+    containerService;
+    renderer;
+    /**
+     * Allows showing the default arrow icon or providing alternative one instead.
+     * @default false
+     */
+    arrowIcon = false;
+    /**
+     * Defines the name of an existing icon in the Kendo UI theme.
+     */
+    icon = '';
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the button.
+     */
+    svgIcon;
+    /**
+     * Defines the list of CSS classes which are used for styling the Button with custom icons.
+     */
+    iconClass = '';
+    /**
+     * Defines a URL for styling the button with a custom image.
+     */
+    imageUrl = '';
+    /**
+     * Sets the data item field that represents the item text.
+     * If the data contains only primitive values, do not define it.
+     */
+    textField;
     /**
      * Sets or gets the data of the DropDownButton.
      *
@@ -2764,6 +2853,29 @@ class DropDownButtonComponent extends ListButton {
     get data() {
         return this._data;
     }
+    /**
+     * The size property specifies the padding of the DropDownButton
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = 'medium';
+    /**
+     * 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`
+     * * `none`
+     */
+    rounded = 'medium';
     /**
      * The fillMode property specifies the background and border styles of the DropDownButton
      * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
@@ -2775,12 +2887,32 @@ class DropDownButtonComponent extends ListButton {
      * * `link`
      * * `none`
      */
-    set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
-    }
-    get fillMode() {
-        return this._fillMode;
-    }
+    set fillMode(fillMode) {
+        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * The DropDownButton allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
+     * * `primary` &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 default CSS class (no class would be rendered).
+     */
+    themeColor = 'base';
     /**
      * Sets attributes to the main button.
      */
@@ -2792,6 +2924,18 @@ class DropDownButtonComponent extends ListButton {
     get buttonAttributes() {
         return this._buttonAttributes;
     }
+    /**
+     * Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires each time the DropDownButton gets focused.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the DropDownButton gets blurred.
+     */
+    onBlur = new EventEmitter();
     get focused() {
         return this._isFocused && !this._disabled;
     }
@@ -2804,6 +2948,10 @@ class DropDownButtonComponent extends ListButton {
     get active() {
         return this._active;
     }
+    itemTemplate;
+    _fillMode = DEFAULT_FILL_MODE$1;
+    _buttonAttributes = null;
+    documentMouseUpSub;
     /**
      * @hidden
      */
@@ -2873,6 +3021,18 @@ class DropDownButtonComponent extends ListButton {
             this.blurWrapper();
         }
     }
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService, renderer) {
+        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
+        this.containerService = containerService;
+        this.renderer = renderer;
+        this._itemClick = this.itemClick;
+        this._blur = this.onBlur;
+        this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
+            if (this.active) {
+                this._active = false;
+            }
+        });
+    }
     ngAfterViewInit() {
         this.containerService.container = this.container;
         this.containerService.template = this.popupTemplate;
@@ -2918,19 +3078,26 @@ class DropDownButtonComponent extends ListButton {
             }
         }
     }
-}
-DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }, { token: PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "attr.dir": "this.dir" } }, providers: [
-        FocusService,
-        NavigationService,
-        NAVIGATION_SETTINGS_PROVIDER$2,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.dropdownbutton'
-        },
-        PopupContainerService
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.documentMouseUpSub) {
+            this.documentMouseUpSub();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 }, { token: PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "attr.dir": "this.dir" } }, providers: [
+            FocusService,
+            NavigationService,
+            NAVIGATION_SETTINGS_PROVIDER$2,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.dropdownbutton'
+            },
+            PopupContainerService
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <button kendoButton #button
             type="button"
             [id]="buttonId"
@@ -2975,7 +3142,8 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         </ng-template>
         <ng-container #container></ng-container>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoDropDownButton',
@@ -3080,18 +3248,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], itemTemplate: [{
                 type: ContentChild,
                 args: [ButtonItemTemplateDirective]
-            }], button: [{
-                type: ViewChild,
-                args: ['button', { read: ElementRef }]
-            }], buttonList: [{
-                type: ViewChild,
-                args: ['buttonList']
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate']
-            }], container: [{
-                type: ViewChild,
-                args: ['container', { read: ViewContainerRef }]
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -3177,13 +3333,14 @@ function closeAnimation(animationSettings) {
  * ([see example]({% slug templates_floatingactionbutton %}#toc-dial-item-template)).
  */
 class DialItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DialItemTemplateDirective, isStandalone: true, selector: "[kendoDialItemTemplate]", ngImport: i0 });
 }
-DialItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DialItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DialItemTemplateDirective, isStandalone: true, selector: "[kendoDialItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDialItemTemplate]',
@@ -3200,13 +3357,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ([see example]({% slug templates_floatingactionbutton %}#toc-floatingactionbutton-template)).
  */
 class FloatingActionButtonTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FloatingActionButtonTemplateDirective, isStandalone: true, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
 }
-FloatingActionButtonTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FloatingActionButtonTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FloatingActionButtonTemplateDirective, isStandalone: true, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFloatingActionButtonTemplate]',
@@ -3220,13 +3378,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class DialItemComponent {
-    constructor(element, renderer, localisationService) {
-        this.element = element;
-        this.renderer = renderer;
-        this.localisationService = localisationService;
-        this.hostClass = true;
-        this.role = 'menuitem';
-    }
+    element;
+    renderer;
+    localisationService;
+    hostClass = true;
+    role = 'menuitem';
     get disabledClass() {
         return this.item.disabled;
     }
@@ -3237,6 +3393,18 @@ class DialItemComponent {
     get indexAttr() {
         return this.index;
     }
+    cssClass;
+    cssStyle;
+    isFocused;
+    index;
+    item;
+    dialItemTemplate;
+    align;
+    constructor(element, renderer, localisationService) {
+        this.element = element;
+        this.renderer = renderer;
+        this.localisationService = localisationService;
+    }
     get iconClasses() {
         const classes = [];
         if (this.item.iconClass) {
@@ -3267,9 +3435,8 @@ class DialItemComponent {
         };
         return directions[dir][align];
     }
-}
-DialItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialItemComponent, isStandalone: true, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialItemComponent, isStandalone: true, 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 }"
@@ -3286,7 +3453,8 @@ DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                 [svgIcon]="item.svgIcon"></kendo-icon-wrapper>
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialItemComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -3352,28 +3520,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 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()));
-    }
+    focusService;
+    cdr;
+    hostClass = true;
     get bottomClass() {
         return this.align.vertical === 'top' || this.align.vertical === 'middle';
     }
     get topClass() {
         return this.align.vertical === 'bottom';
     }
+    dialItems;
+    dialItemTemplate;
+    align;
+    subscriptions = new Subscription();
+    constructor(focusService, cdr) {
+        this.focusService = focusService;
+        this.cdr = cdr;
+        this.subscriptions.add(this.focusService.onFocus.subscribe(() => this.cdr.detectChanges()));
+    }
     isFocused(index) {
         return this.focusService.isFocused(index);
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-}
-DialListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialListComponent, isStandalone: true, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialListComponent, isStandalone: true, 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
@@ -3389,7 +3561,8 @@ DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </li>
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "component", type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialListComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -3462,101 +3635,25 @@ const DEFAULT_THEME_COLOR = 'primary';
  *
  */
 class FloatingActionButtonComponent {
-    constructor(renderer, element, focusService, navigationService, ngZone, popupService, builder, localizationService) {
-        this.renderer = renderer;
-        this.element = element;
-        this.focusService = focusService;
-        this.navigationService = navigationService;
-        this.ngZone = ngZone;
-        this.popupService = popupService;
-        this.builder = builder;
-        this.localizationService = localizationService;
-        /**
-         * Specifies the positionMode of the FloatingActionButton
-         * ([see example](slug:positioning_floatingactionbutton#toc-position-mode)).
-         *
-         * * The possible values are:
-         * * `absolute`&mdash;Positions the FloatingActionButton absolutely to its first positioned parent element.
-         * * `fixed` (Default)&mdash;Positions the FloatingActionButton relative to the viewport. It always stays in the same place even if the page is scrolled.
-         */
-        this.positionMode = 'fixed';
-        /**
-         * Specifies the animation settings of the FloatingActionButton dial items.
-         * ([see example]({% slug dialitems_floatingactionbutton %}#toc-animation)).
-         *
-         * The possible values are:
-         * * Boolean
-         *    * (Default) `true`&mdash;Applies the default [`DialItemAnimation`]({% slug api_buttons_dialitemanimation %}) settings.
-         *    * `false`
-         * * `DialItemAnimation`
-         *    * `duration`&mdash;Specifies the animation duration in milliseconds for each dial item. Defaults to `180ms`.
-         *    * `gap`&mdash;Specifies the animation duration gap in milliseconds after each dial item is animated. Defaults to `90ms`.
-         */
-        this.dialItemAnimation = true;
-        /**
-         * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FloatingActionButton.
-         */
-        this.tabIndex = 0;
-        /**
-         * Specifies the collection of the dial items that will be rendered in the FloatingActionButton popup.
-         */
-        this.dialItems = [];
-        /**
-         * Fires each time the FloatingActionButton gets blurred.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires each time the FloatingActionButton gets focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time a dial item is clicked.
-         */
-        this.dialItemClick = 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
-         * ([more information and example](slug:events_floatingactionbutton)).
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open
-         * ([more information and example](slug:events_floatingactionbutton)).
-         */
-        this.close = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.id = `k-${guid()}`;
-        /**
-         * @hidden
-         */
-        this.dialListId = `k-dial-list-${guid()}`;
-        this._themeColor = DEFAULT_THEME_COLOR;
-        this._size = DEFAULT_SIZE;
-        this._rounded = DEFAULT_ROUNDED$1;
-        this._disabled = false;
-        this._align = { horizontal: 'end', vertical: 'bottom' };
-        this._offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
-        this.subscriptions = new Subscription();
-        this.rtl = false;
-        this.animationEnd = new EventEmitter();
-        this.initialSetup = true;
-        this.focusChangedProgrammatically = false;
-        validatePackage(packageMetadata);
-        this.subscribeNavigationEvents();
-        this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        }));
-    }
+    renderer;
+    element;
+    focusService;
+    navigationService;
+    ngZone;
+    popupService;
+    builder;
+    localizationService;
     get fixedClass() {
         return this.positionMode === 'fixed';
     }
     get absoluteClass() {
         return this.positionMode === 'absolute';
     }
+    direction;
+    button;
+    popupTemplate;
+    dialItemTemplate;
+    fabTemplate;
     /**
      * Specifies the theme color of the FloatingActionButton
      * ([see example](slug:appearance_floatingactionbutton#toc-theme-colors)).
@@ -3659,12 +3756,131 @@ class FloatingActionButtonComponent {
     get offset() {
         return this._offset;
     }
+    /**
+     * Specifies the positionMode of the FloatingActionButton
+     * ([see example](slug:positioning_floatingactionbutton#toc-position-mode)).
+     *
+     * * The possible values are:
+     * * `absolute`&mdash;Positions the FloatingActionButton absolutely to its first positioned parent element.
+     * * `fixed` (Default)&mdash;Positions the FloatingActionButton relative to the viewport. It always stays in the same place even if the page is scrolled.
+     */
+    positionMode = 'fixed';
+    /**
+     * Defines the name of an existing icon in a Kendo UI theme.
+     * If provided, the icon will be rendered inside the FloatingActionButton by a `span.k-icon` element.
+     */
+    icon;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the FloatingActionButton.
+     */
+    svgIcon;
+    /**
+     * Defines a CSS class or multiple classes separated by spaces which are applied to a `span` element.
+     * Allows the usage of custom icons, rendered inside the FloatingActionButton by a `span` element.
+     */
+    iconClass;
+    /**
+     * The CSS classes that will be rendered on the main button.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    buttonClass;
+    /**
+     * The CSS classes that will be rendered on the dial items `ul` element.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    dialClass;
+    /**
+     * Specifies the text content of the FloatingActionButton.
+     */
+    text;
+    /**
+     * Specifies the animation settings of the FloatingActionButton dial items.
+     * ([see example]({% slug dialitems_floatingactionbutton %}#toc-animation)).
+     *
+     * The possible values are:
+     * * Boolean
+     *    * (Default) `true`&mdash;Applies the default [`DialItemAnimation`]({% slug api_buttons_dialitemanimation %}) settings.
+     *    * `false`
+     * * `DialItemAnimation`
+     *    * `duration`&mdash;Specifies the animation duration in milliseconds for each dial item. Defaults to `180ms`.
+     *    * `gap`&mdash;Specifies the animation duration gap in milliseconds after each dial item is animated. Defaults to `90ms`.
+     */
+    dialItemAnimation = true;
+    /**
+     * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FloatingActionButton.
+     */
+    tabIndex = 0;
+    /**
+     * Specifies the collection of the dial items that will be rendered in the FloatingActionButton popup.
+     */
+    dialItems = [];
+    /**
+     * Fires each time the FloatingActionButton gets blurred.
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Fires each time the FloatingActionButton gets focused.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time a dial item is clicked.
+     */
+    dialItemClick = 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
+     * ([more information and example](slug:events_floatingactionbutton)).
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup will remain open
+     * ([more information and example](slug:events_floatingactionbutton)).
+     */
+    close = new EventEmitter();
     /**
      * @hidden
      */
     get componentTabIndex() {
         return this.disabled ? (-1) : this.tabIndex;
     }
+    /**
+     * @hidden
+     */
+    id = `k-${guid()}`;
+    /**
+     * @hidden
+     */
+    dialListId = `k-dial-list-${guid()}`;
+    _themeColor = DEFAULT_THEME_COLOR;
+    _size = DEFAULT_SIZE;
+    _rounded = DEFAULT_ROUNDED$1;
+    _disabled = false;
+    _align = { horizontal: 'end', vertical: 'bottom' };
+    _offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
+    subscriptions = new Subscription();
+    popupMouseDownListener;
+    rtl = false;
+    animationEnd = new EventEmitter();
+    popupRef;
+    initialSetup = true;
+    focusChangedProgrammatically = false;
+    constructor(renderer, element, focusService, navigationService, ngZone, popupService, builder, localizationService) {
+        this.renderer = renderer;
+        this.element = element;
+        this.focusService = focusService;
+        this.navigationService = navigationService;
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.builder = builder;
+        this.localizationService = localizationService;
+        validatePackage(packageMetadata);
+        this.subscribeNavigationEvents();
+        this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        }));
+    }
     ngAfterViewInit() {
         ['size', 'rounded', 'themeColor'].forEach(option => this.handleClasses(this[option], option));
         this.renderer.addClass(this.element.nativeElement, this.alignClass());
@@ -4120,18 +4336,17 @@ class FloatingActionButtonComponent {
         }
         return DEFAULT_DURATION;
     }
-}
-FloatingActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: FloatingActionButtonComponent, isStandalone: true, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", svgIcon: "svgIcon", 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$1,
-        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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FloatingActionButtonComponent, isStandalone: true, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", svgIcon: "svgIcon", 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$1,
+            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"
@@ -4189,7 +4404,8 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             </ul>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-floatingactionbutton',
@@ -4336,10 +4552,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class Messages extends ComponentMessages {
+    /**
+     * The text for the SplitButton aria-label.
+     *
+     * The text for the aria-label consists of a two-part message - the text of the SplitButton and a localizable string.
+     * For a SplitButton with text 'Reply', the default aria-label will be 'Reply splitbutton'.
+     *
+     * To allow reordering of the SplitButton text and the localizable part, the splitButtonLabel accepts a string with a
+     * placeholder for the button text - e.g. 'splitbutton for {buttonText}'. The '{buttonText}' placeholder will be replaced
+     * internally with the current SplitButton text, and the resulting aria-label will be rendered as 'splitbutton for Reply'.
+     *
+     * @example
+     *
+     * ```ts-no-run
+     *      <kendo-splitbutton>
+     *          <kendo-splitbutton-messages
+     *              splitButtonLabel="splitbutton for {buttonText}"
+     *          >
+     *          </kendo-splitbutton-messages>
+     *      </kendo-splitbutton>
+     *  ```
+     */
+    splitButtonLabel;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -4354,6 +4592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ([see example]({% slug rtl_buttons %}).
  */
 class SplitButtonCustomMessagesComponent extends Messages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -4361,13 +4600,13 @@ class SplitButtonCustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SplitButtonCustomMessagesComponent, isStandalone: true, selector: "kendo-splitbutton-messages", providers: [{
+                provide: Messages,
+                useExisting: forwardRef(() => SplitButtonCustomMessagesComponent)
+            }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-SplitButtonCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SplitButtonCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitButtonCustomMessagesComponent, isStandalone: true, selector: "kendo-splitbutton-messages", providers: [{
-            provide: Messages,
-            useExisting: forwardRef(() => SplitButtonCustomMessagesComponent)
-        }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{
@@ -4384,19 +4623,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class LocalizedSplitButtonMessagesDirective extends Messages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedSplitButtonMessagesDirective, isStandalone: true, selector: "[kendoSplitButtonLocalizedMessages]", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedSplitButtonMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedSplitButtonMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedSplitButtonMessagesDirective, isStandalone: true, selector: "[kendoSplitButtonLocalizedMessages]", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -4461,154 +4701,46 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 class SplitButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer, containerService) {
-        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
-        this.localization = localization;
-        this.renderer = renderer;
-        /**
-         * Sets the text of the SplitButton.
-         */
-        this.text = '';
-        /**
-         * Defines an icon to be rendered next to the button text.
-         * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
-         */
-        this.icon = '';
-        /**
-         * Defines the type attribute of the main button
-         */
-        this.type = 'button';
-        /**
-         * Defines the location of an image to be displayed next to the button text
-         * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
-         */
-        this.imageUrl = '';
-        /**
-         * The size property specifies the padding of the SplitButton
-         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = 'medium';
-        /**
-         * The SplitButton allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly
-         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-themeColor)).
-         *
-         * The possible values are:
-         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
-         * * `primary` &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.
-         */
-        this.themeColor = 'base';
-        /**
-         * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         */
-        this.tabIndex = 0;
-        /**
-         * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
-         * be rendered for the button which opens the popup.
-         */
-        this.arrowButtonIcon = 'caret-alt-down';
-        /**
-         * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
-         * be rendered for the button which opens the popup.
-         */
-        this.arrowButtonSvgIcon = caretAltDownIcon;
-        /**
-         * Fires each time the user clicks the main button.
-         *
-         * @example
-         * ```ts
-         * _@Component({
-         *    selector: 'my-app',
-         *    template: `
-         *        <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data">
-         *            Reply
-         *        </kendo-splitbutton>
-         *    `
-         * })
-         * class AppComponent {
-         *    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
-         *
-         *    public onSplitButtonClick(): void {
-         *      console.log('SplitButton click');
-         *    }
-         * }
-         * ```
-         *
-         */
-        this.buttonClick = new EventEmitter();
-        /**
-         * Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item.
-         *
-         * @example
-         * ```ts
-         * _@Component({
-         *     selector: 'my-app',
-         *    template: `
-         *        <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data">
-         *          Reply
-         *      </kendo-splitbutton>
-         *    `
-         * })
-         * class AppComponent {
-         *    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
-         *
-         *   public onSplitButtonItemClick(dataItem?: string): void {
-         *        if (dataItem) {
-         *            console.log(dataItem);
-         *       }
-         *    }
-         * }
-         * ```
-         *
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires each time the SplitButton gets focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the SplitButton gets blurred.
-         */
-        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.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.activeArrow = false;
-        this.listId = guid();
-        this.buttonText = '';
-        this.arrowButtonClicked = false;
-        this._rounded = DEFAULT_ROUNDED;
-        this._fillMode = DEFAULT_FILL_MODE;
-        this._buttonAttributes = null;
-        this._itemClick = this.itemClick;
-        this._blur = this.onBlur;
-    }
+    localization;
+    renderer;
+    /**
+     * Sets the text of the SplitButton.
+     */
+    text = '';
+    /**
+     * Defines an icon to be rendered next to the button text.
+     * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+     */
+    icon = '';
+    /**
+     * Defines an SVGIcon to be rendered next to the button text.
+     */
+    svgIcon;
+    /**
+     * Defines an icon with a custom CSS class to be rendered next to the button text
+     * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+     */
+    iconClass;
+    /**
+     * Defines the type attribute of the main button
+     */
+    type = 'button';
+    /**
+     * Defines the location of an image to be displayed next to the button text
+     * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+     */
+    imageUrl = '';
+    /**
+     * The size property specifies the padding of the SplitButton
+     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = 'medium';
     /**
      * The rounded property specifies the border radius of the SplitButton
      * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
@@ -4645,6 +4777,26 @@ class SplitButtonComponent extends ListButton {
     get fillMode() {
         return this._fillMode;
     }
+    /**
+     * The SplitButton allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
+     * * `primary` &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.
+     */
+    themeColor = 'base';
     /**
      * When set to `true`, disables a SplitButton item
      * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
@@ -4673,6 +4825,14 @@ class SplitButtonComponent extends ListButton {
     get popupSettings() {
         return this._popupSettings;
     }
+    /**
+     * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     */
+    tabIndex = 0;
+    /**
+     * Configures the text field of the button-list popup.
+     */
+    textField;
     /**
      * Sets the data of the SplitButton.
      *
@@ -4687,6 +4847,21 @@ class SplitButtonComponent extends ListButton {
         }
         return this._data;
     }
+    /**
+     * The CSS classes that will be rendered on the button which opens the popup.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    arrowButtonClass;
+    /**
+     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
+     * be rendered for the button which opens the popup.
+     */
+    arrowButtonIcon = 'caret-alt-down';
+    /**
+     * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
+     * be rendered for the button which opens the popup.
+     */
+    arrowButtonSvgIcon = caretAltDownIcon;
     /**
      * Sets attributes to the main button.
      */
@@ -4698,6 +4873,80 @@ class SplitButtonComponent extends ListButton {
     get buttonAttributes() {
         return this._buttonAttributes;
     }
+    /**
+     * Fires each time the user clicks the main button.
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data">
+     *            Reply
+     *        </kendo-splitbutton>
+     *    `
+     * })
+     * class AppComponent {
+     *    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
+     *
+     *    public onSplitButtonClick(): void {
+     *      console.log('SplitButton click');
+     *    }
+     * }
+     * ```
+     *
+     */
+    buttonClick = new EventEmitter();
+    /**
+     * Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item.
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     *     selector: 'my-app',
+     *    template: `
+     *        <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data">
+     *          Reply
+     *      </kendo-splitbutton>
+     *    `
+     * })
+     * class AppComponent {
+     *    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
+     *
+     *   public onSplitButtonItemClick(dataItem?: string): void {
+     *        if (dataItem) {
+     *            console.log(dataItem);
+     *       }
+     *    }
+     * }
+     * ```
+     *
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires each time the SplitButton gets focused.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the SplitButton gets blurred.
+     */
+    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.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    /**
+     * An item template that helps to customize the item content.
+     */
+    itemTemplate;
+    activeArrow = false;
+    listId = guid();
     /**
      * @hidden
      */
@@ -4716,6 +4965,12 @@ class SplitButtonComponent extends ListButton {
     get componentTabIndex() {
         return this.disabled ? -1 : this.tabIndex;
     }
+    buttonText = '';
+    arrowButtonClicked = false;
+    _rounded = DEFAULT_ROUNDED;
+    _fillMode = DEFAULT_FILL_MODE;
+    _buttonAttributes = null;
+    documentMouseUpSub;
     set isFocused(value) {
         this._isFocused = value;
     }
@@ -4809,7 +5064,7 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     ngAfterViewInit() {
-        this.containerService.container = this.containerRef;
+        this.containerService.container = this.container;
         this.containerService.template = this.popupTemplate;
         this.updateButtonText();
         this.handleClasses(this.rounded, 'rounded');
@@ -4833,6 +5088,14 @@ class SplitButtonComponent extends ListButton {
             popup.popupAlign = this.popupAlign;
         }
     }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.documentMouseUpSub) {
+            this.documentMouseUpSub();
+        }
+    }
     /**
      * @hidden
      */
@@ -4901,6 +5164,21 @@ class SplitButtonComponent extends ListButton {
             this.blurWrapper();
         }
     }
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer, containerService) {
+        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
+        this.localization = localization;
+        this.renderer = renderer;
+        this._itemClick = this.itemClick;
+        this._blur = this.onBlur;
+        this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
+            if (this.active) {
+                this._active = false;
+            }
+            if (this.activeArrow) {
+                this.activeArrow = false;
+            }
+        });
+    }
     /**
      * Returns the current open state of the popup.
      */
@@ -4943,26 +5221,26 @@ class SplitButtonComponent extends ListButton {
             }
         }
     }
-}
-SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitButtonComponent, isStandalone: true, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", 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", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($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,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.splitbutton'
-        },
-        PopupContainerService,
-        {
-            provide: MultiTabStop,
-            useExisting: forwardRef(() => SplitButtonComponent)
-        }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "arrowButton", first: true, predicate: ["arrowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SplitButtonComponent, isStandalone: true, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($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,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.splitbutton'
+            },
+            PopupContainerService,
+            {
+                provide: MultiTabStop,
+                useExisting: forwardRef(() => SplitButtonComponent)
+            }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: 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' }}">
+            splitButtonLabel="{{ '{buttonText} splitbutton' }}"
+        >
         </ng-container>
         <button
             kendoButton
@@ -4990,8 +5268,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             [attr.aria-label]="ariaLabel"
         >
             <span *ngIf="text" class="k-button-text">
-                {{ text }}
-            </span><ng-content></ng-content>
+                {{ text }} </span><ng-content></ng-content>
         </button>
         <button kendoButton #arrowButton type="button"
             class="k-split-button-arrow"
@@ -5027,7 +5304,8 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         </ng-template>
         <ng-container #container></ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSplitButton',
@@ -5050,7 +5328,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
-            splitButtonLabel="{{ '{buttonText} splitbutton' }}">
+            splitButtonLabel="{{ '{buttonText} splitbutton' }}"
+        >
         </ng-container>
         <button
             kendoButton
@@ -5078,8 +5357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [attr.aria-label]="ariaLabel"
         >
             <span *ngIf="text" class="k-button-text">
-                {{ text }}
-            </span><ng-content></ng-content>
+                {{ text }} </span><ng-content></ng-content>
         </button>
         <button kendoButton #arrowButton type="button"
             class="k-split-button-arrow"
@@ -5148,8 +5426,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], data: [{
                 type: Input
-            }], buttonClass: [{
-                type: Input
             }], arrowButtonClass: [{
                 type: Input
             }], arrowButtonIcon: [{
@@ -5175,18 +5451,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], itemTemplate: [{
                 type: ContentChild,
                 args: [ButtonItemTemplateDirective]
-            }], button: [{
-                type: ViewChild,
-                args: ['button', { read: ElementRef }]
-            }], arrowButton: [{
-                type: ViewChild,
-                args: ['arrowButton', { read: ElementRef }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate']
-            }], containerRef: [{
-                type: ViewChild,
-                args: ['container', { read: ViewContainerRef }]
             }], isFocused: [{
                 type: HostBinding,
                 args: ['class.k-focus']
@@ -5278,11 +5542,11 @@ const KENDO_BUTTONS = [
  * - `ButtonComponent`&mdash;The Button component class.
  */
 class ButtonGroupModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, imports: [ButtonComponent, ButtonGroupComponent], exports: [ButtonComponent, ButtonGroupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, providers: [IconsService], imports: [ButtonComponent] });
 }
-ButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupModule, imports: [ButtonComponent, ButtonGroupComponent], exports: [ButtonComponent, ButtonGroupComponent] });
-ButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupModule, providers: [IconsService], imports: [KENDO_BUTTONGROUP] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_BUTTONGROUP],
@@ -5324,11 +5588,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class ButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, imports: [ButtonComponent], exports: [ButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, providers: [IconsService], imports: [ButtonComponent] });
 }
-ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ButtonModule, imports: [ButtonComponent], exports: [ButtonComponent] });
-ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonModule, providers: [IconsService], imports: [ButtonComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ButtonComponent],
@@ -5370,11 +5634,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class ButtonsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, DropDownButtonComponent, ChipComponent, ChipComponent, FloatingActionButtonComponent, SplitButtonComponent] });
 }
-ButtonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ButtonsModule, imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent], exports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ButtonItemTemplateDirective, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective, SplitButtonComponent, SplitButtonCustomMessagesComponent] });
-ButtonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonsModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ButtonComponent, ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, ChipComponent, ChipComponent, ChipListComponent, FloatingActionButtonComponent, SplitButtonComponent, SplitButtonCustomMessagesComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_BUTTONS],
@@ -5393,11 +5657,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * - `SplitButtonCustomMessagesComponent`&mdash;The SplitButton custom messages component class.
  */
 class SplitButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonModule, imports: [SplitButtonComponent, SplitButtonCustomMessagesComponent], exports: [SplitButtonComponent, SplitButtonCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [SplitButtonComponent] });
 }
-SplitButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SplitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonModule, imports: [SplitButtonComponent, SplitButtonCustomMessagesComponent], exports: [SplitButtonComponent, SplitButtonCustomMessagesComponent] });
-SplitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [KENDO_SPLITBUTTON] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_SPLITBUTTON],
@@ -5416,11 +5680,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * - `ButtonItemTemplateDirective`&mdash;The Button item template directive.
  */
 class DropDownButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, imports: [DropDownButtonComponent, ButtonItemTemplateDirective], exports: [DropDownButtonComponent, ButtonItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [DropDownButtonComponent] });
 }
-DropDownButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropDownButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, imports: [DropDownButtonComponent, ButtonItemTemplateDirective], exports: [DropDownButtonComponent, ButtonItemTemplateDirective] });
-DropDownButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [DropDownButtonComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_DROPDOWNBUTTON],
@@ -5436,15 +5700,15 @@ const EXPORTED_DIRECTIVES = [
 ];
 //IMPORTANT: NgModule export kept for backwards compatibility
 class ListModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ListModule, imports: [ListComponent,
+            FocusableDirective,
+            ButtonItemTemplateDirective], exports: [ListComponent,
+            FocusableDirective,
+            ButtonItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListModule, providers: [IconsService], imports: [ListComponent] });
 }
-ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ListModule, imports: [ListComponent,
-        FocusableDirective,
-        ButtonItemTemplateDirective], exports: [ListComponent,
-        FocusableDirective,
-        ButtonItemTemplateDirective] });
-ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListModule, providers: [IconsService], imports: [ListComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...EXPORTED_DIRECTIVES],
@@ -5483,11 +5747,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class ChipModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, imports: [ChipComponent, ChipListComponent], exports: [ChipComponent, ChipListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [ChipComponent] });
 }
-ChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, imports: [ChipComponent, ChipListComponent], exports: [ChipComponent, ChipListComponent] });
-ChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [KENDO_CHIPLIST] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_CHIPLIST],
@@ -5526,11 +5790,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class FloatingActionButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonModule, imports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective], exports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [FloatingActionButtonComponent] });
 }
-FloatingActionButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FloatingActionButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonModule, imports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective], exports: [FloatingActionButtonComponent, DialItemTemplateDirective, FloatingActionButtonTemplateDirective] });
-FloatingActionButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [FloatingActionButtonComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_FLOATINGACTIONBUTTON],