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

package/comboboxes/combobox.component.d.ts

@@ -69,7 +69,6 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
      */
     togglePopup(open: boolean): void;
     get activeDescendant(): string;
-    get noDataLabel(): string;
     get appendTo(): ViewContainerRef;
     dataItem: any;
     selected: any[];
@@ -432,7 +431,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
@@ -44,6 +45,8 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     virtual: VirtualizationSettings;
     type: ListType;
     checkboxes: MultiSelectCheckableSettings;
+    ariaLive: string;
+    isMultiselect: boolean;
     set data(data: any[]);
     get data(): any[];
     set size(size: DropDownSize);
@@ -100,12 +103,14 @@ 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;
     /**
      * Indicates whether a scrollbar is currently rendered in the list.
      */
     hasScrollbar(): boolean;
+    isItemSelected(index: number): boolean;
     /**
      * Sets the list's content overflow (hides/shows scrollbar)
      */
@@ -121,5 +126,5 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     private firstGroupHeaderInTargetedPage;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": "selected"; "focused": "focused"; "textField": "textField"; "valueField": "valueField"; "height": "height"; "template": "template"; "groupTemplate": "groupTemplate"; "fixedGroupTemplate": "fixedGroupTemplate"; "show": "show"; "id": "id"; "optionPrefix": "optionPrefix"; "multipleSelection": "multipleSelection"; "virtual": "virtual"; "type": "type"; "checkboxes": "checkboxes"; "data": "data"; "size": "size"; "rounded": "rounded"; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": "selected"; "focused": "focused"; "textField": "textField"; "valueField": "valueField"; "height": "height"; "template": "template"; "groupTemplate": "groupTemplate"; "fixedGroupTemplate": "fixedGroupTemplate"; "show": "show"; "id": "id"; "optionPrefix": "optionPrefix"; "multipleSelection": "multipleSelection"; "virtual": "virtual"; "type": "type"; "checkboxes": "checkboxes"; "ariaLive": "ariaLive"; "isMultiselect": "isMultiselect"; "data": "data"; "size": "size"; "rounded": "rounded"; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; }, never, never>;
 }

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/common/searchbar.component.d.ts

