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

package/esm2015/dropdownlist/dropdownlist.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, forwardRef, Input, Output, HostBinding, EventEmitter, ContentChild, ViewChild, ViewContainerRef, isDevMode, Optional, Inject, HostListener } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { merge, interval, Subscription } from 'rxjs';
@@ -73,7 +73,7 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class DropDownListComponent {
-    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, touchEnabled) {
+    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, touchEnabled, injector) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -85,6 +85,7 @@ export class DropDownListComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.touchEnabled = touchEnabled;
+        this.injector = injector;
         /**
          * Sets the height of the options list. By default, `listHeight` is 200px.
          *
@@ -92,10 +93,6 @@ export class DropDownListComponent {
          * > To set the height of the popup container, use `popupSettings.height`.
          */
         this.listHeight = 200;
-        /**
-         * Sets the disabled state of the component.
-         */
-        this.disabled = false;
         /**
          * Sets the read-only state of the component.
          */
@@ -167,11 +164,13 @@ export class DropDownListComponent {
          * @hidden
          */
         this.focusableId = `k-${guid()}`;
-        this.role = 'listbox';
+        this.role = 'combobox';
+        this.haspopup = 'listbox';
         this.groupIndices = [];
         this.listBoxId = guid();
         this.optionPrefix = guid();
         this.filterText = "";
+        this.subs = new Subscription();
         this._isFocused = false;
         this.onTouchedCallback = (_) => { };
         this.onChangeCallback = (_) => { };
@@ -181,7 +180,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';
@@ -217,7 +215,7 @@ export class DropDownListComponent {
     get ariaExpanded() {
         return this.isOpen;
     }
-    get ariaOwns() {
+    get ariaControls() {
         if (!this.isOpen) {
             return;
         }
@@ -229,11 +227,6 @@ export class DropDownListComponent {
         }
         return this.optionPrefix + "-" + getter(this.dataItem, this.valueField);
     }
-    get noDataLabel() {
-        if (this.dataService.itemsCount === 0) {
-            return this.messageFor('noDataText');
-        }
-    }
     get appendTo() {
         const { appendTo } = this.popupSettings;
         if (!appendTo || appendTo === 'root') {
@@ -241,6 +234,12 @@ export class DropDownListComponent {
         }
         return appendTo === 'component' ? this.container : appendTo;
     }
+    /**
+     * @hidden
+     */
+    get ariaLive() {
+        return this.filterable ? 'polite' : 'off';
+    }
     /**
      * Sets the data of the DropDownList.
      *
@@ -449,9 +448,12 @@ export class DropDownListComponent {
             popupWrapper.style.width = max;
         }
     }
-    get isDisabled() {
+    get isDisabledClass() {
         return this.disabled;
     }
+    get isDisabledAttribute() {
+        return this.disabled ? '' : null;
+    }
     get isLoading() {
         return this.loading;
     }
@@ -461,21 +463,28 @@ export class DropDownListComponent {
     get hostTabIndex() {
         return this.widgetTabIndex;
     }
-    get isReadonly() {
+    get readonlyClass() {
         return this.readonly;
     }
+    get readonlyAttr() {
+        return this.readonly ? '' : null;
+    }
+    get isBusy() {
+        return this.isLoading;
+    }
     get isAriaExpanded() {
         return this.ariaExpanded;
     }
-    get hostAriaOwns() {
-        return this.ariaOwns;
+    get hostAriaControls() {
+        return this.ariaControls;
+    }
+    get hostAriaInvalid() {
+        var _a;
+        return this.formControl ? (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.invalid.toString() : null;
     }
     get hostAriaActivedescendant() {
         return this.ariaActivedescendant;
     }
-    get hostNoDataLabel() {
-        return this.noDataLabel;
-    }
     /**
      * @hidden
      */
@@ -513,6 +522,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 +556,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 +583,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();
         }
     }
     /**
@@ -599,6 +611,13 @@ export class DropDownListComponent {
     ngAfterContentChecked() {
         this.verifySettings();
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     /**
      * Focuses a specific item of the DropDownList based on a provided index.
      * If there is a default item it is positioned at index -1.
@@ -628,6 +647,7 @@ export class DropDownListComponent {
     blur() {
         if (!this.disabled) {
             this.wrapper.nativeElement.blur();
+            this.cdr.detectChanges();
         }
     }
     /**
@@ -727,7 +747,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 +819,21 @@ export class DropDownListComponent {
         popupWrapper.style.width = max;
         popupWrapper.style.height = this.height;
         popupWrapper.setAttribute("dir", this.direction);
-        this.popupRef.popupOpen.subscribe(() => {
+        const listBox = popupWrapper.querySelector('ul.k-list-ul');
+        const ariaLabel = this.wrapper.nativeElement.getAttribute('aria-labelledby');
+        if (ariaLabel) {
+            listBox.setAttribute('aria-labelledby', ariaLabel);
+        }
+        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 +872,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 +893,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 +957,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);
@@ -1216,8 +1226,8 @@ export class DropDownListComponent {
         }
     }
 }
-DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { 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", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.isReadonly", "attr.aria-readonly": "this.isReadonly", "attr.role": "this.role", "attr.aria-haspopup": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-owns": "this.hostAriaOwns", "attr.aria-activedescendant": "this.hostAriaActivedescendant", "attr.aria-label": "this.hostNoDataLabel" } }, providers: [
+DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { 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", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-controls": "this.hostAriaControls", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
         DROPDOWNLIST_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1243,7 +1253,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             selectButtonText="Select"
         >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" role="option" [id]="valueLabelId">
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{
@@ -1282,9 +1292,11 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     >
                         <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
                         <input
-                            [attr.aria-owns]="ariaOwns"
+                            role="searchbox"
+                            aria-autocomplete="list"
+                            aria-haspopup="listbox"
+                            [attr.aria-controls]="ariaControls"
                             [attr.aria-activedescendant]="ariaActivedescendant"
-                            [attr.aria-label]="noDataLabel"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [dir]="direction"
@@ -1345,6 +1357,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [height]="listHeight"
                 [show]="isOpen"
                 [virtual]="virtual"
+                [ariaLive]="ariaLive"
                 (pageChange)="pageChange($event)"
                 >
             </kendo-list>
@@ -1370,7 +1383,7 @@ DropDownListComponent.ɵ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.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: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i9.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i13.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.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: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i9.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i13.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i14.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1403,7 +1416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             selectButtonText="Select"
         >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" role="option" [id]="valueLabelId">
+        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{
@@ -1442,9 +1455,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     >
                         <span class="k-input-icon k-icon k-i-search" unselectable="on"></span>
                         <input
-                            [attr.aria-owns]="ariaOwns"
+                            role="searchbox"
+                            aria-autocomplete="list"
+                            aria-haspopup="listbox"
+                            [attr.aria-controls]="ariaControls"
                             [attr.aria-activedescendant]="ariaActivedescendant"
-                            [attr.aria-label]="noDataLabel"
                             tabindex="-1"
                             [filterInput]="isFocused && !touchEnabled"
                             [dir]="direction"
@@ -1505,6 +1520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [height]="listHeight"
                 [show]="isOpen"
                 [virtual]="virtual"
+                [ariaLive]="ariaLive"
                 (pageChange)="pageChange($event)"
                 >
             </kendo-list>
@@ -1537,7 +1553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }]; }, propDecorators: { iconClass: [{
+                }] }, { type: i0.Injector }]; }, propDecorators: { iconClass: [{
                 type: Input
             }], loading: [{
                 type: Input
@@ -1638,12 +1654,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-picker']
-            }], isDisabled: [{
+            }], isDisabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }, {
+            }], isDisabledAttribute: [{
                 type: HostBinding,
-                args: ['attr.aria-disabled']
+                args: ['attr.disabled']
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
@@ -1659,30 +1675,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], hostTabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
-            }], isReadonly: [{
+            }], readonlyClass: [{
                 type: HostBinding,
                 args: ['attr.readonly']
-            }, {
+            }], readonlyAttr: [{
+                type: HostBinding,
+                args: ['attr.readonly']
+            }], isBusy: [{
                 type: HostBinding,
-                args: ['attr.aria-readonly']
+                args: ['attr.aria-busy']
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }, {
+            }], haspopup: [{
                 type: HostBinding,
                 args: ['attr.aria-haspopup']
             }], isAriaExpanded: [{
                 type: HostBinding,
                 args: ['attr.aria-expanded']
-            }], hostAriaOwns: [{
+            }], hostAriaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], hostAriaInvalid: [{
                 type: HostBinding,
-                args: ['attr.aria-owns']
+                args: ['attr.aria-invalid']
             }], hostAriaActivedescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
-            }], hostNoDataLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]

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/multiselect/multiselect.component.js

@@ -248,7 +248,6 @@ export class MultiSelectComponent {
          */
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
-        this.role = 'combobox';
         this.initialized = false;
         this._size = 'medium';
         this._rounded = 'medium';
@@ -561,9 +560,6 @@ export class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
-    get isAriaExpanded() {
-        return this.isOpen;
-    }
     /**
      * @hidden
      */
@@ -625,11 +621,6 @@ export class MultiSelectComponent {
         }
         return prefix + "-" + getter(item, this.valueField);
     }
-    get noDataLabel() {
-        if (this.dataService.itemsCount === 0) {
-            return this.messageFor('noDataText');
-        }
-    }
     get clearButtonVisiblity() {
         if (this.touchEnabled) {
             return 'visible';
@@ -1285,6 +1276,11 @@ export class MultiSelectComponent {
         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);
@@ -1343,7 +1339,7 @@ export class MultiSelectComponent {
     }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded" } }, providers: [
+MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
         MULTISELECT_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1388,10 +1384,12 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <kendo-searchbar
                 #searchbar
                 [id]="focusableId"
-                [role]="'textbox'"
+                [role]="'combobox'"
                 [tagListId]="tagListId"
+                [listId]="listBoxId"
+                [isLoading]="loading"
+                [isFilterable]="filterable"
                 [activeDescendant]="activeDescendant"
-                [noDataLabel]="noDataLabel"
                 [userInput]="text"
                 [disabled]="disabled"
                 [readonly]="readonly"
@@ -1465,6 +1463,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [virtual]="virtual"
                 (pageChange)="pageChange($event)"
                 [checkboxes]="checkboxes"
+                [isMultiselect]="true"
                 >
             </kendo-list>
             <!--no data template-->
@@ -1489,7 +1488,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
         <ng-container #container></ng-container>
-  `, isInline: true, components: [{ type: i7.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.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: i9.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: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.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: i9.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: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -1541,10 +1540,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             <kendo-searchbar
                 #searchbar
                 [id]="focusableId"
-                [role]="'textbox'"
+                [role]="'combobox'"
                 [tagListId]="tagListId"
+                [listId]="listBoxId"
+                [isLoading]="loading"
+                [isFilterable]="filterable"
                 [activeDescendant]="activeDescendant"
-                [noDataLabel]="noDataLabel"
                 [userInput]="text"
                 [disabled]="disabled"
                 [readonly]="readonly"
@@ -1618,6 +1619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [virtual]="virtual"
                 (pageChange)="pageChange($event)"
                 [checkboxes]="checkboxes"
+                [isMultiselect]="true"
                 >
             </kendo-list>
             <!--no data template-->
@@ -1776,12 +1778,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], isAriaExpanded: [{
-                type: HostBinding,
-                args: ['attr.aria-expanded']
             }], hostMousedown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]

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: 1659511295,
+    publishDate: 1661869333,
     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'
 };