@progress/kendo-angular-dropdowns 7.0.3-dev.202207081325 → 7.1.0-dev.202208301349

package/comboboxes/combobox.component.d.ts

@@ -432,7 +432,7 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     /**
      * @hidden
      */
-    clearValue(event: any): void;
+    clearValue(event?: any): void;
     /**
      * @hidden
      */

package/common/list.component.d.ts

@@ -17,6 +17,7 @@ import { MultiSelectCheckableSettings } from './models/checkboxes-settings';
 import { DropDownSize } from './models/size';
 import { DropDownRounded } from './models/rounded';
 import { ListType } from './models/list-type';
+import { NavigationAction } from './navigation/navigation-action';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -100,6 +101,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     isDisabled(index: number): boolean;
     isAltRow(index: number): boolean;
     scrollToItem(index: number): void;
+    scrollWithOnePage(action: NavigationAction): void;
     scrollToIndex(index: number): void;
     scroll(item: ElementRef<HTMLElement>): void;
     /**

package/common/navigation/navigation-action.d.ts

@@ -19,5 +19,7 @@ export declare enum NavigationAction {
     Up = 10,
     Down = 11,
     Left = 12,
-    Right = 13
+    Right = 13,
+    PageDown = 14,
+    PageUp = 15
 }

package/common/navigation/navigation.service.d.ts

@@ -37,6 +37,8 @@ export declare class NavigationService {
     backspace: EventEmitter<NavigationEvent>;
     home: EventEmitter<NavigationEvent>;
     end: EventEmitter<NavigationEvent>;
+    pagedown: EventEmitter<NavigationEvent>;
+    pageup: EventEmitter<NavigationEvent>;
     constructor(disabledItemsService: DisabledItemsService, selectionService: SelectionService);
     process(args: any): NavigationAction;
     private next;

package/dropdownlist/dropdownlist.component.d.ts

@@ -318,6 +318,7 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     optionPrefix: string;
     valueLabelId: string;
     filterText: string;
+    private subs;
     private _isFocused;
     set isFocused(isFocused: boolean);
     get isFocused(): boolean;
@@ -330,18 +331,10 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private word;
     private last;
     private typingTimeout;
-    private navigationSubscription;
-    private enterSubscription;
-    private escSubscription;
-    private openSubscription;
-    private closeSubscription;
     private filterFocused;
     private filterBlurred;
     private hostElementFocused;
     private hostElementBlurred;
-    private componentBlurredSubscription;
-    private filterBlurredSubscription;
-    private selectionSubscription;
     private touchstartDisposeHandler;
     private _value;
     private _open;
@@ -350,7 +343,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private text;
     private _popupSettings;
     private _virtualSettings;
-    private localizationChangesSubscription;
     private _size;
     private _rounded;
     private _fillMode;
@@ -477,7 +469,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private subscribeTouchEvents;
     private subscribeFocusEvents;
     private unSubscribeFocusEvents;
-    private unsubscribeEvents;
     private itemFromEvent;
     private currentOrDefault;
     private firstFocusableIndex;

package/esm2015/autocomplete/autocomplete.component.js

@@ -620,6 +620,8 @@ export class AutoCompleteComponent {
             action !== NavigationAction.End &&
             action !== NavigationAction.Left &&
             action !== NavigationAction.Right &&
+            action !== NavigationAction.PageDown &&
+            action !== NavigationAction.PageUp &&
             ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter)) {
             event.preventDefault();
         }
@@ -646,7 +648,12 @@ export class AutoCompleteComponent {
         this.change(value);
     }
     handleEscape() {
-        this.togglePopup(false);
+        if (this.isOpen) {
+            this.togglePopup(false);
+        }
+        else {
+            this.value = '';
+        }
         this.selectionService.focused = -1;
         this.suggestedText = null;
     }
@@ -745,8 +752,14 @@ export class AutoCompleteComponent {
         this.focusSubscription = this.selectionService.onFocus.subscribe(this.handleItemFocus.bind(this));
         this.navigationSubscription = merge(this.navigationService.up, this.navigationService.down).subscribe((event) => this.navigate(event.index));
         this.closeSubscription = this.navigationService.close.subscribe(() => this.togglePopup(false));
+        this.openSubscription = this.navigationService.open.subscribe(() => this.togglePopup(true));
         this.enterSubscription = this.navigationService.enter.subscribe(this.handleEnter.bind(this));
         this.escSubscription = this.navigationService.esc.subscribe(this.handleEscape.bind(this));
+        this.scrollSubscription = merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
+            if (this.isOpen) {
+                this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+            }
+        });
     }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
@@ -768,8 +781,10 @@ export class AutoCompleteComponent {
         this.changeSubscription.unsubscribe();
         this.navigationSubscription.unsubscribe();
         this.closeSubscription.unsubscribe();
+        this.openSubscription.unsubscribe();
         this.enterSubscription.unsubscribe();
         this.escSubscription.unsubscribe();
+        this.scrollSubscription.unsubscribe();
         this.valueChangeSubscription.unsubscribe();
         this.focusSubscription.unsubscribe();
         if (this.touchstartDisposeHandler) {

package/esm2015/comboboxes/combobox.component.js

@@ -619,6 +619,11 @@ export class ComboBoxComponent {
             .subscribe((event) => this.navigate(event.index)));
         this.subs.add(this.navigationService.open.subscribe(this.handleNavigationOpen.bind(this)));
         this.subs.add(this.navigationService.close.subscribe(() => this.togglePopup(false)));
+        this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
+            if (this.isOpen) {
+                this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+            }
+        }));
         this.subs.add(this.navigationService.esc.subscribe(this.handleEscape.bind(this)));
         this.subs.add(this.navigationService.enter.pipe(tap((event) => {
             if (this.isOpen) {
@@ -751,9 +756,10 @@ export class ComboBoxComponent {
      * @hidden
      */
     clearValue(event) {
-        event.stopImmediatePropagation();
-        this.focus();
-        this._filtering = true;
+        event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
+        if (event) {
+            this.focus();
+        }
         this._previousDataItem = undefined;
         this.selectionService.resetSelection([]);
         this.clearValueSubject.next();
@@ -787,7 +793,7 @@ export class ComboBoxComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-arrow-s';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-caret-alt-down';
     }
     /**
      * @hidden
@@ -980,6 +986,8 @@ export class ComboBoxComponent {
             action !== NavigationAction.Right &&
             action !== NavigationAction.Backspace &&
             action !== NavigationAction.Delete &&
+            action !== NavigationAction.PageDown &&
+            action !== NavigationAction.PageUp &&
             ((action === NavigationAction.Enter && this.isOpen) || action !== NavigationAction.Enter)) {
             event.preventDefault();
         }
@@ -1046,7 +1054,7 @@ export class ComboBoxComponent {
      * @hidden
      */
     handleEscape() {
-        this.togglePopup(false);
+        this.isOpen ? this.togglePopup(false) : this.clearValue();
         // clear the focus only if the focused item is not selected
         const hasSelected = this.selectionService.selected.length > 0;
         if (!hasSelected) {

package/esm2015/common/list.component.js

@@ -8,6 +8,7 @@ import { ListItemDirective } from './list-item.directive';
 import { isPresent, getter, closest, getSizeClass, getRoundedClass } from './util';
 import { fromEvent, merge } from 'rxjs';
 import { map, tap, auditTime, switchMap, take } from 'rxjs/operators';
+import { NavigationAction } from './navigation/navigation-action';
 import * as i0 from "@angular/core";
 import * as i1 from "./data.service";
 import * as i2 from "./selection/selection.service";
@@ -274,6 +275,16 @@ export class ListComponent {
             this.scroll(items[flatIndex].element);
         }
     }
+    scrollWithOnePage(action) {
+        let content = this.content.nativeElement;
+        const contentOffsetHeight = content.clientHeight;
+        if (action === NavigationAction.PageDown) {
+            content.scrollTop += contentOffsetHeight;
+        }
+        else if (action === NavigationAction.PageUp) {
+            content.scrollTop -= contentOffsetHeight;
+        }
+    }
     scrollToIndex(index) {
         let content = this.content.nativeElement;
         let contentScrollTop = content.scrollTop;

package/esm2015/common/navigation/navigation-action.js

@@ -22,4 +22,6 @@ export var NavigationAction;
     NavigationAction[NavigationAction["Down"] = 11] = "Down";
     NavigationAction[NavigationAction["Left"] = 12] = "Left";
     NavigationAction[NavigationAction["Right"] = 13] = "Right";
+    NavigationAction[NavigationAction["PageDown"] = 14] = "PageDown";
+    NavigationAction[NavigationAction["PageUp"] = 15] = "PageUp";
 })(NavigationAction || (NavigationAction = {}));

