@progress/kendo-angular-filter 2.2.3-dev.202210120943 → 2.3.0

package/esm2015/filter-group.component.js

@@ -2,30 +2,33 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { getKeyByValue, localizeOperators, logicOperators } from './util';
+import { Component, forwardRef, Input, ViewChildren } from '@angular/core';
+import { BaseFilterRowComponent } from './base-filter-row.component';
+import { FilterItem, getKeyByValue, localizeOperators, logicOperators, selectors } from './util';
 import * as i0 from "@angular/core";
 import * as i1 from "./filter.service";
-import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "./filter-expression.component";
-import * as i4 from "@angular/common";
-import * as i5 from "@progress/kendo-angular-buttons";
+import * as i2 from "./navigation.service";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "./filter-expression.component";
+import * as i5 from "@angular/common";
+import * as i6 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  */
-export class FilterGroupComponent {
-    constructor(filterService, localization, cdr) {
+export class FilterGroupComponent extends BaseFilterRowComponent {
+    constructor(filterService, cdr, element, navigationService, localization, renderer) {
+        super(element, navigationService, localization, renderer);
         this.filterService = filterService;
-        this.localization = localization;
         this.cdr = cdr;
-        this.index = 0;
         this.currentItem = {
             logic: 'or',
             filters: []
         };
-        this.valueChange = new EventEmitter();
         this.operators = [];
     }
+    get filterItems() {
+        return this._filterItems.toArray();
+    }
     ngOnInit() {
         this.operators = this.getLogicOperators();
         this.localizationSubscription = this.localization.changes.subscribe(() => {
@@ -41,9 +44,6 @@ export class FilterGroupComponent {
     getLogicOperators() {
         return localizeOperators(logicOperators)(this.localization);
     }
-    messageFor(key) {
-        return this.localization.get(key);
-    }
     getOperator(operatorValue) {
         return this.messageFor(getKeyByValue(logicOperators, operatorValue));
     }
@@ -63,16 +63,44 @@ export class FilterGroupComponent {
     }
     removeFilterGroup() {
         this.filterService.remove(this.currentItem, this.index);
-        this.valueChange.emit();
+        this.cdr.detectChanges();
+        this.valueChange.emit(true);
+    }
+    onMouseDown(event) {
+        let elementToFocus;
+        if (event.target.closest(selectors.kendoFilterToolbarItem)) {
+            let index = Array.from(event.target.closest(selectors.kendoToolbar).children).indexOf(event.target.closest(selectors.kendoFilterToolbarItem)) + 1;
+            if (event.target.closest(selectors.andButton)) {
+                index = 0;
+            }
+            if (event.target.closest(selectors.orButton)) {
+                index = 1;
+            }
+            this.navigationService.currentToolbarItemChildrenIndex = index;
+            this.navigationService.isInnerNavigationActivated = true;
+            elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].focusableChildren[index];
+        }
+        else {
+            this.navigationService.currentToolbarItemChildrenIndex = 0;
+            this.navigationService.isInnerNavigationActivated = false;
+            elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement;
+        }
+        this.navigationService.isFilterExpressionComponentFocused = false;
+        this.navigationService.currentToolbarItemIndex = this.itemNumber;
+        this.navigationService.focusCurrentElement(elementToFocus, true);
     }
 }
-FilterGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterGroupComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: { index: "index", currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
-        <div class="k-filter-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')">
-          <div class="k-toolbar">
+FilterGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterGroupComponent, deps: [{ token: i1.FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i3.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterGroupComponent, selector: "kendo-filter-group", inputs: { currentItem: "currentItem" }, providers: [{
+            provide: FilterItem,
+            useExisting: forwardRef(() => FilterGroupComponent)
+        }], viewQueries: [{ propertyName: "_filterItems", predicate: FilterItem, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <div class="k-filter-toolbar">
+          <div class="k-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (focus)="onFocus()" (focusout)="onBlur()" (mousedown)="onMouseDown($event)">
             <div class="k-filter-toolbar-item">
               <div class="k-widget k-button-group" role="group">
-              <button
+                  <button
+                    tabindex="-1"
                     *ngFor="let operator of operators"
                     kendoButton
                     [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
@@ -87,6 +115,7 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           <div class="k-filter-toolbar-item">
             <button
                 kendoButton
+                tabindex="-1"
                 [title]="messageFor('addFilter')"
                 icon="filter-add-expression"
                 (click)="addFilterExpression()">
@@ -96,6 +125,7 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           <div class="k-filter-toolbar-item">
             <button
                 kendoButton
+                tabindex="-1"
                 [title]="messageFor('addGroup')"
                 icon="filter-add-group"
                 (click)="addFilterGroup()">
@@ -105,6 +135,7 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           <div class="k-filter-toolbar-item">
             <button
                 kendoButton
+                tabindex="-1"
                 icon="x"
                 fillMode="flat"
                 [title]="messageFor('remove')"
@@ -114,15 +145,15 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </div>
       </div>
 
-      <ul class="k-filter-lines" *ngIf="currentItem.filters">
+      <ul class="k-filter-lines" role="group" *ngIf="currentItem.filters">
         <ng-container *ngFor="let item of currentItem.filters; let i = index;">
-          <li class="k-filter-item" *ngIf="!item['filters']">
-            <kendo-filter-expression (valueChange)="valueChange.emit()" [currentItem]="item" [index]="i">
+          <li class="k-filter-item" role="treeitem" *ngIf="!item['filters']">
+            <kendo-filter-expression (valueChange)="valueChange.emit($event)" [currentItem]="item" [index]="i">
             </kendo-filter-expression>
           </li>
-          <li class="k-filter-item" *ngIf="item['filters']">
+          <li class="k-filter-item" role="treeitem" *ngIf="item['filters']">
             <kendo-filter-group
-                (valueChange)="valueChange.emit()"
+                (valueChange)="valueChange.emit($event)"
                 [currentItem]="item"
                 [index]="i"
                 >
@@ -130,17 +161,22 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           </li>
         </ng-container>
       </ul>
-  `, isInline: true, components: [{ type: i3.FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["index", "currentItem"], outputs: ["valueChange"] }, { type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: i4.FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["currentItem"] }, { type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterGroupComponent, decorators: [{
             type: Component,
             args: [{
+                    providers: [{
+                            provide: FilterItem,
+                            useExisting: forwardRef(() => FilterGroupComponent)
+                        }],
                     selector: 'kendo-filter-group',
                     template: `
-        <div class="k-filter-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')">
-          <div class="k-toolbar">
+        <div class="k-filter-toolbar">
+          <div class="k-toolbar" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (focus)="onFocus()" (focusout)="onBlur()" (mousedown)="onMouseDown($event)">
             <div class="k-filter-toolbar-item">
               <div class="k-widget k-button-group" role="group">
-              <button
+                  <button
+                    tabindex="-1"
                     *ngFor="let operator of operators"
                     kendoButton
                     [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
@@ -155,6 +191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
           <div class="k-filter-toolbar-item">
             <button
                 kendoButton
+                tabindex="-1"
                 [title]="messageFor('addFilter')"
                 icon="filter-add-expression"
                 (click)="addFilterExpression()">
@@ -164,6 +201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
           <div class="k-filter-toolbar-item">
             <button
                 kendoButton
+                tabindex="-1"
                 [title]="messageFor('addGroup')"
                 icon="filter-add-group"
                 (click)="addFilterGroup()">
@@ -173,6 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
           <div class="k-filter-toolbar-item">
             <button
                 kendoButton
+                tabindex="-1"
                 icon="x"
                 fillMode="flat"
                 [title]="messageFor('remove')"
@@ -182,15 +221,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
       </div>
 
-      <ul class="k-filter-lines" *ngIf="currentItem.filters">
+      <ul class="k-filter-lines" role="group" *ngIf="currentItem.filters">
         <ng-container *ngFor="let item of currentItem.filters; let i = index;">
-          <li class="k-filter-item" *ngIf="!item['filters']">
-            <kendo-filter-expression (valueChange)="valueChange.emit()" [currentItem]="item" [index]="i">
+          <li class="k-filter-item" role="treeitem" *ngIf="!item['filters']">
+            <kendo-filter-expression (valueChange)="valueChange.emit($event)" [currentItem]="item" [index]="i">
             </kendo-filter-expression>
           </li>
-          <li class="k-filter-item" *ngIf="item['filters']">
+          <li class="k-filter-item" role="treeitem" *ngIf="item['filters']">
             <kendo-filter-group
-                (valueChange)="valueChange.emit()"
+                (valueChange)="valueChange.emit($event)"
                 [currentItem]="item"
                 [index]="i"
                 >
@@ -200,10 +239,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
       </ul>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { index: [{
-                type: Input
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.NavigationService }, { type: i3.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { _filterItems: [{
+                type: ViewChildren,
+                args: [FilterItem]
             }], currentItem: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });

package/esm2015/filter.component.js

@@ -2,18 +2,23 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, Output, EventEmitter, HostBinding, isDevMode, ContentChildren } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostBinding, isDevMode, ContentChildren, HostListener, ViewChildren } from '@angular/core';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterService } from './filter.service';
 import { nullOperators, isPresent } from './util';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { FilterFieldComponent } from './filter-field.component';
+import { FilterItem } from './util';
+import { NavigationService } from './navigation.service';
+import { Keys } from '@progress/kendo-angular-common';
+import { FilterErrorMessages } from './error-messages';
 import * as i0 from "@angular/core";
 import * as i1 from "./filter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "./filter-group.component";
-import * as i4 from "./localization/localized-messages.directive";
+import * as i3 from "./navigation.service";
+import * as i4 from "./filter-group.component";
+import * as i5 from "./localization/localized-messages.directive";
 /**
  * Represents the [Kendo UI Filter component for Angular]({% slug overview_filter %}).
  * The Filter component can be used to apply any user defined filter criteria.
@@ -47,10 +52,13 @@ import * as i4 from "./localization/localized-messages.directive";
  * ```
  */
 export class FilterComponent {
-    constructor(filterService, localization, cdr) {
+    constructor(filterService, localization, cdr, element, navigationService, renderer) {
         this.filterService = filterService;
         this.localization = localization;
         this.cdr = cdr;
+        this.element = element;
+        this.navigationService = navigationService;
+        this.renderer = renderer;
         /**
          * Fires every time the Filter component value is updated.
          * That is each time a Filter Group or Filter Expression is added, removed, or updated.
@@ -60,6 +68,31 @@ export class FilterComponent {
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
     }
+    /**
+     * @hidden
+     */
+    focusout() {
+        setTimeout(() => {
+            if (!(document.activeElement.closest('.k-filter'))) {
+                this.renderer.setAttribute(this.navigationService.currentlyFocusedElement, 'tabindex', '-1');
+                this.navigationService.currentlyFocusedElement = this.navigationService.flattenFilterItems[this.navigationService.currentToolbarItemIndex].toolbarElement;
+                this.renderer.setAttribute(this.navigationService.currentlyFocusedElement, 'tabindex', '0');
+                this.navigationService.isInnerNavigationActivated = false;
+                this.navigationService.isFilterExpressionComponentFocused = false;
+            }
+        });
+    }
+    /**
+     * @hidden
+     */
+    onKeydown(event) {
+        const keyCode = event.keyCode;
+        const keys = [Keys.ArrowUp, Keys.ArrowDown, Keys.ArrowLeft, Keys.ArrowRight, Keys.Enter,
+            Keys.Escape, Keys.Tab];
+        if (keys.indexOf(keyCode) > -1) {
+            this.navigationService.processKeyDown(keyCode, event);
+        }
+    }
     /**
      * Specifies the available user-defined filters. At least one filter should be provided.
      */
@@ -91,13 +124,19 @@ export class FilterComponent {
     get value() {
         return this._value;
     }
+    get filterItems() {
+        return this._filterItems.toArray();
+    }
+    get toolbarElement() {
+        return this.element.nativeElement.querySelector('.k-toolbar');
+    }
     ngOnInit() {
         this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
             this.cdr.detectChanges();
         });
     }
-    ngAfterViewChecked() {
+    ngAfterViewInit() {
         if (this.filterFields && this.filterFields.length > 0) {
             this.filters = this.filterFields.map((filterField) => {
                 var _a;
@@ -105,7 +144,13 @@ export class FilterComponent {
             });
         }
         if (this.filters.length === 0) {
-            throw new Error(`Pass at least one user-defined filter through the [filters] input property or nest kendo-filter-field components. See http://www.telerik.com/kendo-angular-ui/components/filter/#data-binding`);
+            throw new Error(FilterErrorMessages.missingFilters);
+        }
+        this.navigationService.reset(this.filterItems);
+        if (!this.navigationService.currentlyFocusedElement) {
+            const firstElement = this.navigationService.flattenFilterItems[0].toolbarElement;
+            this.navigationService.currentlyFocusedElement = firstElement;
+            this.renderer.setAttribute(firstElement, 'tabindex', '0');
         }
     }
     ngOnDestroy() {
@@ -122,22 +167,35 @@ export class FilterComponent {
     /**
      * @hidden
      */
-    onValueChange() {
+    onValueChange(isRemoveOperation) {
         this.valueChange.emit(this.filterService.normalizedValue);
+        this.cdr.detectChanges();
+        this.navigationService.reset(this.filterItems);
+        if (isRemoveOperation) {
+            if (this.navigationService.currentToolbarItemIndex === this.navigationService.flattenFilterItems.length) {
+                this.navigationService.currentToolbarItemIndex -= 1;
+            }
+            this.navigationService.isInnerNavigationActivated = false;
+            this.navigationService.isFilterExpressionComponentFocused = false;
+            this.navigationService.currentlyFocusedElement = this.navigationService.flattenFilterItems[this.navigationService.currentToolbarItemIndex].toolbarElement;
+            this.renderer.setAttribute(this.navigationService.currentlyFocusedElement, 'tabindex', '0');
+            this.renderer.addClass(this.navigationService.currentlyFocusedElement, 'k-focus');
+            this.navigationService.currentlyFocusedElement.focus();
+        }
     }
     normalizeFilter(filterDescriptor) {
         const foundFilter = this.filterService.filters.find((filter) => filter.field === filterDescriptor.field);
         if (isDevMode() && !foundFilter) {
-            throw new Error(`There is no user-defined filter with '${filterDescriptor.field}' field provided through the [filters] input property.`);
+            throw new Error(FilterErrorMessages.missingFilterForUsedField(filterDescriptor.field));
         }
         if (isDevMode() && foundFilter.editor === 'boolean' && (!filterDescriptor.value && filterDescriptor.value !== false)) {
-            console.warn(`Provide a value for the boolean '${filterDescriptor.field}' user-defined filter as the operator is always set to 'eq'.`);
+            console.warn(FilterErrorMessages.missingValueForBooleanField(filterDescriptor.field));
         }
         if (isDevMode() && foundFilter.editor === 'boolean' && filterDescriptor.operator !== 'eq') {
-            console.warn(`The operator of the boolean '${filterDescriptor.field}' user-defined filter is always set to 'eq'.`);
+            console.warn(FilterErrorMessages.operatorBooleanField(filterDescriptor.field));
         }
         if (filterDescriptor.operator && foundFilter.operators && !foundFilter.operators.some(operator => operator === filterDescriptor.operator)) {
-            throw new Error(`The user-defined filter with field '${filterDescriptor.field}' is missing the '${filterDescriptor.operator}' operator.`);
+            throw new Error(FilterErrorMessages.filterMissingUsedOperator(filterDescriptor.field, filterDescriptor.operator));
         }
         if (foundFilter.editor === 'boolean') {
             filterDescriptor.operator = 'eq';
@@ -170,16 +228,23 @@ export class FilterComponent {
             }
         });
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
 }
-FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterComponent, selector: "kendo-filter", inputs: { filters: "filters", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction" } }, providers: [
+FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i3.NavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterComponent, selector: "kendo-filter", inputs: { filters: "filters", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "focusout": "focusout($event)", "keydown": "onKeydown($event)" }, properties: { "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.filter'
         },
-        FilterService
-    ], queries: [{ propertyName: "filterFields", predicate: FilterFieldComponent }], ngImport: i0, template: `
+        FilterService,
+        NavigationService
+    ], queries: [{ propertyName: "filterFields", predicate: FilterFieldComponent }], viewQueries: [{ propertyName: "_filterItems", predicate: FilterItem, descendants: true }], ngImport: i0, template: `
         <ng-container kendoFilterLocalizedMessages
             i18n-editorDateTodayText="kendo.filter.editorDateTodayText|The text of the Today button of the Date editor"
             editorDateTodayText="Today"
@@ -286,25 +351,25 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             i18n-filterValueAriaLabel="kendo.filter.filterValueAriaLabel|The text of the filter value aria label"
             filterValueAriaLabel="value"
 
-            i18n-filterAriaLabel="kendo.filter.filterAriaLabel|The text of the filter row aria label"
-            filterAriaLabel="filter"
+            i18n-filterToolbarAriaLabel="kendo.filter.filterToolbarAriaLabel|The text of the filter row aria label"
+            filterToolbarAriaLabel="filter row settings"
 
-            i18n-filterToolbarAriaLabel="kendo.filter.filterToolbarAriaLabel|The text of the filter toolbar aria label"
-            filterToolbarAriaLabel="filter settings"
+            i18n-filterComponentAriaLabel="kendo.filter.filterComponentAriaLabel|The text of the filter component aria label"
+            filterComponentAriaLabel="filter component"
             >
         </ng-container>
         <div class="k-widget k-filter" [attr.dir]="direction">
-            <ul class='k-filter-container'>
-                <li class='k-filter-group-main'>
+            <ul class='k-filter-container' role="tree" [attr.aria-label]="messageFor('filterComponentAriaLabel')">
+                <li class='k-filter-group-main' role="treeitem">
                     <kendo-filter-group
                         [currentItem]="getCurrentFilter()"
-                        (valueChange)="onValueChange()"
+                        (valueChange)="onValueChange($event)"
                         >
                     </kendo-filter-group>
                 </li>
             </ul>
         </div>
-    `, isInline: true, components: [{ type: i3.FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: i4.LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
+    `, isInline: true, components: [{ type: i4.FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }], directives: [{ type: i5.LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -314,7 +379,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             provide: L10N_PREFIX,
                             useValue: 'kendo.filter'
                         },
-                        FilterService
+                        FilterService,
+                        NavigationService
                     ],
                     selector: 'kendo-filter',
                     template: `
@@ -424,19 +490,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             i18n-filterValueAriaLabel="kendo.filter.filterValueAriaLabel|The text of the filter value aria label"
             filterValueAriaLabel="value"
 
-            i18n-filterAriaLabel="kendo.filter.filterAriaLabel|The text of the filter row aria label"
-            filterAriaLabel="filter"
+            i18n-filterToolbarAriaLabel="kendo.filter.filterToolbarAriaLabel|The text of the filter row aria label"
+            filterToolbarAriaLabel="filter row settings"
 
-            i18n-filterToolbarAriaLabel="kendo.filter.filterToolbarAriaLabel|The text of the filter toolbar aria label"
-            filterToolbarAriaLabel="filter settings"
+            i18n-filterComponentAriaLabel="kendo.filter.filterComponentAriaLabel|The text of the filter component aria label"
+            filterComponentAriaLabel="filter component"
             >
         </ng-container>
         <div class="k-widget k-filter" [attr.dir]="direction">
-            <ul class='k-filter-container'>
-                <li class='k-filter-group-main'>
+            <ul class='k-filter-container' role="tree" [attr.aria-label]="messageFor('filterComponentAriaLabel')">
+                <li class='k-filter-group-main' role="treeitem">
                     <kendo-filter-group
                         [currentItem]="getCurrentFilter()"
-                        (valueChange)="onValueChange()"
+                        (valueChange)="onValueChange($event)"
                         >
                     </kendo-filter-group>
                 </li>
@@ -444,7 +510,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { direction: [{
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i3.NavigationService }, { type: i0.Renderer2 }]; }, propDecorators: { focusout: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
             }], filters: [{
@@ -456,4 +528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], filterFields: [{
                 type: ContentChildren,
                 args: [FilterFieldComponent]
+            }], _filterItems: [{
+                type: ViewChildren,
+                args: [FilterItem]
             }] } });

package/esm2015/filter.module.js

@@ -108,6 +108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         CustomMessagesComponent,
                         AriaLabelValueDirective,
                         FilterFieldComponent,
-                        FilterValueEditorTemplateDirective]
+                        FilterValueEditorTemplateDirective
+                    ]
                 }]
         }] });

package/esm2015/localization/messages.js

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
 export class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "[kendoFilterMessages]", inputs: { filterExpressionOperators: "filterExpressionOperators", filterExpressionFilters: "filterExpressionFilters", remove: "remove", addGroup: "addGroup", addFilter: "addFilter", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", editorNumericDecrement: "editorNumericDecrement", editorNumericIncrement: "editorNumericIncrement", editorDateTodayText: "editorDateTodayText", editorDateToggleText: "editorDateToggleText", filterFieldAriaLabel: "filterFieldAriaLabel", filterOperatorAriaLabel: "filterOperatorAriaLabel", filterValueAriaLabel: "filterValueAriaLabel", filterAriaLabel: "filterAriaLabel", filterToolbarAriaLabel: "filterToolbarAriaLabel" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "[kendoFilterMessages]", inputs: { filterExpressionOperators: "filterExpressionOperators", filterExpressionFilters: "filterExpressionFilters", remove: "remove", addGroup: "addGroup", addFilter: "addFilter", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", editorNumericDecrement: "editorNumericDecrement", editorNumericIncrement: "editorNumericIncrement", editorDateTodayText: "editorDateTodayText", editorDateToggleText: "editorDateToggleText", filterFieldAriaLabel: "filterFieldAriaLabel", filterOperatorAriaLabel: "filterOperatorAriaLabel", filterValueAriaLabel: "filterValueAriaLabel", filterToolbarAriaLabel: "filterToolbarAriaLabel", filterComponentAriaLabel: "filterComponentAriaLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
@@ -88,8 +88,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], filterValueAriaLabel: [{
                 type: Input
-            }], filterAriaLabel: [{
-                type: Input
             }], filterToolbarAriaLabel: [{
                 type: Input
+            }], filterComponentAriaLabel: [{
+                type: Input
             }] } });