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

package/fesm2015/progress-kendo-angular-filter.mjs

@@ -224,7 +224,8 @@ const selectors = {
     textAreaElement: `textarea`,
     kendoToolbar: `.k-toolbar`,
     kendoButton: `.k-button`,
-    kendoFilterToolbarItem: `.k-filter-toolbar-item`
+    kendoFilterToolbarItem: `.k-toolbar-item`,
+    kendoFilterToolbarButton: `.k-toolbar-button`
 };
 
 /**
@@ -234,8 +235,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1692286589,
-    version: '13.4.0-develop.1',
+    publishDate: 1692370799,
+    version: '13.4.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -327,38 +328,32 @@ 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 &&
@@ -377,17 +372,9 @@ 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);
                 }
@@ -501,13 +488,6 @@ 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);
     }
@@ -531,7 +511,7 @@ 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);
@@ -610,7 +590,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: 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: 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: [{
@@ -808,7 +788,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: 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: AriaLabelValueDirective, selector: "[kendoAriaLabelValue]", inputs: ["kendoAriaLabelValue"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterBooleanEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -1072,8 +1052,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')"
@@ -1086,7 +1066,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"
@@ -1095,7 +1075,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>
@@ -1109,20 +1089,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: 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"] }, { 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"] }, { 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: 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: 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"] }, { 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"] }, { 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: 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: [{
@@ -1133,8 +1112,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')"
@@ -1147,7 +1126,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"
@@ -1156,7 +1135,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>
@@ -1170,17 +1149,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>
   `
@@ -1256,24 +1234,18 @@ 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);
@@ -1285,26 +1257,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"
@@ -1312,10 +1284,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"
@@ -1323,10 +1295,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"
@@ -1334,7 +1306,6 @@ FilterGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 [title]="messageFor('remove')"
                 (click)="removeFilterGroup()">
             </button>
-          </div>
         </div>
       </div>
 
@@ -1365,26 +1336,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"
@@ -1392,10 +1363,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"
@@ -1403,10 +1374,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"
@@ -1414,7 +1385,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [title]="messageFor('remove')"
                 (click)="removeFilterGroup()">
             </button>
-          </div>
         </div>
       </div>
 
@@ -1616,7 +1586,7 @@ 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;
@@ -1689,7 +1659,7 @@ 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');
         }
@@ -1716,9 +1686,10 @@ 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();
@@ -1900,7 +1871,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
@@ -2039,7 +2010,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