@progress/kendo-angular-pivotgrid/esm2022/rendering/pivotgrid-cell.directive.mjs

PivotGrid package for Angular

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
import { CellTemplateDirective } from './templates/pivotgrid-cell-template.directive';
import { ValueCellTemplateDirective } from './templates/pivotgrid-value-cell-template.directive';
import { RowHeaderCellTemplateDirective } from './templates/pivotgrid-row-header-cell-template.directive';
import { ColumnHeaderCellTemplateDirective } from './templates/pivotgrid-column-header-cell-template.directive';
import { NgClass, NgIf } from '@angular/common';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { EventsOutsideAngularDirective, TemplateContextDirective } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
import * as i1 from "../data-binding/pivotgrid-data.service";
/**
 * @hidden
 */
export class PivotGridCellDirective {
    hostEl;
    renderer;
    dataService;
    cellClass = true;
    kendoPivotGridCell;
    tableType;
    rowIndex;
    colIndex;
    customCellTemplate;
    valueCellTemplate;
    rowHeaderCellTemplate;
    columnHeaderCellTemplate;
    get isNotProvidedCellTemplatePerType() {
        return (this.tableType === 'values' && !this.valueCellTemplate)
            || (this.tableType === 'rowHeader' && !this.rowHeaderCellTemplate)
            || (this.tableType === 'columnHeader' && !this.columnHeaderCellTemplate);
    }
    get expanded() {
        return (this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length > 0) || false;
    }
    chevronUpSVGIcon = chevronUpIcon;
    chevronDownSVGIcon = chevronDownIcon;
    constructor(hostEl, renderer, dataService) {
        this.hostEl = hostEl;
        this.renderer = renderer;
        this.dataService = dataService;
    }
    ngOnInit() {
        const nativeElement = this.hostEl.nativeElement;
        this.renderer.setAttribute(nativeElement, 'rowspan', this.kendoPivotGridCell.rowSpan || 1);
        this.renderer.setAttribute(nativeElement, 'colspan', this.kendoPivotGridCell.colSpan || 1);
        const classesToAdd = {
            'k-pivotgrid-header-total': this.kendoPivotGridCell?.total,
            'k-pivotgrid-total': this.tableType === 'values'
                && (this.dataService.rowHeaderLeaves[this.rowIndex].total ||
                    this.dataService.columnHeaderLeaves[this.colIndex].total),
            'k-pivotgrid-header-root': this.kendoPivotGridCell?.levelNum === 0,
            'k-pivotgrid-expanded': this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length,
            'k-first': this.colIndex > 0
        };
        for (const prop in classesToAdd) {
            if (classesToAdd[prop]) {
                this.renderer.addClass(nativeElement, prop);
            }
        }
    }
    handleClick = () => {
        this.dataService.expandedStateChange.emit({
            action: this.expanded ? 'collapse' : 'expand',
            cell: this.kendoPivotGridCell,
            tableType: this.tableType
        });
    };
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PivotGridCellDirective, isStandalone: true, 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" [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
                {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
            </span>
        `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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>
            <!--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" [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
                {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
            </span>
        `,
                    standalone: true,
                    imports: [NgIf, IconWrapperComponent, EventsOutsideAngularDirective, TemplateContextDirective, NgClass]
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.PivotGridDataService }]; }, propDecorators: { cellClass: [{
                type: HostBinding,
                args: ['class.k-pivotgrid-cell']
            }], kendoPivotGridCell: [{
                type: Input
            }], tableType: [{
                type: Input
            }], rowIndex: [{
                type: Input
            }], colIndex: [{
                type: Input
            }], customCellTemplate: [{
                type: Input
            }], valueCellTemplate: [{
                type: Input
            }], rowHeaderCellTemplate: [{
                type: Input
            }], columnHeaderCellTemplate: [{
                type: Input
            }] } });