@progress/kendo-angular-treelist 13.0.0-develop.2 → 13.0.0-develop.21

package/esm2020/filtering/cell/string-filter-cell.component.mjs

@@ -6,6 +6,7 @@ import { Component, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterService } from '../filter.service';
 import { StringFilterComponent } from '../string-filter.component';
+import { replaceMessagePlaceholder } from '../../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -19,17 +20,16 @@ import * as i6 from "../filter-input.directive";
  *
  * @example
  *
- *  ```html-no-run
- *      <kendo-treelist-column field="ProductName" title="Product Name">
- *          <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
- *          <kendo-treelist-string-filter-cell
- *              [showOperators]="false"
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-treelist-string-filter-cell>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="ProductName">
+ *   <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *     <kendo-treelist-string-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-treelist-string-filter-cell>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 export class StringFilterCellComponent extends StringFilterComponent {
     constructor(filterService, localization) {
@@ -38,15 +38,25 @@ export class StringFilterCellComponent extends StringFilterComponent {
          * Determines the delay time (in milliseconds) before the filter value is submitted.
          * A value of `0` indicates no delay. The default value is `500`.
          * @type {boolean}
+         * @default 500
          */
         this.filterDelay = 500;
         /**
          * Determines if the drop-down filter operators will be displayed.
          * The default value is `true`.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
     }
+    /**
+     * @hidden
+     */
+    get columnLabel() {
+        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const columnName = this.column.title || this.column.field;
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
 }
 StringFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterCellComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StringFilterCellComponent, selector: "kendo-treelist-string-filter-cell", inputs: { filterDelay: "filterDelay", showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
@@ -56,14 +66,15 @@ StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input 
+            <input
                 class="k-textbox k-input k-input-md k-rounded-md k-input-solid"
                 kendoTreeListFocusable
                 kendoFilterInput
+                [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }], directives: [{ type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }], directives: [{ type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -75,10 +86,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input 
+            <input
                 class="k-textbox k-input k-input-md k-rounded-md k-input-solid"
                 kendoTreeListFocusable
                 kendoFilterInput
+                [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-wrapper-cell>

package/esm2020/filtering/date-filter.component.mjs

@@ -33,25 +33,30 @@ export class DateFilterComponent extends BaseFilterCellComponent {
         /**
          * The default filter operator. Defaults to `contains`.
          * @type {string}
+         * @default 'gte'
          */
         this.operator = "gte";
         /**
          * Defines the active view that the calendar initially renders.
          * By default, the active view is `month`.
          *
-         * > You have to set `activeView` within the `topView`-`bottomView` range.
+         * You have to set `activeView` within the `topView`-`bottomView` range.
+         * @default 'month'
          */
         this.activeView = "month";
         /**
          * Defines the bottommost calendar view, to which the user can navigate.
+         * @default 'month'
          */
         this.bottomView = "month";
         /**
          * Defines the topmost calendar view, to which the user can navigate.
+         * @default 'century'
          */
         this.topView = "century";
         /**
          * Determines whether to display a week number column in the `month` view of the Calendar.
+         * @default false
          */
         this.weekNumber = false;
         this.defaultOperators = dateOperators(this.localization);

package/esm2020/filtering/filter-input.directive.mjs

@@ -2,17 +2,20 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, ElementRef, EventEmitter, Inject, Input, NgZone, Renderer2, Self } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, Inject, Input, NgZone, Renderer2, Self, ContentChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { debounceTime, filter } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { isChanged } from '../utils';
+import { KendoInput, isDocumentAvailable } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export class FilterInputDirective {
     constructor(valueAccessors, ngZone, element, renderer) {
+        this.element = element;
+        this.renderer = renderer;
         this.change = new EventEmitter();
         this.composing = false;
         this.filterDelay = 500;
@@ -34,6 +37,7 @@ export class FilterInputDirective {
         this.accessor.setDisabledState(value);
     }
     ngAfterViewInit() {
+        this.addAriaAttributes();
         this.accessor.registerOnChange(x => this.filterDelay > 0 ?
             this.changeRequests.next(x) :
             this.change.emit(x));
@@ -59,9 +63,24 @@ export class FilterInputDirective {
             this.changeRequestsSubscription.unsubscribe();
         }
     }
+    addAriaAttributes() {
+        const ariaValue = this.columnLabel;
+        if (this.kendoInput && this.kendoInput.focusableId && isDocumentAvailable()) {
+            const focusableElement = this.element.nativeElement.querySelector(`#${this.kendoInput.focusableId}`) ||
+                this.element.nativeElement;
+            this.renderer.setAttribute(focusableElement, 'aria-label', ariaValue);
+        }
+        else {
+            const inputElement = this.element.nativeElement.querySelector('.k-input-inner');
+            const elementToSetLabel = inputElement ? inputElement : this.element.nativeElement;
+            if (ariaValue) {
+                this.renderer.setAttribute(elementToSetLabel, 'aria-label', ariaValue);
+            }
+        }
+    }
 }
 FilterInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterInputDirective, deps: [{ token: NG_VALUE_ACCESSOR, self: true }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-FilterInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: { filterDelay: "filterDelay", value: "value" }, usesOnChanges: true, ngImport: i0 });
+FilterInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: { filterDelay: "filterDelay", columnLabel: "columnLabel", column: "column", value: "value" }, queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }], usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterInputDirective, decorators: [{
             type: Directive,
             args: [{
@@ -72,7 +91,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [NG_VALUE_ACCESSOR]
-                }] }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { filterDelay: [{
+                }] }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { kendoInput: [{
+                type: ContentChild,
+                args: [KendoInput, { static: true }]
+            }], filterDelay: [{
+                type: Input
+            }], columnLabel: [{
+                type: Input
+            }], column: [{
                 type: Input
             }], value: [{
                 type: Input

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

@@ -2,35 +2,36 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Input, HostBinding } from '@angular/core';
+import { Component, Input, HostBinding, ViewChild, ElementRef, Renderer2 } from '@angular/core';
 import { FilterService } from '../filter.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { BooleanFilterComponent } from '../boolean-filter.component';
 import { guid } from '@progress/kendo-angular-common';
+import { replaceMessagePlaceholder } from '../../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@angular/common";
 import * as i3 from "@progress/kendo-angular-inputs";
 /**
- * Represents a Boolean-filter menu component.
+ * Represents a Boolean-filter menu component. [See example](slug:columnmenu_treelist#toc-customizing-the-content).
  *
  * @example
- *  ```html-no-run
- *      <kendo-treelist-column field="Discontinued" title="Discontinued">
- *          <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
- *            <kendo-treelist-boolean-filter-menu
- *                [column]="column"
- *                [filter]="filter"
- *                [filterService]="filterService"
- *                >
- *            </kendo-treelist-boolean-filter-menu>
- *          </ng-template>
- *      </kendo-treelist-column>
+ * ```html
+ * <kendo-treelist-column field="Discontinued" title="Discontinued">
+ *   <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-treelist-boolean-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-treelist-boolean-filter-menu>
+ *   </ng-template>
+ * </kendo-treelist-column>
  *   ```
  */
 export class BooleanFilterMenuComponent extends BooleanFilterComponent {
-    constructor(localization) {
+    constructor(renderer, localization) {
         super(null, localization);
+        this.renderer = renderer;
         /**
          * The current menu filter.
          * @type {CompositeFilterDescriptor}
@@ -66,12 +67,22 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
     isSelected(radioValue) {
         return this.filtersByField(this.column.field).some(({ value }) => value === radioValue);
     }
+    /**
+     * @hidden
+     */
+    columnLabel() {
+        const elem = this.inputElem.nativeElement;
+        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const columnName = this.column.title || this.column.field;
+        const fullMessage = replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+        this.renderer.setAttribute(elem, 'aria-label', fullMessage);
+    }
 }
-BooleanFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterMenuComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-BooleanFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BooleanFilterMenuComponent, selector: "kendo-treelist-boolean-filter-menu", inputs: { filter: "filter", filterService: "filterService" }, host: { properties: { "class.k-filtercell": "this.hostClasses" } }, usesInheritance: true, ngImport: i0, template: `
+BooleanFilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterMenuComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+BooleanFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BooleanFilterMenuComponent, 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: `
         <ul class="k-radio-list k-reset">
             <li *ngFor="let item of items">
-                <input type="radio"
+                <input #inputElem type="radio"
                     kendoRadioButton
                     [name]="idPrefix"
                     [checked]="isSelected(item.value)"
@@ -89,7 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     template: `
         <ul class="k-radio-list k-reset">
             <li *ngFor="let item of items">
-                <input type="radio"
+                <input #inputElem type="radio"
                     kendoRadioButton
                     [name]="idPrefix"
                     [checked]="isSelected(item.value)"
@@ -101,9 +112,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ul>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-filtercell']
+            }], inputElem: [{
+                type: ViewChild,
+                args: ['inputElem']
             }], filter: [{
                 type: Input
             }], filterService: [{

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

@@ -59,7 +59,7 @@ DateFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 >
             </kendo-datepicker>
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: i2.FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: i2.FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i3.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i4.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{

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

@@ -17,18 +17,17 @@ import * as i4 from "@angular/common";
  * Represents a date-filter menu component.
  *
  * @example
- *  ```html-no-run
- *      <kendo-treelist-column field="OrderDate" title="Order Date">
- *          <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
- *            <kendo-treelist-date-filter-menu
- *                [column]="column"
- *                [filter]="filter"
- *                [filterService]="filterService"
- *                >
- *            </kendo-treelist-date-filter-menu>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="OrderDate" title="Order Date">
+ *   <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-treelist-date-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-treelist-date-filter-menu>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 export class DateFilterMenuComponent extends DateFilterComponent {
     constructor(localization) {
@@ -41,6 +40,7 @@ export class DateFilterMenuComponent extends DateFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will be displayed.
+         * @default true
          */
         this.extra = true;
     }

package/esm2020/filtering/menu/filter-menu.component.mjs

@@ -60,7 +60,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-treelist-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i5.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/menu/numeric-filter-menu-input.component.mjs

@@ -50,7 +50,7 @@ NumericFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [step]="step">
             </kendo-numerictextbox>
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: i1.FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i2.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i3.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: i1.FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i2.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i3.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/filtering/menu/numeric-filter-menu.component.mjs

@@ -17,18 +17,17 @@ import * as i4 from "@angular/common";
  * Represents a numeric-filter menu component.
  *
  * @example
- *  ```html-no-run
- *      <kendo-treelist-column field="UnitPrice" title="Unit Price">
- *          <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
- *          <kendo-treelist-numeric-filter-menu
- *              [column]="column"
- *              [filter]="filter"
- *              [filterService]="filterService"
- *              >
- *          </kendo-treelist-numeric-filter-menu>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ *  ```html
+ * <kendo-treelist-column field="UnitPrice">
+ *   <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-treelist-numeric-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-treelist-numeric-filter-menu>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 export class NumericFilterMenuComponent extends NumericFilterComponent {
     constructor(localization) {
@@ -41,6 +40,7 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will displayed.
+         * @default true
          */
         this.extra = true;
     }

package/esm2020/filtering/menu/string-filter-menu-input.component.mjs

@@ -5,20 +5,29 @@
 import { Component, Input } from '@angular/core';
 import { ColumnComponent } from "../../columns/column.component";
 import { FilterService } from '../filter.service';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { replaceMessagePlaceholder } from '../../utils';
 import * as i0 from "@angular/core";
-import * as i1 from "./filter-menu-input-wrapper.component";
-import * as i2 from "@progress/kendo-angular-inputs";
-import * as i3 from "@angular/forms";
-import * as i4 from "../filter-input.directive";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./filter-menu-input-wrapper.component";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "@angular/forms";
+import * as i5 from "../filter-input.directive";
 /**
  * @hidden
  */
 export class StringFilterMenuInputComponent {
-    constructor() {
+    constructor(localization) {
+        this.localization = localization;
         this.operators = [];
     }
+    get columnLabel() {
+        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const columnName = this.column ? this.column.title || this.column.field : '';
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
 }
-StringFilterMenuInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StringFilterMenuInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuInputComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 StringFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StringFilterMenuInputComponent, selector: "kendo-treelist-string-filter-menu-input", inputs: { operators: "operators", column: "column", filter: "filter", operator: "operator", currentFilter: "currentFilter", filterService: "filterService" }, ngImport: i0, template: `
         <kendo-treelist-filter-menu-input-wrapper
             [column]="column"
@@ -31,10 +40,11 @@ StringFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             <input
                 kendoTextBox
                 kendoFilterInput
+                [columnLabel]="columnLabel"
                 [filterDelay]="0"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: i1.FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }], directives: [{ type: i2.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: i2.FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }], directives: [{ type: i3.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -51,12 +61,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <input
                 kendoTextBox
                 kendoFilterInput
+                [columnLabel]="columnLabel"
                 [filterDelay]="0"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-menu-input-wrapper>
     `
                 }]
-        }], propDecorators: { operators: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { operators: [{
                 type: Input
             }], column: [{
                 type: Input

package/esm2020/filtering/menu/string-filter-menu.component.mjs

@@ -16,6 +16,20 @@ import * as i4 from "@angular/common";
 /**
  * Represents a string-filter menu component.
  * ([see example]({% slug builtinfiltertemplate_treelist %}#toc-configuration-components-for-filter-templates)).
+ *
+ * @example
+ * ```html
+ * <kendo-treelist-column field="name">
+ *   <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-treelist-string-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-treelist-string-filter-menu>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
+ *
  */
 export class StringFilterMenuComponent extends StringFilterComponent {
     constructor(localization) {
@@ -28,6 +42,7 @@ export class StringFilterMenuComponent extends StringFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will displayed.
+         * @default true
          */
         this.extra = true;
     }

package/esm2020/filtering/numeric-filter.component.mjs

@@ -30,18 +30,21 @@ export class NumericFilterComponent extends BaseFilterCellComponent {
         super(filterService);
         this.localization = localization;
         /**
-         * The default filter operator. Defaults to `eq`.
+         * The default filter operator.
          * @type {string}
+         * @default 'eq'
          */
         this.operator = "eq";
         /**
          * Specifies the value that is used to increment or decrement the component value.
          * @type {numeric}
+         * @default 1
          */
         this.step = 1;
         /**
          * Specifies whether the **Up** and **Down** spin buttons will be rendered.
          * @type {boolean}
+         * @default true
          */
         this.spinners = true;
         this.defaultOperators = numericOperators(this.localization);

package/esm2020/filtering/operators/after-eq-filter-operator.component.mjs

@@ -7,12 +7,9 @@ import { FilterOperatorBase } from './filter-operator.base';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-/*
+/**
  * Represents the `GreaterOrEqualTo` (**Is after or equal to**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 export class AfterEqFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("after-eq", localization); }

package/esm2020/filtering/operators/after-filter-operator.component.mjs

@@ -7,12 +7,9 @@ import { FilterOperatorBase } from './filter-operator.base';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-/*
+/**
  * Represents the `Greater` (**Is after**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 export class AfterFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("after", localization); }

package/esm2020/filtering/operators/before-eq-filter-operator.component.mjs

@@ -7,12 +7,9 @@ import { FilterOperatorBase } from './filter-operator.base';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-/*
+/**
  * Represents the `LessOrEqualTo` (**Is before or equal to**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 export class BeforeEqFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("before-eq", localization); }

package/esm2020/filtering/operators/before-filter-operator.component.mjs

@@ -7,12 +7,9 @@ import { FilterOperatorBase } from './filter-operator.base';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-/*
- * Represents the `Less then` (**Is before**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+/**
+ * Represents the `Less than` (**Is before**) date filter operator.
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 export class BeforeFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("before", localization); }

package/esm2020/filtering/operators/contains-filter-operator.component.mjs

@@ -9,10 +9,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
  * Represents the `Contains` (**Contains**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 export class ContainsFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("contains", localization); }