@progress/kendo-angular-grid 7.0.0-dev.202201261657 → 7.0.0-dev.202204150740

package/esm2015/columns/column-base.js

@@ -0,0 +1,296 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Input, ContentChild, ContentChildren, QueryList, Component, isDevMode } from '@angular/core';
+import { HeaderTemplateDirective } from '../rendering/header/header-template.directive';
+import { FooterTemplateDirective } from '../rendering/footer/footer-template.directive';
+import { ColumnMenuTemplateDirective } from '../column-menu/column-menu-template.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/id.service";
+/**
+ * @hidden
+ */
+export const isSpanColumn = column => column.isSpanColumn;
+/**
+ * @hidden
+ */
+export const isCheckboxColumn = column => column.isCheckboxColumn;
+const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
+/**
+ * The base class for the column components of the Grid.
+ */
+export class ColumnBase {
+    /**
+     * @hidden
+     */
+    constructor(parent, idService) {
+        this.parent = parent;
+        /**
+         * @hidden
+         */
+        this.matchesMedia = true;
+        /**
+         * The column index after reordering.
+         *
+         * > `orderIndex` is a read-only property. Setting this field does not affect column order.
+         */
+        this.orderIndex = 0;
+        /**
+         * @hidden
+         */
+        this.isColumnGroup = false;
+        /**
+         * @hidden
+         */
+        this.isSpanColumn = false;
+        /**
+         * Indicates whether the column is resizable.
+         * @default true
+         */
+        this.resizable = true;
+        /**
+         * Indicates whether the column is reorderable.
+         * @default true
+         */
+        this.reorderable = true;
+        /**
+         * The width (in pixels) below which the user is not able to resize the column by using the UI.
+         */
+        this.minResizableWidth = 10;
+        this._locked = false;
+        /**
+         * Determines whether the column will be always visible when scrolling the Grid horizontally.
+         *
+         * @default false
+         */
+        this.sticky = false;
+        /**
+         * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
+         */
+        this.lockable = true;
+        /**
+         * Specifies if the column can be stuck or unstuck from the column menu.
+         */
+        this.stickable = true;
+        /**
+         * Specifies if the column menu will be shown for the column.
+         */
+        this.columnMenu = true;
+        /**
+         * Specifies if the column will be included in the column-chooser list.
+         */
+        this.includeInChooser = true;
+        /**
+         * @hidden
+         */
+        this.headerTemplates = new QueryList();
+        /**
+         * @hidden
+         */
+        this.columnMenuTemplates = new QueryList();
+        this.idService = idService;
+        if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
+            throw new Error('Columns can be nested only inside ColumnGroupComponent');
+        }
+    }
+    /**
+     * @hidden
+     */
+    set leafIndex(value) {
+        this._leafIndex = value;
+    }
+    /**
+     * @hidden
+     */
+    get leafIndex() {
+        return this._leafIndex;
+    }
+    /**
+     * The width of the column (in pixels).
+     */
+    set width(value) {
+        if (typeof value === 'string') {
+            const parsedValue = this._width = parseInt(value, 10);
+            if (isDevMode()) {
+                console.warn(`Expected numeric value for column width, but got a string "${value}". Treating as ${parsedValue}px.`);
+            }
+        }
+        else {
+            this._width = value;
+        }
+    }
+    get width() { return this._width; }
+    /**
+     * Toggles the locked (frozen) state of the columns ([more information and example]({% slug locked_columns_grid %})).
+     *
+     * @default false
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px">
+     *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120" [locked]="true">
+     *          </kendo-grid-column>
+     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200">
+     *          </kendo-grid-column>
+     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
+     *          </kendo-grid-column>
+     *        </kendo-grid>
+     *    `
+     * })
+     *
+     * class AppComponent {
+     *    public gridData: any[];
+     *
+     *    constructor() {
+     *        this.gridData = products;
+     *    }
+     * }
+     *
+     * const products = [{
+     *    "ProductID": 1,
+     *    "ProductName": "Chai",
+     *    "UnitPrice": 18.0000,
+     *    "Discontinued": true
+     *  }, {
+     *    "ProductID": 2,
+     *    "ProductName": "Chang",
+     *    "UnitPrice": 19.0000,
+     *    "Discontinued": false
+     *  }
+     * ];
+     *
+     * ```
+     */
+    set locked(value) {
+        this._locked = value;
+    }
+    get locked() {
+        return this._locked;
+    }
+    /**
+     * @hidden
+     */
+    get level() {
+        if (this.parent && isSpanColumn(this.parent)) {
+            return this.parent.level;
+        }
+        return this.parent ? this.parent.level + 1 : 0;
+    }
+    /**
+     * @hidden
+     */
+    get isLocked() {
+        return this.parent ? this.parent.isLocked : this.locked;
+    }
+    /**
+     * @hidden
+     */
+    get colspan() {
+        return 1;
+    }
+    /**
+     * @hidden
+     */
+    rowspan(totalColumnLevels) {
+        return this.level < totalColumnLevels ? (totalColumnLevels - this.level) + 1 : 1;
+    }
+    /**
+     * @hidden
+     */
+    get headerTemplateRef() {
+        const template = this.headerTemplates.first;
+        return template ? template.templateRef : undefined;
+    }
+    /**
+     * @hidden
+     */
+    get footerTemplateRef() {
+        return this.footerTemplate ? this.footerTemplate.templateRef : undefined;
+    }
+    /**
+     * @hidden
+     */
+    get columnMenuTemplateRef() {
+        const template = this.columnMenuTemplates.first;
+        return template ? template.templateRef : null;
+    }
+    /**
+     * @hidden
+     */
+    get displayTitle() {
+        return this.title;
+    }
+    /**
+     * @hidden
+     */
+    get isVisible() {
+        return !this.hidden && this.matchesMedia;
+    }
+}
+ColumnBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: i1.IdService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-column-base',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: ColumnBase }, { type: i1.IdService }]; }, propDecorators: { resizable: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], minResizableWidth: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], autoSize: [{
+                type: Input
+            }], locked: [{
+                type: Input
+            }], sticky: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], media: [{
+                type: Input
+            }], lockable: [{
+                type: Input
+            }], stickable: [{
+                type: Input
+            }], columnMenu: [{
+                type: Input
+            }], includeInChooser: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], headerStyle: [{
+                type: Input
+            }], filterStyle: [{
+                type: Input
+            }], footerStyle: [{
+                type: Input
+            }], cssClass: [{
+                type: Input,
+                args: ['class']
+            }], headerClass: [{
+                type: Input
+            }], filterClass: [{
+                type: Input
+            }], footerClass: [{
+                type: Input
+            }], headerTemplates: [{
+                type: ContentChildren,
+                args: [HeaderTemplateDirective, { descendants: false }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [FooterTemplateDirective, { static: false }]
+            }], columnMenuTemplates: [{
+                type: ContentChildren,
+                args: [ColumnMenuTemplateDirective]
+            }] } });

