@progress/kendo-angular-buttons 8.0.1-dev.202208111121 → 8.1.0

package/fesm2015/kendo-angular-buttons.js

@@ -9,7 +9,7 @@ import { isDocumentAvailable, Keys, isChanged, hasObservers, guid, EventsModule
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { Subject, Subscription, fromEvent, merge } from 'rxjs';
-import { take, filter } from 'rxjs/operators';
+import { take, filter, tap } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import * as i2 from '@angular/common';
@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660216864,
+    publishDate: 1662712402,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -161,6 +161,7 @@ const DEFAULT_FILL_MODE$2 = 'solid';
  */
 class ButtonDirective {
     constructor(element, renderer, service, localization, ngZone) {
+        this.renderer = renderer;
         this.service = service;
         this.ngZone = ngZone;
         /**
@@ -195,7 +196,6 @@ class ButtonDirective {
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.element = element.nativeElement;
-        this.renderer = renderer;
     }
     /**
      * Backwards-compatible alias
@@ -467,7 +467,6 @@ class ButtonDirective {
         this.imageNode = null;
         this.iconNode = null;
         this.iconSpanNode = null;
-        this.renderer = null;
         this.subs.unsubscribe();
         clearTimeout(this.deferTimeout);
     }
@@ -783,9 +782,19 @@ class ButtonGroupComponent {
         this.service = service;
         this.element = element;
         /**
-         * By default, the selection mode of the ButtonGroup is set to `multiple`.
+         * 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.
          */
@@ -793,6 +802,15 @@ class ButtonGroupComponent {
         this._tabIndex = 0;
         this.currentTabIndex = 0;
         this.subs = new Subscription();
+        this.role = 'group';
+        this.focusHandler = () => {
+            this.currentTabIndex = -1;
+            const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
+            const index = focusedIndex === -1 ? 0 : focusedIndex;
+            this.focus(this.buttons.filter((_current, i) => {
+                return i === index;
+            }));
+        };
         validatePackage(packageMetadata);
         this.subs.add(localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
@@ -815,9 +833,6 @@ class ButtonGroupComponent {
     get stretchedClass() {
         return !!this.width;
     }
-    get getRole() {
-        return this.isSelectionSingle() ? 'radiogroup' : 'group';
-    }
     get dir() {
         return this.direction;
     }
@@ -828,35 +843,7 @@ class ButtonGroupComponent {
         return this.width;
     }
     get wrapperTabIndex() {
-        return this.disabled ? undefined : this.currentTabIndex;
-    }
-    /**
-     * @hidden
-     */
-    keydown(event) {
-        if (!this.disabled) {
-            this.navigateFocus(event);
-        }
-    }
-    /**
-     * @hidden
-     */
-    onFocus() {
-        this.currentTabIndex = -1;
-        const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
-        const index = focusedIndex === -1 ? 0 : focusedIndex;
-        this.focus(this.buttons.filter((_current, i) => {
-            return i === index;
-        }));
-    }
-    /**
-     * @hidden
-     */
-    focusout(event) {
-        if (event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement) {
-            this.defocus(this.buttons.toArray());
-            this.currentTabIndex = this.tabIndex;
-        }
+        return this.disabled ? undefined : this.navigable ? this.currentTabIndex : undefined;
     }
     ngOnInit() {
         this.subs.add(this.service.buttonClicked$.subscribe((button) => {
@@ -866,33 +853,55 @@ class ButtonGroupComponent {
                 this.deactivate(this.buttons.filter(current => current !== button));
             }
             else {
-                this.defocus(this.buttons.toArray());
+                if (this.navigable) {
+                    this.defocus(this.buttons.toArray());
+                }
                 newSelectionValue = !button.selected;
             }
             if (button.togglable) {
                 button.setSelected(newSelectionValue);
             }
-            button.setAttribute(tabindex, '0');
+            if (this.navigable) {
+                button.setAttribute(tabindex, '0');
+            }
+        }));
+        this.handleSubs('focus', () => this.navigable, this.focusHandler);
+        this.handleSubs('keydown', () => this.navigable && !this.disabled, (event) => this.navigateFocus(event));
+        this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
+            this.defocus(this.buttons.toArray());
+            this.currentTabIndex = this.tabIndex;
+        });
+        this.subs.add(fromEvent(this.element.nativeElement, 'focusout')
+            .pipe(filter((event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement))
+            .subscribe(() => {
+            this.defocus(this.buttons.toArray());
+            this.currentTabIndex = this.tabIndex;
         }));
     }
-    ngOnChanges(change) {
-        if (isChanged('disabled', change)) {
+    ngOnChanges(changes) {
+        if (isChanged('disabled', changes)) {
             this.buttons.forEach((button) => {
                 if (isPresent(this.disabled)) {
                     button.disabled = this.disabled;
                 }
             });
         }
-    }
-    ngAfterContentInit() {
-        this.buttons.forEach((button) => {
-            if (button.selected) {
-                button.setAttribute(tabindex, '0');
+        if (isChanged('navigable', changes)) {
+            if (changes.navigable.currentValue) {
+                this.setButtonsTabIndex();
+                this.currentTabIndex = 0;
             }
             else {
-                button.setAttribute(tabindex, '-1');
+                this.currentTabIndex = -1;
+                this.buttons.forEach((button) => button.setAttribute(tabindex, '0'));
             }
-        });
+        }
+    }
+    ngAfterContentInit() {
+        if (!this.navigable) {
+            return;
+        }
+        this.setButtonsTabIndex();
     }
     ngAfterViewChecked() {
         if (this.buttons.length) {
@@ -933,13 +942,17 @@ class ButtonGroupComponent {
     deactivate(buttons) {
         buttons.forEach((button) => {
             button.setSelected(false);
-            button.setAttribute(tabindex, '-1');
+            if (this.navigable) {
+                button.setAttribute(tabindex, '-1');
+            }
         });
     }
     activate(buttons) {
         buttons.forEach((button) => {
             button.setSelected(true);
-            button.setAttribute(tabindex, '0');
+            if (this.navigable) {
+                button.setAttribute(tabindex, '0');
+            }
             button.focus();
         });
     }
@@ -964,9 +977,24 @@ class ButtonGroupComponent {
     isSelectionSingle() {
         return this.selection === 'single';
     }
+    setButtonsTabIndex() {
+        this.buttons.forEach((button) => {
+            if (button.selected) {
+                button.setAttribute(tabindex, '0');
+            }
+            else {
+                button.setAttribute(tabindex, '-1');
+            }
+        });
+    }
+    handleSubs(eventName, predicate, handler) {
+        this.subs.add(fromEvent(this.element.nativeElement, eventName)
+            .pipe(filter(predicate))
+            .subscribe(handler));
+    }
 }
 ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex" }, outputs: { navigate: "navigate" }, host: { listeners: { "keydown": "keydown($event)", "focus": "onFocus()", "focusout": "focusout($event)" }, properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.getRole", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
+ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "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,
         {
@@ -1004,6 +1032,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['width']
             }], tabIndex: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }], navigate: [{
                 type: Output
             }], buttons: [{
@@ -1018,7 +1048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], stretchedClass: [{
                 type: HostBinding,
                 args: ['class.k-button-group-stretched']
-            }], getRole: [{
+            }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], dir: [{
@@ -1033,15 +1063,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], wrapperTabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], keydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], focusout: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
             }] } });
 
 /**
@@ -1264,13 +1285,14 @@ class ListComponent {
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
         <ul class="k-group k-menu-group k-reset" [ngClass]="sizeClass" unselectable="on" role="menu">
-            <li role="menuitem" unselectable="on"
+            <li role="menuitem"
+                unselectable="on"
                 kendoButtonFocusable
                 *ngFor="let dataItem of data; let index = index;"
                 [index]="index"
                 tabindex="-1"
                 class="k-item k-menu-item"
-                (click)="onClick(index)"
+                (click)="$event.stopImmediatePropagation(); onClick(index);"
                 (blur)="onBlur()"
                 [attr.aria-disabled]="dataItem.disabled ? true : false">
                 <ng-template [ngIf]="itemTemplate?.templateRef">
@@ -1304,13 +1326,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-button-list',
                     template: `
         <ul class="k-group k-menu-group k-reset" [ngClass]="sizeClass" unselectable="on" role="menu">
-            <li role="menuitem" unselectable="on"
+            <li role="menuitem"
+                unselectable="on"
                 kendoButtonFocusable
                 *ngFor="let dataItem of data; let index = index;"
                 [index]="index"
                 tabindex="-1"
                 class="k-item k-menu-item"
-                (click)="onClick(index)"
+                (click)="$event.stopImmediatePropagation(); onClick(index);"
                 (blur)="onBlur()"
                 [attr.aria-disabled]="dataItem.disabled ? true : false">
                 <ng-template [ngIf]="itemTemplate?.templateRef">
@@ -1496,13 +1519,8 @@ class NavigationService {
         const keyEvent = args.keyEvent;
         let index;
         let action = NavigationAction.Undefined;
-        if (keyEvent === KeyEvents.keypress) {
-            if (this.isEnter(keyCode)) {
-                action = NavigationAction.EnterPress;
-            }
-        }
-        else if (keyEvent === KeyEvents.keyup) {
-            if (this.isEnter(keyCode)) {
+        if (keyEvent === KeyEvents.keyup) {
+            if (this.isEnterOrSpace(keyCode)) {
                 action = NavigationAction.EnterUp;
             }
         }
@@ -1513,7 +1531,7 @@ class NavigationService {
             else if (args.altKey && keyCode === Keys.ArrowUp) {
                 action = NavigationAction.Close;
             }
-            else if (this.isEnter(keyCode)) {
+            else if (this.isEnterOrSpace(keyCode)) {
                 action = NavigationAction.Enter;
             }
             else if (keyCode === Keys.Escape) {
@@ -1556,11 +1574,11 @@ class NavigationService {
             }
         }
         if (action !== NavigationAction.Undefined) {
-            this[NavigationAction[action].toLowerCase()].emit(index);
+            this[NavigationAction[action].toLowerCase()].emit({ index, target: args.target });
         }
         return action;
     }
-    isEnter(keyCode) {
+    isEnterOrSpace(keyCode) {
         return keyCode === Keys.Enter || keyCode === Keys.Space;
     }
     next(args) {
@@ -1581,16 +1599,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [NAVIGATION_CONFIG]
                 }] }]; } });
 
+/**
+ * @hidden
+ */
+class PopupContainerService {
+}
+PopupContainerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PopupContainerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupContainerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupContainerService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * @hidden
  */
 class ListButton {
-    constructor(focusService, navigationService, wrapperRef, _zone, localization, cdr) {
+    constructor(focusService, navigationService, wrapperRef, _zone, popupService, elRef, localization, cdr, containerService) {
         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;
@@ -1598,6 +1630,22 @@ class ListButton {
         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();
+        this.isClosePrevented = false;
         validatePackage(packageMetadata);
         this.focusService = focusService;
         this.navigationService = navigationService;
@@ -1605,6 +1653,75 @@ class ListButton {
         this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
         this.subscribeEvents();
     }
+    /**
+     * 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;
+    }
+    /**
+     * @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;
+    }
+    /**
+     * @hidden
+     */
+    get anchorAlign() {
+        let align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
+        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+            align.horizontal = 'right';
+        }
+        return align;
+    }
+    /**
+     * @hidden
+     */
+    get popupAlign() {
+        let align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
+        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
+            align.horizontal = 'right';
+        }
+        return align;
+    }
+    ngOnChanges(changes) {
+        if (isChanged("popupSettings", changes) && isPresent(this.popupRef)) {
+            const popup = this.popupRef.popup.instance;
+            const newSettings = changes.popupSettings.currentValue;
+            popup.popupClass = newSettings.popupClass;
+            popup.animate = newSettings.animate;
+            popup.popupAlign = this.popupAlign;
+        }
+    }
     get popupClasses() {
         const popupClasses = ['k-menu-popup'];
         if (this._popupSettings.popupClass) {
@@ -1615,9 +1732,21 @@ class ListButton {
     get openState() {
         return this._open;
     }
+    /**
+     * @hidden
+     */
     set openState(open) {
+        if (this.disabled) {
+            return;
+        }
         this._open = open;
     }
+    /**
+     * Returns the current open state of the popup.
+     */
+    get isOpen() {
+        return this._open;
+    }
     /**
      * @hidden
      */
@@ -1625,23 +1754,29 @@ class ListButton {
         if (this._disabled) {
             return;
         }
-        this.openState = !this.openState;
-        if (!this.openState) {
-            this.focusService.focus(-1);
+        this._toggle(!this.openState);
+        if (!this.isClosePrevented) {
+            this.focusService.focus(this.openState ? 0 : -1);
         }
     }
     /**
      * @hidden
      */
     onItemClick(index) {
+        this.togglePopupVisibility();
+        if (this.isClosePrevented) {
+            this.emitItemClickHandler(index);
+            return;
+        }
+        if (isDocumentAvailable() && !this.isClosePrevented) {
+            this.focusButton();
+        }
         this.emitItemClickHandler(index);
-        setTimeout(() => this.focusWrapper(), 1);
     }
     ngOnDestroy() {
         this.openState = false;
-        clearTimeout(this.focusFirstTimeout);
-        clearTimeout(this.blurTimeout);
         this.subs.unsubscribe();
+        this.destroyPopup();
     }
     subscribeEvents() {
         if (!isDocumentAvailable()) {
@@ -1658,41 +1793,36 @@ class ListButton {
     }
     subscribeComponentBlurredEvent() {
         this._zone.runOutsideAngular(() => {
-            this.subs.add(this.navigationService.tab.pipe(filter(() => this._isFocused)).subscribe(this.handleTab.bind(this)));
+            this.subs.add(this.navigationService.tab.pipe(filter(() => this._isFocused), tap(() => this.focusButton())).subscribe(this.handleTab.bind(this)));
             this.subs.add(fromEvent(document, 'click')
                 .pipe(filter((event) => !this.wrapperContains(event.target)), filter(() => this._isFocused))
                 .subscribe(() => this._zone.run(() => this.blurWrapper())));
         });
     }
     subscribeNavigationEvents() {
-        this.subs.add(this.navigationService.navigate.subscribe(this.focusService.focus.bind(this.focusService)));
-        this.subs.add(this.navigationService.enterup.subscribe(() => {
-            this.enterHandler();
-            this.focusWrapper();
-        }));
-        this.subs.add(this.navigationService.open.subscribe(() => {
-            if (!this._open) {
-                this.togglePopupVisibility();
-                this.focusFirstItem();
-            }
-            else {
-                this.focusWrapper();
-            }
-        }));
-        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(() => this.focusWrapper()));
+        this.subs.add(this.navigationService.navigate
+            .subscribe(this.onArrowKeyNavigate.bind(this)));
+        this.subs.add(this.navigationService.enterup.subscribe(this.onNavigationEnterUp.bind(this)));
+        this.subs.add(this.navigationService.open.subscribe(this.onNavigationOpen.bind(this)));
+        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(this.onNavigationClose.bind(this)));
     }
-    enterHandler() { } // eslint-disable-line
     /**
-     * @hidden
+     * Toggles the visibility of the popup.
+     * If the `toggle` method is used to open or close the popup, the `open` and `close` events will not be fired.
+     *
+     * @param open - The state of the popup.
      */
-    keyDownHandler(event) {
-        this.keyHandler(event);
+    toggle(open) {
+        if (this.disabled) {
+            return;
+        }
+        this._toggle((open === undefined) ? !this.openState : open);
     }
     /**
      * @hidden
      */
-    keyPressHandler(event) {
-        this.keyHandler(event, KeyEvents.keypress);
+    keyDownHandler(event) {
+        this.keyHandler(event);
     }
     /**
      * @hidden
@@ -1707,23 +1837,22 @@ class ListButton {
         if (this._disabled) {
             return;
         }
-        let focused = this.focusService.focused || 0;
         const eventData = event;
+        eventData.stopImmediatePropagation();
+        let focused = this.focusService.focused || 0;
         const action = this.navigationService.process({
             altKey: eventData.altKey,
             current: focused,
             keyCode: eventData.keyCode,
             keyEvent: keyEvent,
             max: this._data ? this._data.length - 1 : 0,
-            min: 0
+            min: 0,
+            target: event.target
         });
         if (action !== NavigationAction.Undefined &&
             action !== NavigationAction.Tab &&
-            (action !== NavigationAction.Enter || (action === NavigationAction.Enter && this._open))) {
-            if (event.keyCode === Keys.Space && action === NavigationAction.EnterUp) {
-                this._open = false;
-            }
-            else {
+            (action !== NavigationAction.Enter || (action === NavigationAction.Enter && this.openState))) {
+            if (!(event.keyCode === Keys.Space && action === NavigationAction.EnterUp)) {
                 eventData.preventDefault();
             }
         }
@@ -1736,14 +1865,10 @@ class ListButton {
         if (dataItem && dataItem.click && !dataItem.disabled) {
             dataItem.click(dataItem);
         }
-    }
-    focusFirstItem() {
-        if (this._data && isPresent(this._data[0])) {
-            this.focusFirstTimeout = setTimeout(() => this.focusService.focus(0), 1);
-        }
+        this.focusService.focus(index);
     }
     focusWrapper() {
-        if (this._open) {
+        if (this.openState) {
             this.togglePopupVisibility();
             this.focusButton();
         }
@@ -1752,7 +1877,10 @@ class ListButton {
         return this.wrapper === element || this.wrapper.contains(element);
     }
     blurWrapper(emit = true) {
-        if (this._open) {
+        if (!this._isFocused) {
+            return;
+        }
+        if (this.openState) {
             this.togglePopupVisibility();
         }
         this._isFocused = false;
@@ -1767,41 +1895,125 @@ class ListButton {
         }
     }
     handleTab() {
-        this.focusButton();
-        this.blurWrapper(false);
+        this.blurWrapper();
     }
-}
-ListButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ListButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListButton, selector: "ng-component", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListButton, decorators: [{
-            type: Component,
-            args: [{
-                    template: ''
-                }]
-        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
-
-/**
- * @hidden
- */
-class Messages extends ComponentMessages {
-}
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'kendo-splitbutton-messages-base'
-                }]
-        }], propDecorators: { splitButtonLabel: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class LocalizedSplitButtonMessagesDirective extends Messages {
-    constructor(service) {
+    onNavigationEnterUp() {
+        if (!this._disabled && !this.openState) {
+            this._active = false;
+        }
+        if (this.openState) {
+            let focused = this.focusService.focused;
+            if (isPresent(focused) && focused !== -1) {
+                this.emitItemClickHandler(focused);
+            }
+        }
+        this.togglePopupVisibility();
+        if (!this.openState && isDocumentAvailable()) {
+            this.button.nativeElement.focus();
+        }
+    }
+    onNavigationOpen() {
+        if (!this._disabled && !this.openState) {
+            this.togglePopupVisibility();
+        }
+    }
+    onNavigationClose() {
+        if (this.openState && !this.isClosePrevented) {
+            this.togglePopupVisibility();
+            if (isDocumentAvailable()) {
+                this.button.nativeElement.focus();
+            }
+        }
+    }
+    onArrowKeyNavigate({ index }) {
+        this.focusService.focus(index);
+    }
+    _toggle(open) {
+        if (this.openState === open) {
+            return;
+        }
+        const eventArgs = new PreventableEvent();
+        if (open && !this.openState) {
+            this.open.emit(eventArgs);
+        }
+        else if (!open && this.openState) {
+            this.close.emit(eventArgs);
+        }
+        if (eventArgs.isDefaultPrevented()) {
+            this.isClosePrevented = true;
+            return;
+        }
+        this.openState = open;
+        this.destroyPopup();
+        if (this.openState) {
+            this.createPopup();
+        }
+    }
+    createPopup() {
+        this.popupRef = this.popupService.open({
+            anchor: this.elRef,
+            anchorAlign: this.anchorAlign,
+            animate: this.popupSettings.animate,
+            appendTo: this.appendTo,
+            content: this.containerService.template,
+            popupAlign: this.popupAlign,
+            popupClass: this.popupClasses
+        });
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.openState = false));
+    }
+    destroyPopup() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+            this.popupSubs.unsubscribe();
+            this.isClosePrevented = false;
+            // this.focusService.resetFocus();
+        }
+    }
+}
+ListButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+ListButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListButton, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListButton, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PopupContainerService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], popupSettings: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-splitbutton-messages-base'
+                }]
+        }], propDecorators: { splitButtonLabel: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedSplitButtonMessagesDirective extends Messages {
+    constructor(service) {
         super();
         this.service = service;
     }
@@ -1877,10 +2089,8 @@ const DEFAULT_FILL_MODE$1 = 'solid';
  * ```
  */
 class SplitButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
-        super(focusService, navigationService, wrapperRef, zone, localization, cdr);
-        this.popupService = popupService;
-        this.elRef = elRef;
+    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;
         /**
@@ -2020,10 +2230,9 @@ class SplitButtonComponent extends ListButton {
         this.activeArrow = false;
         this.listId = guid();
         this.buttonText = '';
-        this.lockFocus = false;
+        this.arrowButtonClicked = false;
         this._rounded = DEFAULT_ROUNDED$1;
         this._fillMode = DEFAULT_FILL_MODE$1;
-        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -2105,31 +2314,6 @@ class SplitButtonComponent extends ListButton {
         }
         return this._data;
     }
-    /**
-     * @hidden
-     */
-    set openState(open) {
-        if (this.disabled) {
-            return;
-        }
-        const eventArgs = new PreventableEvent();
-        if (open) {
-            this.open.emit(eventArgs);
-        }
-        else {
-            this.close.emit(eventArgs);
-        }
-        if (eventArgs.isDefaultPrevented()) {
-            return;
-        }
-        this._toggle(open);
-    }
-    /**
-     * @hidden
-     */
-    get openState() {
-        return this._open;
-    }
     /**
      * @hidden
      */
@@ -2146,7 +2330,7 @@ class SplitButtonComponent extends ListButton {
         this._isFocused = value;
     }
     get isFocused() {
-        return this._isFocused && !this._disabled;
+        return this._isFocused && !this._disabled && isDocumentAvailable() && this.wrapperContains(document.activeElement);
     }
     get widgetClasses() {
         return true;
@@ -2164,18 +2348,24 @@ class SplitButtonComponent extends ListButton {
     /**
      * @hidden
      */
-    onButtonFocus() {
-        if (!this.isFocused) {
+    onButtonFocus(event) {
+        if (!this._disabled) {
+            // eslint-disable-next-line no-unused-expressions
+            !this._isFocused && this.onFocus.emit();
             this._isFocused = true;
-            this.onFocus.emit();
+            this.focusService.resetFocus();
+            const relatedTargetInList = event.relatedTarget && closest(event.relatedTarget, '.k-popup kendo-button-list');
+            if (this.openState && !relatedTargetInList) {
+                this.focusService.focus(0);
+            }
         }
     }
     /**
      * @hidden
      */
     onArrowButtonClick() {
-        this.lockFocus = true;
         this.togglePopupVisibility();
+        this.arrowButtonClicked = false;
     }
     /**
      * @hidden
@@ -2187,23 +2377,23 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     toggleArrowButtonActiveState(enable) {
+        this.arrowButtonClicked = true;
         this.activeArrow = enable;
     }
     /**
      * @hidden
      */
     onButtonClick() {
-        this.lockFocus = true;
+        // this.lockFocus = true;
         this.buttonClick.emit();
     }
     /**
      * @hidden
      */
     onButtonBlur() {
-        if (!this.isOpen && !this.lockFocus) {
+        if (!this.isOpen && !this.arrowButtonClicked) {
             this.blurWrapper();
         }
-        this.lockFocus = false;
     }
     /**
      * @hidden
@@ -2214,12 +2404,6 @@ class SplitButtonComponent extends ListButton {
             this._active = true;
         }
     }
-    /**
-     * @hidden
-     */
-    keypress(event) {
-        this.keyPressHandler(event);
-    }
     /**
      * @hidden
      */
@@ -2233,6 +2417,8 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     ngAfterViewInit() {
+        this.containerService.container = this.containerRef;
+        this.containerService.template = this.popupTemplate;
         this.updateButtonText();
         this.handleClasses(this.rounded, 'rounded');
     }
@@ -2251,14 +2437,22 @@ class SplitButtonComponent extends ListButton {
             popup.popupAlign = this.popupAlign;
         }
     }
+    /**
+     * @hidden
+     */
+    onNavigationEnterUp(args) {
+        if (args.target !== this.button.nativeElement) {
+            super.onNavigationEnterUp();
+        }
+    }
     /**
      * @hidden
      */
     togglePopupVisibility() {
-        super.togglePopupVisibility();
-        if (isDocumentAvailable() && this.lockFocus) {
+        if (isDocumentAvailable() && this.wrapperContains(document.activeElement) && this.arrowButtonClicked) {
             this.button.nativeElement.focus();
         }
+        super.togglePopupVisibility();
     }
     /**
      * @hidden
@@ -2303,86 +2497,22 @@ class SplitButtonComponent extends ListButton {
             this.blurWrapper();
         }
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.destroyPopup();
-    }
-    /**
-     * Toggles the visibility of the popup.
-     * If the `toggle` method is used to open or close the popup, the `open` and `close` events will not be fired.
-     *
-     * @param open - The state of the popup.
-     */
-    toggle(open) {
-        if (this.disabled) {
-            return;
-        }
-        tick(() => this._toggle(open === undefined ? !this._open : open));
-    }
     /**
      * Returns the current open state of the popup.
      */
     get isOpen() {
         return this.openState;
     }
-    enterHandler() {
-        if (this.disabled) {
-            return;
-        }
-        if (this.openState) {
-            let focused = this.focusService.focused;
-            if (isPresent(focused) && focused !== -1) {
-                this.emitItemClickHandler(focused);
-            }
-        }
-        else {
-            this.buttonClick.emit();
-        }
-    }
     updateButtonText() {
         if (isDocumentAvailable()) {
             let innerText = this.wrapper.innerText
                 .split('\n')
                 .join('')
                 .trim();
-            //setTimout is needed because of `Expression has changed after it was checked.` error;
+            //setTimeout is needed because of `Expression has changed after it was checked.` error;
             setTimeout(() => (this.buttonText = innerText), 0);
         }
     }
-    get appendTo() {
-        const { appendTo } = this.popupSettings;
-        if (!appendTo || appendTo === 'root') {
-            return undefined;
-        }
-        return appendTo === 'component' ? this.containerRef : appendTo;
-    }
-    _toggle(open) {
-        this._open = open;
-        this.destroyPopup();
-        if (this._open) {
-            this.createPopup();
-        }
-    }
-    createPopup() {
-        this.popupRef = this.popupService.open({
-            anchor: this.elRef,
-            anchorAlign: this.anchorAlign,
-            animate: this.popupSettings.animate,
-            appendTo: this.appendTo,
-            content: this.popupTemplate,
-            popupAlign: this.popupAlign,
-            popupClass: this.popupClasses
-        });
-        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => (this.openState = false)));
-        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
-    }
-    destroyPopup() {
-        if (this.popupRef) {
-            this.popupSubs.unsubscribe();
-            this.popupRef.close();
-            this.popupRef = null;
-        }
-    }
     handleClasses(value, input) {
         const elem = this.wrapperRef.nativeElement;
         const classes = getStylingClasses('button', input, this[input], value);
@@ -2394,8 +2524,8 @@ class SplitButtonComponent extends ListButton {
         }
     }
 }
-SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER$2,
@@ -2403,8 +2533,9 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.splitbutton'
-        }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "arrowButton", first: true, predicate: ["arrowButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        },
+        PopupContainerService
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { 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: `
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
             splitButtonLabel="{{ '{buttonText} splitbutton' }}">
@@ -2425,7 +2556,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
-            (focus)="onButtonFocus()"
+            (focus)="onButtonFocus($event)"
             (click)="onButtonClick()"
             (blur)="onButtonBlur()"
             (mousedown)="toggleButtonActiveState(true)"
@@ -2463,7 +2594,6 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [itemTemplate]="itemTemplate"
                 (onItemClick)="onItemClick($event)"
                 (keydown)="keyDownHandler($event)"
-                (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
                 [size]="size"
@@ -2484,7 +2614,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.splitbutton'
-                        }
+                        },
+                        PopupContainerService
                     ],
                     selector: 'kendo-splitbutton',
                     template: `
@@ -2508,7 +2639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
-            (focus)="onButtonFocus()"
+            (focus)="onButtonFocus($event)"
             (click)="onButtonClick()"
             (blur)="onButtonBlur()"
             (mousedown)="toggleButtonActiveState(true)"
@@ -2546,7 +2677,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [itemTemplate]="itemTemplate"
                 (onItemClick)="onItemClick($event)"
                 (keydown)="keyDownHandler($event)"
-                (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
                 [size]="size"
@@ -2556,7 +2686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { text: [{
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: PopupContainerService }]; }, propDecorators: { text: [{
                 type: Input
             }], icon: [{
                 type: Input
@@ -2606,19 +2736,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], itemTemplate: [{
                 type: ContentChild,
-                args: [ButtonItemTemplateDirective, { static: false }]
+                args: [ButtonItemTemplateDirective]
             }], button: [{
                 type: ViewChild,
-                args: ['button', { static: true }]
+                args: ['button']
             }], arrowButton: [{
                 type: ViewChild,
-                args: ['arrowButton', { static: true, read: ElementRef }]
+                args: ['arrowButton', { read: ElementRef }]
             }], popupTemplate: [{
                 type: ViewChild,
-                args: ['popupTemplate', { static: true }]
+                args: ['popupTemplate']
             }], containerRef: [{
                 type: ViewChild,
-                args: ['container', { read: ViewContainerRef, static: true }]
+                args: ['container', { read: ViewContainerRef }]
             }], isFocused: [{
                 type: HostBinding,
                 args: ['class.k-focus']
@@ -2634,9 +2764,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
-            }], keypress: [{
-                type: HostListener,
-                args: ['keypress', ['$event']]
             }], keyup: [{
                 type: HostListener,
                 args: ['keyup', ['$event']]
@@ -2731,10 +2858,9 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 class DropDownButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr) {
-        super(focusService, navigationService, wrapperRef, zone, localization, cdr);
-        this.popupService = popupService;
-        this.elRef = elRef;
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService) {
+        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
+        this.containerService = containerService;
         /**
          * Defines the name of an existing icon in a Kendo UI theme.
          */
@@ -2790,24 +2916,10 @@ class DropDownButtonComponent extends ListButton {
          * * `none` &mdash;Removes the default CSS class (no class would be rendered).
          */
         this.themeColor = 'base';
-        /**
-         * 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 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 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();
         /**
          * Fires each time the DropDownButton gets focused.
          */
@@ -2817,38 +2929,11 @@ class DropDownButtonComponent extends ListButton {
          */
         this.onBlur = new EventEmitter();
         this.listId = guid();
+        this.buttonId = guid();
         this._fillMode = DEFAULT_FILL_MODE;
-        this.popupSubs = new Subscription();
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
-    /**
-     * 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;
-    }
-    /**
-     * 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;
-    }
     /**
      * Sets or gets the data of the DropDownButton.
      *
@@ -2877,44 +2962,6 @@ class DropDownButtonComponent extends ListButton {
     get fillMode() {
         return this._fillMode;
     }
-    /**
-     * @hidden
-     */
-    set openState(open) {
-        if (this.disabled) {
-            return;
-        }
-        const eventArgs = new PreventableEvent();
-        if (open) {
-            this.open.emit(eventArgs);
-        }
-        else {
-            this.close.emit(eventArgs);
-        }
-        if (eventArgs.isDefaultPrevented()) {
-            return;
-        }
-        this._toggle(open);
-    }
-    /**
-     * @hidden
-     */
-    get openState() {
-        return this._open;
-    }
-    /**
-     * @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.container : appendTo;
-    }
     get focused() {
         return this._isFocused && !this._disabled;
     }
@@ -2935,15 +2982,12 @@ class DropDownButtonComponent extends ListButton {
      */
     keydown(event) {
         this.keyDownHandler(event);
-        if (event.keyCode === Keys.Space) {
+        if (event.keyCode === Keys.Space || event.keyCode === Keys.Enter) {
             this._active = true;
         }
-    }
-    /**
-     * @hidden
-     */
-    keypress(event) {
-        this.keyPressHandler(event);
+        if (event.keyCode === Keys.Enter) {
+            event.preventDefault();
+        }
     }
     /**
      * @hidden
@@ -2974,36 +3018,17 @@ class DropDownButtonComponent extends ListButton {
      * @hidden
      */
     openPopup() {
+        this._isFocused = true;
         this.togglePopupVisibility();
     }
     /**
      * @hidden
      */
     onButtonBlur() {
-        if (!this.isOpen) {
+        if (!this.openState) {
             this.blurWrapper();
         }
     }
-    /**
-     * @hidden
-     */
-    get anchorAlign() {
-        let align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
-            align.horizontal = 'right';
-        }
-        return align;
-    }
-    /**
-     * @hidden
-     */
-    get popupAlign() {
-        let align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
-            align.horizontal = 'right';
-        }
-        return align;
-    }
     /**
      * Focuses the DropDownButton component.
      */
@@ -3021,44 +3046,23 @@ class DropDownButtonComponent extends ListButton {
             this.blurWrapper();
         }
     }
-    ngOnChanges(changes) {
-        if (isChanged("popupSettings", changes) && isPresent(this.popupRef)) {
-            const popup = this.popupRef.popup.instance;
-            const newSettings = changes.popupSettings.currentValue;
-            popup.popupClass = newSettings.popupClass;
-            popup.animate = newSettings.animate;
-            popup.popupAlign = this.popupAlign;
-        }
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.destroyPopup();
-    }
-    /**
-     * Toggles the visibility of the popup.
-     * If the `toggle` method is used to open or close the popup, the `open` and `close` events will not be fired.
-     *
-     * @param open - The state of the popup.
-     */
-    toggle(open) {
-        if (this.disabled) {
-            return;
-        }
-        tick(() => (this._toggle((open === undefined) ? !this._open : open)));
-    }
-    /**
-     * Returns the current open state of the popup.
-     */
-    get isOpen() {
-        return this.openState;
+    ngAfterViewInit() {
+        this.containerService.container = this.container;
+        this.containerService.template = this.popupTemplate;
     }
     /**
      * @hidden
      */
-    handleFocus() {
-        if (!this._disabled && !this._isFocused) {
+    handleFocus(event) {
+        if (!this._disabled) {
+            // eslint-disable-next-line no-unused-expressions
+            !this._isFocused && this.onFocus.emit();
             this._isFocused = true;
-            this.onFocus.emit();
+            this.focusService.resetFocus();
+            const relatedTargetInList = event.relatedTarget && closest(event.relatedTarget, '.k-popup kendo-button-list');
+            if (this.openState && !relatedTargetInList) {
+                this.focusService.focus(0);
+            }
         }
     }
     /**
@@ -3069,77 +3073,9 @@ class DropDownButtonComponent extends ListButton {
             || this.wrapper.contains(element)
             || (this.popupRef && this.popupRef.popupElement.contains(element));
     }
-    subscribeNavigationEvents() {
-        this.subs.add(this.navigationService.navigate
-            .subscribe(this.onArrowKeyNavigate.bind(this)));
-        this.subs.add(this.navigationService.enterup.subscribe(this.onNavigationEnterUp.bind(this)));
-        this.subs.add(this.navigationService.open.subscribe(this.onNavigationOpen.bind(this)));
-        this.subs.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(this.onNavigationClose.bind(this)));
-    }
-    onNavigationEnterUp() {
-        if (!this._disabled && !this.openState) {
-            this._active = false;
-        }
-        if (this.openState) {
-            let focused = this.focusService.focused;
-            if (isPresent(focused) && focused !== -1) {
-                this.emitItemClickHandler(focused);
-            }
-        }
-        this.togglePopupVisibility();
-        if (!this.openState && isDocumentAvailable()) {
-            this.button.nativeElement.focus();
-        }
-    }
-    onNavigationOpen() {
-        if (!this._disabled && !this.openState) {
-            this.togglePopupVisibility();
-        }
-    }
-    onNavigationClose() {
-        if (this.openState) {
-            this.togglePopupVisibility();
-            if (isDocumentAvailable()) {
-                this.button.nativeElement.focus();
-            }
-        }
-    }
-    onArrowKeyNavigate(index) {
-        this.focusService.focus(index);
-    }
-    _toggle(open) {
-        if (this._open === open) {
-            return;
-        }
-        this._open = open;
-        this.destroyPopup();
-        if (this._open) {
-            this.createPopup();
-        }
-    }
-    createPopup() {
-        this.popupRef = this.popupService.open({
-            anchor: this.elRef,
-            anchorAlign: this.anchorAlign,
-            animate: this.popupSettings.animate,
-            appendTo: this.appendTo,
-            content: this.popupTemplate,
-            popupAlign: this.popupAlign,
-            popupClass: this.popupClasses
-        });
-        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.openState = false));
-        this.popupSubs.add(this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this)));
-    }
-    destroyPopup() {
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-            this.popupSubs.unsubscribe();
-        }
-    }
 }
-DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", textField: "textField", disabled: "disabled", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", tabIndex: "tabIndex" }, outputs: { itemClick: "itemClick", open: "open", close: "close", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, 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", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER$1,
@@ -3147,11 +3083,12 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.dropdownbutton'
-        }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], exportAs: ["kendoDropDownButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        },
+        PopupContainerService
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { 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: `
         <button kendoButton #button
