@progress/kendo-angular-grid 13.0.0-develop.13 → 13.0.0-develop.15

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/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
+            }] } });