@@ -2,26 +2,31 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Renderer2, EventEmitter, ElementRef, OnChanges, OnInit, OnDestroy } from '@angular/core';
+import { Renderer2, EventEmitter, ElementRef, OnChanges, OnInit, OnDestroy, Injector, AfterContentChecked } from '@angular/core';
 import { Direction } from './models/direction';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy {
+export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy, AfterContentChecked {
     private localization;
+    private injector;
     direction: Direction;
     id: string;
     listId: string;
     tagListId: string;
     activeDescendant: string;
-    noDataLabel: string;
     disabled: boolean;
     readonly: boolean;
     tabIndex: number;
     popupOpen: boolean;
     role: string;
+    isLoading: boolean;
+    set isSuggestable(isSuggestable: boolean);
+    get isSuggestable(): boolean;
+    set isFilterable(isFilterable: boolean);
+    get isFilterable(): boolean;
     get userInput(): string;
     set userInput(userInput: string);
     suggestedText: string;
@@ -39,14 +44,20 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     private _userInput;
     private _previousValue;
     private _placeholder;
+    private _isSuggestable;
+    private _isFilterable;
+    private control?;
     private renderer;
-    private localizationChangeSubscription;
-    constructor(localization: LocalizationService, renderer: Renderer2);
+    private subs;
+    constructor(localization: LocalizationService, renderer: Renderer2, injector: Injector);
     ngOnInit(): void;
+    ngAfterContentChecked(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
     private writeInputValue;
     private setInputSelection;
+    private setAriaInvalid;
+    private setAriaAutocomplete;
     handleInput(event: any): void;
     handleFocus(event: any): void;
     handleBlur(event: any): void;
@@ -55,5 +66,5 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     blur(): void;
     setInputSize(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "kendo-searchbar", never, { "id": "id"; "listId": "listId"; "tagListId": "tagListId"; "activeDescendant": "activeDescendant"; "noDataLabel": "noDataLabel"; "disabled": "disabled"; "readonly": "readonly"; "tabIndex": "tabIndex"; "popupOpen": "popupOpen"; "role": "role"; "userInput": "userInput"; "suggestedText": "suggestedText"; "placeholder": "placeholder"; }, { "valueChange": "valueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onNavigate": "onNavigate"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "kendo-searchbar", never, { "id": "id"; "listId": "listId"; "tagListId": "tagListId"; "activeDescendant": "activeDescendant"; "disabled": "disabled"; "readonly": "readonly"; "tabIndex": "tabIndex"; "popupOpen": "popupOpen"; "role": "role"; "isLoading": "isLoading"; "isSuggestable": "isSuggestable"; "isFilterable": "isFilterable"; "userInput": "userInput"; "suggestedText": "suggestedText"; "placeholder": "placeholder"; }, { "valueChange": "valueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onNavigate": "onNavigate"; }, never, never>;
 }

package/common/shared.module.d.ts

@@ -21,6 +21,6 @@ import * as i13 from "./shared-directives.module";
  */
 export declare class SharedModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SharedModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule], [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective, typeof i9.CommonModule, typeof i10.FormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SharedModule, [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective], [typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule], [typeof i1.ListComponent, typeof i2.ListItemDirective, typeof i3.SelectableDirective, typeof i4.SearchBarComponent, typeof i5.TemplateContextDirective, typeof i6.TagListComponent, typeof i7.CheckDirective, typeof i8.CheckAllDirective, typeof i9.CommonModule, typeof i10.FormsModule, typeof i10.ReactiveFormsModule, typeof i11.PopupModule, typeof i12.ResizeSensorModule, typeof i13.SharedDirectivesModule, typeof i12.EventsModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SharedModule>;
 }

package/dropdownlist/dropdownlist.component.d.ts

@@ -2,8 +2,8 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Renderer2, ElementRef, EventEmitter, ViewContainerRef, OnDestroy, OnChanges, NgZone, TemplateRef, ChangeDetectorRef, OnInit, SimpleChanges, AfterContentChecked } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { Renderer2, ElementRef, EventEmitter, ViewContainerRef, OnDestroy, OnChanges, NgZone, TemplateRef, ChangeDetectorRef, OnInit, SimpleChanges, AfterContentChecked, Injector } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { PopupSettings } from '../common/models/popup-settings';
 import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService } from '../common/navigation/navigation.service';
@@ -62,14 +62,18 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private renderer;
     private cdr;
     touchEnabled: boolean;
+    private injector;
     get width(): any;
     get height(): any;
     get widgetTabIndex(): number;
     get ariaExpanded(): boolean;
-    get ariaOwns(): string;
+    get ariaControls(): string;
     get ariaActivedescendant(): string;
-    get noDataLabel(): string;
     get appendTo(): ViewContainerRef;
+    /**
+     * @hidden
+     */
+    get ariaLive(): string;
     /**
      * @hidden
      */
@@ -287,7 +291,8 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
      */
     onResize(): void;
     hostClasses: boolean;
-    get isDisabled(): boolean;
+    get isDisabledClass(): boolean;
+    get isDisabledAttribute(): string;
     get isLoading(): boolean;
     /**
      * @hidden
@@ -295,12 +300,15 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     focusableId: string;
     get dir(): string;
     get hostTabIndex(): number;
-    get isReadonly(): boolean;
+    get readonlyClass(): boolean;
+    get readonlyAttr(): string;
+    get isBusy(): boolean;
     role: string;
+    haspopup: string;
     get isAriaExpanded(): boolean;
-    get hostAriaOwns(): string;
+    get hostAriaControls(): string;
+    get hostAriaInvalid(): string;
     get hostAriaActivedescendant(): string;
-    get hostNoDataLabel(): string;
     /**
      * @hidden
      */
@@ -318,6 +326,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 +339,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,11 +351,10 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private text;
     private _popupSettings;
     private _virtualSettings;
-    private localizationChangesSubscription;
     private _size;
     private _rounded;
     private _fillMode;
-    constructor(wrapper: ElementRef, localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, _zone: NgZone, renderer: Renderer2, cdr: ChangeDetectorRef, touchEnabled: boolean);
+    constructor(wrapper: ElementRef, localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, _zone: NgZone, renderer: Renderer2, cdr: ChangeDetectorRef, touchEnabled: boolean, injector: Injector);
     ngOnInit(): void;
     /**
      * @hidden
@@ -377,6 +377,10 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
      * @hidden
      */
     ngAfterContentChecked(): void;
+    /**
+     * @hidden
+     */
+    get formControl(): FormControl;
     /**
      * Focuses a specific item of the DropDownList based on a provided index.
      * If there is a default item it is positioned at index -1.
@@ -477,7 +481,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     private subscribeTouchEvents;
     private subscribeFocusEvents;
     private unSubscribeFocusEvents;
-    private unsubscribeEvents;
     private itemFromEvent;
     private currentOrDefault;
     private firstFocusableIndex;
@@ -513,6 +516,6 @@ export declare class DropDownListComponent implements ControlValueAccessor, OnDe
     pageChange(event: PageChangeEvent): void;
     private assignAriaDescribedBy;
     private setComponentClasses;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropDownListComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropDownListComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DropDownListComponent, "kendo-dropdownlist", ["kendoDropDownList"], { "iconClass": "iconClass"; "loading": "loading"; "data": "data"; "value": "value"; "textField": "textField"; "valueField": "valueField"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "defaultItem": "defaultItem"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "filterable": "filterable"; "virtual": "virtual"; "ignoreCase": "ignoreCase"; "delay": "delay"; "valuePrimitive": "valuePrimitive"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "focusableId": "id"; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "selectionChange": "selectionChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate", "groupTemplate", "fixedGroupTemplate", "valueTemplate", "headerTemplate", "footerTemplate", "noDataTemplate"], never>;
 }

package/esm2015/autocomplete/autocomplete.component.js

@@ -274,11 +274,6 @@ export class AutoCompleteComponent {
         const dataItem = this.dataService.itemAt(this.selectionService.focused);
         return this.optionPrefix + "-" + getter(dataItem, this.valueField);
     }
-    get noDataLabel() {
-        if (this.data.length === 0) {
-            return this.messageFor('noDataText');
-        }
-    }
     /**
      * Sets the data of the AutoComplete.
      *
@@ -620,6 +615,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 +643,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 +747,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 +776,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) {
@@ -816,6 +826,11 @@ export class AutoCompleteComponent {
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
         popupWrapper.setAttribute("dir", this.direction);
+        const listBox = popupWrapper.querySelector('ul.k-list-ul');
+        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
+        if (ariaLabel) {
+            listBox.setAttribute('aria-labelledby', ariaLabel);
+        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.optionsList.scrollToItem(this.selectionService.focused);
@@ -919,10 +934,12 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </ng-container>
         <kendo-searchbar #searchbar
             [role]="'combobox'"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
+            [isLoading]="isLoading"
             [id]="focusableId"
             [listId]="listBoxId"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"
@@ -996,7 +1013,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "noDataLabel", "disabled", "readonly", "tabIndex", "popupOpen", "role", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -1033,10 +1050,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-container>
         <kendo-searchbar #searchbar
             [role]="'combobox'"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
+            [isLoading]="isLoading"
             [id]="focusableId"
             [listId]="listBoxId"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="suggestion"
             [disabled]="disabled"

package/esm2015/comboboxes/combobox.component.js

@@ -281,11 +281,6 @@ export class ComboBoxComponent {
         const dataItem = this.dataService.itemAt(this.selectionService.focused);
         return this.optionPrefix + "-" + (dataItem ? getter(dataItem, this.valueField) : "");
     }
-    get noDataLabel() {
-        if (this.data.length === 0) {
-            return this.messageFor('noDataText');
-        }
-    }
     get appendTo() {
         const { appendTo } = this.popupSettings;
         if (!appendTo || appendTo === 'root') {
@@ -619,6 +614,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 +751,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 +788,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 +981,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 +1049,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) {
@@ -1195,6 +1198,11 @@ export class ComboBoxComponent {
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.popupHeight;
         popupWrapper.setAttribute("dir", this.direction);
+        const listBox = this.popupRef.popupElement.querySelector('ul.k-list-ul');
+        const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby');
+        if (ariaLabel) {
+            listBox.setAttribute('aria-labelledby', ariaLabel);
+        }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.optionsList.scrollToItem(this.selectionService.focused);
@@ -1299,8 +1307,10 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [role]="'combobox'"
             [id]="focusableId"
             [listId]="listBoxId"
+            [isLoading]="loading"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
@@ -1328,6 +1338,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </span>
         <button
             #select
+            tabindex="-1"
             unselectable="on"
             type="button"
             class="k-input-button k-button k-icon-button"
@@ -1387,7 +1398,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "noDataLabel", "disabled", "readonly", "tabIndex", "popupOpen", "role", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1427,8 +1438,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [role]="'combobox'"
             [id]="focusableId"
             [listId]="listBoxId"
+            [isLoading]="loading"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
@@ -1456,6 +1469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </span>
         <button
             #select
+            tabindex="-1"
             unselectable="on"
             type="button"
             class="k-input-button k-button k-icon-button"

package/esm2015/comboboxes/multicolumncombobox.component.js

@@ -183,6 +183,9 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 
             i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
+            selectButtonText="Select"
         >
         </ng-container>
         <kendo-searchbar
@@ -190,8 +193,10 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             [role]="'combobox'"
             [id]="focusableId"
             [listId]="listBoxId"
+            [isLoading]="loading"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"
@@ -389,7 +394,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
 
         <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "noDataLabel", "disabled", "readonly", "tabIndex", "popupOpen", "role", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "listId", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "popupOpen", "role", "isLoading", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i10.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -427,6 +432,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
             i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
+            selectButtonText="Select"
         >
         </ng-container>
         <kendo-searchbar
@@ -434,8 +442,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [role]="'combobox'"
             [id]="focusableId"
             [listId]="listBoxId"
+            [isLoading]="loading"
+            [isSuggestable]="suggest"
+            [isFilterable]="filterable"
             [activeDescendant]="activeDescendant"
-            [noDataLabel]="noDataLabel"
             [userInput]="text"
             [suggestedText]="getSuggestion()"
             [disabled]="disabled"