@progress/kendo-angular-dropdowns 7.2.2 → 7.2.3

package/common/searchbar.component.d.ts

@@ -2,14 +2,15 @@
 * 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, Injector, AfterContentChecked } from '@angular/core';
+import { Renderer2, EventEmitter, ElementRef, OnChanges, OnInit, OnDestroy, Injector } from '@angular/core';
 import { Direction } from './models/direction';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { FormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy, AfterContentChecked {
+export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy {
     private localization;
     private injector;
     direction: Direction;
@@ -29,6 +30,10 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy,
     get isFilterable(): boolean;
     get userInput(): string;
     set userInput(userInput: string);
+    /**
+     * @hidden
+     */
+    get formControl(): FormControl;
     suggestedText: string;
     valueChange: EventEmitter<any>;
     onBlur: EventEmitter<any>;
@@ -46,17 +51,14 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy,
     private _placeholder;
     private _isSuggestable;
     private _isFilterable;
-    private control;
     private renderer;
     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;

package/dropdowns.module.d.ts

@@ -9,7 +9,7 @@ import * as i3 from "./dropdownlist/dropdownlist.module";
 import * as i4 from "./multiselect/multiselect.module";
 import * as i5 from "./dropdowntrees/dropdowntrees.module";
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Dropdowns components.
  *
  * @example

package/dropdowntrees/dropdowntree.component.d.ts

@@ -2,10 +2,10 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnInit, OnDestroy, ElementRef, EventEmitter, NgZone, Renderer2, TemplateRef, ChangeDetectorRef, SimpleChanges, OnChanges, ViewContainerRef, AfterContentChecked } from '@angular/core';
+import { OnInit, OnDestroy, ElementRef, EventEmitter, NgZone, Renderer2, TemplateRef, ChangeDetectorRef, SimpleChanges, OnChanges, ViewContainerRef, AfterContentChecked, Injector } from '@angular/core';
 import { PopupRef, PopupService } from '@progress/kendo-angular-popup';
 import { TreeItem, TreeViewComponent, DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
-import { ControlValueAccessor } from '@angular/forms';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { NavigationService } from '../common/navigation/navigation.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { PreventableEvent } from '../common/models/preventable-event';
@@ -25,6 +25,7 @@ import * as i0 from "@angular/core";
  * Represents the [Kendo UI DropDownTree component for Angular]({% slug overview_ddt %}).
  */
 export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChanges, AfterContentChecked, ControlValueAccessor, DataBoundComponent, ExpandableComponent {
+    private injector;
     wrapper: ElementRef<HTMLElement>;
     private popupService;
     private navigationService;
@@ -34,15 +35,20 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     private localization;
     touchEnabled: boolean;
     hostClasses: boolean;
+    get hostAriaInvalid(): string;
     get isDisabled(): boolean;
+    get isDisabledAttribute(): string;
     get isLoading(): boolean;
+    get isBusy(): string;
+    get hostAriaControls(): string;
     get id(): string;
     direction: Direction;
     get hostTabIndex(): number;
     role: string;
     ariaHasPopup: string;
     get isAriaExpanded(): boolean;
-    get isReadonly(): boolean;
+    get hostAriaAutocomplete(): string;
+    get isReadonly(): string;
     /**
      * @hidden
      */
@@ -365,6 +371,10 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
      * Used to associate the value label with the wrapper via aria-describedby.
      */
     valueLabelId: string;
+    /**
+     * @hidden
+     */
+    get formControl(): FormControl;
     private _nodes;
     private _value;
     private _popupSettings;
@@ -372,12 +382,13 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     private _isFocused;
     private _dataItem;
     private _treeview;
+    private _popupId;
     private _size;
     private _rounded;
     private _fillMode;
     private subscriptions;
     private touchstartDisposeHandler;
-    constructor(wrapper: ElementRef<HTMLElement>, popupService: PopupService, navigationService: NavigationService, renderer: Renderer2, _zone: NgZone, cdr: ChangeDetectorRef, localization: LocalizationService, touchEnabled: boolean);
+    constructor(injector: Injector, wrapper: ElementRef<HTMLElement>, popupService: PopupService, navigationService: NavigationService, renderer: Renderer2, _zone: NgZone, cdr: ChangeDetectorRef, localization: LocalizationService, touchEnabled: boolean);
     ngOnInit(): void;
     /**
      * @hidden
@@ -518,6 +529,6 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     private handleDocumentBlur;
     private assignAriaDescribedBy;
     private setComponentClasses;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropDownTreeComponent, [null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropDownTreeComponent, [null, null, null, null, null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DropDownTreeComponent, "kendo-dropdowntree", ["kendoDropDownTree"], { "loading": "loading"; "clearButton": "clearButton"; "data": "data"; "value": "value"; "textField": "textField"; "valueField": "valueField"; "valueDepth": "valueDepth"; "hasChildren": "hasChildren"; "fetchChildren": "fetchChildren"; "placeholder": "placeholder"; "popupSettings": "popupSettings"; "dataItem": "dataItem"; "listHeight": "listHeight"; "disabled": "disabled"; "readonly": "readonly"; "valuePrimitive": "valuePrimitive"; "tabindex": "tabindex"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "itemDisabled": "itemDisabled"; "isNodeExpanded": "isNodeExpanded"; "isNodeVisible": "isNodeVisible"; "loadOnDemand": "loadOnDemand"; "filterable": "filterable"; "filter": "filter"; "focusableId": "focusableId"; }, { "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "onFocus": "focus"; "onBlur": "blur"; "valueChange": "valueChange"; "filterChange": "filterChange"; }, ["noDataTemplate", "headerTemplate", "footerTemplate", "nodeTemplate", "valueTemplate"], never>;
 }

package/dropdowntrees/multiselecttree.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 { AfterContentChecked, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { AfterContentChecked, ChangeDetectorRef, ElementRef, EventEmitter, Injector, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { NavigationService } from '../common/navigation/navigation.service';
 import { PopupRef, PopupService } from '@progress/kendo-angular-popup';
@@ -30,6 +30,7 @@ import * as i0 from "@angular/core";
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
 export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnChanges, AfterContentChecked, DataBoundComponent, ExpandableComponent, ControlValueAccessor {
+    private injector;
     wrapper: ElementRef;
     private popupService;
     private renderer;
@@ -41,16 +42,24 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     touchEnabled: boolean;
     hostClasses: boolean;
     get isDisabled(): boolean;
+    get hostAriaControls(): string;
+    get hostAriaAutocomplete(): string;
     get isLoading(): boolean;
+    get hostAriaInvalid(): string;
+    get isBusy(): string;
     get id(): string;
     direction: Direction;
     get hostTabIndex(): number;
     role: string;
     get isAriaExpanded(): boolean;
     ariaHasPopup: string;
-    get isReadonly(): boolean;
+    get isReadonly(): string;
     get ariaDescribedBy(): string;
     get ariaActiveDescendant(): string;
+    /**
+     * @hidden
+     */
+    get formControl(): FormControl;
     /**
      * @hidden
      */
@@ -424,13 +433,14 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     private _isFocused;
     private _treeview;
     private _dataItems;
+    private _popupId;
     private _size;
     private _rounded;
     private _fillMode;
     private subscriptions;
     private lastNodeOnFocus;
     private isContentInit;
-    constructor(wrapper: ElementRef, popupService: PopupService, renderer: Renderer2, navigationService: NavigationService, _zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, lookup: MultiSelectTreeLookupService, touchEnabled: boolean);
+    constructor(injector: Injector, wrapper: ElementRef, popupService: PopupService, renderer: Renderer2, navigationService: NavigationService, _zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, lookup: MultiSelectTreeLookupService, touchEnabled: boolean);
     ngOnInit(): void;
     /**
      * @hidden
@@ -595,6 +605,6 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
      */
     private registerLookupItems;
     private registerChildLookupItems;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectTreeComponent, [null, null, null, null, null, null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectTreeComponent, [null, null, null, null, null, null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectTreeComponent, "kendo-multiselecttree", ["kendoMultiSelectTree"], { "tabindex": "tabindex"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "popupSettings": "popupSettings"; "checkableSettings": "checkableSettings"; "data": "data"; "value": "value"; "dataItems": "dataItems"; "textField": "textField"; "valueField": "valueField"; "valueDepth": "valueDepth"; "loading": "loading"; "placeholder": "placeholder"; "listHeight": "listHeight"; "disabled": "disabled"; "readonly": "readonly"; "valuePrimitive": "valuePrimitive"; "loadOnDemand": "loadOnDemand"; "focusableId": "focusableId"; "clearButton": "clearButton"; "filterable": "filterable"; "checkAll": "checkAll"; "hasChildren": "hasChildren"; "fetchChildren": "fetchChildren"; "isNodeExpanded": "isNodeExpanded"; "isNodeVisible": "isNodeVisible"; "itemDisabled": "itemDisabled"; "tagMapper": "tagMapper"; }, { "onFocus": "focus"; "onBlur": "blur"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "valueChange": "valueChange"; "removeTag": "removeTag"; "filterChange": "filterChange"; }, ["headerTemplate", "footerTemplate", "nodeTemplate", "noDataTemplate", "tagTemplate", "groupTagTemplate"], never>;
 }

package/esm2015/common/searchbar.component.js

@@ -57,6 +57,13 @@ export class SearchBarComponent {
     set userInput(userInput) {
         this._userInput = userInput || "";
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     get value() {
         return this.input.nativeElement.value;
     }
@@ -74,17 +81,6 @@ export class SearchBarComponent {
         this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
     }
-    ngAfterContentChecked() {
-        var _a;
-        const formControl = (_a = this.injector.get(NgControl, null)) === null || _a === void 0 ? void 0 : _a.control;
-        this.control = formControl;
-        if (formControl) {
-            this.subs.add(formControl.valueChanges.subscribe(() => {
-                this.control = formControl;
-            }));
-        }
-        this.setAriaInvalid();
-    }
     ngOnChanges(changes) {
         let previousUserInput;
         if (this.input && (changes.userInput || changes.suggestedText)) {
@@ -135,19 +131,6 @@ export class SearchBarComponent {
             }
         }
     }
-    setAriaInvalid() {
-        if (this.control) {
-            if (this.control.invalid) {
-                this.renderer.setAttribute(this.input.nativeElement, 'aria-invalid', 'true');
-            }
-            else {
-                this.renderer.setAttribute(this.input.nativeElement, 'aria-invalid', 'false');
-            }
-        }
-        else {
-            this.renderer.removeAttribute(this.input.nativeElement, 'aria-invalid');
-        }
-    }
     setAriaAutocomplete() {
         if (this.isFilterable) {
             this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'list');
@@ -229,6 +212,7 @@ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"
             [attr.aria-busy]="isLoading"
+            [attr.aria-invalid]="formControl?.invalid"
         />
    `, isInline: true, directives: [{ type: i2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SearchBarComponent, decorators: [{
@@ -259,6 +243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"
             [attr.aria-busy]="isLoading"
+            [attr.aria-invalid]="formControl?.invalid"
         />
    `
                 }]

package/esm2015/dropdownlist/dropdownlist.component.js

@@ -524,6 +524,7 @@ export class DropDownListComponent {
             action !== NavigationAction.Delete &&
             action !== NavigationAction.PageDown &&
             action !== NavigationAction.PageUp &&
+            action !== NavigationAction.SelectAll &&
             !(leftRightKeys && this.filterable) &&
             action !== NavigationAction.Enter //enter when popup is opened is handled before `handleEnter`
         ) {

package/esm2015/dropdowns.module.js

@@ -10,7 +10,7 @@ import { MultiSelectModule } from './multiselect/multiselect.module';
 import { DropDownTreesModule } from './dropdowntrees/dropdowntrees.module';
 import * as i0 from "@angular/core";
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Dropdowns components.
  *
  * @example

package/esm2015/dropdowntrees/dropdowntree.component.js

@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, O
 import { anyChanged, guid, hasObservers, isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
 import { DataBoundComponent, ExpandableComponent } from '@progress/kendo-angular-treeview';
 import { getter } from '@progress/kendo-common';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DataService } from '../common/data.service';
 import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
 import { NavigationService } from '../common/navigation/navigation.service';
@@ -46,7 +46,8 @@ const DEFAULT_FILL_MODE = 'solid';
  * Represents the [Kendo UI DropDownTree component for Angular]({% slug overview_ddt %}).
  */
 export class DropDownTreeComponent {
-    constructor(wrapper, popupService, navigationService, renderer, _zone, cdr, localization, touchEnabled) {
+    constructor(injector, wrapper, popupService, navigationService, renderer, _zone, cdr, localization, touchEnabled) {
+        this.injector = injector;
         this.wrapper = wrapper;
         this.popupService = popupService;
         this.navigationService = navigationService;
@@ -56,7 +57,7 @@ export class DropDownTreeComponent {
         this.localization = localization;
         this.touchEnabled = touchEnabled;
         this.hostClasses = true;
-        this.role = 'listbox';
+        this.role = 'combobox';
         this.ariaHasPopup = 'tree';
         /**
          * Fires each time the popup is about to open
@@ -192,6 +193,7 @@ export class DropDownTreeComponent {
         this._popupSettings = DEFAULT_POPUP_SETTINGS;
         this._tabindex = 0;
         this._isFocused = false;
+        this._popupId = guid();
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -203,12 +205,24 @@ export class DropDownTreeComponent {
         this.subscribeTouchEvents();
         this.subscribeFocusEvents();
     }
+    get hostAriaInvalid() {
+        return this.formControl ? this.formControl.invalid.toString() : null;
+    }
     get isDisabled() {
         return this.disabled;
     }
+    get isDisabledAttribute() {
+        return this.disabled ? '' : null;
+    }
     get isLoading() {
         return this.loading;
     }
+    get isBusy() {
+        return this.loading ? 'true' : null;
+    }
+    get hostAriaControls() {
+        return this.isOpen ? this._popupId : null;
+    }
     get id() {
         return this.focusableId;
     }
@@ -218,8 +232,11 @@ export class DropDownTreeComponent {
     get isAriaExpanded() {
         return this.isOpen;
     }
+    get hostAriaAutocomplete() {
+        return this.filterable ? 'list' : null;
+    }
     get isReadonly() {
-        return this.readonly;
+        return this.readonly ? '' : null;
     }
     /**
      * @hidden
@@ -475,6 +492,13 @@ export class DropDownTreeComponent {
     get isVisible() {
         return this.isNodeVisible;
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     ngOnInit() {
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.assignAriaDescribedBy();
@@ -825,10 +849,11 @@ export class DropDownTreeComponent {
         });
         const popupWrapper = this.popupRef.popupElement;
         const { min, max } = this.width;
-        popupWrapper.style.minWidth = min;
-        popupWrapper.style.width = max;
-        popupWrapper.style.height = this.height;
-        popupWrapper.setAttribute("dir", this.direction);
+        this.renderer.setStyle(popupWrapper, 'minWidth', min);
+        this.renderer.setStyle(popupWrapper, 'width', max);
+        this.renderer.setStyle(popupWrapper, 'height', this.height);
+        this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
+        this.renderer.setAttribute(popupWrapper, 'id', this._popupId);
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
             this.opened.emit();
@@ -873,7 +898,11 @@ export class DropDownTreeComponent {
         this.selectedKeys = [];
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe(() => this.togglePopup(true)), this.navigationService.close.subscribe(() => {
+        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
+            event.originalEvent.preventDefault();
+            this.togglePopup(true);
+        }), this.navigationService.close.subscribe((event) => {
+            event.originalEvent.preventDefault();
             this.togglePopup(false);
             this.focus();
         }), this.navigationService.enter
@@ -965,8 +994,8 @@ export class DropDownTreeComponent {
         }
     }
 }
-DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-dropdowntree": "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.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.readonly": "this.isReadonly", "attr.aria-readonly": "this.isReadonly" } }, providers: [
+DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i2.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
         DataService,
         SelectionService,
         NavigationService,
@@ -1008,7 +1037,6 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <span
             [attr.id]="valueLabelId"
             class="k-input-inner"
-            role="option"
         >
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
@@ -1178,7 +1206,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <span
             [attr.id]="valueLabelId"
             class="k-input-inner"
-            role="option"
         >
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
@@ -1302,7 +1329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i2.NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.LocalizationService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.PopupService }, { type: i2.NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.LocalizationService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1313,15 +1340,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-picker']
+            }], hostAriaInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
             }], isDisabled: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
-            }, {
+            }], isDisabledAttribute: [{
                 type: HostBinding,
-                args: ['attr.aria-disabled']
+                args: ['attr.disabled']
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
+            }], isBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
+            }], hostAriaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
             }], id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -1340,12 +1376,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], isAriaExpanded: [{
                 type: HostBinding,
                 args: ['attr.aria-expanded']
+            }], hostAriaAutocomplete: [{
+                type: HostBinding,
+                args: ['attr.aria-autocomplete']
             }], isReadonly: [{
                 type: HostBinding,
                 args: ['attr.readonly']
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-readonly']
             }], handleClick: [{
                 type: HostListener,
                 args: ['click']

package/esm2015/dropdowntrees/multiselecttree.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, ContentChild, EventEmitter, forwardRef, HostBinding, HostListener, Inject, Input, isDevMode, Optional, Output, ViewChild, ViewContainerRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { anyChanged, guid, hasObservers, Keys, KendoInput, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { NavigationService } from '../common/navigation/navigation.service';
@@ -54,7 +54,8 @@ const DEFAULT_FILL_MODE = 'solid';
  * Represents the [Kendo UI MultiSelectTree component for Angular]({% slug overview_multiselecttree %}).
  */
 export class MultiSelectTreeComponent {
-    constructor(wrapper, popupService, renderer, navigationService, _zone, localization, cdr, lookup, touchEnabled) {
+    constructor(injector, wrapper, popupService, renderer, navigationService, _zone, localization, cdr, lookup, touchEnabled) {
+        this.injector = injector;
         this.wrapper = wrapper;
         this.popupService = popupService;
         this.renderer = renderer;
@@ -225,6 +226,7 @@ export class MultiSelectTreeComponent {
         this._popupSettings = DEFAULT_POPUP_SETTINGS;
         this._checkableSettings = DEFAULT_CHECKABLE_SETTINGS;
         this._isFocused = false;
+        this._popupId = guid();
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -239,9 +241,21 @@ export class MultiSelectTreeComponent {
     get isDisabled() {
         return this.disabled;
     }
+    get hostAriaControls() {
+        return this.isOpen ? this._popupId : null;
+    }
+    get hostAriaAutocomplete() {
+        return this.filterable ? 'list' : null;
+    }
     get isLoading() {
         return this.loading;
     }
+    get hostAriaInvalid() {
+        return this.formControl ? this.formControl.invalid.toString() : null;
+    }
+    get isBusy() {
+        return this.loading ? 'true' : null;
+    }
     get id() {
         return this.focusableId;
     }
@@ -252,7 +266,7 @@ export class MultiSelectTreeComponent {
         return this.isOpen;
     }
     get isReadonly() {
-        return this.readonly;
+        return this.readonly ? '' : null;
     }
     get ariaDescribedBy() {
         return this.tagListId;
@@ -260,6 +274,13 @@ export class MultiSelectTreeComponent {
     get ariaActiveDescendant() {
         return this.focusedTagId;
     }
+    /**
+     * @hidden
+     */
+    get formControl() {
+        const ngControl = this.injector.get(NgControl, null);
+        return (ngControl === null || ngControl === void 0 ? void 0 : ngControl.control) || null;
+    }
     /**
      * @hidden
      */
@@ -1034,9 +1055,13 @@ export class MultiSelectTreeComponent {
         }
     }
     subscribeEvents() {
-        this.subscriptions.push(this.navigationService.open.subscribe(() => this.togglePopup(true)), this.navigationService.enter
+        this.subscriptions.push(this.navigationService.open.subscribe((event) => {
+            event.originalEvent.preventDefault();
+            this.togglePopup(true);
+        }), this.navigationService.enter
             .pipe(tap((event) => event.originalEvent.preventDefault()))
-            .subscribe(() => this.togglePopup(true)), merge(this.navigationService.close, this.navigationService.esc).subscribe(() => {
+            .subscribe(() => this.togglePopup(true)), merge(this.navigationService.close, this.navigationService.esc).subscribe((event) => {
+            event.originalEvent.preventDefault();
             this.focus();
             this.togglePopup(false);
         }), this.navigationService.tab.subscribe(this.handleTabKey.bind(this)), this.navigationService.up.subscribe(this.handleUpKey.bind(this)), this.navigationService.down.subscribe(this.handleDownKey.bind(this)), this.navigationService.left
@@ -1272,8 +1297,8 @@ export class MultiSelectTreeComponent {
         }
     }
 }
-MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
+MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { listeners: { "click": "handleClick()", "keydown": "handleKeydown($event)" }, properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
         LocalizationService,
         NavigationService,
         DataService,
@@ -1678,14 +1703,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.Renderer2 }, { type: i2.NavigationService }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i4.MultiSelectTreeLookupService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.Renderer2 }, { type: i2.NavigationService }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i4.MultiSelectTreeLookupService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
                 }] }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
-                args: ['class.k-dropdowntree']
+                args: ['class.k-multiselect-tree']
             }, {
                 type: HostBinding,
                 args: ['class.k-input']
@@ -1695,9 +1720,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['attr.aria-disabled']
+            }], hostAriaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], hostAriaAutocomplete: [{
+                type: HostBinding,
+                args: ['attr.aria-autocomplete']
             }], isLoading: [{
                 type: HostBinding,
                 args: ['class.k-loading']
+            }], hostAriaInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], isBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
             }], id: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -1719,9 +1756,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], isReadonly: [{
                 type: HostBinding,
                 args: ['attr.readonly']
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-readonly']
             }], ariaDescribedBy: [{
                 type: HostBinding,
                 args: ['attr.aria-describedby']