@progress/kendo-angular-dropdowns 7.0.4-dev.202208041601 → 7.1.0

package/esm2015/common/list.component.js

@@ -8,6 +8,7 @@ import { ListItemDirective } from './list-item.directive';
 import { isPresent, getter, closest, getSizeClass, getRoundedClass } from './util';
 import { fromEvent, merge } from 'rxjs';
 import { map, tap, auditTime, switchMap, take } from 'rxjs/operators';
+import { NavigationAction } from './navigation/navigation-action';
 import * as i0 from "@angular/core";
 import * as i1 from "./data.service";
 import * as i2 from "./selection/selection.service";
@@ -274,6 +275,16 @@ export class ListComponent {
             this.scroll(items[flatIndex].element);
         }
     }
+    scrollWithOnePage(action) {
+        let content = this.content.nativeElement;
+        const contentOffsetHeight = content.clientHeight;
+        if (action === NavigationAction.PageDown) {
+            content.scrollTop += contentOffsetHeight;
+        }
+        else if (action === NavigationAction.PageUp) {
+            content.scrollTop -= contentOffsetHeight;
+        }
+    }
     scrollToIndex(index) {
         let content = this.content.nativeElement;
         let contentScrollTop = content.scrollTop;
@@ -313,6 +324,9 @@ export class ListComponent {
         const hasVirtualScroll = isPresent(this.virtual) && this.hasVirtualScrollbar();
         return hasVirtualScroll || this.list.nativeElement.scrollHeight > this.content.nativeElement.offsetHeight;
     }
+    isItemSelected(index) {
+        return this.selectionService.isSelected(index) || null;
+    }
     /**
      * Sets the list's content overflow (hides/shows scrollbar)
      */
@@ -358,7 +372,7 @@ export class ListComponent {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-list", inputs: { 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" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-list", inputs: { 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" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="dataService.grouped"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
@@ -383,6 +397,8 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         role="listbox"
         [class]="listClass"
         [attr.id]="id"
+        [attr.aria-live]="ariaLive"
+        [attr.aria-multiselectable]="isMultiselect"
         [attr.aria-hidden]="!show">
          <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
@@ -394,6 +410,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [multipleSelection]="multipleSelection"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem)"
                 [attr.tabIndex]="-1"
+                [attr.aria-selected]="isItemSelected(itemIndex)"
                 [class]="listItemClass"
                 [ngClass]="{
                     'k-disabled': isDisabled(itemIndex),
@@ -450,6 +467,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [attr.absolute-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1"
+                [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
                 [class]="listItemClass"
                 [ngClass]="{
                     'k-disabled': isDisabled(dataItem.offsetIndex),
@@ -507,6 +525,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         role="listbox"
         [class]="listClass"
         [attr.id]="id"
+        [attr.aria-live]="ariaLive"
+        [attr.aria-multiselectable]="isMultiselect"
         [attr.aria-hidden]="!show">
          <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
@@ -518,6 +538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [multipleSelection]="multipleSelection"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem)"
                 [attr.tabIndex]="-1"
+                [attr.aria-selected]="isItemSelected(itemIndex)"
                 [class]="listItemClass"
                 [ngClass]="{
                     'k-disabled': isDisabled(itemIndex),
@@ -574,6 +595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 [attr.absolute-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1"
+                [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
                 [class]="listItemClass"
                 [ngClass]="{
                     'k-disabled': isDisabled(dataItem.offsetIndex),
@@ -633,6 +655,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], checkboxes: [{
                 type: Input
+            }], ariaLive: [{
+                type: Input
+            }], isMultiselect: [{
+                type: Input
             }], data: [{
                 type: Input
             }], size: [{

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

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

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

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

package/esm2015/common/searchbar.component.js

@@ -6,6 +6,8 @@ import { Component, Input, Output, EventEmitter, ViewChild, HostBinding } from '
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { Keys } from '@progress/kendo-angular-common';
 import { combineStr } from './util';
+import { Subscription } from 'rxjs';
+import { NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-common";
@@ -13,8 +15,9 @@ import * as i2 from "@progress/kendo-angular-common";
  * @hidden
  */
 export class SearchBarComponent {
-    constructor(localization, renderer) {
+    constructor(localization, renderer, injector) {
         this.localization = localization;
+        this.injector = injector;
         this.valueChange = new EventEmitter();
         this.onBlur = new EventEmitter();
         this.onFocus = new EventEmitter();
@@ -24,9 +27,30 @@ export class SearchBarComponent {
         this._userInput = "";
         this._previousValue = "";
         this._placeholder = "";
+        this._isSuggestable = false;
+        this._isFilterable = false;
+        this.subs = new Subscription();
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.renderer = renderer;
     }
+    set isSuggestable(isSuggestable) {
+        this._isSuggestable = isSuggestable;
+        this.setAriaAutocomplete();
+    }
+    ;
+    get isSuggestable() {
+        return this._isSuggestable;
+    }
+    ;
+    set isFilterable(isFilterable) {
+        this._isFilterable = isFilterable;
+        this.setAriaAutocomplete();
+    }
+    ;
+    get isFilterable() {
+        return this._isFilterable;
+    }
+    ;
     get userInput() {
         return this._userInput;
     }
@@ -47,8 +71,19 @@ export class SearchBarComponent {
         return this.role === 'combobox' ? this.popupOpen : null;
     }
     ngOnInit() {
-        this.localizationChangeSubscription = this.localization
-            .changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
+        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;
@@ -80,9 +115,7 @@ export class SearchBarComponent {
         }
     }
     ngOnDestroy() {
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     }
     writeInputValue(text) {
         if (isDocumentAvailable()) {
@@ -99,6 +132,33 @@ 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');
+        }
+        if (this.isSuggestable) {
+            this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'inline');
+        }
+        if (this.isFilterable && this.isSuggestable) {
+            this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'both');
+        }
+        if (!this.isFilterable && !this.isSuggestable) {
+            this.renderer.removeAttribute(this.input.nativeElement, 'aria-autocomplete');
+        }
+    }
     handleInput(event) {
         const value = event.target.value;
         if (value !== this.userInput) {
@@ -115,7 +175,7 @@ export class SearchBarComponent {
     handleKeydown(event) {
         const keyCode = event.keyCode;
         const keys = [Keys.ArrowUp, Keys.ArrowDown, Keys.ArrowLeft, Keys.ArrowRight, Keys.Enter,
-            Keys.Escape, Keys.Delete, Keys.Backspace, Keys.Home, Keys.End];
+            Keys.Escape, Keys.Delete, Keys.Backspace, Keys.Home, Keys.End, Keys.PageDown, Keys.PageUp];
         if (keys.indexOf(keyCode) > -1) {
             this.onNavigate.emit(event);
         }
@@ -139,8 +199,8 @@ export class SearchBarComponent {
         this.renderer.setAttribute(input, 'size', size.toString());
     }
 }
-SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { 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" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { 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" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <input #input
             autocomplete="off"
             [id]="id"
@@ -158,14 +218,12 @@ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [attr.tabIndex]="tabIndex"
             [attr.dir]="direction"
             [attr.role]="role"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-readonly]="readonly"
             aria-haspopup="listbox"
             [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-owns]="listId"
+            [attr.aria-controls]="listId"
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"
-            [attr.aria-label]="noDataLabel"
+            [attr.aria-busy]="isLoading"
         />
    `, 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: [{
@@ -190,18 +248,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [attr.tabIndex]="tabIndex"
             [attr.dir]="direction"
             [attr.role]="role"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-readonly]="readonly"
             aria-haspopup="listbox"
             [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-owns]="listId"
+            [attr.aria-controls]="listId"
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"
-            [attr.aria-label]="noDataLabel"
+            [attr.aria-busy]="isLoading"
         />
    `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { id: [{
                 type: Input
             }], listId: [{
                 type: Input
@@ -209,8 +265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], activeDescendant: [{
                 type: Input
-            }], noDataLabel: [{
-                type: Input
             }], disabled: [{
                 type: Input
             }], readonly: [{
@@ -221,6 +275,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], role: [{
                 type: Input
+            }], isLoading: [{
+                type: Input
+            }], isSuggestable: [{
+                type: Input
+            }], isFilterable: [{
+                type: Input
             }], userInput: [{
                 type: Input
             }], suggestedText: [{

package/esm2015/common/shared.module.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ListComponent } from './list.component';
 import { SearchBarComponent } from './searchbar.component';
 import { TagListComponent } from './taglist.component';
@@ -40,20 +40,20 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective], imports: [CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], exports: [ListComponent,
+        CheckAllDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], exports: [ListComponent,
         ListItemDirective,
         SelectableDirective,
         SearchBarComponent,
         TemplateContextDirective,
         TagListComponent,
         CheckDirective,
-        CheckAllDirective, CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
+        CheckAllDirective, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule], CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [INTERNAL_DIRECTIVES],
-                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule],
-                    imports: [CommonModule, FormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule]
+                    exports: [INTERNAL_DIRECTIVES, CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, PopupModule, ResizeSensorModule, SharedDirectivesModule, EventsModule]
                 }]
         }] });