@progress/kendo-angular-filter 13.4.0-develop.1 → 13.4.0-develop.10

package/base-filter-row.component.d.ts

@@ -19,8 +19,6 @@ export declare abstract class BaseFilterRowComponent {
     constructor(element: ElementRef, navigationService: NavigationService, localization: LocalizationService, renderer: Renderer2);
     itemNumber: number;
     get toolbarElement(): HTMLElement;
-    onFocus(): void;
-    onBlur(): void;
     messageFor(key: string): string;
     onMouseDown(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseFilterRowComponent, never>;

package/esm2020/base-filter-row.component.mjs

@@ -23,13 +23,6 @@ export class BaseFilterRowComponent {
     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);
     }
@@ -53,7 +46,7 @@ export class BaseFilterRowComponent {
             this.navigationService.currentToolbarItemChildrenIndex = 0;
             this.navigationService.isInnerNavigationActivated = false;
             this.navigationService.isFilterExpressionComponentFocused = false;
-            elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement;
+            elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].focusableChildren[0];
         }
         this.navigationService.currentToolbarItemIndex = this.itemNumber;
         this.navigationService.focusCurrentElement(elementToFocus, true);

package/esm2020/editors/boolean-editor.component.mjs

@@ -62,7 +62,7 @@ FilterBooleanEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         valueField="value"
         >
     </kendo-dropdownlist>
-  `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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"] }], directives: [{ type: i3.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
+  `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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"] }], directives: [{ type: i3.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterBooleanEditorComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filter-expression-operators.component.mjs

@@ -48,7 +48,7 @@ FilterExpressionOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
                 <span>{{ getOperator(dataItem.value) }}</span>
             </ng-template>
         </kendo-dropdownlist>