package/esm2015/columns/column-common.js

@@ -0,0 +1,73 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { isSpanColumnComponent } from "./span-column.component";
+import { isNullOrEmptyString, isTruthy } from "../utils";
+import { orderBy } from '@progress/kendo-data-query';
+/**
+ * @hidden
+ */
+export const expandColumns = (columns) => (columns.reduce((acc, column) => acc.concat(isSpanColumnComponent(column) ? column.childrenArray : [column]), []));
+/**
+ * @hidden
+ */
+export const expandColumnsWithSpan = (columns) => (columns.reduce((acc, column) => acc.concat(isSpanColumnComponent(column) ?
+    [column].concat(column.childrenArray) :
+    [column]), []));
+/**
+ * @hidden
+ */
+export const columnsToRender = (columns) => (expandColumns(columns).filter(x => x.isVisible));
+const sumProp = (prop) => (array) => (array || []).reduce((prev, curr) => prev + (curr[prop] || 0), 0);
+/**
+ * @hidden
+ */
+export const sumColumnWidths = sumProp('width');
+/**
+ * @hidden
+ */
+export const columnsSpan = sumProp('colspan');
+const validField = new RegExp(`^[$A-Z\_a-z][$A-Z\_a-z0-9\\.]*$`);
+/**
+ * @hidden
+ */
+export const isValidFieldName = (fieldName) => !isNullOrEmptyString(fieldName) && validField.test(fieldName) &&
+    fieldName[0] !== "." && fieldName[fieldName.length - 1] !== ".";
+/**
+ * @hidden
+ */
+export const children = column => column.children.filter(child => child !== column);
+/**
+ * @hidden
+ */
+export const leafColumns = columns => {
+    return columns.reduce((acc, column) => {
+        if (column.isColumnGroup) {
+            acc = acc.concat(leafColumns(children(column)));
+        }
+        else if (column.isSpanColumn) {
+            acc = acc.concat(column.childrenArray);
+        }
+        else {
+            acc.push(column);
+        }
+        return acc;
+    }, []).filter(x => x.isVisible);
+};
+/**
+ * @hidden
+ */
+export const someLeafColumn = (callback, ...columns) => leafColumns(columns).some(callback);
+/**
+ * @hidden
+ */
+export const resizableColumns = columns => columns.filter(column => isTruthy(column.resizable) && column.isVisible);
+/**
+ * @hidden
+ */
+export const sortColumns = (columns) => orderBy(columns, [{ field: 'orderIndex', dir: 'asc' }]);
+/**
+ * @hidden
+ */
+export const isInSpanColumn = (column) => isTruthy(column.parent) && isSpanColumnComponent(column.parent);

package/esm2015/columns/column-group.component.js

@@ -0,0 +1,153 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, SkipSelf, Host, Optional, ContentChildren } from '@angular/core';
+import { ColumnBase } from './column-base';
+import { columnsSpan } from './column-common';
+import * as i0 from "@angular/core";
+import * as i1 from "./column-base";
+import * as i2 from "../common/id.service";
+/**
+ * @hidden
+ */
+export function isColumnGroupComponent(column) {
+    return column.isColumnGroup;
+}
+/**
+ * Represents the column group header of the Grid
+ * ([more information and examples]({% slug multicolumnheaders_columns_grid %})).
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *     <kendo-grid [data]="gridData">
+ *       <kendo-grid-column-group title="Product Info">
+ *         <ng-template kendoGridHeaderTemplate let-columnIndex="columnIndex" let-column="column">
+ *               Column index: {{columnIndex}} / column title: {{column.title}}
+ *         </ng-template>
+ *         <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
+ *         </kendo-grid-column>
+ *         <kendo-grid-column field="ProductName" title="Product Name">
+ *         </kendo-grid-column>
+ *       </kendo-grid-column-group>
+ *       <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
+ *       </kendo-grid-column>
+ *       <kendo-grid-column field="Discontinued" [width]="120">
+ *           <ng-template kendoGridCellTemplate let-dataItem>
+ *               <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
+ *           </ng-template>
+ *       </kendo-grid-column>
+ *     </kendo-grid>
+ *    `
+ * })
+ *
+ * class AppComponent {
+ *    public gridData: any[];
+ *
+ *    constructor() {
+ *        this.gridData = products;
+ *    }
+ * }
+ *
+ * const products = [{
+ *    "ProductID": 1,
+ *    "ProductName": "Chai",
+ *    "UnitPrice": 18.0000,
+ *    "Discontinued": true
+ *  }, {
+ *    "ProductID": 2,
+ *    "ProductName": "Chang",
+ *    "UnitPrice": 19.0000,
+ *    "Discontinued": false
+ *  }
+ * ];
+ *
+ * ```
+ */
+export class ColumnGroupComponent extends ColumnBase {
+    constructor(parent, idService) {
+        super(parent, idService);
+        this.parent = parent;
+        /**
+         * @hidden
+         */
+        this.includeInChooser = false;
+        /**
+         * @hidden
+         */
+        this.isColumnGroup = true;
+        /**
+         * @hidden
+         */
+        this.minResizableWidth = 10;
+        if (parent && parent.isSpanColumn) {
+            throw new Error('ColumnGroupComponent cannot be nested inside SpanColumnComponent');
+        }
+    }
+    /**
+     * @hidden
+     */
+    rowspan() {
+        return 1;
+    }
+    /**
+     * @hidden
+     */
+    get colspan() {
+        if (!this.children || this.children.length === 1) {
+            return 1;
+        }
+        return columnsSpan(this.children
+            .filter(child => child !== this && child.isVisible));
+    }
+    /**
+     * @hidden
+     */
+    get leafIndex() {
+        return this.children ? (this.firstChild || {}).leafIndex : -1;
+    }
+    get childrenArray() {
+        return this.children.filter(c => c !== this);
+    }
+    get hasChildren() {
+        return Boolean(this.firstChild);
+    }
+    get firstChild() {
+        return this.children.find(column => column !== this);
+    }
+}
+ColumnGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnGroupComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }, { token: i2.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ColumnGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnGroupComponent, selector: "kendo-grid-column-group", providers: [
+        {
+            provide: ColumnBase,
+            useExisting: forwardRef(() => ColumnGroupComponent)
+        }
+    ], queries: [{ propertyName: "children", predicate: ColumnBase }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ColumnBase,
+                            useExisting: forwardRef(() => ColumnGroupComponent)
+                        }
+                    ],
+                    selector: 'kendo-grid-column-group',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ColumnBase, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i2.IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { children: [{
+                type: ContentChildren,
+                args: [ColumnBase]
+            }] } });

