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

package/esm2020/editing/add-command.directive.mjs

@@ -26,7 +26,7 @@ import * as i4 from "@angular/common";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListAddCommand]="cellContext" class="k-primary">Edit</button>
@@ -57,7 +57,7 @@ AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AddCommandDirective, decorators: [{
             type: Component,
             args: [{

package/esm2020/editing/base-command.directive.mjs

@@ -55,7 +55,7 @@ BaseCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseCommandDirective, decorators: [{
             type: Component,
             args: [{

package/esm2020/editing/cancel-command.directive.mjs

@@ -23,7 +23,7 @@ import * as i4 from "@angular/common";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListCancelCommand]="cellContext">Cancel changes</button>
@@ -57,7 +57,7 @@ CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CancelCommandDirective, decorators: [{
             type: Component,
             args: [{

package/esm2020/editing/edit-command.directive.mjs

@@ -23,7 +23,7 @@ import * as i4 from "@angular/common";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListEditCommand]="cellContext">Edit</button>
@@ -57,7 +57,7 @@ EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditCommandDirective, decorators: [{
             type: Component,
             args: [{

package/esm2020/editing/edit-template.directive.mjs

@@ -16,6 +16,17 @@ import * as i0 from "@angular/core";
  * - `formGroup`—The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']). If you use the TreeList inside [Template-Driven Forms](link:site.data.urls.angular['forms']), `formGroup` will be `undefined`.
  * - `isNew`—The state of the current item.
  * - `rowIndex`—The current row index. If inside a new item row, `rowIndex` is `-1`.
+ *
+ *  * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-command-column title="command">
+ *     <ng-template kendoTreeListEditTemplate let-rowIndex="rowIndex">
+ *         {{rowIndex}}
+ *     </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
  */
 export class EditTemplateDirective {
     constructor(templateRef) {

package/esm2020/editing/remove-command.directive.mjs

@@ -23,7 +23,7 @@ import * as i4 from "@angular/common";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListRemoveCommand]="cellContext">Remove row</button>
@@ -56,7 +56,7 @@ RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RemoveCommandDirective, decorators: [{
             type: Component,
             args: [{

package/esm2020/editing/save-command.directive.mjs

@@ -23,7 +23,7 @@ import * as i4 from "@angular/common";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListSaveCommand]="cellContext">Save changes</button>
@@ -56,7 +56,7 @@ SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SaveCommandDirective, decorators: [{
             type: Component,
             args: [{

package/esm2020/excel/excel-command.directive.mjs

@@ -21,7 +21,7 @@ import * as i4 from "@angular/common";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <ng-template kendoTreeListToolbarTemplate>
  *     <button kendoTreeListExcelCommand>Export to PDF</button>
  *   </ng-template>
@@ -61,7 +61,7 @@ ExcelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExcelCommandDirective, decorators: [{
             type: Component,
             args: [{

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

@@ -8,6 +8,7 @@ import { ColumnComponent } from '../../columns/column.component';
 import { FilterService } from '../filter.service';
 import { BaseFilterCellComponent, localizeOperators } from '../base-filter-cell.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { replaceMessagePlaceholder } from '../../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "../../columns/column.component";
@@ -50,6 +51,14 @@ export class AutoCompleteFilterCellComponent extends BaseFilterCellComponent {
     get currentOperator() {
         return this.currentFilter ? this.currentFilter.operator : "contains";
     }
+    /**
+     * @hidden
+     */
+    get columnLabel() {
+        const localizationMsg = this.localization.get('filterInputLabel') || '';
+        const columnName = this.column.title || this.column.field;
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
 }
 AutoCompleteFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteFilterCellComponent, deps: [{ token: i1.FilterService }, { token: i2.ColumnComponent }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteFilterCellComponent, selector: "kendo-treelist-autocomplete-filter-cell", inputs: { showOperators: "showOperators", column: "column", filter: "filter", data: "data", valueField: "valueField" }, usesInheritance: true, ngImport: i0, template: `
@@ -61,11 +70,12 @@ AutoCompleteFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             <kendo-autocomplete
                 kendoFilterInput
                 [data]="data"
+                [columnLabel]="columnLabel"
                 [valueField]="valueField"
                 [value]="currentFilter?.value">
             </kendo-autocomplete>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.AutoCompleteComponent, selector: "kendo-autocomplete", inputs: ["highlightFirst", "focusableId", "data", "value", "valueField", "placeholder", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "loading", "clearButton", "suggest", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoAutoComplete"] }], directives: [{ type: i6.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -79,6 +89,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-autocomplete
                 kendoFilterInput
                 [data]="data"
+                [columnLabel]="columnLabel"
                 [valueField]="valueField"
                 [value]="currentFilter?.value">
             </kendo-autocomplete>

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

@@ -6,6 +6,7 @@ import { Component, ChangeDetectorRef } from '@angular/core';
 import { FilterService } from '../filter.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { BooleanFilterComponent } from '../boolean-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";
@@ -14,19 +15,19 @@ import * as i4 from "@progress/kendo-angular-dropdowns";
 import * as i5 from "../filter-input.directive";
 /**
  * Represents a Boolean filter-cell component.
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-default-filter-operator).
  *
  * @example
- *
- *  ```html-no-run
- *      <kendo-treelist-column field="ProductName" title="Product Name">
- *          <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
- *          <kendo-treelist-boolean-filter-cell
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-treelist-boolean-filter-cell>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="ProductName" title="Product Name">
+ *   <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *     <kendo-treelist-boolean-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-treelist-boolean-filter-cell>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 export class BooleanFilterCellComponent extends BooleanFilterComponent {
     constructor(filterService, localization, cd) {
@@ -37,6 +38,20 @@ export class BooleanFilterCellComponent extends BooleanFilterComponent {
         super.localizationChange();
         this.cd.markForCheck();
     }
+    /**
+     * @hidden
+     */
+    messageFor(token) {
+        return this.localization.get(token);
+    }
+    /**
+     * @hidden
+     */
+    get columnLabel() {
+        const localizationMsg = this.localization.get('booleanFilterCellLabel') || '';
+        const columnName = this.column.title || this.column.field;
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
 }
 BooleanFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterCellComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 BooleanFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BooleanFilterCellComponent, selector: "kendo-treelist-boolean-filter-cell", usesInheritance: true, ngImport: i0, template: `
@@ -48,6 +63,7 @@ BooleanFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             <kendo-dropdownlist
                 kendoFilterInput
                 [defaultItem]="defaultItem"
+                [columnLabel]="columnLabel"
                 [data]="items"
                 textField="text"
                 valueField="value"
@@ -56,7 +72,7 @@ BooleanFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [value]="currentFilter?.value">
             </kendo-dropdownlist>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i5.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i5.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -70,6 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-dropdownlist
                 kendoFilterInput
                 [defaultItem]="defaultItem"
+                [columnLabel]="columnLabel"
                 [data]="items"
                 textField="text"
                 valueField="value"

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

@@ -6,6 +6,7 @@ import { Component, Input } from '@angular/core';
 import { FilterService } from '../filter.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { DateFilterComponent } from '../date-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";
@@ -17,17 +18,16 @@ import * as i5 from "../filter-input.directive";
  *
  * @example
  *
- *  ```html-no-run
- *      <kendo-treelist-column field="OrderDate" title="Order Date">
- *          <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
- *          <kendo-treelist-date-filter-cell
- *              [showOperators]="false"
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-treelist-date-filter-cell>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="OrderDate">
+ *   <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *     <kendo-treelist-date-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-treelist-date-filter-cell>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 export class DateFilterCellComponent extends DateFilterComponent {
     constructor(filterService, localization) {
@@ -36,9 +36,18 @@ export class DateFilterCellComponent extends DateFilterComponent {
         /**
          * 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);
+    }
 }
 DateFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterCellComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 DateFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateFilterCellComponent, selector: "kendo-treelist-date-filter-cell", inputs: { showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
@@ -53,6 +62,7 @@ DateFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 kendoFilterInput
                 [value]="currentFilter?.value"
                 [format]="format"
+                [columnLabel]="columnLabel"
                 [formatPlaceholder]="formatPlaceholder"
                 [placeholder]="placeholder"
                 [activeView]="activeView"
@@ -64,7 +74,7 @@ DateFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 >
             </kendo-datepicker>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4.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: i5.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4.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: i5.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "column", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -81,6 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 kendoFilterInput
                 [value]="currentFilter?.value"
                 [format]="format"
+                [columnLabel]="columnLabel"
                 [formatPlaceholder]="formatPlaceholder"
                 [placeholder]="placeholder"
                 [activeView]="activeView"

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

@@ -7,6 +7,8 @@ import { Keys } from '@progress/kendo-angular-common';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { filterClearIcon } from '@progress/kendo-svg-icons';
+import { replaceMessagePlaceholder } from '../../utils';
+import { ColumnComponent } from '../../columns/column.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-dropdowns";
@@ -15,6 +17,20 @@ import * as i4 from "@angular/common";
 import * as i5 from "../../navigation/focusable.directive";
 /**
  * Represents a component which accommodates the filter operators.
+ *
+ * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column field="ProductName">
+ *     <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *       <input />
+ *       <kendo-treelist-filter-cell-operators
+ *         [operators]="[{text: 'Equals', value: 'eq'}]">
+ *       </kendo-treelist-filter-cell-operators>
+ *     </ng-template>
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 export class FilterCellOperatorsComponent {
     constructor(localization) {
@@ -28,6 +44,7 @@ export class FilterCellOperatorsComponent {
         /**
          * Determines if the list of operators will be displayed.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
         /**
@@ -88,9 +105,23 @@ export class FilterCellOperatorsComponent {
             this.subscription.unsubscribe();
         }
     }
+    /**
+     * @hidden
+     */
+    get columnLabel() {
+        const localizationMsg = this.localization.get('filterCellOperatorLabel') || '';
+        const columnName = this.column.title || this.column.field;
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
+    /**
+     * @hidden
+     */
+    messageFor(token) {
+        return this.localization.get(token);
+    }
 }
 FilterCellOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellOperatorsComponent, selector: "kendo-treelist-filter-cell-operators", inputs: { operators: "operators", showButton: "showButton", showOperators: "showOperators", value: "value" }, outputs: { valueChange: "valueChange", clear: "clear" }, host: { properties: { "class.k-filtercell-operator": "this.hostClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: `
+FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellOperatorsComponent, selector: "kendo-treelist-filter-cell-operators", inputs: { operators: "operators", showButton: "showButton", showOperators: "showOperators", value: "value", column: "column" }, outputs: { valueChange: "valueChange", clear: "clear" }, host: { properties: { "class.k-filtercell-operator": "this.hostClasses" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: `
         <kendo-dropdownlist
             #dropdown
             *ngIf="showOperators"
@@ -99,6 +130,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             class="k-dropdown-operator"
             (valueChange)="onChange($event)"
             [value]="value"
+            [attr.aria-label]="columnLabel"
             iconClass="k-i-filter"
             [valuePrimitive]="true"
             textField="text"
@@ -130,6 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             class="k-dropdown-operator"
             (valueChange)="onChange($event)"
             [value]="value"
+            [attr.aria-label]="columnLabel"
             iconClass="k-i-filter"
             [valuePrimitive]="true"
             textField="text"
@@ -163,6 +196,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], value: [{
                 type: Input
+            }], column: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], clear: [{

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

@@ -39,11 +39,12 @@ FilterCellWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <kendo-treelist-filter-cell-operators
             [showOperators]="showOperators"
             [operators]="operators"
+            [column]="column"
             (clear)="onClear()"
             [showButton]="showButton"
             [(value)]="currentOperator">
         </kendo-treelist-filter-cell-operators>
-    `, isInline: true, components: [{ type: i2.FilterCellOperatorsComponent, selector: "kendo-treelist-filter-cell-operators", inputs: ["operators", "showButton", "showOperators", "value"], outputs: ["valueChange", "clear"] }] });
+    `, isInline: true, components: [{ type: i2.FilterCellOperatorsComponent, selector: "kendo-treelist-filter-cell-operators", inputs: ["operators", "showButton", "showOperators", "value", "column"], outputs: ["valueChange", "clear"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellWrapperComponent, decorators: [{
             type: Component,
             args: [{
@@ -53,6 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-treelist-filter-cell-operators
             [showOperators]="showOperators"
             [operators]="operators"
+            [column]="column"
             (clear)="onClear()"
             [showButton]="showButton"
             [(value)]="currentOperator">

package/esm2020/filtering/cell/numeric-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 { NumericFilterComponent } from '../numeric-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";
@@ -17,16 +18,16 @@ import * as i6 from "../filter-input.directive";
  * Represents a numeric filter cell.
  *
  * @example
- *  ```html-no-run
- *      <kendo-treelist-column field="ProductName" title="Product Name">
- *          <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
- *          <kendo-treelist-numeric-filter-cell
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-treelist-numeric-filter-cell>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="ProductName" title="Product Name">
+ *   <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *     <kendo-treelist-numeric-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-treelist-numeric-filter-cell>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 export class NumericFilterCellComponent extends NumericFilterComponent {
     constructor(filterService, localization) {
@@ -34,17 +35,26 @@ export class NumericFilterCellComponent extends NumericFilterComponent {
         this.localization = localization;
         /**
          * Determines the delay time (in milliseconds) before the filter value is submitted.
-         * A value of `0` indicates no delay. The default value is `500`.
+         * A value of `0` indicates no delay.
          * @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);
+    }
 }
 NumericFilterCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterCellComponent, deps: [{ token: i1.FilterService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericFilterCellComponent, selector: "kendo-treelist-numeric-filter-cell", inputs: { filterDelay: "filterDelay", showOperators: "showOperators" }, usesInheritance: true, ngImport: i0, template: `
@@ -57,6 +67,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             <kendo-numerictextbox
                 kendoTreeListFocusable
                 kendoFilterInput
+                [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
                 [autoCorrect]="true"
                 [value]="currentFilter?.value"
@@ -68,7 +79,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [step]="step">
             </kendo-numerictextbox>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4.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: 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"] }] });
+    `, isInline: true, components: [{ type: i3.FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4.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: 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -83,6 +94,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-numerictextbox
                 kendoTreeListFocusable
                 kendoFilterInput
+                [columnLabel]="columnLabel"
                 [filterDelay]="filterDelay"
                 [autoCorrect]="true"
                 [value]="currentFilter?.value"