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

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-chooser.component.d.ts

@@ -10,7 +10,7 @@ import { Button } from '@progress/kendo-angular-buttons';
 import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the component for toggling the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
+ * Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
  * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
  * add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
  *

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

@@ -10,11 +10,10 @@ import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-all-columns-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -10,11 +10,10 @@ import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-chooser` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -9,11 +9,10 @@ import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for editing column filters in the Grid. [See example](slug:columnmenu_grid#toc-filter-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-filter` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -10,11 +10,10 @@ import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for locking and unlocking columns in the Grid. [See example](slug:columnmenu_grid#toc-lock-and-unlock-items).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-lock` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-lock` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -9,11 +9,10 @@ import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item which combines the lock and sticky column functionalities.
- * [See example](slug:columnmenu_grid#toc-set-column-position-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-position` component. [See example](slug:columnmenu_grid#toc-set-column-position-item).
  *
  * @example
  * ```html

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

@@ -11,8 +11,10 @@ import * as i0 from "@angular/core";
 /**
  * Represents the column-menu item for sorting Grid columns.
  * [See example](slug:columnmenu_grid#toc-sort-item).
- * The compoenent can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ *
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-sort` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
  * the template to the service input of the `kendo-grid-columnmenu-sort` component.

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-chooser.component.mjs

@@ -16,7 +16,7 @@ import * as i3 from "@progress/kendo-angular-popup";
 import * as i4 from "@progress/kendo-angular-buttons";
 import * as i5 from "./column-list.component";
 /**
- * Represents the component for toggling the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
+ * Represents the component for toggling visibility of the Grid columns visibility. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
  * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
  * add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
  *

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

@@ -20,7 +20,7 @@ export class ColumnListComponent {
         this.columnChange = new EventEmitter();
         this.autoSync = true;
         this.allowHideAll = false;
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.unlockedCount = 0;
     }
     get className() {
@@ -159,8 +159,8 @@ ColumnListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnListComponent, decorators: [{
@@ -174,8 +174,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
             <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
         </div>
     `
                 }]

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

@@ -15,11 +15,10 @@ import * as i3 from "@angular/common";
 /**
  * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-all-columns-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html

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

@@ -15,11 +15,10 @@ import * as i4 from "./column-list.component";
 import * as i5 from "./column-menu-item-content-template.directive";
 /**
  * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-chooser` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -57,7 +56,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.columnsIcon = columnsIcon;
     }
     get columns() {

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

@@ -13,11 +13,10 @@ import * as i3 from "../filtering/menu/filter-menu-container.component";
 import * as i4 from "./column-menu-item-content-template.directive";
 /**
  * Represents the column-menu item for editing column filters in the Grid. [See example](slug:columnmenu_grid#toc-filter-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-filter` component.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * the template to the service input of the `kendo-grid-columnmenu-filter` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -54,7 +53,7 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         /**
          * @hidden
          */
-        this.actionsClass = 'k-actions';
+        this.actionsClass = 'k-actions k-actions-stretched k-actions-horizontal';
         this.filterIcon = filterIcon;
     }
     /**

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

@@ -81,7 +81,7 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
-    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('state', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'block' })),