package/esm2015/columns/column-list.js

@@ -0,0 +1,93 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { QueryList } from '@angular/core';
+import { sortColumns } from './column-common';
+const forEachColumn = (list, callback) => {
+    list.forEach((column) => {
+        callback(column);
+        if (column.isColumnGroup && column.hasChildren) {
+            forEachColumn(column.childrenArray, callback);
+        }
+    });
+};
+const forEachLevel = (list, callback) => {
+    sortColumns(list)
+        .forEach((column) => {
+        callback(column);
+        if (column.isColumnGroup && column.hasChildren) {
+            forEachLevel(column.childrenArray, callback);
+        }
+    });
+};
+const filterHierarchy = (list, predicate) => {
+    const result = [];
+    sortColumns(list)
+        .forEach((column) => {
+        if (predicate(column)) {
+            if (column.isColumnGroup) {
+                const children = filterHierarchy(column.childrenArray, predicate);
+                if (children.length) {
+                    result.push(column, ...children);
+                }
+            }
+            else if (!column.isSpanColumn || filterHierarchy(column.childrenArray, predicate).length) {
+                result.push(column);
+            }
+        }
+    });
+    return result;
+};
+/**
+ * @hidden
+ */
+export class ColumnList {
+    constructor(columns) {
+        this.columns = columns;
+    }
+    static empty() {
+        return new ColumnList(new QueryList());
+    }
+    forEach(callback) {
+        forEachColumn(this.columns, callback);
+    }
+    filter(callback) {
+        const result = [];
+        forEachColumn(this.columns, (column) => {
+            if (callback(column)) {
+                result.push(column);
+            }
+        });
+        return result;
+    }
+    filterHierarchy(predicate) {
+        return filterHierarchy(this.columns.toArray(), predicate);
+    }
+    filterSort(callback) {
+        const result = [];
+        forEachLevel(this.columns.toArray(), (column) => {
+            if (callback(column)) {
+                result.push(column);
+            }
+        });
+        return result;
+    }
+    toArray() {
+        const result = [];
+        forEachColumn(this.columns, (column) => {
+            result.push(column);
+        });
+        return result;
+    }
+    rootColumns() {
+        return this.columns.toArray();
+    }
+    totalColumnLevels() {
+        let totalLevels = 0;
+        this.forEach(column => {
+            totalLevels = Math.max(column.level, totalLevels);
+        });
+        return totalLevels;
+    }
+}