@progress/kendo-angular-treelist 18.2.1-develop.2 → 18.3.0-develop.1

package/esm2022/filtering/cell/date-filter-cell.component.mjs

@@ -4,12 +4,13 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { DatePickerComponent } from '@progress/kendo-angular-dateinputs';
+import { DatePickerComponent, DatePickerCustomMessagesComponent } from '@progress/kendo-angular-dateinputs';
 import { FilterService } from '../filter.service';
 import { DateFilterComponent } from '../date-filter.component';
 import { replaceMessagePlaceholder } from '../../utils';
 import { FilterInputDirective } from '../filter-input.directive';
 import { FilterCellWrapperComponent } from './filter-cell-wrapper.component';
+import { FocusableDirective } from '../../navigation/focusable.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -41,6 +42,12 @@ export class DateFilterCellComponent extends DateFilterComponent {
         super(filterService, localization);
         this.localization = localization;
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -60,6 +67,7 @@ export class DateFilterCellComponent extends DateFilterComponent {
             >
             <kendo-datepicker
                 kendoFilterInput
+                kendoTreeListFocusable
                 [value]="currentFilter?.value"
                 [format]="format"
                 [columnLabel]="columnLabel"
@@ -72,9 +80,13 @@ export class DateFilterCellComponent extends DateFilterComponent {
                 [max]="max"
                 [weekNumber]="weekNumber"
                 >
+                <kendo-datepicker-messages
+                    [toggle]="messageFor('filterDateToggle')"
+                    [today]="messageFor('filterDateToday')"
+                ></kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterCellComponent, decorators: [{
             type: Component,
@@ -90,6 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             >
             <kendo-datepicker
                 kendoFilterInput
+                kendoTreeListFocusable
                 [value]="currentFilter?.value"
                 [format]="format"
                 [columnLabel]="columnLabel"
@@ -102,11 +115,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [max]="max"
                 [weekNumber]="weekNumber"
                 >
+                <kendo-datepicker-messages
+                    [toggle]="messageFor('filterDateToggle')"
+                    [today]="messageFor('filterDateToday')"
+                ></kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-treelist-filter-wrapper-cell>
     `,
                     standalone: true,
-                    imports: [FilterCellWrapperComponent, DatePickerComponent, FilterInputDirective]
+                    imports: [FilterCellWrapperComponent, DatePickerComponent, FilterInputDirective, FocusableDirective, DatePickerCustomMessagesComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }]; }, propDecorators: { showOperators: [{
                 type: Input

package/esm2022/filtering/cell/numeric-filter-cell.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
+import { NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent } from '@progress/kendo-angular-inputs';
 import { FilterService } from '../filter.service';
 import { NumericFilterComponent } from '../numeric-filter.component';
 import { replaceMessagePlaceholder } from '../../utils';
@@ -53,6 +53,12 @@ export class NumericFilterCellComponent extends NumericFilterComponent {
         super(filterService, localization);
         this.localization = localization;
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -83,9 +89,13 @@ export class NumericFilterCellComponent extends NumericFilterComponent {
                 [max]="max"
                 [step]="step"
                 [placeholder]="placeholder">
+                <kendo-numerictextbox-messages
+                    [increment]="messageFor('filterNumericIncrement')"
+                    [decrement]="messageFor('filterNumericDecrement')"
+                ></kendo-numerictextbox-messages>
             </kendo-numerictextbox>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "component", type: NumericTextBoxCustomMessagesComponent, selector: "kendo-numerictextbox-messages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericFilterCellComponent, decorators: [{
             type: Component,
@@ -112,11 +122,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [max]="max"
                 [step]="step"
                 [placeholder]="placeholder">
+                <kendo-numerictextbox-messages
+                    [increment]="messageFor('filterNumericIncrement')"
+                    [decrement]="messageFor('filterNumericDecrement')"
+                ></kendo-numerictextbox-messages>
             </kendo-numerictextbox>
         </kendo-treelist-filter-wrapper-cell>
     `,
                     standalone: true,
-                    imports: [FilterCellWrapperComponent, NumericTextBoxComponent, FocusableDirective, FilterInputDirective]
+                    imports: [FilterCellWrapperComponent, NumericTextBoxComponent, FocusableDirective, FilterInputDirective, NumericTextBoxCustomMessagesComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.LocalizationService }]; }, propDecorators: { filterDelay: [{
                 type: Input

package/esm2022/filtering/filter-row.component.mjs

@@ -39,7 +39,7 @@ export class FilterRowComponent {
             [column]="getColumnComponent(column)"
             [colIndex]="columnIndex"
       ></td>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilterCellComponent, selector: "[kendoTreeListFilterCell]", inputs: ["column", "filter"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FilterCellComponent, selector: "[kendoTreeListFilterCell]", inputs: ["column", "filter"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable", "headerLabelText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterRowComponent, decorators: [{
             type: Component,

package/esm2022/filtering/filter.service.mjs

@@ -2,14 +2,20 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Injectable } from '@angular/core';
+import { Injectable, Optional } from '@angular/core';
 import { Subject } from 'rxjs';
+import { MenuTabbingService } from './menu/menu-tabbing.service';
 import * as i0 from "@angular/core";
+import * as i1 from "./menu/menu-tabbing.service";
 /**
  * Represents a service to set the filter descriptor
  * ([see example]({% slug filter_menu_treelist %})).
  */
 export class FilterService {
+    /**
+         * @hidden
+         */
+    menuTabbingService;
     /**
      * Fires when the filter descriptors is set.
      */
@@ -22,9 +28,17 @@ export class FilterService {
     filter(value) {
         this.changes.next(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    /**
+     * @hidden
+     */
+    constructor(menuTabbingService) {
+        this.menuTabbingService = menuTabbingService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterService, deps: [{ token: i1.MenuTabbingService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.MenuTabbingService, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2022/filtering/menu/boolean-filter-menu.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, HostBinding, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { Component, Input, HostBinding, ViewChild, ElementRef, ViewChildren, QueryList } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { guid } from '@progress/kendo-angular-common';
 import { RadioButtonComponent } from '@progress/kendo-angular-inputs';
@@ -10,11 +10,10 @@ import { FilterService } from '../filter.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { BooleanFilterComponent } from '../boolean-filter.component';
 import { replaceMessagePlaceholder } from '../../utils';
-import { DomSanitizer } from '@angular/platform-browser';
 import { BooleanFilterRadioButtonDirective } from './filter-radio-button.directive';
+import { MenuTabbingService } from './menu-tabbing.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@angular/platform-browser";
 /**
  * Represents a Boolean-filter menu component. [See example](slug:filter_menu_treelist#toc-built-in-filter-menu-components).
  *
@@ -32,8 +31,6 @@ import * as i2 from "@angular/platform-browser";
  *   ```
  */
 export class BooleanFilterMenuComponent extends BooleanFilterComponent {
-    renderer;
-    domSanitizer;
     /**
      * @hidden
      */
@@ -50,11 +47,23 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
      * The `FilterService` instance which is responsible for handling the changes in the filter descriptor.
      */
     filterService;
+    /**
+     * @hidden
+     */
+    menuTabbingService;
     idPrefix = guid();
-    constructor(renderer, localization, domSanitizer) {
+    /**
+     * @hidden
+     */
+    radioButtons;
+    constructor(localization) {
         super(null, localization);
-        this.renderer = renderer;
-        this.domSanitizer = domSanitizer;
+    }
+    ngAfterViewInit() {
+        this.filterService.menuTabbingService.firstFocusable = this.radioButtons.first.radioButtonEl;
+        if (!this.menuTabbingService?.isTabbedInterface) {
+            this.radioButtons.first.radioButtonEl.focus();
+        }
     }
     /**
      * @hidden
@@ -65,12 +74,13 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
     /**
      * @hidden
      */
-    onChange(value) {
+    onChange(value, input) {
         this.applyFilter(this.updateFilter({
             field: this.column.field,
             operator: "eq",
             value: value
         }));
+        this.filterService.menuTabbingService.firstFocusable = input.hostElement.nativeElement;
     }
     /**
      * @hidden
@@ -78,6 +88,15 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
     isSelected(radioValue) {
         return this.filtersByField(this.column.field).some(({ value }) => value === radioValue);
     }
+    /**
+     * @hidden
+     */
+    onShiftTab(e) {
+        if (!this.menuTabbingService?.isColumnMenu && this.filterService.menuTabbingService.lastFocusable) {
+            e.preventDefault();
+            this.filterService.menuTabbingService.lastFocusable.focus();
+        }
+    }
     /**
      * @hidden
      */
@@ -86,8 +105,8 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterMenuComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BooleanFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "inputElem", first: true, predicate: ["inputElem"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BooleanFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, viewQueries: [{ propertyName: "inputElem", first: true, predicate: ["inputElem"], descendants: true }, { propertyName: "radioButtons", predicate: BooleanFilterRadioButtonDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ul class="k-radio-list k-reset">
             <li *ngFor="let item of items">
                 <kendo-radiobutton
@@ -97,7 +116,8 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
                     [name]="idPrefix"
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
-                    (checkedChange)="onChange(item.value)"
+                    (change)="onChange(item.value, inputElem)"
+                    (keydown.shift.tab)="onShiftTab($event)"
                 ></kendo-radiobutton>
                 <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
             </li>
@@ -118,7 +138,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [name]="idPrefix"
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
-                    (checkedChange)="onChange(item.value)"
+                    (change)="onChange(item.value, inputElem)"
+                    (keydown.shift.tab)="onShiftTab($event)"
                 ></kendo-radiobutton>
                 <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
             </li>
@@ -127,7 +148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgFor, RadioButtonComponent, BooleanFilterRadioButtonDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.DomSanitizer }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell']
             }], inputElem: [{
@@ -137,4 +158,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], filterService: [{
                 type: Input
+            }], menuTabbingService: [{
+                type: Input
+            }], radioButtons: [{
+                type: ViewChildren,
+                args: [BooleanFilterRadioButtonDirective]
             }] } });

package/esm2022/filtering/menu/date-filter-menu-input.component.mjs

@@ -4,25 +4,31 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input } from '@angular/core';
 import { filter } from 'rxjs/operators';
-import { DatePickerComponent } from '@progress/kendo-angular-dateinputs';
+import { DatePickerComponent, DatePickerCustomMessagesComponent } from '@progress/kendo-angular-dateinputs';
 import { ColumnComponent } from "../../columns/column.component";
 import { FilterService } from '../filter.service';
 import { SinglePopupService } from '../../common/single-popup.service';
 import { FilterInputDirective } from '../filter-input.directive';
 import { FilterMenuInputWrapperComponent } from './filter-menu-input-wrapper.component';
+import { MenuTabbingService } from './menu-tabbing.service';
+import { replaceMessagePlaceholder } from '../../utils';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
+import * as i2 from "@progress/kendo-angular-l10n";
 /**
  * @hidden
  */
 export class DateFilterMenuInputComponent {
     popupService;
+    localization;
     operators = [];
     column;
     filter;
     operator;
     currentFilter;
     filterService;
+    menuTabbingService;
     format;
     formatPlaceholder;
     placeholder;
@@ -32,22 +38,32 @@ export class DateFilterMenuInputComponent {
     bottomView;
     topView;
     weekNumber;
+    isFirstDropDown;
     subscription;
-    constructor(popupService) {
+    constructor(popupService, localization) {
         this.popupService = popupService;
+        this.localization = localization;
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
     }
     open(picker) {
         this.subscription = this.popupService.onClose
             .pipe(filter(() => picker.isActive))
             .subscribe(e => e.preventDefault());
     }
-    ngOnDestroy() {
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
+    messageFor(key) {
+        return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuInputComponent, deps: [{ token: i1.SinglePopupService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateFilterMenuInputComponent, isStandalone: true, selector: "kendo-treelist-date-filter-menu-input", inputs: { operators: "operators", column: "column", filter: "filter", operator: "operator", currentFilter: "currentFilter", filterService: "filterService", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", activeView: "activeView", bottomView: "bottomView", topView: "topView", weekNumber: "weekNumber" }, ngImport: i0, template: `
+    get columnLabel() {
+        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const columnName = this.column ? this.column.title || this.column.field : '';
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuInputComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateFilterMenuInputComponent, isStandalone: true, selector: "kendo-treelist-date-filter-menu-input", inputs: { operators: "operators", column: "column", filter: "filter", operator: "operator", currentFilter: "currentFilter", filterService: "filterService", menuTabbingService: "menuTabbingService", format: "format", formatPlaceholder: "formatPlaceholder", placeholder: "placeholder", min: "min", max: "max", activeView: "activeView", bottomView: "bottomView", topView: "topView", weekNumber: "weekNumber", isFirstDropDown: "isFirstDropDown" }, ngImport: i0, template: `
         <kendo-treelist-filter-menu-input-wrapper
             [column]="column"
             [filter]="filter"
@@ -55,10 +71,12 @@ export class DateFilterMenuInputComponent {
             [defaultOperator]="operator"
             [currentFilter]="currentFilter"
             [filterService]="filterService"
-            >
+            [isFirstDropDown]="isFirstDropDown"
+            [menuTabbingService]="menuTabbingService">
             <kendo-datepicker
                 #picker
                 kendoFilterInput
+                [columnLabel]="columnLabel"
                 [filterDelay]="0"
                 (open)="open(picker)"
                 [value]="currentFilter?.value"
@@ -70,11 +88,14 @@ export class DateFilterMenuInputComponent {
                 [activeView]="activeView"
                 [bottomView]="bottomView"
                 [topView]="topView"
-                [weekNumber]="weekNumber"
-                >
+                [weekNumber]="weekNumber">
+                <kendo-datepicker-messages
+                    [toggle]="messageFor('filterDateToggle')"
+                    [today]="messageFor('filterDateToday')"
+                ></kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuInputComponent, decorators: [{
             type: Component,
@@ -88,10 +109,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [defaultOperator]="operator"
             [currentFilter]="currentFilter"
             [filterService]="filterService"
-            >
+            [isFirstDropDown]="isFirstDropDown"
+            [menuTabbingService]="menuTabbingService">
             <kendo-datepicker
                 #picker
                 kendoFilterInput
+                [columnLabel]="columnLabel"
                 [filterDelay]="0"
                 (open)="open(picker)"
                 [value]="currentFilter?.value"
@@ -103,15 +126,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [activeView]="activeView"
                 [bottomView]="bottomView"
                 [topView]="topView"
-                [weekNumber]="weekNumber"
-                >
+                [weekNumber]="weekNumber">
+                <kendo-datepicker-messages
+                    [toggle]="messageFor('filterDateToggle')"
+                    [today]="messageFor('filterDateToday')"
+                ></kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-treelist-filter-menu-input-wrapper>
     `,
                     standalone: true,
-                    imports: [FilterMenuInputWrapperComponent, DatePickerComponent, FilterInputDirective]
+                    imports: [FilterMenuInputWrapperComponent, DatePickerComponent, FilterInputDirective, DatePickerCustomMessagesComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }]; }, propDecorators: { operators: [{
+        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.LocalizationService }]; }, propDecorators: { operators: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -123,6 +149,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], filterService: [{
                 type: Input
+            }], menuTabbingService: [{
+                type: Input
             }], format: [{
                 type: Input
             }], formatPlaceholder: [{
@@ -141,4 +169,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], weekNumber: [{
                 type: Input
+            }], isFirstDropDown: [{
+                type: Input
             }] } });

package/esm2022/filtering/menu/date-filter-menu.component.mjs

@@ -10,6 +10,9 @@ import { FilterService } from '../filter.service';
 import { DateFilterComponent } from '../date-filter.component';
 import { setFilter, logicOperators } from '../base-filter-cell.component';
 import { DateFilterMenuInputComponent } from './date-filter-menu-input.component';
+import { FilterMenuDropDownListDirective } from './filter-menu-dropdownlist.directive';
+import { MenuTabbingService } from './menu-tabbing.service';
+import { replaceMessagePlaceholder } from '../../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
@@ -50,6 +53,10 @@ export class DateFilterMenuComponent extends DateFilterComponent {
      * The `FilterService` instance which is responsible for handling the changes in the filter descriptor.
      */
     filterService;
+    /**
+     * @hidden
+     */
+    menuTabbingService;
     constructor(localization) {
         super(null, localization);
     }
@@ -62,12 +69,17 @@ export class DateFilterMenuComponent extends DateFilterComponent {
     logicChange(value) {
         this.filter.logic = value;
     }
+    get filterMenuDropDownLabel() {
+        const localizationMsg = this.localization.get('filterMenuLogicDropDownLabel') || '';
+        const columnName = this.column ? this.column.title || this.column.field : '';
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
     localizationChange() {
         this.logicOperators = logicOperators(this.localization);
         super.localizationChange();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-date-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateFilterMenuComponent, isStandalone: true, selector: "kendo-treelist-date-filter-menu", inputs: { filter: "filter", extra: "extra", filterService: "filterService", menuTabbingService: "menuTabbingService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-treelist-date-filter-menu-input
             [currentFilter]="firstFilter"
             [operators]="operators"
@@ -83,10 +95,13 @@ export class DateFilterMenuComponent extends DateFilterComponent {
             [min]="min"
             [max]="max"
             [weekNumber]="weekNumber"
-            >
+            [isFirstDropDown]="true"
+            [menuTabbingService]="menuTabbingService">
         </kendo-treelist-date-filter-menu-input>
         <kendo-dropdownlist
             *ngIf="extra"
+            kendoFilterMenuDropDown
+            [filterMenuDropDownLabel]="filterMenuDropDownLabel"
             class="k-filter-and"
             [data]="logicOperators"
             [valuePrimitive]="true"
@@ -111,9 +126,9 @@ export class DateFilterMenuComponent extends DateFilterComponent {
             [min]="min"
             [max]="max"
             [weekNumber]="weekNumber"
-            >
+            [menuTabbingService]="menuTabbingService">
         </kendo-treelist-date-filter-menu-input>
-    `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-treelist-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-treelist-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuComponent, decorators: [{
             type: Component,
@@ -135,10 +150,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [min]="min"
             [max]="max"
             [weekNumber]="weekNumber"
-            >
+            [isFirstDropDown]="true"
+            [menuTabbingService]="menuTabbingService">
         </kendo-treelist-date-filter-menu-input>
         <kendo-dropdownlist
             *ngIf="extra"
+            kendoFilterMenuDropDown
+            [filterMenuDropDownLabel]="filterMenuDropDownLabel"
             class="k-filter-and"
             [data]="logicOperators"
             [valuePrimitive]="true"
@@ -163,11 +181,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [min]="min"
             [max]="max"
             [weekNumber]="weekNumber"
-            >
+            [menuTabbingService]="menuTabbingService">
         </kendo-treelist-date-filter-menu-input>
     `,
                     standalone: true,
-                    imports: [DateFilterMenuInputComponent, NgIf, DropDownListComponent]
+                    imports: [DateFilterMenuInputComponent, NgIf, DropDownListComponent, FilterMenuDropDownListDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -178,4 +196,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], filterService: [{
                 type: Input
+            }], menuTabbingService: [{
+                type: Input
             }] } });