package/esm2015/common/navigation/navigation.service.js

@@ -42,6 +42,8 @@ export class NavigationService {
         this.backspace = new EventEmitter();
         this.home = new EventEmitter();
         this.end = new EventEmitter();
+        this.pagedown = new EventEmitter();
+        this.pageup = new EventEmitter();
     }
     process(args) {
         const keyCode = args.originalEvent.keyCode;
@@ -93,6 +95,12 @@ export class NavigationService {
         else if (keyCode === Keys.Backspace) {
             action = NavigationAction.Backspace;
         }
+        else if (keyCode === Keys.PageDown) {
+            action = NavigationAction.PageDown;
+        }
+        else if (keyCode === Keys.PageUp) {
+            action = NavigationAction.PageUp;
+        }
         const eventData = new NavigationEvent(index, args.originalEvent);
         if (action !== NavigationAction.Undefined) {
             this[NavigationAction[action].toLowerCase()].emit(eventData);

package/esm2015/common/searchbar.component.js

@@ -115,7 +115,7 @@ export class SearchBarComponent {
     handleKeydown(event) {
         const keyCode = event.keyCode;
         const keys = [Keys.ArrowUp, Keys.ArrowDown, Keys.ArrowLeft, Keys.ArrowRight, Keys.Enter,
-            Keys.Escape, Keys.Delete, Keys.Backspace, Keys.Home, Keys.End];
+            Keys.Escape, Keys.Delete, Keys.Backspace, Keys.Home, Keys.End, Keys.PageDown, Keys.PageUp];
         if (keys.indexOf(keyCode) > -1) {
             this.onNavigate.emit(event);
         }

package/esm2015/dropdownlist/dropdownlist.component.js

@@ -172,6 +172,7 @@ export class DropDownListComponent {
         this.listBoxId = guid();
         this.optionPrefix = guid();
         this.filterText = "";
+        this.subs = new Subscription();
         this._isFocused = false;
         this.onTouchedCallback = (_) => { };
         this.onChangeCallback = (_) => { };
@@ -181,7 +182,6 @@ export class DropDownListComponent {
         this.filterBlurred = new EventEmitter();
         this.hostElementFocused = new EventEmitter();
         this.hostElementBlurred = new EventEmitter();
-        this.selectionSubscription = new Subscription();
         this._open = false;
         this._popupSettings = { animate: true };
         this._size = 'medium';
@@ -513,6 +513,8 @@ export class DropDownListComponent {
             action !== NavigationAction.Tab &&
             action !== NavigationAction.Backspace &&
             action !== NavigationAction.Delete &&
+            action !== NavigationAction.PageDown &&
+            action !== NavigationAction.PageUp &&
             !(leftRightKeys && this.filterable) &&
             action !== NavigationAction.Enter //enter when popup is opened is handled before `handleEnter`
         ) {
@@ -545,11 +547,11 @@ export class DropDownListComponent {
     }
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
-        this.localizationChangesSubscription = this.localization
+        this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.detectChanges();
-        });
+        }));
         this.assignAriaDescribedBy();
         this.setComponentClasses();
     }
@@ -572,9 +574,10 @@ export class DropDownListComponent {
      */
     ngOnDestroy() {
         this.destroyPopup();
-        this.unsubscribeEvents();
-        if (this.localizationChangesSubscription) {
-            this.localizationChangesSubscription.unsubscribe();
+        this.subs.unsubscribe();
+        this.unSubscribeFocusEvents();
+        if (this.touchstartDisposeHandler) {
+            this.touchstartDisposeHandler();
         }
     }
     /**
@@ -727,7 +730,7 @@ export class DropDownListComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-arrow-s';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : this.iconClass || 'k-i-caret-alt-down';
     }
     /**
      * @hidden
@@ -799,16 +802,16 @@ export class DropDownListComponent {
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
         popupWrapper.setAttribute("dir", this.direction);
-        this.popupRef.popupOpen.subscribe(() => {
+        this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.opened.emit();
-        });
-        this.popupRef.popupClose.subscribe(() => {
+        }));
+        this.subs.add(this.popupRef.popupClose.subscribe(() => {
             this.closed.emit();
-        });
+        }));
         if (!this.filterable) {
-            this.popupRef.popupAnchorViewportLeave.subscribe(() => this.togglePopup(false));
+            this.subs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.togglePopup(false)));
         }
     }
     destroyPopup() {
@@ -847,10 +850,10 @@ export class DropDownListComponent {
             return;
         }
         // Item selection when the popup is open.
-        this.selectionSubscription.add(this.selectionService.onSelect.pipe(filter(_ => this.isOpen), map(this.itemFromEvent.bind(this)))
+        this.subs.add(this.selectionService.onSelect.pipe(filter(_ => this.isOpen), map(this.itemFromEvent.bind(this)))
             .subscribe(this.onSelectionChange.bind(this)));
         // Item selection when the popup is closed | clicked | enter, and so on.
-        this.selectionSubscription.add(merge(this.selectionService.onSelect.pipe(filter(_ => !this.isOpen)), this.selectionService.onChange).pipe(map(this.itemFromEvent.bind(this)), tap(_ => this.togglePopup(false)))
+        this.subs.add(merge(this.selectionService.onSelect.pipe(filter(_ => !this.isOpen)), this.selectionService.onChange).pipe(map(this.itemFromEvent.bind(this)), tap(_ => this.togglePopup(false)))
             .subscribe(({ dataItem, value: newValue, newSelection }) => {
             if (newSelection) {
                 this.onSelectionChange({ dataItem });
@@ -868,27 +871,31 @@ export class DropDownListComponent {
             }
             this.clearFilter();
         }));
-        this.navigationSubscription = merge(this.navigationService.up, this.navigationService.down, this.navigationService.left.pipe(skipWhile(() => this.filterable)), this.navigationService.right.pipe(skipWhile(() => this.filterable)), this.navigationService.home, this.navigationService.end)
+        this.subs.add(merge(this.navigationService.up, this.navigationService.down, this.navigationService.left.pipe(skipWhile(() => this.filterable)), this.navigationService.right.pipe(skipWhile(() => this.filterable)), this.navigationService.home, this.navigationService.end)
             .pipe(filter((event) => !isNaN(event.index)))
-            .subscribe((event) => this.selectionService.select(event.index));
-        this.openSubscription = this.navigationService.open.subscribe(() => this.togglePopup(true));
-        this.closeSubscription = this.navigationService.close.subscribe(() => {
+            .subscribe((event) => this.selectionService.select(event.index)));
+        this.subs.add(merge(this.navigationService.pagedown, this.navigationService.pageup).subscribe((event) => {
+            if (this.isOpen) {
+                this.optionsList.scrollWithOnePage(NavigationAction[event.originalEvent.code]);
+            }
+        }));
+        this.subs.add(this.navigationService.open.subscribe(() => this.togglePopup(true)));
+        this.subs.add(this.navigationService.close.subscribe(() => {
             this.togglePopup(false);
             this.focus();
-        });
-        this.enterSubscription = this.navigationService.enter
+        }));
+        this.subs.add(this.navigationService.enter
             .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(this.handleEnter.bind(this));
-        this.escSubscription = this.navigationService.esc
-            .subscribe(this.handleEscape.bind(this));
-        this.filterBlurredSubscription = this.filterBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.hostElementFocused))))
+            .subscribe(this.handleEnter.bind(this)));
+        this.subs.add(this.navigationService.esc
+            .subscribe(this.handleEscape.bind(this)));
+        this.subs.add(this.filterBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.hostElementFocused))))
             .subscribe(() => {
             this.hostElementBlurred.emit();
-        });
+        }));
         this._zone.runOutsideAngular(() => {
-            this.componentBlurredSubscription =
-                merge(this.hostElementBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.filterFocused)))), this.navigationService.tab).pipe(tap(event => event instanceof NavigationEvent && this.focus()), filter(() => this.isFocused))
-                    .subscribe(() => this.componentBlur());
+            this.subs.add(merge(this.hostElementBlurred.pipe(concatMap(() => interval(10).pipe(take(1), takeUntil(this.filterFocused)))), this.navigationService.tab).pipe(tap(event => event instanceof NavigationEvent && this.focus()), filter(() => this.isFocused))
+                .subscribe(() => this.componentBlur()));
         });
     }
     subscribeTouchEvents() {
@@ -928,25 +935,6 @@ export class DropDownListComponent {
             document.removeEventListener('blur', this.blurComponent, useCapture);
         }
     }
-    unsubscribeEvents() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.navigationSubscription.unsubscribe();
-        this.openSubscription.unsubscribe();
-        this.closeSubscription.unsubscribe();
-        this.enterSubscription.unsubscribe();
-        this.escSubscription.unsubscribe();
-        this.componentBlurredSubscription.unsubscribe();
-        this.filterBlurredSubscription.unsubscribe();
-        this.unSubscribeFocusEvents();
-        if (this.touchstartDisposeHandler) {
-            this.touchstartDisposeHandler();
-        }
-        if (this.selectionSubscription) {
-            this.selectionSubscription.unsubscribe();
-        }
-    }
     itemFromEvent(event) {
         const index = event.indices[0];
         let dataItem = this.dataService.itemAt(index);

package/esm2015/dropdowntrees/dropdowntree.component.js

@@ -732,7 +732,7 @@ export class DropDownTreeComponent {
      * @hidden
      */
     get buttonClasses() {
-        return this.loading ? 'k-i-loading k-input-loading-icon' : 'k-i-arrow-s';
+        return this.loading ? 'k-i-loading k-input-loading-icon' : 'k-i-caret-alt-down';
     }
     /**
      * @hidden

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1657286636,
+    publishDate: 1661867343,
     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'
 };