@progress/kendo-angular-grid 21.4.1 → 22.0.0

package/esm2022/pdf/pdf.component.mjs

@@ -1,331 +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, Input, ContentChild, ContentChildren, ElementRef, NgZone, QueryList, Optional } from '@angular/core';
-import { delay, take } from 'rxjs/operators';
-import { SuspendService } from '../scrolling/suspend.service';
-import { PDFService } from './pdf.service';
-import { PDFMarginComponent } from './pdf-margin.component';
-import { PDFTemplateDirective } from './pdf-template.directive';
-import { exportElement, cloneNode } from './export-element';
-import { GridQuery } from './grid-query';
-import { ColumnBase } from '../columns/column-base';
-import { PDFExportComponent } from '@progress/kendo-angular-pdf-export';
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
-import { ContextService } from '../common/provider.service';
-import { GridConfigurationErrorMessages } from '../common/error-messages';
-import * as i0 from "@angular/core";
-import * as i1 from "./pdf.service";
-import * as i2 from "../scrolling/suspend.service";
-import * as i3 from "../common/provider.service";
-const createElement = (tagName, className) => {
-    const element = document.createElement(tagName);
-    if (className) {
-        element.className = className;
-    }
-    return element;
-};
-const createDiv = (className) => {
-    return createElement('div', className);
-};
-/**
- * Configures the settings for exporting the Grid to PDF. ([See example]({% slug pdfexport_grid %})).
- *
- * Use this component to customize PDF export options for the Grid.
- *
- * @example
- * ```html
- * <kendo-grid>
- *   <kendo-grid-pdf [allPages]="true" [delay]="100"></kendo-grid-pdf>
- * </kendo-grid>
- * ```
- * @remarks
- * Supported children components are: {@link PDFMarginComponent}.
- */
-export class PDFComponent extends PDFExportComponent {
-    pdfService;
-    suspendService;
-    ngZone;
-    ctx;
-    /**
-     * Exports all Grid pages, starting from the first page.
-     */
-    allPages;
-    /**
-     * Sets the delay in milliseconds before exporting the Grid content.
-     * Use this property when exporting complex components in Grid templates, such as charts or data-bound components with asynchronous data retrieval. ([See example]({% slug pdfexport_grid %}#toc-exporting-all-pages)).
-     *
-     * @default 0
-     */
-    delay = 0;
-    columns = new QueryList();
-    /**
-     * @hidden
-     */
-    marginComponent;
-    /**
-     * @hidden
-     */
-    pageTemplateDirective;
-    progress;
-    component;
-    container;
-    skip;
-    pageSize;
-    originalHeight;
-    originalOverflow;
-    saveSubscription;
-    drawSubscription;
-    renderAllPages;
-    originalColumns;
-    restoreDOMVirtualization;
-    constructor(pdfService, suspendService, ngZone, element, ctx) {
-        super(element);
-        this.pdfService = pdfService;
-        this.suspendService = suspendService;
-        this.ngZone = ngZone;
-        this.ctx = ctx;
-        this.saveSubscription = pdfService.savePDF.subscribe(this.savePDF.bind(this));
-        this.drawSubscription = pdfService.drawPDF.subscribe(this.drawPDF.bind(this));
-        this.reset = this.reset.bind(this);
-        this.draw = this.draw.bind(this);
-        if (this.ctx) {
-            this.ctx.pdfComponent = this;
-        }
-    }
-    ngOnDestroy() {
-        this.saveSubscription.unsubscribe();
-        this.drawSubscription.unsubscribe();
-        this.reset();
-        if (this.ctx?.pdfComponent === this) {
-            this.ctx.pdfComponent = undefined;
-        }
-    }
-    /**
-     * @hidden
-     */
-    saveAs() {
-        throw new Error(GridConfigurationErrorMessages.unsupportedMethod('saveAs', 'GridComponent.saveAsPDF'));
-    }
-    /**
-     * @hidden
-     */
-    export() {
-        throw new Error(GridConfigurationErrorMessages.unsupportedMethod('export', 'GridComponent.drawPDF'));
-    }
-    savePDF(component) {
-        this.createPDF(component, this.draw);
-    }
-    drawPDF({ component, promise }) {
-        this.createPDF(component, () => {
-            this.createExportGroup(promise);
-        });
-    }
-    createPDF(component, callback) {
-        const pageSize = component.pageSize;
-        const total = component.view.total;
-        const columns = this.columns.toArray();
-        if (columns.length) {
-            this.originalColumns = component.columns.toArray();
-        }
-        this.component = component;
-        this.suspendService.scroll = true;
-        this.pdfService.exporting = true;
-        this.initProgress();
-        this.renderAllPages = this.allPages && pageSize < total;
-        if (component.isVirtual && component.pageable) {
-            component.scrollable = 'scrollable';
-            this.restoreDOMVirtualization = true;
-            if (!this.renderAllPages) {
-                this.changePage(component.skip, pageSize, callback, columns);
-                if (!(columns.length || component.virtualColumns)) {
-                    return;
-                }
-            }
-        }
-        if (this.renderAllPages) {
-            this.skip = component.skip;
-            this.pageSize = pageSize;
-            this.changePage(0, total, callback, columns);
-        }
-        else if (columns.length || component.virtualColumns) {
-            this.changeColumns(columns, callback);
-        }
-        else {
-            callback();
-        }
-    }
-    initProgress() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        const wrapperElement = this.component.wrapper.nativeElement;
-        const progress = this.progress = createDiv('k-loading-pdf-mask');
-        const overlay = cloneNode(wrapperElement);
-        progress.appendChild(overlay);
-        progress.appendChild(createDiv('k-loading-color'));
-        progress.appendChild(createElement('span', 'k-i-loading k-icon'));
-        this.originalHeight = wrapperElement.style.height;
-        this.originalOverflow = wrapperElement.style.overflow;
-        wrapperElement.style.height = wrapperElement.offsetHeight + 'px';
-        wrapperElement.style.overflow = 'hidden';
-        wrapperElement.appendChild(progress);
-        this.applyScroll(overlay);
-    }
-    applyScroll(overlay) {
-        const query = new GridQuery(this.component.wrapper.nativeElement);
-        const content = query.content();
-        if (content) {
-            const overlayQuery = new GridQuery(overlay);
-            const overlayContent = overlayQuery.content();
-            overlayContent.scrollTop = content.scrollTop;
-            overlayContent.scrollLeft = content.scrollLeft;
-            if (!this.ctx?.grid?.isStacked) {
-                const header = query.header();
-                const overlayHeader = overlayQuery.header();
-                if (header && overlayHeader) {
-                    overlayHeader.scrollLeft = header.scrollLeft;
-                }
-            }
-            const footer = query.footer();
-            const overlayFooter = overlayQuery.footer();
-            if (footer && overlayFooter) {
-                overlayFooter.scrollLeft = footer.scrollLeft;
-            }
-            const lockedContent = query.content(true);
-            if (lockedContent) {
-                const overlayLockedContent = overlayQuery.content(true);
-                overlayLockedContent.scrollTop = lockedContent.scrollTop;
-                overlayLockedContent.scrollLeft = lockedContent.scrollLeft;
-            }
-        }
-    }
-    draw() {
-        this.createExportElement((element) => {
-            this.save(element, this.fileName);
-        });
-    }
-    createExportGroup(promise) {
-        this.createExportElement((element) => {
-            this.exportElement(element).then(group => promise.resolve(group));
-        });
-    }
-    createExportElement(callback) {
-        this.ngZone.runOutsideAngular(() => {
-            const container = this.container = createDiv('k-grid-pdf-export-element');
-            const element = exportElement(this.component.wrapper.nativeElement, this.ctx?.grid.size || 'medium');
-            container.appendChild(element);
-            document.body.appendChild(container);
-            callback(element);
-        });
-    }
-    drawOptions() {
-        const options = super.drawOptions();
-        options._destructive = true;
-        return options;
-    }
-    cleanup() {
-        super.cleanup();
-        this.pdfService.exporting = false;
-        if (this.component) {
-            const originalColumns = this.originalColumns;
-            delete this.originalColumns;
-            if (this.restoreDOMVirtualization) {
-                this.component.scrollable = 'virtual';
-                this.pdfService.restoreDOMVirtualization.emit();
-                this.restoreDOMVirtualization = false;
-            }
-            if (this.renderAllPages) {
-                this.changePage(this.skip, this.pageSize, this.reset, originalColumns);
-            }
-            else if (originalColumns || this.component.virtualColumns) {
-                this.changeColumns(originalColumns, this.reset);
-            }
-            else {
-                this.reset();
-            }
-        }
-        else {
-            this.reset();
-        }
-        this.removeContainer();
-    }
-    removeContainer() {
-        if (this.container) {
-            document.body.removeChild(this.container);
-            delete this.container;
-        }
-    }
-    changePage(skip, _take, callback, columns) {
-        this.ngZone.run(() => {
-            this.pdfService.dataChanged.pipe(take(1)).subscribe(() => {
-                if ((columns && columns.length) || this.component.virtualColumns) {
-                    this.changeColumns(columns, callback);
-                }
-                else {
-                    this.onStable(callback);
-                }
-            });
-            this.component.notifyPageChange('pdf', { skip: skip, take: _take });
-        });
-    }
-    changeColumns(columns, callback) {
-        this.ngZone.run(() => {
-            this.onStable(callback);
-            if (columns && columns.length) {
-                this.component.columns.reset(columns);
-            }
-        });
-    }
-    reset() {
-        this.suspendService.scroll = false;
-        this.renderAllPages = false;
-        if (!this.component) {
-            return;
-        }
-        const wrapperElement = this.component.wrapper.nativeElement;
-        wrapperElement.removeChild(this.progress);
-        wrapperElement.style.height = this.originalHeight;
-        wrapperElement.style.overflow = this.originalOverflow;
-        delete this.progress;
-        delete this.component;
-    }
-    onStable(callback) {
-        // not sure if it is an actual scenario. occurs in the tests.
-        // onStable is triggered in the same pass without the change detection.
-        // thus, the callback is called before the changes are applied without the timeout.
-        setTimeout(() => {
-            let onStable = this.ngZone.onStable.asObservable().pipe(take(1));
-            if (this.delay > 0) {
-                onStable = onStable.pipe(delay(this.delay));
-            }
-            onStable.subscribe(callback);
-        }, 0);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFComponent, deps: [{ token: i1.PDFService }, { token: i2.SuspendService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i3.ContextService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PDFComponent, isStandalone: true, selector: "kendo-grid-pdf", inputs: { allPages: "allPages", delay: "delay" }, queries: [{ propertyName: "marginComponent", first: true, predicate: PDFMarginComponent, descendants: true }, { propertyName: "pageTemplateDirective", first: true, predicate: PDFTemplateDirective, descendants: true }, { propertyName: "columns", predicate: ColumnBase }], usesInheritance: true, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-grid-pdf',
-                    template: '',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1.PDFService }, { type: i2.SuspendService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i3.ContextService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { allPages: [{
-                type: Input
-            }], delay: [{
-                type: Input
-            }], columns: [{
-                type: ContentChildren,
-                args: [ColumnBase]
-            }], marginComponent: [{
-                type: ContentChild,
-                args: [PDFMarginComponent, { static: false }]
-            }], pageTemplateDirective: [{
-                type: ContentChild,
-                args: [PDFTemplateDirective, { static: false }]
-            }] } });

package/esm2022/pdf/pdf.module.mjs

@@ -1,47 +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 { NgModule } from '@angular/core';
-import { IconsService, KENDO_ICONS } from '@progress/kendo-angular-icons';
-import { KENDO_GRID_PDF_EXPORT } from '../directives';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-icons";
-import * as i2 from "./pdf.component";
-import * as i3 from "./pdf-margin.component";
-import * as i4 from "./pdf-command.directive";
-import * as i5 from "./pdf-template.directive";
-import * as i6 from "./pdf-command-tool.directive";
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) definition for the Grid PDF component.
- * Use this module to enable PDF export in the Grid for NgModule-based applications.
- *
- * @example
- * ```typescript
- * import { NgModule } from '@angular/core';
- * import { BrowserModule } from "@angular/platform-browser";
- * import { GridModule, PDFModule } from '@progress/kendo-angular-grid';
- * import { AppComponent } from './app.component';
- *
- * @NgModule({
- *     declarations: [AppComponent],
- *     imports:      [BrowserModule, GridModule, PDFModule],
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- * ```
- */
-export class PDFModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PDFModule, imports: [i1.IconComponent, i1.SVGIconComponent, i2.PDFComponent, i3.PDFMarginComponent, i4.PDFCommandDirective, i5.PDFTemplateDirective, i6.PDFCommandToolbarDirective], exports: [i2.PDFComponent, i3.PDFMarginComponent, i4.PDFCommandDirective, i5.PDFTemplateDirective, i6.PDFCommandToolbarDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFModule, providers: [IconsService], imports: [KENDO_ICONS, i4.PDFCommandDirective] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...KENDO_ICONS, ...KENDO_GRID_PDF_EXPORT],
-                    exports: [...KENDO_GRID_PDF_EXPORT],
-                    providers: [IconsService]
-                }]
-        }] });

package/esm2022/pdf/pdf.service.mjs

@@ -1,42 +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 { EventEmitter, Injectable, isDevMode } from '@angular/core';
-import { GridConfigurationErrorMessages } from '../common/error-messages';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export class PDFService {
-    savePDF = new EventEmitter();
-    drawPDF = new EventEmitter();
-    exportClick = new EventEmitter();
-    dataChanged = new EventEmitter();
-    exporting;
-    restoreDOMVirtualization = new EventEmitter();
-    save(component) {
-        this.emitEvent(this.savePDF, component);
-    }
-    draw(component, promise) {
-        this.emitEvent(this.drawPDF, { component, promise });
-    }
-    /**
-     * @hidden
-     */
-    emitEvent(emitter, args) {
-        if (emitter.observers.length === 0) {
-            if (isDevMode()) {
-                throw new Error(GridConfigurationErrorMessages.requiredModule('PDF', 'PDFModule', '<kendo-grid-pdf>'));
-            }
-        }
-        else {
-            emitter.emit(args);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PDFService, decorators: [{
-            type: Injectable
-        }] });

package/esm2022/progress-kendo-angular-grid.mjs

@@ -1,8 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './index';

package/esm2022/rendering/cell-loading.template.directive.mjs

@@ -1,39 +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 { Directive, TemplateRef, Optional } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * The directive allows customizing the loading indicator for virtual scrolling cells in the Grid.
- * Place an `<ng-template>` tag with the `kendoGridCellLoadingTemplate` directive inside `<kendo-grid>` to define the loading cell template. ([See example]({% slug virtualscrolling_grid %}#toc-custom-loading-skeleton)).
- *
- * The template context is set to the current column. You can use the following field:
- * - `column`&mdash;The current column instance. This is the default context for any template variable that uses the `let-x` syntax (for example, `let-column`).
- *
- * @example
- * ```html
- * <kendo-grid ... scrollable="virtual" [rowHeight]="36" [height]="450">
- *   <ng-template kendoGridCellLoadingTemplate let-column>
- *    ...
- *   </ng-template>
- * </kendo-grid>
- * ```
- */
-export class CellLoadingTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellLoadingTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CellLoadingTemplateDirective, isStandalone: true, selector: "[kendoGridCellLoadingTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellLoadingTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridCellLoadingTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }] });

package/esm2022/rendering/cell-template.directive.mjs

@@ -1,44 +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 { Directive, TemplateRef, Optional } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Lets you customize the content of Grid cells.
- * Place an `<ng-template>` tag with the `kendoGridCellTemplate` directive inside a `<kendo-grid-column>` tag to define the cell template. ([See example](slug:templates_columns_grid#toc-cell-template)).
- *
- * The template context is set to the current data item. You can use these fields:
- * - `columnIndex`&mdash;The current column index. Use `let-columnIndex="columnIndex"` in your template.
- * - `rowIndex`&mdash;The current data row index. Use `let-rowIndex="rowIndex"` in your template.
- * - `dataItem`&mdash;The current data item. This is the default context for any template variable that uses the `let-x` syntax, such as `let-dataItem`.
- * - `column`&mdash;The current column instance. Use `let-column="column"` in your template.
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData" ...>
- *   <kendo-grid-column field="ProductName">
- *     <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">
- *       Data Row: {{rowIndex}}
- *     </ng-template>
- *   </kendo-grid-column>
- * </kendo-grid>
- * ```
- */
-export class CellTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CellTemplateDirective, isStandalone: true, selector: "[kendoGridCellTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridCellTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }] });