-    `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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"] }], directives: [{ type: i3.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i2.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { type: i2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }] });
+    `, isInline: true, components: [{ type: i2.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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"] }], directives: [{ type: i3.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i2.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { type: i2.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterExpressionOperatorsComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filter-expression.component.mjs

@@ -201,8 +201,8 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             useExisting: forwardRef(() => FilterExpressionComponent)
         }], usesInheritance: true, ngImport: i0, template: `
         <div class="k-filter-toolbar">
-            <div class="k-toolbar k-toolbar-md" 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" >
+            <div class="k-toolbar k-toolbar-md" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
+                <div class="k-filter-field k-toolbar-item" >
                     <kendo-dropdownlist
                         [tabindex]="-1"
                         [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
@@ -215,7 +215,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 k-toolbar-item" >
+                <div *ngIf="!isBoolean" class="k-filter-operator k-toolbar-item" >
                     <kendo-filter-expression-operators
                         [currentItem]="currentItem"
                         [operators]="operators"
@@ -224,7 +224,7 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     </kendo-filter-expression-operators>
                 </div>
 
-                <div class="k-filter-toolbar-item k-filter-value k-toolbar-item">
+                <div class="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>
@@ -238,20 +238,19 @@ FilterExpressionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     </ng-container>
                 </div>
 
-                <div class="k-filter-toolbar-item k-toolbar-item" >
-                    <button
-                        kendoButton
-                        tabindex="-1"
-                        icon="x"
-                        [svgIcon]="xIcon"
-                        fillMode="flat"
-                        [title]="messageFor('remove')"
-                        (click)="removeFilterExpression()">
-                    </button>
-                </div>
+                <button
+                    kendoButton
+                    class="k-toolbar-button"
+                    tabindex="-1"
+                    icon="x"
+                    [svgIcon]="xIcon"
+                    fillMode="flat"
+                    [title]="messageFor('remove')"
+                    (click)="removeFilterExpression()">
+                </button>
             </div>
         </div>
-  `, isInline: true, components: [{ type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i11.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i12.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "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"] }, { type: i10.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i11.AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i12.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterExpressionComponent, decorators: [{
             type: Component,
             args: [{
@@ -262,8 +261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-expression',
                     template: `
         <div class="k-filter-toolbar">
-            <div class="k-toolbar k-toolbar-md" 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" >
+            <div class="k-toolbar k-toolbar-md" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
+                <div class="k-filter-field k-toolbar-item" >
                     <kendo-dropdownlist
                         [tabindex]="-1"
                         [kendoAriaLabelValue]="messageFor('filterFieldAriaLabel')"
@@ -276,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         (valueChange)="filterValueChange($event)">
                     </kendo-dropdownlist>
                 </div>
-                <div *ngIf="!isBoolean" class="k-filter-toolbar-item k-filter-operator k-toolbar-item" >
+                <div *ngIf="!isBoolean" class="k-filter-operator k-toolbar-item" >
                     <kendo-filter-expression-operators
                         [currentItem]="currentItem"
                         [operators]="operators"
@@ -285,7 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </kendo-filter-expression-operators>
                 </div>
 
-                <div class="k-filter-toolbar-item k-filter-value k-toolbar-item">
+                <div class="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>
@@ -299,17 +298,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     </ng-container>
                 </div>
 
-                <div class="k-filter-toolbar-item k-toolbar-item" >
-                    <button
-                        kendoButton
-                        tabindex="-1"
-                        icon="x"
-                        [svgIcon]="xIcon"
-                        fillMode="flat"
-                        [title]="messageFor('remove')"
-                        (click)="removeFilterExpression()">
-                    </button>
-                </div>
+                <button
+                    kendoButton
+                    class="k-toolbar-button"
+                    tabindex="-1"
+                    icon="x"
+                    [svgIcon]="xIcon"
+                    fillMode="flat"
+                    [title]="messageFor('remove')"
+                    (click)="removeFilterExpression()">
+                </button>
             </div>
         </div>
   `

package/esm2020/filter-group.component.mjs

@@ -83,24 +83,18 @@ export class FilterGroupComponent extends BaseFilterRowComponent {
         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];
+        const toolbarItemElement = Array.from(event.target.closest(selectors.kendoToolbar).children).indexOf(event.target.closest(selectors.kendoFilterToolbarItem));
+        const buttonElement = Array.from(event.target.closest(selectors.kendoToolbar).children).indexOf(event.target.closest(selectors.kendoFilterToolbarButton));
+        let index = (toolbarItemElement > -1 ? toolbarItemElement : buttonElement) + 1;
+        if (event.target.closest(selectors.andButton)) {
+            index = 0;
         }
-        else {
-            this.navigationService.currentToolbarItemChildrenIndex = 0;
-            this.navigationService.isInnerNavigationActivated = false;
-            elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].toolbarElement;
+        if (event.target.closest(selectors.orButton)) {
+            index = 1;
         }
+        this.navigationService.currentToolbarItemChildrenIndex = index;
+        this.navigationService.isInnerNavigationActivated = true;
+        const elementToFocus = this.navigationService.flattenFilterItems[this.itemNumber].focusableChildren[index];
         this.navigationService.isFilterExpressionComponentFocused = false;
         this.navigationService.currentToolbarItemIndex = this.itemNumber;
         this.navigationService.focusCurrentElement(elementToFocus, true);
@@ -112,26 +106,26 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => FilterGroupComponent)
         }], viewQueries: [{ propertyName: "_filterItems", predicate: FilterItem, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <div class="k-filter-toolbar">
-          <div class="k-toolbar k-toolbar-md" 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
+          <div class="k-toolbar k-toolbar-md" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
+            <div class="k-toolbar-button-group k-button-group k-button-group-solid" role="group">
+                <button
                     tabindex="-1"
                     *ngFor="let operator of operators"
                     kendoButton
+                    class="k-toolbar-button"
                     [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
                     [selected]="currentItem.logic === operator.value"
                     [attr.aria-pressed]="currentItem.logic === operator.value"
                     [title]="operator.text"
                     (click)="selectedChange(operator.value)"
-                    >
+                >
                     {{getOperator(operator.value)}}
-                  </button>
-              </div>
+                </button>
             </div>
-          <div class="k-filter-toolbar-item">
+            
             <button
                 kendoButton
+                class="k-toolbar-button"
                 tabindex="-1"
                 [title]="messageFor('addFilter')"
                 icon="filter-add-expression"
@@ -139,10 +133,10 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 (click)="addFilterExpression()">
                 {{messageFor('addFilter')}}
             </button>
-          </div>
-          <div class="k-filter-toolbar-item">
+          
             <button
                 kendoButton
+                class="k-toolbar-button"
                 tabindex="-1"
                 [title]="messageFor('addGroup')"
                 icon="filter-add-group"
@@ -150,10 +144,10 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 (click)="addFilterGroup()">
                 {{messageFor('addGroup')}}
             </button>
-          </div>
-          <div class="k-filter-toolbar-item">
+
             <button
                 kendoButton
+                class="k-toolbar-button"
                 tabindex="-1"
                 icon="x"
                 [svgIcon]="xIcon"
@@ -161,7 +155,6 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [title]="messageFor('remove')"
                 (click)="removeFilterGroup()">
             </button>
-          </div>
         </div>
       </div>
 
@@ -192,26 +185,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-filter-group',
                     template: `
         <div class="k-filter-toolbar">
-          <div class="k-toolbar k-toolbar-md" 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
+          <div class="k-toolbar k-toolbar-md" role="toolbar" [attr.aria-label]="messageFor('filterToolbarAriaLabel')" (mousedown)="onMouseDown($event)">
+            <div class="k-toolbar-button-group k-button-group k-button-group-solid" role="group">
+                <button
                     tabindex="-1"
                     *ngFor="let operator of operators"
                     kendoButton
+                    class="k-toolbar-button"
                     [ngClass]="{'k-group-start': operator.value === 'and', 'k-group-end': operator.value === 'or'}"
                     [selected]="currentItem.logic === operator.value"
                     [attr.aria-pressed]="currentItem.logic === operator.value"
                     [title]="operator.text"
                     (click)="selectedChange(operator.value)"
-                    >
+                >
                     {{getOperator(operator.value)}}
-                  </button>
-              </div>
+                </button>
             </div>
-          <div class="k-filter-toolbar-item">
+            
             <button
                 kendoButton
+                class="k-toolbar-button"
                 tabindex="-1"
                 [title]="messageFor('addFilter')"
                 icon="filter-add-expression"
@@ -219,10 +212,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 (click)="addFilterExpression()">
                 {{messageFor('addFilter')}}
             </button>
-          </div>
-          <div class="k-filter-toolbar-item">
+          
             <button
                 kendoButton
+                class="k-toolbar-button"
                 tabindex="-1"
                 [title]="messageFor('addGroup')"
                 icon="filter-add-group"
@@ -230,10 +223,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 (click)="addFilterGroup()">
                 {{messageFor('addGroup')}}
             </button>
-          </div>
-          <div class="k-filter-toolbar-item">
+
             <button
                 kendoButton
+                class="k-toolbar-button"
                 tabindex="-1"
                 icon="x"
                 [svgIcon]="xIcon"
@@ -241,7 +234,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [title]="messageFor('remove')"
                 (click)="removeFilterGroup()">
             </button>
-          </div>
         </div>
       </div>
 

package/esm2020/filter.component.mjs

@@ -76,7 +76,7 @@ export class FilterComponent {
         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.navigationService.currentlyFocusedElement = this.navigationService.flattenFilterItems[this.navigationService.currentToolbarItemIndex].focusableChildren[0];
                 this.renderer.setAttribute(this.navigationService.currentlyFocusedElement, 'tabindex', '0');
                 this.navigationService.isInnerNavigationActivated = false;
                 this.navigationService.isFilterExpressionComponentFocused = false;
@@ -150,7 +150,7 @@ export class FilterComponent {
         }
         this.navigationService.reset(this.filterItems);
         if (!this.navigationService.currentlyFocusedElement) {
-            const firstElement = this.navigationService.flattenFilterItems[0].toolbarElement;
+            const firstElement = this.navigationService.flattenFilterItems[0].focusableChildren[0];
             this.navigationService.currentlyFocusedElement = firstElement;
             this.renderer.setAttribute(firstElement, 'tabindex', '0');
         }
@@ -177,9 +177,10 @@ export class FilterComponent {
             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;
+            const itemIndex = this.navigationService.currentToolbarItemIndex;
+            const activeChildIndex = this.navigationService.currentToolbarItemChildrenIndex;
+            this.navigationService.currentlyFocusedElement = this.navigationService.flattenFilterItems[itemIndex].focusableChildren[activeChildIndex];
             this.renderer.setAttribute(this.navigationService.currentlyFocusedElement, 'tabindex', '0');
             this.renderer.addClass(this.navigationService.currentlyFocusedElement, 'k-focus');
             this.navigationService.currentlyFocusedElement.focus();
@@ -361,7 +362,7 @@ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             filterComponentAriaLabel="filter component"
             >
         </ng-container>
-        <div class="k-widget k-filter" [attr.dir]="direction">
+        <div class="k-filter" [attr.dir]="direction">
             <ul class='k-filter-container' role="tree" [attr.aria-label]="messageFor('filterComponentAriaLabel')">
                 <li class='k-filter-group-main' role="treeitem">
                     <kendo-filter-group
@@ -500,7 +501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             filterComponentAriaLabel="filter component"
             >
         </ng-container>
-        <div class="k-widget k-filter" [attr.dir]="direction">
+        <div class="k-filter" [attr.dir]="direction">
             <ul class='k-filter-container' role="tree" [attr.aria-label]="messageFor('filterComponentAriaLabel')">
                 <li class='k-filter-group-main' role="treeitem">
                     <kendo-filter-group

package/esm2020/navigation.service.mjs

@@ -17,38 +17,32 @@ export class NavigationService {
         this.flattenFilterItems = [];
         this.currentToolbarItemIndex = 0;
         this.currentToolbarItemChildrenIndex = 0;
-        this.isInnerNavigationActivated = false;
+        this.isInnerNavigationActivated = true;
         this.isFilterExpressionComponentFocused = false;
     }
     processKeyDown(key, event) {
         switch (key) {
             case Keys.ArrowUp: {
                 event.preventDefault();
-                if (!this.isInnerNavigationActivated) {
+                if (!this.isFilterExpressionComponentFocused) {
+                    this.currentToolbarItemChildrenIndex = 0;
                     this.currentToolbarItemIndex > 0 ? this.currentToolbarItemIndex-- : this.currentToolbarItemIndex;
-                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[0];
                     this.focusCurrentElement(elementToFocus);
                 }
                 break;
             }
             case Keys.ArrowDown: {
                 event.preventDefault();
-                if (!this.isInnerNavigationActivated) {
+                if (!this.isFilterExpressionComponentFocused) {
+                    this.currentToolbarItemChildrenIndex = 0;
                     this.currentToolbarItemIndex < this.flattenFilterItems.length - 1 ? this.currentToolbarItemIndex++ : this.currentToolbarItemIndex;
-                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[0];
                     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 &&
@@ -67,17 +61,9 @@ export class NavigationService {
                 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);
                 }

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1692286589,
-    version: '13.4.0-develop.1',
+    publishDate: 1692971963,
+    version: '13.4.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/util.mjs

@@ -169,5 +169,6 @@ export const selectors = {
     textAreaElement: `textarea`,
     kendoToolbar: `.k-toolbar`,
     kendoButton: `.k-button`,
-    kendoFilterToolbarItem: `.k-filter-toolbar-item`
+    kendoFilterToolbarItem: `.k-toolbar-item`,
+    kendoFilterToolbarButton: `.k-toolbar-button`
 };