-            role="menu"
             type="button"
+            [id]="buttonId"
             [tabindex]="componentTabIndex"
             [class.k-active]="active"
             [disabled]="disabled"
@@ -3164,12 +3101,12 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [fillMode]="fillMode"
             [themeColor]="fillMode ? themeColor : null"
             (click)="openPopup()"
-            (focus)="handleFocus()"
+            (focus)="handleFocus($event)"
             (blur)="onButtonBlur()"
             [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="openState"
             [attr.aria-haspopup]="true"
-            [attr.aria-owns]="listId"
+            [attr.aria-controls]="listId"
         >
             <ng-content></ng-content>
         </button>
@@ -3182,9 +3119,9 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 [itemTemplate]="itemTemplate"
                 (onItemClick)="onItemClick($event)"
                 (keydown)="keyDownHandler($event)"
-                (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
+                [attr.aria-labelledby]="buttonId"
                 [size]="size"
             >
             </kendo-button-list>
@@ -3203,13 +3140,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.dropdownbutton'
-                        }
+                        },
+                        PopupContainerService
                     ],
                     selector: 'kendo-dropdownbutton',
                     template: `
         <button kendoButton #button
-            role="menu"
             type="button"
+            [id]="buttonId"
             [tabindex]="componentTabIndex"
             [class.k-active]="active"
             [disabled]="disabled"
@@ -3222,12 +3160,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [fillMode]="fillMode"
             [themeColor]="fillMode ? themeColor : null"
             (click)="openPopup()"
-            (focus)="handleFocus()"
+            (focus)="handleFocus($event)"
             (blur)="onButtonBlur()"
             [attr.aria-disabled]="disabled"
             [attr.aria-expanded]="openState"
             [attr.aria-haspopup]="true"
-            [attr.aria-owns]="listId"
+            [attr.aria-controls]="listId"
         >
             <ng-content></ng-content>
         </button>
@@ -3240,9 +3178,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [itemTemplate]="itemTemplate"
                 (onItemClick)="onItemClick($event)"
                 (keydown)="keyDownHandler($event)"
-                (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
+                [attr.aria-labelledby]="buttonId"
                 [size]="size"
             >
             </kendo-button-list>
@@ -3250,18 +3188,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
+        }], 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: { icon: [{
                 type: Input
             }], iconClass: [{
                 type: Input
             }], imageUrl: [{
                 type: Input
-            }], popupSettings: [{
-                type: Input
             }], textField: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], data: [{
                 type: Input
             }], size: [{
@@ -3272,16 +3206,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], themeColor: [{
                 type: Input
-            }], buttonClass: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
             }], itemClick: [{
                 type: Output
-            }], open: [{
-                type: Output
-            }], close: [{
-                type: Output
             }], onFocus: [{
                 type: Output,
                 args: ['focus']
@@ -3299,25 +3225,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.dir']
             }], itemTemplate: [{
                 type: ContentChild,
-                args: [ButtonItemTemplateDirective, { static: false }]
+                args: [ButtonItemTemplateDirective]
             }], button: [{
                 type: ViewChild,
-                args: ['button', { static: true }]
+                args: ['button']
             }], buttonList: [{
                 type: ViewChild,
-                args: ['buttonList', { static: false }]
+                args: ['buttonList']
             }], popupTemplate: [{
                 type: ViewChild,
-                args: ['popupTemplate', { static: true }]
+                args: ['popupTemplate']
             }], container: [{
                 type: ViewChild,
-                args: ['container', { read: ViewContainerRef, static: true }]
+                args: ['container', { read: ViewContainerRef }]
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
-            }], keypress: [{
-                type: HostListener,
-                args: ['keypress', ['$event']]
             }], keyup: [{
                 type: HostListener,
                 args: ['keyup', ['$event']]
@@ -4723,7 +4646,7 @@ class FloatingActionButtonComponent {
         this.subscriptions.add(this.navigationService.enter.subscribe(this.onNavigationEnterPress.bind(this)));
         this.subscriptions.add(merge(this.navigationService.close, this.navigationService.esc).subscribe(this.onNavigationClose.bind(this)));
     }
-    onArrowKeyNavigate(index) {
+    onArrowKeyNavigate({ index }) {
         this.focusService.focus(index);
     }
     onNavigationEnterPress() {