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

package/esm2015/editors/boolean-editor.component.js

@@ -42,13 +42,18 @@ export 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"
@@ -63,9 +68,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"

package/esm2015/editors/date-editor.component.js

@@ -18,13 +18,18 @@ export 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
@@ -39,9 +44,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

package/esm2015/editors/numeric-editor.component.js

@@ -18,13 +18,18 @@ export 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
@@ -39,9 +44,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

package/esm2015/editors/text-editor.component.js

@@ -18,13 +18,18 @@ export 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.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: i3.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
@@ -34,9 +39,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>
   `

package/esm2015/error-messages.js

@@ -0,0 +1,16 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export 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/`
+};

package/esm2015/filter-expression-operators.component.js

@@ -30,6 +30,7 @@ export 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')"
@@ -53,6 +54,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')"

package/esm2015/filter-expression.component.js

@@ -2,29 +2,31 @@
 * 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, isDevMode, Output } from '@angular/core';
-import { defaultDateOperators, defaultNumericOperators, defaultOperators, defaultStringOperators, getKeyByValue, isFilterEditor, localizeOperators, nullOperators } from './util';
+import { Component, forwardRef, Input, isDevMode } from '@angular/core';
+import { BaseFilterRowComponent } from './base-filter-row.component';
+import { FilterErrorMessages } from './error-messages';
+import { defaultDateOperators, defaultNumericOperators, defaultOperators, defaultStringOperators, FilterItem, getKeyByValue, isFilterEditor, localizeOperators, nullOperators } 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 "@progress/kendo-angular-dropdowns";
-import * as i4 from "./filter-expression-operators.component";
-import * as i5 from "./editors/text-editor.component";
-import * as i6 from "./editors/numeric-editor.component";
-import * as i7 from "./editors/boolean-editor.component";
-import * as i8 from "./editors/date-editor.component";
-import * as i9 from "./aria-label.directive";
-import * as i10 from "@angular/common";
-import * as i11 from "@progress/kendo-angular-buttons";
+import * as i2 from "./navigation.service";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "@progress/kendo-angular-dropdowns";
+import * as i5 from "./filter-expression-operators.component";
+import * as i6 from "./editors/text-editor.component";
+import * as i7 from "./editors/numeric-editor.component";
+import * as i8 from "./editors/boolean-editor.component";
+import * as i9 from "./editors/date-editor.component";
+import * as i10 from "./aria-label.directive";
+import * as i11 from "@angular/common";
+import * as i12 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  */
-export class FilterExpressionComponent {
-    constructor(filterService, localization, cdr) {
+export 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;
@@ -34,19 +36,21 @@ export 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'] ||
@@ -60,7 +64,7 @@ export 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 {
@@ -105,9 +109,6 @@ export 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) {
@@ -116,11 +117,14 @@ export 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) {
@@ -141,7 +145,7 @@ export class FilterExpressionComponent {
     }
     removeFilterExpression() {
         this.filterService.remove(this.currentItem, this.index);
-        this.valueChange.emit();
+        this.valueChange.emit(true);
     }
     setOperators(filter) {
         this.isBoolean = filter.editor === 'boolean';
@@ -164,8 +168,10 @@ export 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;
         }
@@ -178,12 +184,16 @@ export 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: i1.FilterService }, { token: i2.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: i1.FilterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.NavigationService }, { token: i3.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"
@@ -194,7 +204,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"
@@ -203,7 +213,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>
@@ -217,9 +227,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')"
@@ -228,16 +239,21 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 </div>
             </div>
         </div>
-  `, isInline: true, components: [{ type: i3.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: i4.FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators"], outputs: ["valueChange"] }, { type: i5.FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { type: i6.FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { type: i7.FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: i8.FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }], directives: [{ type: i9.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: i4.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: i5.FilterExpressionOperatorsComponent, selector: "kendo-filter-expression-operators", inputs: ["currentItem", "editorType", "operators"], outputs: ["valueChange"] }, { type: i6.FilterTextEditorComponent, selector: "kendo-filter-text-editor", inputs: ["currentItem", "isDisabled"], outputs: ["valueChange"] }, { type: i7.FilterNumericEditorComponent, selector: "kendo-filter-numeric-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }, { type: i8.FilterBooleanEditorComponent, selector: "kendo-filter-boolean-editor", inputs: ["currentItem"], outputs: ["valueChange"] }, { type: i9.FilterDateEditorComponent, selector: "kendo-filter-date-editor", inputs: ["currentItem", "isDisabled", "format"], outputs: ["valueChange"] }], directives: [{ type: i10.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"
@@ -248,7 +264,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"
@@ -257,7 +273,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>
@@ -271,9 +287,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')"
@@ -284,10 +301,6 @@ 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: { index: [{
-                type: Input
-            }], currentItem: [{
+        }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.NavigationService }, { type: i3.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { currentItem: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });