@progress/kendo-angular-grid 21.4.1 → 22.0.0

package/esm2022/columns/column-base.mjs

@@ -1,432 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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 { IdService } from '../common/id.service';
-import { ColumnConfigurationErrorMessages } from '../common/error-messages';
-import { defaultCellRowSpan } from '../utils';
-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;
-/**
- * @hidden
- */
-export const isRowReorderColumn = column => column?.isRowReorderColumn;
-const isColumnContainer = column => column?.isColumnGroup || isSpanColumn(column);
-/**
- * The base class for the column components of the Grid.
- *
- * Use this class as a foundation for custom column implementations.
- */
-export class ColumnBase {
-    parent;
-    /**
-     * @hidden
-     */
-    isReordered;
-    /**
-     * @hidden
-     */
-    initialMaxResizableWidth;
-    /**
-     * @hidden
-     */
-    initialMinResizableWidth;
-    /**
-     * @hidden
-     */
-    initiallyChecked;
-    /**
-     * @hidden
-     */
-    currentlyChecked;
-    /**
-     * @hidden
-     */
-    matchesMedia = true;
-    /**
-     * Gets the column index after reordering. The `orderIndex` property is read-only. Setting this field does not change the column order.
-     *
-     * @default 0
-     */
-    orderIndex = 0;
-    /**
-     * @hidden
-     */
-    set leafIndex(value) {
-        this._leafIndex = value;
-    }
-    /**
-     * @hidden
-     */
-    get leafIndex() {
-        return this._leafIndex;
-    }
-    _leafIndex;
-    /**
-     * @hidden
-     */
-    isColumnGroup = false;
-    /**
-     * @hidden
-     */
-    isSpanColumn = false;
-    /**
-     * Specifies if the column is resizable.
-     * @default true
-     */
-    resizable = true;
-    /**
-     * Specifies if the column is reorderable.
-     * @default true
-     */
-    reorderable = true;
-    /**
-     * Sets the minimum width (in pixels) for resizing the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
-     * The `autoFitColumn` and `autoFitColumns` methods have higher priority.
-     * @default 10
-     */
-    minResizableWidth = 10;
-    /**
-     * Sets the maximum width (in pixels) for resizing the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
-     * By default, the maximum width is not restricted.
-     * The `autoFitColumn` and `autoFitColumns` methods have higher priority.
-     */
-    maxResizableWidth;
-    /**
-     * Sets the column title.
-     */
-    title;
-    /**
-     * Sets the column width (in pixels).
-     */
-    set width(value) {
-        if (typeof value === 'string') {
-            const parsedValue = this._width = parseInt(value, 10);
-            if (isDevMode()) {
-                console.warn(ColumnConfigurationErrorMessages.width(value, parsedValue));
-            }
-        }
-        else {
-            this._width = value;
-        }
-    }
-    get width() { return this._width; }
-    /**
-     * Specifies if the column is automatically resized during initialization to fit its header and row content.
-     */
-    autoSize;
-    /**
-     * Toggles the locked (frozen) state of the column ([more information and example]({% slug locked_columns_grid %})).
-     *
-     * @default false
-     */
-    set locked(value) {
-        this._locked = value;
-    }
-    get locked() {
-        return this._locked;
-    }
-    _locked = false;
-    /**
-     * Specifies if the column is always visible when scrolling the Grid horizontally.
-     *
-     * @default false
-     */
-    sticky = false;
-    /**
-     * Sets the visibility of the column ([see example](slug:hidden_columns_grid#toc-using-the-built-in-options)).
-     *
-     * @default false
-     */
-    hidden;
-    /**
-     * Sets the condition for the column to remain visible ([see example]({% slug styling_responsive_grid %}#toc-columns)).
-     * If you set the `hidden` property, `media` is ignored.
-     *
-     * Accepts device identifiers from [Bootstrap 4](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options)
-     * ([see example](slug:styling_responsive_grid)).
-     */
-    media;
-    /**
-     * Specifies if the column can be locked or unlocked from the column menu or by reordering.
-     * @default true
-     */
-    lockable = true;
-    /**
-     * Specifies if the column can be stuck or unstuck from the column menu.
-     * @default true
-     */
-    stickable = true;
-    /**
-     * Specifies if the column menu is shown for the column.
-     * @default true
-     */
-    columnMenu = true;
-    /**
-     * Specifies if the column is included in the column-chooser list.
-     * @default true
-     */
-    includeInChooser = true;
-    /**
-     * Sets the `role` attribute for the table cells (excluding footer and header) of the column.
-     * @default "gridcell"
-     */
-    tableCellsRole = 'gridcell';
-    /**
-     * Sets custom styles for the table cells (excluding footer and header) of the column.
-     * Uses the [`NgStyle`](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
-     */
-    style;
-    /**
-     * Sets custom styles for the header cell of the column.
-     * Uses the [`NgStyle`](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
-     */
-    headerStyle;
-    /**
-     * Sets custom styles for the filter row cell.
-     * Uses the [`NgStyle`](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
-     */
-    filterStyle;
-    /**
-     * Sets custom styles for the footer cell of the column.
-     * Uses the [`NgStyle`](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
-     */
-    footerStyle;
-    /**
-     * Sets custom CSS classes to the column cells.
-     * Uses the [`NgClass`](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
-     * To customize header and footer column cells, use the [headerClass]({% slug api_grid_columncomponent %}#toc-headerclass)
-     * and [footerClass]({% slug api_grid_columncomponent %}#toc-footerclass) inputs.
-     */
-    cssClass;
-    /**
-     * Sets custom CSS classes to the column header cell.
-     * Uses the [`NgClass`](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
-     */
-    headerClass;
-    /**
-     * Sets custom CSS classes to the filter row cell.
-     * Uses the [`NgClass`](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
-     */
-    filterClass;
-    /**
-     * Sets custom CSS classes to the column footer cell.
-     * Uses the [`NgClass`](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
-     */
-    footerClass;
-    /**
-     * Defines a function to determine the rowspan of each column cell.
-     * If you set this to `true`, a default function is used that spans adjacent cells with equal values.
-     * Cells have equal values when their data items' values for the respective field are equal.
-     */
-    set cellRowspan(cellRowspan) {
-        if (isDevMode() && (this.isSpanColumn || this.isColumnGroup)) {
-            throw new Error(ColumnConfigurationErrorMessages.cellRowspanSpanGroupedColumns);
-        }
-        if (cellRowspan) {
-            const isFunction = typeof cellRowspan === 'function';
-            const isBoolean = typeof cellRowspan === 'boolean';
-            if (isDevMode() && !this.field && !isFunction) {
-                throw new Error(ColumnConfigurationErrorMessages.cellRowspanNonBoundColumns);
-            }
-            if (isDevMode() && !(isBoolean || isFunction)) {
-                throw new Error(ColumnConfigurationErrorMessages.cellRowspan);
-            }
-            this._cellRowspan = isBoolean ? defaultCellRowSpan : cellRowspan;
-        }
-    }
-    get cellRowspan() {
-        return this._cellRowspan;
-    }
-    /**
-     * @hidden
-     */
-    headerTemplates = new QueryList();
-    /**
-     * @hidden
-     */
-    footerTemplate;
-    /**
-     * @hidden
-     */
-    columnMenuTemplates = new QueryList();
-    /**
-     * @hidden
-     */
-    resizeStartWidth;
-    /**
-     * @hidden
-     */
-    idService;
-    /**
-     * @hidden
-     */
-    _cellRowspan;
-    /**
-     * @hidden
-     */
-    implicitWidth;
-    /**
-     * @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;
-    }
-    _width;
-    /**
-     * @hidden
-     */
-    get id() {
-        return this._id;
-    }
-    /**
-     * @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;
-    }
-    _id;
-    /**
-     * @hidden
-     */
-    constructor(parent, idService) {
-        this.parent = parent;
-        this.idService = idService;
-        if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
-            throw new Error(ColumnConfigurationErrorMessages.columnNested);
-        }
-        this._id = this.idService?.nextColumnId();
-    }
-    ngAfterViewInit() {
-        this.initialMinResizableWidth = this.minResizableWidth || 10;
-        this.initialMaxResizableWidth = this.maxResizableWidth || Number.MAX_SAFE_INTEGER;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: i1.IdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass", cellRowspan: "cellRowspan" }, 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: "18.2.14", ngImport: i0, type: ColumnBase, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-grid-column-base',
-                    template: ``
-                }]
-        }], ctorParameters: () => [{ type: ColumnBase }, { type: i1.IdService }], propDecorators: { resizable: [{
-                type: Input
-            }], reorderable: [{
-                type: Input
-            }], minResizableWidth: [{
-                type: Input
-            }], maxResizableWidth: [{
-                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
-            }], tableCellsRole: [{
-                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
-            }], cellRowspan: [{
-                type: Input
-            }], headerTemplates: [{
-                type: ContentChildren,
-                args: [HeaderTemplateDirective, { descendants: false }]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: [FooterTemplateDirective, { static: false }]
-            }], columnMenuTemplates: [{
-                type: ContentChildren,
-                args: [ColumnMenuTemplateDirective]
-            }] } });

package/esm2022/columns/column-common.mjs

@@ -1,73 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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/esm2022/columns/column-group.component.mjs

@@ -1,135 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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, QueryList, ContentChildren } from '@angular/core';
-import { IdService } from '../common/id.service';
-import { ColumnBase } from './column-base';
-import { columnsSpan } from './column-common';
-import { ColumnConfigurationErrorMessages } from '../common/error-messages';
-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)).
- *
- * Use this component to group columns under a common header.
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData">
- *   <kendo-grid-column-group title="Product Info">
- *     <kendo-grid-column field="ProductID"></kendo-grid-column>
- *     <kendo-grid-column field="ProductName"></kendo-grid-column>
- *   </kendo-grid-column-group>
- *   <kendo-grid-column field="UnitPrice"></kendo-grid-column>
- * </kendo-grid>
- * ```
- */
-export class ColumnGroupComponent extends ColumnBase {
-    parent;
-    /**
-     * @hidden
-     */
-    includeInChooser = false;
-    /**
-     * @hidden
-     */
-    isColumnGroup = true;
-    /**
-     * @hidden
-     */
-    minResizableWidth = 10;
-    /**
-     * @hidden
-     */
-    maxResizableWidth;
-    /**
-     * @hidden
-     */
-    children;
-    constructor(parent, idService) {
-        super(parent, idService);
-        this.parent = parent;
-        if (parent && parent.isSpanColumn) {
-            throw new Error(ColumnConfigurationErrorMessages.nestedInside('ColumnGroupComponent', 'SpanColumnComponent'));
-        }
-    }
-    /**
-     * @hidden
-     */
-    rowspan() {
-        return 1;
-    }
-    /**
-     * @hidden
-     *
-     * Used to hide the cellRowspan property from the public API.
-     */
-    set cellRowspan(cellRowSpan) {
-        super.cellRowspan = cellRowSpan;
-    }
-    /**
-     * @hidden
-     */
-    get colspan() {
-        if (!this.children) {
-            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);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnGroupComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }, { token: i2.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ColumnGroupComponent, isStandalone: true, 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: "18.2.14", ngImport: i0, type: ColumnGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: ColumnBase,
-                            useExisting: forwardRef(() => ColumnGroupComponent)
-                        }
-                    ],
-                    selector: 'kendo-grid-column-group',
-                    template: ``,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1.ColumnBase, decorators: [{
-                    type: SkipSelf
-                }, {
-                    type: Host
-                }, {
-                    type: Optional
-                }] }, { type: i2.IdService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { children: [{
-                type: ContentChildren,
-                args: [ColumnBase]
-            }] } });