@progress/kendo-angular-grid 13.0.0-develop.8 → 13.0.0

package/aggregates/aggregate-types.d.ts

@@ -0,0 +1,58 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the available cell selection aggregates.
+ */
+export interface SelectionAggregates {
+    /**
+     * The sum of all numbers in all selected cells bound to numeric fields.
+     * Other selected cells that represent different data types do not affect the value.
+     */
+    sum?: number;
+    /**
+     * The smallest number in all selected cells bound to numeric fields.
+     * Other selected cells that represent different data types do not affect the value.
+     */
+    min?: number;
+    /**
+     * The greatest number in all selected cells bound to numeric fields.
+     * Other selected cells that represent different data types do not affect the value.
+     */
+    max?: number;
+    /**
+     * The average of all numbers in all selected cells bound to numeric fields.
+     * Other selected cells that represent different data types do not affect the value.
+     */
+    average?: number;
+    /**
+     * The total number of all selected cells.
+     */
+    count?: number;
+    /**
+     * The total number of selected cells bound to a `true` boolean value.
+     * Other selected cells that represent different data types do not affect the value.
+     */
+    isTrue?: number;
+    /**
+     * The total number of selected cells bound to a `false` boolean value.
+     * Other selected cells that represent different data types do not affect the value
+     */
+    isFalse?: number;
+    /**
+     * The earliest date in all selected cells bound to `Date` fields.
+     * Other selected cells that represent different data types do not affect the value.
+     */
+    earliest?: Date;
+    /**
+     * The latest date in all selected cells bound to `Date` fields.
+     * Other selected cells that represent different data types do not affect the value.
+     */
+    latest?: Date;
+}
+/**
+ * Represents the available selection aggregate calculations.
+ * Use in combination with [cellAggregates]({% slug api_grid_selectablesettings %}) to determine which aggregates will be calculated.
+ */
+export declare type SelectionAggregate = 'sum' | 'min' | 'max' | 'average' | 'count' | 'earliest' | 'latest' | 'isTrue' | 'isFalse';

package/aggregates/status-bar-template.directive.d.ts

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the status bar template of the Grid. Allows you to visualize the aggregates using custom rendering inside the template.
+ * The template context has the following field:
+ * - `aggregates`—The [SelectionAggregates]({% slug api_grid_selectionaggregates %}) object that contains all calculated aggregates.
+ * Use the Angular [ngFor](link:site.data.urls.angular['ngfor']) structural directive combined with the [KeyValuePipe](https://angular.io/api/common/KeyValuePipe)
+ * to loop through the aggregates as key-value pairs.
+ */
+export declare class StatusBarTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatusBarTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StatusBarTemplateDirective, "[kendoGridStatusBarTemplate]", never, {}, {}, never>;
+}

