@progress/kendo-angular-pivotgrid 15.2.0-develop.1 → 15.2.0-develop.3

package/esm2020/rendering/templates/pivotgrid-value-cell-template.directive.mjs

@@ -0,0 +1,40 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 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 value cell template of the PivotGrid.
+ * Helps to customize the content of the value cells. To define the value cell template, nest an `<ng-template>` tag with the
+ * `kendoPivotGridValueCellTemplate` directive inside a `<kendo-pivot-grid>` tag [see example](slug:templates_pivotgrid#toc-value-cell-template).
+ *
+ * The template context is set to the current cell item and the following additional fields are passed:
+ * - `cellItem`&mdash;The current cell item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-cellItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The current data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `tableType`&mdash;The table type. Use it as an alias for a template variable by utilizing the `let-tableType="tableType"` syntax.
+ * - `value`&mdash;The default cell value. Use it as an alias for a template variable by utilizing the `let-value="value"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-pivot-grid [data]="data" ...>
+ *     <ng-template kendoPivotGridValueCellTemplate let-cellItem let-rowIndex="rowIndex" let-column="column">
+ *       Row: {{rowIndex}}
+ *     </ng-template>
+ * </kendo-pivot-grid>
+ * ```
+ */
+export class ValueCellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ValueCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ValueCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ValueCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ValueCellTemplateDirective, selector: "[kendoPivotGridValueCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ValueCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotGridValueCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

package/fesm2015/progress-kendo-angular-pivotgrid.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Output, Component, HostBinding, Input, Directive, ContentChildren, isDevMode, Optional, ContentChild, forwardRef, ViewChild, ElementRef, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Output, Directive, Component, HostBinding, Input, ContentChildren, isDevMode, Optional, ContentChild, forwardRef, ViewChild, ElementRef, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$1 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, PreventableEvent, Keys, isChanged, hasObservers, anyChanged, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
@@ -18,13 +18,13 @@ import * as i2 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i5 from '@progress/kendo-angular-buttons';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import * as i5$1 from '@progress/kendo-angular-indicators';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import * as i4 from '@progress/kendo-angular-treeview';
 import { TreeViewComponent, TreeViewModule } from '@progress/kendo-angular-treeview';
 import * as i1$2 from '@progress/kendo-angular-popup';
-import * as i5 from '@progress/kendo-angular-buttons';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -41,8 +41,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1709657996,
-    version: '15.2.0-develop.1',
+    publishDate: 1709730569,
+    version: '15.2.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -321,6 +321,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/**
+ * Represents the cell template of the PivotGrid.
+ * Helps to customize the content of the cells. To define the cell template, nest an `<ng-template>` tag with the
+ * `kendoPivotGridCellTemplate` directive inside a `<kendo-pivot-grid>` tag [see example](slug:templates_pivotgrid#toc-cell-template).
+ *
+ * The template context is set to the current cell item and the following additional fields are passed:
+ * - `cellItem`&mdash;The current cell item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-cellItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The current data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `expanded`&mdash;The expanded state of the cell. Use it as an alias for a template variable by utilizing the `let-expanded="expanded"` syntax.
+ * - `tableType`&mdash;The table type. Use it as an alias for a template variable by utilizing the `let-tableType="tableType"` syntax.
+ * - `text`&mdash;The default cell text. Use it as an alias for a template variable by utilizing the `let-text="text"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-pivot-grid [data]="data" ...>
+ *     <ng-template kendoPivotGridCellTemplate let-cellItem let-rowIndex="rowIndex" let-column="column">
+ *       Row: {{rowIndex}}
+ *     </ng-template>
+ * </kendo-pivot-grid>
+ * ```
+ */
+class CellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CellTemplateDirective, selector: "[kendoPivotGridCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotGridCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Represents the value cell template of the PivotGrid.
+ * Helps to customize the content of the value cells. To define the value cell template, nest an `<ng-template>` tag with the
+ * `kendoPivotGridValueCellTemplate` directive inside a `<kendo-pivot-grid>` tag [see example](slug:templates_pivotgrid#toc-value-cell-template).
+ *
+ * The template context is set to the current cell item and the following additional fields are passed:
+ * - `cellItem`&mdash;The current cell item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-cellItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The current data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `tableType`&mdash;The table type. Use it as an alias for a template variable by utilizing the `let-tableType="tableType"` syntax.
+ * - `value`&mdash;The default cell value. Use it as an alias for a template variable by utilizing the `let-value="value"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-pivot-grid [data]="data" ...>
+ *     <ng-template kendoPivotGridValueCellTemplate let-cellItem let-rowIndex="rowIndex" let-column="column">
+ *       Row: {{rowIndex}}
+ *     </ng-template>
+ * </kendo-pivot-grid>
+ * ```
+ */
+class ValueCellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ValueCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ValueCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ValueCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ValueCellTemplateDirective, selector: "[kendoPivotGridValueCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ValueCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotGridValueCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Represents the row header cell template of the PivotGrid.
+ * Helps to customize the content of the row header cells. To define the row header cell template, nest an `<ng-template>` tag with the
+ * `kendoPivotGridRowHeaderCellTemplate` directive inside a `<kendo-pivot-grid>` tag [see example](slug:templates_pivotgrid#toc-row-header-cell-template).
+ *
+ * The template context is set to the current cell item and the following additional fields are passed:
+ * - `cellItem`&mdash;The current cell item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-cellItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The current data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `expanded`&mdash;The expanded state of the cell. Use it as an alias for a template variable by utilizing the `let-expanded="expanded"` syntax.
+ * - `tableType`&mdash;The table type. Use it as an alias for a template variable by utilizing the `let-tableType="tableType"` syntax.
+ * - `text`&mdash;The default cell text. Use it as an alias for a template variable by utilizing the `let-text="text"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-pivot-grid [data]="data" ...>
+ *     <ng-template kendoPivotGridRowHeaderCellTemplate let-cellItem let-rowIndex="rowIndex" let-column="column">
+ *       Row: {{rowIndex}}
+ *     </ng-template>
+ * </kendo-pivot-grid>
+ * ```
+ */
+class RowHeaderCellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+RowHeaderCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+RowHeaderCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: RowHeaderCellTemplateDirective, selector: "[kendoPivotGridRowHeaderCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowHeaderCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotGridRowHeaderCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Represents the column header cell template of the PivotGrid.
+ * Helps to customize the content of the column header cells. To define the column header cell template, nest an `<ng-template>` tag with the
+ * `kendoPivotGridColumnHeaderCellTemplate` directive inside a `<kendo-pivot-grid>` tag [see example](slug:templates_pivotgrid#toc-column-header-cell-template).
+ *
+ * The template context is set to the current cell item and the following additional fields are passed:
+ * - `cellItem`&mdash;The current cell item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-cellItem`.
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The current data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `expanded`&mdash;The expanded state of the cell. Use it as an alias for a template variable by utilizing the `let-expanded="expanded"` syntax.
+ * - `tableType`&mdash;The table type. Use it as an alias for a template variable by utilizing the `let-tableType="tableType"` syntax.
+ * - `text`&mdash;The default cell text. Use it as an alias for a template variable by utilizing the `let-text="text"` syntax.
+ *
+ * @example
+ * ```html
+ * <kendo-pivot-grid [data]="data" ...>
+ *     <ng-template kendoPivotGridColumnHeaderCellTemplate let-cellItem let-rowIndex="rowIndex" let-column="column">
+ *       Row: {{rowIndex}}
+ *     </ng-template>
+ * </kendo-pivot-grid>
+ * ```
+ */
+class ColumnHeaderCellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ColumnHeaderCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnHeaderCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ColumnHeaderCellTemplateDirective, selector: "[kendoPivotGridColumnHeaderCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnHeaderCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoPivotGridColumnHeaderCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 /**
  * @hidden
  */
@@ -340,9 +483,14 @@ class PivotGridCellDirective {
             });
         };
     }
+    get isNotProvidedCellTemplatePerType() {
+        return (this.tableType === 'values' && !this.valueCellTemplate)
+            || (this.tableType === 'rowHeader' && !this.rowHeaderCellTemplate)
+            || (this.tableType === 'columnHeader' && !this.columnHeaderCellTemplate);
+    }
     get expanded() {
         var _a;
-        return ((_a = this.kendoPivotGridCell) === null || _a === void 0 ? void 0 : _a.hasChildren) && this.kendoPivotGridCell.children.length;
+        return (((_a = this.kendoPivotGridCell) === null || _a === void 0 ? void 0 : _a.hasChildren) && this.kendoPivotGridCell.children.length > 0) || false;
     }
     ngOnInit() {
         var _a, _b, _c;
@@ -365,31 +513,133 @@ class PivotGridCellDirective {
     }
 }
 PivotGridCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: { kendoPivotGridCell: "kendoPivotGridCell", tableType: "tableType", rowIndex: "rowIndex", colIndex: "colIndex" }, host: { properties: { "class.k-pivotgrid-cell": "this.cellClass" } }, ngImport: i0, template: `
-        <kendo-icon-wrapper
-            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
-            aria-hidden="true"
-            [kendoEventsOutsideAngular]="{ click: handleClick }"
-            [name]="expanded ? 'chevron-up' : 'chevron-down'"
-            [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
-            innerCssClass="k-pivotgrid-toggle">
-        </kendo-icon-wrapper>
-        {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: { kendoPivotGridCell: "kendoPivotGridCell", tableType: "tableType", rowIndex: "rowIndex", colIndex: "colIndex", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate" }, host: { properties: { "class.k-pivotgrid-cell": "this.cellClass" } }, ngImport: i0, template: `
+            <kendo-icon-wrapper
+                *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
+                aria-hidden="true"
+                [kendoEventsOutsideAngular]="{ click: handleClick }"
+                [name]="expanded ? 'chevron-up' : 'chevron-down'"
+                [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
+                innerCssClass="k-pivotgrid-toggle">
+            </kendo-icon-wrapper>
+            <!--value cell template-->
+            <ng-template *ngIf="tableType === 'values' && valueCellTemplate"
+                        [templateContext]="{
+                            templateRef: valueCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            value: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType
+                        }">
+            </ng-template>
+            <!--row header cell template-->
+            <ng-template *ngIf="tableType === 'rowHeader' && rowHeaderCellTemplate"
+                        [templateContext]="{
+                            templateRef: rowHeaderCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--column header cell template-->
+            <ng-template *ngIf="tableType === 'columnHeader' && columnHeaderCellTemplate"
+                        [templateContext]="{
+                            templateRef: columnHeaderCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--cell template-->
+            <ng-template *ngIf="customCellTemplate && isNotProvidedCellTemplatePerType"
+                        [templateContext]="{
+                            templateRef: customCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--default cell content-->
+            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType">
+                {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
+            </span>
+        `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i5.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoPivotGridCell]',
                     template: `
-        <kendo-icon-wrapper
-            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
-            aria-hidden="true"
-            [kendoEventsOutsideAngular]="{ click: handleClick }"
-            [name]="expanded ? 'chevron-up' : 'chevron-down'"
-            [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
-            innerCssClass="k-pivotgrid-toggle">
-        </kendo-icon-wrapper>
-        {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`
+            <kendo-icon-wrapper
+                *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
+                aria-hidden="true"
+                [kendoEventsOutsideAngular]="{ click: handleClick }"
+                [name]="expanded ? 'chevron-up' : 'chevron-down'"
+                [svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
+                innerCssClass="k-pivotgrid-toggle">
+            </kendo-icon-wrapper>
+            <!--value cell template-->
+            <ng-template *ngIf="tableType === 'values' && valueCellTemplate"
+                        [templateContext]="{
+                            templateRef: valueCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            value: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType
+                        }">
+            </ng-template>
+            <!--row header cell template-->
+            <ng-template *ngIf="tableType === 'rowHeader' && rowHeaderCellTemplate"
+                        [templateContext]="{
+                            templateRef: rowHeaderCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--column header cell template-->
+            <ng-template *ngIf="tableType === 'columnHeader' && columnHeaderCellTemplate"
+                        [templateContext]="{
+                            templateRef: columnHeaderCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--cell template-->
+            <ng-template *ngIf="customCellTemplate && isNotProvidedCellTemplatePerType"
+                        [templateContext]="{
+                            templateRef: customCellTemplate.templateRef,
+                            $implicit: kendoPivotGridCell,
+                            text: kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption,
+                            rowIndex: rowIndex,
+                            columnIndex: colIndex,
+                            tableType: tableType,
+                            expanded: expanded
+                        }">
+            </ng-template>
+            <!--default cell content-->
+            <span *ngIf="!customCellTemplate && isNotProvidedCellTemplatePerType">
+                {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
+            </span>
+        `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PivotGridDataService }]; }, propDecorators: { cellClass: [{
                 type: HostBinding,
@@ -402,6 +652,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], colIndex: [{
                 type: Input
+            }], customCellTemplate: [{
+                type: Input
+            }], valueCellTemplate: [{
+                type: Input
+            }], rowHeaderCellTemplate: [{
+                type: Input
+            }], columnHeaderCellTemplate: [{
+                type: Input
             }] } });
 
 /**
@@ -426,7 +684,7 @@ class PivotGridTableComponent {
     }
 }
 PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth" }, ngImport: i0, template: `
+PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate" }, ngImport: i0, template: `
         <table
             class="k-pivotgrid-table"
             role="presentation">
@@ -443,6 +701,9 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
+                            [customCellTemplate]="customCellTemplate"
+                            [rowHeaderCellTemplate]="rowHeaderCellTemplate"
+                            [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                             [tableType]="tableType"
                             [colIndex]="colIndex"
                             [rowIndex]="rowIndex"
@@ -451,6 +712,8 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                             [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
                         <td
                             *ngIf="cell && tableType === 'values'"
+                            [customCellTemplate]="customCellTemplate"
+                            [valueCellTemplate]="valueCellTemplate"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
                             [colIndex]="colIndex"
@@ -461,7 +724,7 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, components: [{ type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex"] }], directives: [{ type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }], directives: [{ type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -483,6 +746,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
+                            [customCellTemplate]="customCellTemplate"
+                            [rowHeaderCellTemplate]="rowHeaderCellTemplate"
+                            [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                             [tableType]="tableType"
                             [colIndex]="colIndex"
                             [rowIndex]="rowIndex"
@@ -491,6 +757,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
                         <td
                             *ngIf="cell && tableType === 'values'"
+                            [customCellTemplate]="customCellTemplate"
+                            [valueCellTemplate]="valueCellTemplate"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
                             [colIndex]="colIndex"
@@ -507,6 +775,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], colWidth: [{
                 type: Input
+            }], customCellTemplate: [{
+                type: Input
+            }], valueCellTemplate: [{
+                type: Input
+            }], rowHeaderCellTemplate: [{
+                type: Input
+            }], columnHeaderCellTemplate: [{
+                type: Input
             }] } });
 
 /**
@@ -3323,7 +3599,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             provide: L10N_PREFIX,
             useValue: 'kendo.pivotgrid'
         }
-    ], viewQueries: [{ propertyName: "colHeadersTable", first: true, predicate: ["colHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "rowHeadersTable", first: true, predicate: ["rowHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "valuesTable", first: true, predicate: ["valuesTable"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "configuratorWrapper", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "customCellTemplate", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "valueCellTemplate", first: true, predicate: ValueCellTemplateDirective, descendants: true }, { propertyName: "rowHeaderCellTemplate", first: true, predicate: RowHeaderCellTemplateDirective, descendants: true }, { propertyName: "columnHeaderCellTemplate", first: true, predicate: ColumnHeaderCellTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "colHeadersTable", first: true, predicate: ["colHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "rowHeadersTable", first: true, predicate: ["rowHeadersTable"], descendants: true, read: ElementRef }, { propertyName: "valuesTable", first: true, predicate: ["valuesTable"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, read: ElementRef }, { propertyName: "configuratorWrapper", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoPivotGridLocalizedMessages
         i18n-loading="kendo.pivotgrid.loading|The loading text"
         loading="Loading"
@@ -3437,14 +3713,20 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
+                [customCellTemplate]="customCellTemplate"
+                [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                 class="k-pivotgrid-column-headers"
                 tableType="columnHeader"></kendo-pivotgrid-table>
             <kendo-pivotgrid-table
                 #rowHeadersTable
+                [customCellTemplate]="customCellTemplate"
+                [rowHeaderCellTemplate]="rowHeaderCellTemplate"
                 class="k-pivotgrid-row-headers"
                 tableType="rowHeader"></kendo-pivotgrid-table>
             <kendo-pivotgrid-table
                 #valuesTable
+                [customCellTemplate]="customCellTemplate"
+                [valueCellTemplate]="valueCellTemplate"
                 [colWidth]="columnHeadersWidth"
                 class="k-pivotgrid-values"
                 tableType="values"></kendo-pivotgrid-table>
@@ -3474,7 +3756,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" innerCssClass="k-color-inherit" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
             </span>
         </div>
-   `, isInline: true, components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+   `, isInline: true, components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -3602,14 +3884,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-pivotgrid-table
                 #colHeadersTable
                 [colWidth]="columnHeadersWidth"
+                [customCellTemplate]="customCellTemplate"
+                [columnHeaderCellTemplate]="columnHeaderCellTemplate"
                 class="k-pivotgrid-column-headers"
                 tableType="columnHeader"></kendo-pivotgrid-table>
             <kendo-pivotgrid-table
                 #rowHeadersTable
+                [customCellTemplate]="customCellTemplate"
+                [rowHeaderCellTemplate]="rowHeaderCellTemplate"
                 class="k-pivotgrid-row-headers"
                 tableType="rowHeader"></kendo-pivotgrid-table>
             <kendo-pivotgrid-table
                 #valuesTable
+                [customCellTemplate]="customCellTemplate"
+                [valueCellTemplate]="valueCellTemplate"
                 [colWidth]="columnHeadersWidth"
                 class="k-pivotgrid-values"
                 tableType="values"></kendo-pivotgrid-table>
@@ -3677,6 +3965,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], configuratorWrapper: [{
                 type: ViewChild,
                 args: ['configurator', { read: ElementRef }]
+            }], customCellTemplate: [{
+                type: ContentChild,
+                args: [CellTemplateDirective]
+            }], valueCellTemplate: [{
+                type: ContentChild,
+                args: [ValueCellTemplateDirective]
+            }], rowHeaderCellTemplate: [{
+                type: ContentChild,
+                args: [RowHeaderCellTemplateDirective]
+            }], columnHeaderCellTemplate: [{
+                type: ContentChild,
+                args: [ColumnHeaderCellTemplateDirective]
             }], loaderSettings: [{
                 type: Input
             }], configurator: [{
@@ -4256,7 +4556,11 @@ const DECLARATIONS = [
     DropTargetDirective,
     LocalizedMessagesDirective,
     CustomMessagesComponent,
-    ChipKeyboardNavigationDirective
+    ChipKeyboardNavigationDirective,
+    CellTemplateDirective,
+    ValueCellTemplateDirective,
+    RowHeaderCellTemplateDirective,
+    ColumnHeaderCellTemplateDirective
 ];
 const EXPORTS = [
     PivotGridComponent,
@@ -4264,7 +4568,11 @@ const EXPORTS = [
     PivotGridCellDirective,
     PivotLocalBindingDirective,
     PivotOLAPBindingDirective,
-    CustomMessagesComponent
+    CustomMessagesComponent,
+    CellTemplateDirective,
+    ValueCellTemplateDirective,
+    RowHeaderCellTemplateDirective,
+    ColumnHeaderCellTemplateDirective
 ];
 /**
  * Sample module
@@ -4282,7 +4590,11 @@ PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DropTargetDirective,
         LocalizedMessagesDirective,
         CustomMessagesComponent,
-        ChipKeyboardNavigationDirective], imports: [EventsModule,
+        ChipKeyboardNavigationDirective,
+        CellTemplateDirective,
+        ValueCellTemplateDirective,
+        RowHeaderCellTemplateDirective,
+        ColumnHeaderCellTemplateDirective], imports: [EventsModule,
         IndicatorsModule,
         TreeViewModule,
         DraggableModule,
@@ -4293,7 +4605,11 @@ PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         PivotGridCellDirective,
         PivotLocalBindingDirective,
         PivotOLAPBindingDirective,
-        CustomMessagesComponent] });
+        CustomMessagesComponent,
+        CellTemplateDirective,
+        ValueCellTemplateDirective,
+        RowHeaderCellTemplateDirective,
+        ColumnHeaderCellTemplateDirective] });
 PivotGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridModule, imports: [[...IMPORTED_MODULES]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridModule, decorators: [{
             type: NgModule,
@@ -4308,5 +4624,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ConfigurationChangeEvent, CustomMessagesComponent, DraggableChipDirective, DropTargetDirective, ExpandChangeEvent, PivotGridCellDirective, PivotGridComponent, PivotGridConfiguratorComponent, PivotGridModule, PivotGridTableComponent, PivotLocalBindingDirective, PivotOLAPBindingDirective };
+export { CellTemplateDirective, ColumnHeaderCellTemplateDirective, ConfigurationChangeEvent, CustomMessagesComponent, DraggableChipDirective, DropTargetDirective, ExpandChangeEvent, PivotGridCellDirective, PivotGridComponent, PivotGridConfiguratorComponent, PivotGridModule, PivotGridTableComponent, PivotLocalBindingDirective, PivotOLAPBindingDirective, RowHeaderCellTemplateDirective, ValueCellTemplateDirective };