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

package/fesm2015/kendo-angular-dropdowns.js

@@ -29,7 +29,7 @@ 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'
 };
@@ -461,7 +461,7 @@ 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);
         }
@@ -925,6 +925,8 @@ 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 = {}));
 
 /**
@@ -1228,6 +1230,8 @@ 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;
@@ -1279,6 +1283,12 @@ 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);
@@ -1802,6 +1812,16 @@ 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;
@@ -2824,6 +2844,8 @@ 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();
         }
@@ -2850,7 +2872,12 @@ 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;
     }
@@ -2949,8 +2976,14 @@ 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) {
@@ -2972,8 +3005,10 @@ 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) {
@@ -4063,6 +4098,11 @@ 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) {
@@ -4195,9 +4235,10 @@ 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();
@@ -4231,7 +4272,7 @@ 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
@@ -4424,6 +4465,8 @@ 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();
         }
@@ -4490,7 +4533,7 @@ 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) {
@@ -5287,6 +5330,7 @@ class DropDownListComponent {
         this.listBoxId = guid();
         this.optionPrefix = guid();
         this.filterText = "";
+        this.subs = new Subscription();
         this._isFocused = false;
         this.onTouchedCallback = (_) => { };
         this.onChangeCallback = (_) => { };
@@ -5296,7 +5340,6 @@ 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';
@@ -5628,6 +5671,8 @@ 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`
         ) {
@@ -5660,11 +5705,11 @@ 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();
     }
@@ -5687,9 +5732,10 @@ class DropDownListComponent {
      */
     ngOnDestroy() {
         this.destroyPopup();
-        this.unsubscribeEvents();
-        if (this.localizationChangesSubscription) {
-            this.localizationChangesSubscription.unsubscribe();
+        this.subs.unsubscribe();
+        this.unSubscribeFocusEvents();
+        if (this.touchstartDisposeHandler) {
+            this.touchstartDisposeHandler();
         }
     }
     /**
@@ -5842,7 +5888,7 @@ 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
@@ -5914,16 +5960,16 @@ 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() {
@@ -5962,10 +6008,10 @@ 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 });
@@ -5983,27 +6029,31 @@ 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() {
@@ -6043,25 +6093,6 @@ 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);
@@ -10425,7 +10456,7 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "7.0.3-dev.202207081325",
+  "version": "7.1.0-dev.202208301349",
   "description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",