package/aggregates/status-bar.component.d.ts

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnDestroy, OnInit } from '@angular/core';
+import { ContextService } from '../common/provider.service';
+import { SelectionService } from '../selection/selection.service';
+import { CellSelectionService } from '../selection/cell-selection.service';
+import { SelectionAggregates } from './aggregate-types';
+import { StatusBarTemplateDirective } from './status-bar-template.directive';
+import { LocalDataChangesService } from '../editing/local-data-changes.service';
+import { SelectableSettings } from '../selection/types';
+import { ColumnInfoService } from '../common/column-info.service';
+import * as i0 from "@angular/core";
+interface GroupedAggregates {
+    dates?: Array<any>;
+    numbers?: Array<number>;
+    booleans?: Array<boolean>;
+}
+/**
+ * @hidden
+ */
+export declare class StatusBarComponent implements OnInit, OnDestroy {
+    private ctx;
+    private selectionService;
+    private dataChanges;
+    private columnInfoService;
+    private cellSelectionService;
+    hostClasses: boolean;
+    get isStatusBarTemplate(): string;
+    selectableSettings: SelectableSettings | boolean;
+    statusBarTemplate: StatusBarTemplateDirective;
+    groupedAggregates: GroupedAggregates;
+    aggregates: SelectionAggregates;
+    private data;
+    private subs;
+    private selectedItems;
+    private selectService;
+    constructor(ctx: ContextService, selectionService: SelectionService, dataChanges: LocalDataChangesService, columnInfoService: ColumnInfoService, cellSelectionService: CellSelectionService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private onSelectionChange;
+    private handleAggregateChanges;
+    private groupAggregates;
+    private calculateAggregates;
+    private handleSelectedItems;
+    private isAggregateIncluded;
+    private nullifyAggregates;
+    private get isRowSelection();
+    static ɵfac: i0.ɵɵFactoryDeclaration<StatusBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StatusBarComponent, "kendo-grid-status-bar", never, { "selectableSettings": "selectableSettings"; "statusBarTemplate": "statusBarTemplate"; }, {}, never, never>;
+}
+export {};

package/column-menu/column-menu.component.d.ts

@@ -81,7 +81,7 @@ export declare class ColumnMenuComponent implements AfterViewInit, OnChanges, On
     /**
      * @hidden
      */
-    moreHorizontalIcon: SVGIcon;
+    slidersIcon: SVGIcon;
     /**
      * @hidden
      */

package/esm2020/aggregates/aggregate-types.mjs

@@ -0,0 +1,6 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+;
+export {};

package/esm2020/aggregates/status-bar-template.directive.mjs

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the status bar template of the Grid. Allows you to visualize the aggregates using custom rendering inside the template.
+ * The template context has the following field:
+ * - `aggregates`—The [SelectionAggregates]({% slug api_grid_selectionaggregates %}) object that contains all calculated aggregates.
+ * Use the Angular [ngFor](link:site.data.urls.angular['ngfor']) structural directive combined with the [KeyValuePipe](https://angular.io/api/common/KeyValuePipe)
+ * to loop through the aggregates as key-value pairs.
+ */
+export class StatusBarTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+StatusBarTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+StatusBarTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: StatusBarTemplateDirective, selector: "[kendoGridStatusBarTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridStatusBarTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

package/esm2020/aggregates/status-bar.component.mjs

@@ -0,0 +1,236 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, HostBinding, Input } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ContextService } from '../common/provider.service';
+import { SelectionService } from '../selection/selection.service';
+import { CellSelectionService } from '../selection/cell-selection.service';
+import { StatusBarTemplateDirective } from './status-bar-template.directive';
+import { LocalDataChangesService } from '../editing/local-data-changes.service';
+import { ColumnInfoService } from '../common/column-info.service';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/provider.service";
+import * as i2 from "../selection/selection.service";
+import * as i3 from "../editing/local-data-changes.service";
+import * as i4 from "../common/column-info.service";
+import * as i5 from "../selection/cell-selection.service";
+import * as i6 from "@angular/common";
+;
+/**
+ * @hidden
+ */
+export class StatusBarComponent {
+    constructor(ctx, selectionService, dataChanges, columnInfoService, cellSelectionService) {
+        this.ctx = ctx;
+        this.selectionService = selectionService;
+        this.dataChanges = dataChanges;
+        this.columnInfoService = columnInfoService;
+        this.cellSelectionService = cellSelectionService;
+        this.hostClasses = true;
+        this.groupedAggregates = { dates: [], numbers: [], booleans: [] };
+        this.aggregates = {
+            sum: null,
+            average: null,
+            min: null,
+            max: null,
+            count: null,
+            isTrue: null,
+            isFalse: null,
+            earliest: null,
+            latest: null
+        };
+        this.subs = new Subscription();
+        this.selectedItems = [];
+    }
+    get isStatusBarTemplate() {
+        return this.statusBarTemplate ? '' : 'none';
+    }
+    ngOnInit() {
+        if (this.selectableSettings.cellAggregates) {
+            this.data = this.dataChanges.data ? this.dataChanges.data : this.ctx.grid.data;
+            this.selectService = this.isRowSelection ? this.selectionService : this.cellSelectionService;
+            if (this.isAggregateIncluded('count')) {
+                this.aggregates['count'] = 0;
+            }
+            const selectionDirective = this.ctx.grid.selectionDirective;
+            if (selectionDirective && !this.isRowSelection) {
+                this.selectedItems = selectionDirective.selectedKeys;
+            }
+            this.subs.add(this.selectService.aggregateChanges.subscribe((selectionArgs) => this.onSelectionChange(selectionArgs)));
+        }
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    onSelectionChange(selectionArgs) {
+        this.handleSelectedItems(selectionArgs);
+        this.nullifyAggregates();
+        this.handleAggregateChanges();
+        this.selectService.aggregates = this.aggregates;
+    }
+    handleAggregateChanges() {
+        const lockedColumns = this.columnInfoService.lockedLeafColumns.toArray();
+        const nonLockedColumns = this.columnInfoService.nonLockedLeafColumns.toArray();
+        const selectedItemsLength = this.selectedItems.length;
+        const columns = [...lockedColumns, ...nonLockedColumns];
+        const fields = columns.map(col => col.field);
+        if (this.isAggregateIncluded('count')) {
+            this.aggregates['count'] = this.isRowSelection ? (selectedItemsLength * columns.length) : selectedItemsLength;
+        }
+        this.selectedItems.forEach((item) => {
+            if (this.isRowSelection) {
+                fields.forEach((field) => {
+                    const cellValue = item.dataItem;
+                    if (cellValue && cellValue.hasOwnProperty(field)) {
+                        const cellValue = item.dataItem[field];
+                        this.groupAggregates(cellValue);
+                    }
+                });
+            }
+            else if (this.selectService.options.cell) {
+                const itemKey = this.data[item.itemKey];
+                const field = fields[item.columnKey];
+                if (itemKey && itemKey.hasOwnProperty(field)) {
+                    const cellValue = itemKey[fields[item.columnKey]];
+                    this.groupAggregates(cellValue);
+                }
+            }
+        });
+        this.calculateAggregates();
+    }
+    groupAggregates(aggregate) {
+        if (typeof aggregate === 'number') {
+            this.groupedAggregates.numbers.push(aggregate);
+        }
+        else if (typeof aggregate === 'boolean') {
+            this.groupedAggregates.booleans.push(aggregate);
+        }
+        else if (aggregate instanceof Date) {
+            this.groupedAggregates.dates.push(aggregate);
+        }
+    }
+    calculateAggregates() {
+        if (this.groupedAggregates.numbers.length > 0) {
+            if (this.isAggregateIncluded('min')) {
+                this.aggregates['min'] = Math.min(...this.groupedAggregates.numbers);
+            }
+            if (this.isAggregateIncluded('max')) {
+                this.aggregates['max'] = Math.max(...this.groupedAggregates.numbers);
+            }
+            if (this.isAggregateIncluded('sum')) {
+                this.aggregates['sum'] = this.groupedAggregates.numbers.reduce((acc, curr) => acc += curr, 0);
+            }
+            if (this.isAggregateIncluded('average')) {
+                this.aggregates['average'] = this.aggregates['sum'] / this.groupedAggregates.numbers.length;
+            }
+        }
+        if (this.groupedAggregates.booleans.length > 0) {
+            if (this.isAggregateIncluded('isTrue')) {
+                const isTrueCount = this.groupedAggregates.booleans.filter(bool => bool).length;
+                this.aggregates['isTrue'] = isTrueCount > 0 ? isTrueCount : null;
+            }
+            if (this.isAggregateIncluded('isFalse')) {
+                const isFalseCount = this.groupedAggregates.booleans.length - this.aggregates['isTrue'];
+                this.aggregates['isFalse'] = isFalseCount > 0 ? isFalseCount : null;
+            }
+        }
+        if (this.groupedAggregates.dates.length > 0) {
+            if (this.isAggregateIncluded('earliest')) {
+                this.aggregates['earliest'] = new Date(Math.min(...this.groupedAggregates.dates));
+            }
+            if (this.isAggregateIncluded('latest')) {
+                this.aggregates['latest'] = new Date(Math.max(...this.groupedAggregates.dates));
+            }
+        }
+    }
+    handleSelectedItems(selectionArgs) {
+        const rowOrCellSelect = `${this.isRowSelection ? 'selectedRows' : 'selectedCells'}`;
+        const rowOrCellDeselect = `${this.isRowSelection ? 'deselectedRows' : 'deselectedCells'}`;
+        const selectedItems = selectionArgs[rowOrCellSelect];
+        const deselectedItems = selectionArgs[rowOrCellDeselect];
+        if (!this.isRowSelection) {
+            // Needed when we have column groups with cell selection, the deselected items are duplicated
+            deselectedItems.forEach((item, index) => {
+                if (index + 1 < deselectedItems.length) {
+                    if (item.itemKey === deselectedItems[index + 1].itemKey
+                        && item.columnKey === deselectedItems[index + 1].columnKey) {
+                        deselectedItems.splice(index, 1);
+                    }
+                }
+            });
+        }
+        if (selectedItems.length > 0) {
+            selectedItems.forEach((item) => {
+                this.selectedItems = [...this.selectedItems, item];
+            });
+        }
+        if (deselectedItems.length > 0) {
+            if (this.isRowSelection) {
+                deselectedItems.forEach((row) => {
+                    this.selectedItems = this.selectedItems.filter((elem) => elem.dataItem !== row.dataItem);
+                });
+            }
+            else {
+                deselectedItems.forEach((cell) => {
+                    const index = this.selectedItems.findIndex((elem) => elem.itemKey === cell.itemKey && elem.columnKey === cell.columnKey);
+                    this.selectedItems.splice(index, 1);
+                });
+            }
+        }
+    }
+    isAggregateIncluded(aggregate) {
+        const { cellAggregates } = this.selectService.options;
+        if (typeof cellAggregates !== 'boolean') {
+            return cellAggregates.includes(aggregate);
+        }
+        return true;
+    }
+    nullifyAggregates() {
+        this.groupedAggregates = { dates: [], numbers: [], booleans: [] };
+        this.aggregates['count'] = null;
+        this.aggregates['sum'] = this.aggregates['average'] = null;
+        this.aggregates['max'] = this.aggregates['min'] = null;
+        this.aggregates['isFalse'] = this.aggregates['isTrue'] = null;
+        this.aggregates['earliest'] = this.aggregates['latest'] = null;
+    }
+    get isRowSelection() {
+        return typeof this.selectableSettings === 'boolean' || !this.selectableSettings.cell;
+    }
+}
+StatusBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarComponent, deps: [{ token: i1.ContextService }, { token: i2.SelectionService }, { token: i3.LocalDataChangesService }, { token: i4.ColumnInfoService }, { token: i5.CellSelectionService }], target: i0.ɵɵFactoryTarget.Component });
+StatusBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: { selectableSettings: "selectableSettings", statusBarTemplate: "statusBarTemplate" }, host: { properties: { "class.k-selection-aggregates": "this.hostClasses", "class.k-grid-selection-aggregates": "this.hostClasses", "style.display": "this.isStatusBarTemplate" } }, ngImport: i0, template: `
+        <ng-template
+            *ngIf="statusBarTemplate"
+            [ngTemplateOutlet]="statusBarTemplate?.templateRef"
+            [ngTemplateOutletContext]="{ aggregates: aggregates }">
+        </ng-template>
+    `, isInline: true, directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-status-bar',
+                    template: `
+        <ng-template
+            *ngIf="statusBarTemplate"
+            [ngTemplateOutlet]="statusBarTemplate?.templateRef"
+            [ngTemplateOutletContext]="{ aggregates: aggregates }">
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.SelectionService }, { type: i3.LocalDataChangesService }, { type: i4.ColumnInfoService }, { type: i5.CellSelectionService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-selection-aggregates']
+            }, {
+                type: HostBinding,
+                args: ['class.k-grid-selection-aggregates']
+            }], isStatusBarTemplate: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], selectableSettings: [{
+                type: Input
+            }], statusBarTemplate: [{
+                type: Input
+            }] } });

package/esm2020/column-menu/column-menu.component.mjs

@@ -12,7 +12,7 @@ import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeCol
 import { replaceMessagePlaceholder } from '../utils';
 import { ContextService } from '../common/provider.service';
 import { ColunnMenuErrorMessages } from '../common/error-messages';
-import { moreVerticalIcon, columnsIcon, moreHorizontalIcon, filterIcon } from '@progress/kendo-svg-icons';
+import { moreVerticalIcon, columnsIcon, filterIcon, slidersIcon } from '@progress/kendo-svg-icons';
 import { TabStripComponent } from '@progress/kendo-angular-layout';
 import { ColumnInfoService } from '../common/column-info.service';
 import * as i0 from "@angular/core";
@@ -84,7 +84,7 @@ export class ColumnMenuComponent {
         /**
          * @hidden
          */
-        this.moreHorizontalIcon = moreHorizontalIcon;
+        this.slidersIcon = slidersIcon;
         /**
          * @hidden
          */
@@ -361,8 +361,8 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                     <ng-template kendoTabTitle>
                         <kendo-icon-wrapper
                             [attr.title]="ctx.localization.get('columnMenuGeneralTabTitle')"
-                            name="more-horizontal"
-                            [svgIcon]="moreHorizontalIcon">
+                            name="sliders"
+                            [svgIcon]="slidersIcon">
                         </kendo-icon-wrapper>
                     </ng-template>
                     <ng-template kendoTabContent>
@@ -530,8 +530,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     <ng-template kendoTabTitle>
                         <kendo-icon-wrapper
                             [attr.title]="ctx.localization.get('columnMenuGeneralTabTitle')"
-                            name="more-horizontal"
-                            [svgIcon]="moreHorizontalIcon">
+                            name="sliders"
+                            [svgIcon]="slidersIcon">
                         </kendo-icon-wrapper>
                     </ng-template>
                     <ng-template kendoTabContent>

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

@@ -54,7 +54,7 @@ export class BooleanFilterCellComponent extends BooleanFilterComponent {
      * @hidden
      */
     get columnLabel() {
-        const localizationMsg = this.ctx.localization.get('filterInputLabel') || '';
+        const localizationMsg = this.ctx.localization.get('booleanFilterCellLabel') || '';
         const columnName = this.column.title || this.column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }

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

@@ -8,6 +8,8 @@ import { Keys } from '@progress/kendo-angular-common';
 import { SizingOptionsService } from '../../layout/sizing-options.service';
 import { filterClearIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../../common/provider.service';
+import { replaceMessagePlaceholder } from '../../utils';
+import { ColumnComponent } from '../../columns/column.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/provider.service";
 import * as i2 from "../../layout/sizing-options.service";
@@ -111,13 +113,22 @@ export class FilterCellOperatorsComponent {
             this.subs.unsubscribe();
         }
     }
+    /**
+     * @hidden
+     */
+    get columnLabel() {
+        const localizationMsg = this.ctx.localization.get('filterCellOperatorLabel') || '';
+        const columnName = this.column.title || this.column.field;
+        return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
+    }
 }
 FilterCellOperatorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, deps: [{ token: i1.ContextService }, { token: i2.SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
-FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellOperatorsComponent, selector: "kendo-grid-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-grid-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"
             kendoGridFocusable
+            [attr.aria-label]="columnLabel"
             [data]="operators"
             class="k-dropdown-operator"
             (valueChange)="onChange($event)"
@@ -150,6 +161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             #dropdown
             *ngIf="showOperators"
             kendoGridFocusable
+            [attr.aria-label]="columnLabel"
             [data]="operators"
             class="k-dropdown-operator"
             (valueChange)="onChange($event)"
@@ -188,6 +200,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

@@ -38,12 +38,13 @@ FilterCellWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <ng-content></ng-content>
         <kendo-grid-filter-cell-operators
             [showOperators]="showOperators"
+            [column]="column"
             [operators]="operators"
             (clear)="onClear()"
             [showButton]="showButton"
             [(value)]="currentOperator">
         </kendo-grid-filter-cell-operators>
-    `, isInline: true, components: [{ type: i2.FilterCellOperatorsComponent, selector: "kendo-grid-filter-cell-operators", inputs: ["operators", "showButton", "showOperators", "value"], outputs: ["valueChange", "clear"] }] });
+    `, isInline: true, components: [{ type: i2.FilterCellOperatorsComponent, selector: "kendo-grid-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: [{
@@ -52,6 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-content></ng-content>
         <kendo-grid-filter-cell-operators
             [showOperators]="showOperators"
+            [column]="column"
             [operators]="operators"
             (clear)="onClear()"
             [showButton]="showButton"

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

@@ -82,7 +82,7 @@ StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 [filterDelay]="filterDelay"
                 [ngModel]="currentFilter?.value"></kendo-textbox>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "errorIcon", "clearButtonIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: i4.FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }], directives: [{ type: i6.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i7.FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.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: [{

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

@@ -71,7 +71,11 @@ export class FilterInputDirective {
             this.renderer.setAttribute(focusableElement, 'aria-label', ariaValue);
         }
         else {
-            this.renderer.setAttribute(this.element.nativeElement, 'aria-label', ariaValue);
+            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);
+            }
         }
     }
 }