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

package/fesm2015/kendo-angular-filter.js

@@ -3,19 +3,20 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Component, Input, ContentChild, EventEmitter, Output, isDevMode, forwardRef, HostBinding, ContentChildren, NgModule } from '@angular/core';
+import { Injectable, Directive, Component, Input, ContentChild, EventEmitter, Output, isDevMode, forwardRef, ViewChildren, HostListener, HostBinding, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
+import { Keys } from '@progress/kendo-angular-common';
 import * as i2 from '@progress/kendo-angular-dropdowns';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import * as i2$1 from '@progress/kendo-angular-inputs';
 import { InputsModule } from '@progress/kendo-angular-inputs';
 import * as i2$2 from '@progress/kendo-angular-dateinputs';
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
-import * as i10 from '@angular/common';
+import * as i11 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i11 from '@progress/kendo-angular-buttons';
+import * as i12 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { LabelModule } from '@progress/kendo-angular-label';
 
@@ -193,6 +194,37 @@ const localizeOperators = operators => localization => Object.keys(operators).ma
  * @hidden
  */
 const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+class FilterItem {
+}
+FilterItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItem, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FilterItem.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItem });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItem, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * @hidden
+ */
+const selectors = {
+    andButton: `button.k-group-start`,
+    orButton: `button.k-group-end`,
+    addFilterButton: `button[icon="filter-add-expression"]`,
+    addGroupButton: `button[icon="filter-add-group"]`,
+    removeButton: `button[icon="x"]`,
+    filterFieldWrapper: `.k-filter-field`,
+    filterOperatorWrapper: `.k-filter-operator`,
+    filterValueEditorWrapper: `.k-filter-value`,
+    kendoDropDownListComponent: `kendo-dropdownlist`,
+    kendoInput: `.k-input`,
+    kendoInputInner: `.k-input-inner`,
+    inputElement: `input`,
+    textAreaElement: `textarea`,
+    kendoToolbar: `.k-toolbar`,
+    kendoButton: `.k-button`,
+    kendoFilterToolbarItem: `.k-filter-toolbar-item`
+};
 
 /**
  * @hidden
@@ -201,7 +233,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1665567772,
+    publishDate: 1666694566,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -283,6 +315,232 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [FilterValueEditorTemplateDirective]
             }] } });
 
+/**
+ * @hidden
+ */
+class NavigationService {
+    constructor(cdr, renderer) {
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.hierarchicalFilterItems = [];
+        this.flattenFilterItems = [];
+        this.currentToolbarItemIndex = 0;
+        this.currentToolbarItemChildrenIndex = 0;
+        this.isInnerNavigationActivated = false;
+        this.isFilterExpressionComponentFocused = false;
+    }
+    processKeyDown(key, event) {
+        switch (key) {
+            case Keys.ArrowUp:
+                event.preventDefault();
+                if (!this.isInnerNavigationActivated) {
+                    this.currentToolbarItemIndex > 0 ? this.currentToolbarItemIndex-- : this.currentToolbarItemIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.ArrowDown:
+                event.preventDefault();
+                if (!this.isInnerNavigationActivated) {
+                    this.currentToolbarItemIndex < this.flattenFilterItems.length - 1 ? this.currentToolbarItemIndex++ : this.currentToolbarItemIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.Enter:
+                const isEventTargetFilterToolbar = event.target.closest(selectors.kendoToolbar);
+                if (!this.isInnerNavigationActivated && isEventTargetFilterToolbar) {
+                    event.preventDefault();
+                    this.isInnerNavigationActivated = true;
+                    this.currentToolbarItemChildrenIndex = 0;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                const isEventTargetKendoFilterToolbarItem = event.target.closest(selectors.kendoFilterToolbarItem);
+                const isEventTargetButton = event.target.closest(selectors.kendoButton);
+                if (this.isInnerNavigationActivated &&
+                    !this.isFilterExpressionComponentFocused &&
+                    isEventTargetKendoFilterToolbarItem &&
+                    !isEventTargetButton) {
+                    event.preventDefault();
+                    this.isFilterExpressionComponentFocused = true;
+                    const focusableElement = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    const elementToFocus = focusableElement.querySelector(selectors.KendoDropDownListComponent) ||
+                        focusableElement.querySelector(selectors.kendoInputInner) ||
+                        focusableElement.querySelector(selectors.inputElement) ||
+                        focusableElement.querySelector(selectors.textAreaElement);
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.Escape:
+                if (this.isInnerNavigationActivated && !this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.isInnerNavigationActivated = false;
+                    this.currentToolbarItemChildrenIndex = 0;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    this.focusCurrentElement(elementToFocus);
+                }
+                if (this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.isFilterExpressionComponentFocused = false;
+                    this.isInnerNavigationActivated = true;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.ArrowRight:
+                if (this.isInnerNavigationActivated && !this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.currentToolbarItemChildrenIndex < this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren.length - 1 ? this.currentToolbarItemChildrenIndex++ : this.currentToolbarItemChildrenIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.ArrowLeft:
+                if (this.isInnerNavigationActivated && !this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.currentToolbarItemChildrenIndex > 0 ? this.currentToolbarItemChildrenIndex-- : this.currentToolbarItemChildrenIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    focusCurrentElement(element, isOnMouseDown) {
+        this.renderer.setAttribute(this.currentlyFocusedElement, 'tabindex', '-1');
+        this.currentlyFocusedElement = element;
+        if (element) {
+            this.renderer.setAttribute(this.currentlyFocusedElement, 'tabindex', '0');
+            if (!isOnMouseDown) {
+                this.currentlyFocusedElement.focus();
+            }
+        }
+    }
+    flattenHierarchicalFilterItems(filterItems) {
+        filterItems.forEach((filterRow) => {
+            var _a, _b;
+            let flattenItem = { component: filterRow, isGroup: false, toolbarElement: filterRow.toolbarElement, focusableChildren: [] };
+            this.flattenFilterItems.push(flattenItem);
+            if ((filterRow['operators'] && ((_a = filterRow['filterItems']) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
+                this.setGroupItemChildren(flattenItem, filterRow);
+                this.flattenHierarchicalFilterItems(filterRow['filterItems']);
+            }
+            else if (filterRow['operators'] && ((_b = filterRow['filterItems']) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+                this.setGroupItemChildren(flattenItem, filterRow);
+            }
+            else {
+                flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.filterFieldWrapper));
+                if (filterRow.toolbarElement.querySelector('.k-filter-operator')) {
+                    flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.filterOperatorWrapper));
+                }
+                flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.filterValueEditorWrapper));
+                flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.removeButton));
+            }
+        });
+    }
+    setGroupItemChildren(flattenItem, filterRow) {
+        flattenItem.isGroup = true;
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.andButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.orButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.addFilterButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.addGroupButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.removeButton));
+    }
+    setItemIndexes() {
+        this.flattenFilterItems.forEach((item, index) => {
+            item.component['itemNumber'] = index;
+        });
+        this.cdr.detectChanges();
+    }
+    reset(items) {
+        this.flattenFilterItems = [];
+        this.hierarchicalFilterItems = items;
+        this.flattenHierarchicalFilterItems(items);
+        this.setItemIndexes();
+    }
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });
+
+/**
+ * @hidden
+ */
+const FilterErrorMessages = {
+    missingFilters: `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`,
+    missingFilterForUsedField: (field) => `There is no user-defined filter with '${field}' field provided through the [filters] input property.`,
+    missingValueForBooleanField: (field) => `Provide a value for the boolean '${field}' user-defined filter as the operator is always set to 'eq'.`,
+    operatorBooleanField: (field) => `The operator of the boolean '${field}' user-defined filter is always set to 'eq'.`,
+    filterMissingUsedOperator: (field, operator) => `The user-defined filter with field '${field}' is missing the '${operator}' operator.`,
+    improperNumericEditorValue: (title) => `The provided value for the numeric editor of the '${title}' filter expression isn't one of a supported type string or NumberFormat. See http://www.telerik.com/kendo-angular-ui/components/filter/#editor-formats/`,
+    improperDateEditorValue: (title) => `The provided value for the date editor of the '${title}' filter expression isn't one of a supported type string or DateFormat. See http://www.telerik.com/kendo-angular-ui/components/filter/#editor-formats/`
+};
+
+/**
+ * @hidden
+ */
+class BaseFilterRowComponent {
+    constructor(element, navigationService, localization, renderer) {
+        this.element = element;
+        this.navigationService = navigationService;
+        this.localization = localization;
+        this.renderer = renderer;
+        this.valueChange = new EventEmitter();
+    }
+    get toolbarElement() {
+        return this.element.nativeElement.querySelector('.k-toolbar');
+    }
+    onFocus() {
+        this.renderer.addClass(this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement, 'k-focus');
+        this.navigationService.isInnerNavigationActivated = false;
+    }
+    onBlur() {
+        this.renderer.removeClass(this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement, 'k-focus');
+    }
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    onMouseDown(event) {
+        let elementToFocus;
+        const closestFilterToolbarItem = event.target.closest(selectors.kendoFilterToolbarItem);
+        const closestToolbarItem = event.target.closest(selectors.kendoToolbar);
+        if (closestFilterToolbarItem) {
+            let index = Array.from(closestToolbarItem.children).indexOf(closestFilterToolbarItem);
+            this.navigationService.currentToolbarItemChildrenIndex = index;
+            this.navigationService.isInnerNavigationActivated = true;
+            this.navigationService.isFilterExpressionComponentFocused = true;
+            const wrapperElement = this.navigationService.flattenFilterItems[this.itemNumber].focusableChildren[index];
+            elementToFocus = wrapperElement.querySelector(selectors.kendoDropDownListComponent) ||
+                wrapperElement.querySelector(selectors.kendoInput) ||
+                wrapperElement.querySelector(selectors.kendoInputInner) ||
+                wrapperElement.querySelector(selectors.inputElement) ||
+                wrapperElement.querySelector(selectors.textAreaElement);
+        }
+        else {
+            this.navigationService.currentToolbarItemChildrenIndex = 0;
+            this.navigationService.isInnerNavigationActivated = false;
+            this.navigationService.isFilterExpressionComponentFocused = false;
+            elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement;
+        }
+        this.navigationService.currentToolbarItemIndex = this.itemNumber;
+        this.navigationService.focusCurrentElement(elementToFocus, true);
+    }
+}
+BaseFilterRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseFilterRowComponent, deps: [{ token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+BaseFilterRowComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: BaseFilterRowComponent, inputs: { index: "index" }, outputs: { valueChange: "valueChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BaseFilterRowComponent, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /**
  * @hidden
  */
@@ -291,13 +549,13 @@ class AriaLabelValueDirective {
         this.hostElement = hostElement;
         this.renderer = renderer;
     }
-    ngOnChanges() {
+    ngOnInit() {
         const target = this.hostElement.nativeElement.querySelector('input') || this.hostElement.nativeElement;
         this.renderer.setAttribute(target, 'aria-label', this.ariaLabel);
     }
 }
 AriaLabelValueDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AriaLabelValueDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-AriaLabelValueDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: { ariaLabel: ["kendoAriaLabelValue", "ariaLabel"] }, usesOnChanges: true, ngImport: i0 });
+AriaLabelValueDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: { ariaLabel: ["kendoAriaLabelValue", "ariaLabel"] }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AriaLabelValueDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[kendoAriaLabelValue]' }]
@@ -328,6 +586,7 @@ class FilterExpressionOperatorsComponent {
 FilterExpressionOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionOperatorsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 FilterExpressionOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: { currentItem: "currentItem", editorType: "editorType", operators: "operators" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
         <kendo-dropdownlist
+            [tabindex]="-1"
             [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
             [data]="operators"
             [title]="messageFor('filterExpressionOperators')"
@@ -351,6 +610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: "kendo-filter-expression-operators",
                     template: `
         <kendo-dropdownlist
+            [tabindex]="-1"
             [kendoAriaLabelValue]="messageFor('filterOperatorAriaLabel')"
             [data]="operators"
             [title]="messageFor('filterExpressionOperators')"
@@ -390,13 +650,18 @@ class FilterTextEditorComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    onValueChange(value) {
+        this.currentItem.value = value;
+        this.valueChange.emit();
+    }
 }
 FilterTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterTextEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 FilterTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: { currentItem: "currentItem", isDisabled: "isDisabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
         <kendo-textbox
+            [tabindex]="-1"
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-            [(value)]="currentItem.value"
-            (valueChange)="valueChange.emit()"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
             [disabled]="isDisabled">
         </kendo-textbox>
   `, isInline: true, components: [{ type: i2$1.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
@@ -406,9 +671,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-filter-text-editor',
                     template: `
         <kendo-textbox
+            [tabindex]="-1"
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-            [(value)]="currentItem.value"
-            (valueChange)="valueChange.emit()"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
             [disabled]="isDisabled">
         </kendo-textbox>
   `
@@ -432,13 +698,18 @@ class FilterNumericEditorComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    onValueChange(value) {
+        this.currentItem.value = value;
+        this.valueChange.emit();
+    }
 }
 FilterNumericEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterNumericEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 FilterNumericEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: { currentItem: "currentItem", isDisabled: "isDisabled", format: "format" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
         <kendo-numerictextbox
+            [tabindex]="-1"
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-            [(value)]="currentItem.value"
-            (valueChange)="valueChange.emit()"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
             [disabled]="isDisabled"
             [format]="format">
             <kendo-numerictextbox-messages
@@ -453,9 +724,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-filter-numeric-editor',
                     template: `
         <kendo-numerictextbox
+            [tabindex]="-1"
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-            [(value)]="currentItem.value"
-            (valueChange)="valueChange.emit()"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
             [disabled]="isDisabled"
             [format]="format">
             <kendo-numerictextbox-messages
@@ -510,13 +782,18 @@ class FilterBooleanEditorComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    onValueChange(value) {
+        this.currentItem.value = value;
+        this.valueChange.emit();
+    }
 }
 FilterBooleanEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterBooleanEditorComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 FilterBooleanEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: { currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
     <kendo-dropdownlist
+        [tabindex]="-1"
         [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-        [(value)]="currentItem.value"
-        (valueChange)="valueChange.emit()"
+        [value]="currentItem.value"
+        (valueChange)="onValueChange($event)"
         [data]="items"
         [defaultItem]="defaultItem"
         [valuePrimitive]="true"
@@ -531,9 +808,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-filter-boolean-editor',
                     template: `
     <kendo-dropdownlist
+        [tabindex]="-1"
         [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-        [(value)]="currentItem.value"
-        (valueChange)="valueChange.emit()"
+        [value]="currentItem.value"
+        (valueChange)="onValueChange($event)"
         [data]="items"
         [defaultItem]="defaultItem"
         [valuePrimitive]="true"
@@ -560,13 +838,18 @@ class FilterDateEditorComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    onValueChange(value) {
+        this.currentItem.value = value;
+        this.valueChange.emit();
+    }
 }
 FilterDateEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterDateEditorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 FilterDateEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: { currentItem: "currentItem", isDisabled: "isDisabled", format: "format" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
         <kendo-datepicker
+            [tabindex]="-1"
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-            [(value)]="currentItem.value"
-            (valueChange)="valueChange.emit()"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
             [disabled]="isDisabled"
             [format]="format">
             <kendo-datepicker-messages
@@ -581,9 +864,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-filter-date-editor',
                     template: `
         <kendo-datepicker
+            [tabindex]="-1"
             [kendoAriaLabelValue]="messageFor('filterValueAriaLabel')"
-            [(value)]="currentItem.value"
-            (valueChange)="valueChange.emit()"
+            [value]="currentItem.value"
+            (valueChange)="onValueChange($event)"
             [disabled]="isDisabled"
             [format]="format">
             <kendo-datepicker-messages
@@ -606,12 +890,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 /**
  * @hidden
  */
-class FilterExpressionComponent {
-    constructor(filterService, localization, cdr) {
+class FilterExpressionComponent extends BaseFilterRowComponent {
+    constructor(filterService, cdr, element, navigationService, localization, renderer) {
+        super(element, navigationService, localization, renderer);
         this.filterService = filterService;
-        this.localization = localization;
         this.cdr = cdr;
-        this.valueChange = new EventEmitter();
         this.operators = [];
         this.filters = [];
         this.isBoolean = false;
@@ -621,19 +904,21 @@ class FilterExpressionComponent {
         return this.getFilterExpressionByField(this.currentItem.field);
     }
     get numericEditorFormat() {
-        if (this.editorFormat && !this.isNumberFormat(this.editorFormat)) {
-            console.warn(`The provided value for the numeric editor of the '${this.currentFilterExpression.title}' filter expression isn't one of a supported type string or NumberFormat. See http://www.telerik.com/kendo-angular-ui/components/filter/#editor-formats/`);
+        const isSupportedFormat = typeof this.editorFormat !== 'string' && !this.isNumberFormat(this.editorFormat);
+        if (this.editorFormat && isSupportedFormat) {
+            console.warn(FilterErrorMessages.improperNumericEditorValue(this.currentFilterExpression.title));
         }
         return this.editorFormat;
     }
     get dateEditorFormat() {
-        if (this.editorFormat && !this.isDateFormat(this.editorFormat)) {
-            console.warn(`The provided value for the date editor of the '${this.currentFilterExpression.title}' filter expression isn't one of a supported type string or DateFormat. See http://www.telerik.com/kendo-angular-ui/components/filter/#editor-formats/`);
+        const isSupportedFormat = typeof this.editorFormat !== 'string' && !this.isDateFormat(this.editorFormat);
+        if (this.editorFormat && isSupportedFormat) {
+            console.warn(FilterErrorMessages.improperDateEditorValue(this.currentFilterExpression.title));
         }
         return this.editorFormat;
     }
     isNumberFormat(obj) {
-        if (isDevMode() && obj && typeof this.editorFormat !== 'string' &&
+        if (isDevMode() && obj &&
             (obj['currency'] ||
                 obj['currencyDisplay'] ||
                 obj['maximumFractionDigits'] ||
@@ -647,7 +932,7 @@ class FilterExpressionComponent {
         }
     }
     isDateFormat(obj) {
-        if (isDevMode() && obj && typeof this.editorFormat !== 'string' && obj['displayFormat'] && obj['inputFormat']) {
+        if (isDevMode() && obj && obj['displayFormat'] && obj['inputFormat']) {
             return true;
         }
         else {
@@ -692,9 +977,6 @@ class FilterExpressionComponent {
         }
         return result;
     }
-    messageFor(key) {
-        return this.localization.get(key);
-    }
     getFilterExpressionByField(name) {
         const foundFilter = this.filterService.filters.find(filter => filter.field === name);
         if (foundFilter) {
@@ -703,11 +985,14 @@ class FilterExpressionComponent {
         return null;
     }
     filterValueChange(value) {
+        this.navigationService.currentToolbarItemIndex = this.itemNumber;
+        this.navigationService.currentToolbarItemChildrenIndex = 0;
         this.currentItem.value = null;
         this.currentItem.field = value;
         this.setEditorTemplate();
         const foundFilter = this.getFilterExpressionByField(this.currentItem.field);
         this.setOperators(foundFilter);
+        this.editorFormat = foundFilter.editorFormat;
         this.valueChange.emit();
     }
     getDefaultOperators(operatorsType) {
@@ -728,7 +1013,7 @@ class FilterExpressionComponent {
     }
     removeFilterExpression() {
         this.filterService.remove(this.currentItem, this.index);
-        this.valueChange.emit();
+        this.valueChange.emit(true);
     }
     setOperators(filter) {
         this.isBoolean = filter.editor === 'boolean';
@@ -751,8 +1036,10 @@ class FilterExpressionComponent {
         }
     }
     onOperatorChange(value) {
+        this.navigationService.currentToolbarItemIndex = this.itemNumber;
+        this.navigationService.currentToolbarItemChildrenIndex = 1;
         this.valueChange.emit();
-        if (nullOperators.indexOf(value) >= 0) {
+        if (nullOperators.includes(value)) {
             this.currentItem.value = null;
             this.isEditorDisabled = true;
         }
@@ -765,12 +1052,16 @@ class FilterExpressionComponent {
         this.editorTemplate = filterExpression.editorTemplate ? filterExpression.editorTemplate : null;
     }
 }
-FilterExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: FilterService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: { index: "index", currentItem: "currentItem" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
-        <div class="k-filter-toolbar" role="group" [attr.aria-label]="messageFor('filterAriaLabel')">
-            <div class="k-toolbar">
-                <div class="k-filter-toolbar-item k-filter-field">
+FilterExpressionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionComponent, deps: [{ token: FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NavigationService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: { currentItem: "currentItem" }, providers: [{
+            provide: FilterItem,
+            useExisting: forwardRef(() => FilterExpressionComponent)
+        }], 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 k-filter-field k-toolbar-item" >
                     <kendo-dropdownlist
+                        [tabindex]="-1"
                         [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
                         [title]="messageFor('filterExpressionFilters')"
                         [data]="filters"
@@ -781,7 +1072,7 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                         (valueChange)="filterValueChange($event)">
                     </kendo-dropdownlist>
                 </div>
-                <div *ngIf="!isBoolean" class="k-filter-toolbar-item k-filter-operator">
+                <div *ngIf="!isBoolean" class="k-filter-toolbar-item k-filter-operator k-toolbar-item" >
                     <kendo-filter-expression-operators
                         [currentItem]="currentItem"
                         [operators]="operators"
@@ -790,7 +1081,7 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     </kendo-filter-expression-operators>
                 </div>
 
-                <div class="k-filter-toolbar-item k-filter-value">
+                <div class="k-filter-toolbar-item k-filter-value k-toolbar-item">
                     <ng-container *ngIf="!editorTemplate" [ngSwitch]="getEditorType()">
                         <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
                         <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
@@ -804,9 +1095,10 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     </ng-container>
                 </div>
 
-                <div class="k-filter-toolbar-item">
+                <div class="k-filter-toolbar-item k-toolbar-item" >
                     <button
                         kendoButton
+                        tabindex="-1"
                         icon="x"
                         fillMode="flat"
                         [title]="messageFor('remove')"
@@ -815,16 +1107,21 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 </div>
             </div>
         </div>
-  `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators"], outputs: ["valueChange"] }, { type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i11.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i11.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"] }] });
+  `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators"], outputs: ["valueChange"] }, { type: FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { type: FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { type: FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }], directives: [{ type: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i11.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i12.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterExpressionComponent, decorators: [{
             type: Component,
             args: [{
+                    providers: [{
+                            provide: FilterItem,
+                            useExisting: forwardRef(() => FilterExpressionComponent)
+                        }],
                     selector: 'kendo-filter-expression',
                     template: `
-        <div class="k-filter-toolbar" role="group" [attr.aria-label]="messageFor('filterAriaLabel')">
-            <div class="k-toolbar">
-                <div class="k-filter-toolbar-item k-filter-field">
+        <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 k-filter-field k-toolbar-item" >
                     <kendo-dropdownlist
+                        [tabindex]="-1"
                         [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
                         [title]="messageFor('filterExpressionFilters')"
                         [data]="filters"
@@ -835,7 +1132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         (valueChange)="filterValueChange($event)">
                     </kendo-dropdownlist>
                 </div>
-                <div *ngIf="!isBoolean" class="k-filter-toolbar-item k-filter-operator">
+                <div *ngIf="!isBoolean" class="k-filter-toolbar-item k-filter-operator k-toolbar-item" >
                     <kendo-filter-expression-operators
                         [currentItem]="currentItem"
                         [operators]="operators"
@@ -844,7 +1141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     </kendo-filter-expression-operators>
                 </div>
 
-                <div class="k-filter-toolbar-item k-filter-value">
+                <div class="k-filter-toolbar-item k-filter-value k-toolbar-item">
                     <ng-container *ngIf="!editorTemplate" [ngSwitch]="getEditorType()">
                         <kendo-filter-text-editor *ngSwitchCase="'string'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" (valueChange)="valueChange.emit()"></kendo-filter-text-editor>
                         <kendo-filter-numeric-editor *ngSwitchCase="'number'" [currentItem]="currentItem" [isDisabled]="isEditorDisabled" [format]="numericEditorFormat" (valueChange)="valueChange.emit()"></kendo-filter-numeric-editor>
@@ -858,9 +1155,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     </ng-container>
                 </div>
 
-                <div class="k-filter-toolbar-item">
+                <div class="k-filter-toolbar-item k-toolbar-item" >
                     <button
                         kendoButton
+                        tabindex="-1"
                         icon="x"
                         fillMode="flat"
                         [title]="messageFor('remove')"
@@ -871,30 +1169,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { index: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { currentItem: [{
                 type: Input
-            }], currentItem: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 /**
  * @hidden
  */
-class FilterGroupComponent {
-    constructor(filterService, localization, cdr) {
+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(() => {
@@ -910,9 +1205,6 @@ class FilterGroupComponent {
     getLogicOperators() {
         return localizeOperators(logicOperators)(this.localization);
     }
-    messageFor(key) {
-        return this.localization.get(key);
-    }
     getOperator(operatorValue) {
         return this.messageFor(getKeyByValue(logicOperators, operatorValue));
     }
@@ -932,16 +1224,44 @@ 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: FilterService }, { token: i1.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: FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NavigationService }, { token: i1.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'}"
@@ -956,6 +1276,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()">
@@ -965,6 +1286,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()">
@@ -974,6 +1296,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')"
@@ -983,15 +1306,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"
                 >
@@ -999,17 +1322,22 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
           </li>
         </ng-container>
       </ul>
-  `, isInline: true, components: [{ type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["index", "currentItem"], outputs: ["valueChange"] }, { type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.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: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: FilterExpressionComponent, selector: "kendo-filter-expression", inputs: ["currentItem"] }, { type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }], directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.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: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.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'}"
@@ -1024,6 +1352,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()">
@@ -1033,6 +1362,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()">
@@ -1042,6 +1372,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')"
@@ -1051,15 +1382,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"
                 >
@@ -1069,12 +1400,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
       </ul>
   `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { index: [{
-                type: Input
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NavigationService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { _filterItems: [{
+                type: ViewChildren,
+                args: [FilterItem]
             }], currentItem: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 /**
@@ -1083,7 +1413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 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: [{
@@ -1159,10 +1489,10 @@ 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
             }] } });
 
 /**
@@ -1227,10 +1557,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * ```
  */
 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.
@@ -1240,6 +1573,31 @@ 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.
      */
@@ -1271,13 +1629,19 @@ 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;
@@ -1285,7 +1649,13 @@ 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() {
@@ -1302,22 +1672,35 @@ 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';
@@ -1350,16 +1733,23 @@ 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: FilterService }, { token: i1.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: FilterService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 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"
@@ -1466,25 +1856,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: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["index", "currentItem"], outputs: ["valueChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
+    `, isInline: true, components: [{ type: FilterGroupComponent, selector: "kendo-filter-group", inputs: ["currentItem"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoFilterLocalizedMessages]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -1494,7 +1884,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: `
@@ -1604,19 +1995,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>
@@ -1624,7 +2015,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { direction: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NavigationService }, { type: i0.Renderer2 }]; }, propDecorators: { focusout: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
             }], filters: [{
@@ -1636,6 +2033,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], filterFields: [{
                 type: ContentChildren,
                 args: [FilterFieldComponent]
+            }], _filterItems: [{
+                type: ViewChildren,
+                args: [FilterItem]
             }] } });
 
 /**
@@ -1801,7 +2201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         CustomMessagesComponent,
                         AriaLabelValueDirective,
                         FilterFieldComponent,
-                        FilterValueEditorTemplateDirective]
+                        FilterValueEditorTemplateDirective
+                    ]
                 }]
         }] });