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

package/esm2015/listbutton/list-button.js

@@ -2,30 +2,36 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component } from '@angular/core';
+import { EventEmitter, Component, Input, Output } from '@angular/core';
 /* eslint-disable import/no-deprecated */
 import { Subscription, fromEvent, merge } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { filter, tap } from 'rxjs/operators';
 import { KeyEvents } from './../navigation/key-events';
 import { NavigationAction } from './../navigation/navigation-action';
-import { isDocumentAvailable, guid, Keys } from '@progress/kendo-angular-common';
-import { isPresent } from './../util';
+import { isDocumentAvailable, guid, Keys, isChanged } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
+import { PreventableEvent } from '../preventable-event';
+import { isPresent } from '../util';
 import * as i0 from "@angular/core";
 import * as i1 from "./../focusable/focus.service";
 import * as i2 from "./../navigation/navigation.service";
-import * as i3 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-popup";
+import * as i4 from "@progress/kendo-angular-l10n";
+import * as i5 from "./container.service";
 /**
  * @hidden
  */
 export 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;
@@ -33,6 +39,22 @@ export 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;
@@ -40,6 +62,75 @@ export 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`—Controls the popup animation. By default, the open and close animations are enabled.
+     * - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
+     * - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
+     * - `align: "left" | "center" | "right"`—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) {
@@ -50,9 +141,21 @@ export 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
      */
@@ -60,23 +163,29 @@ export 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()) {
@@ -93,41 +202,36 @@ export 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
@@ -142,23 +246,22 @@ export 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();
             }
         }
@@ -171,14 +274,10 @@ export 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();
         }
@@ -187,7 +286,10 @@ export 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;
@@ -202,15 +304,99 @@ export class ListButton {
         }
     }
     handleTab() {
-        this.focusButton();
-        this.blurWrapper(false);
+        this.blurWrapper();
+    }
+    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: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.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 });
+ListButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListButton, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i5.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: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i5.PopupContainerService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], popupSettings: [{
+                type: Input
+            }] } });

package/esm2015/listbutton/list.component.js

@@ -50,13 +50,14 @@ export 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">
@@ -90,13 +91,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">

package/esm2015/navigation/navigation.service.js

@@ -29,13 +29,8 @@ export 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;
             }
         }
@@ -46,7 +41,7 @@ export 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) {
@@ -89,11 +84,11 @@ export 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) {

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };