@progress/kendo-angular-pivotgrid
Version:
PivotGrid package for Angular
700 lines (627 loc) • 36.8 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ContentChild, ElementRef, HostBinding, Input, NgZone, Renderer2, ViewChild } from '@angular/core';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from './package-metadata';
import { isChanged, isDocumentAvailable, ScrollbarWidthService } from '@progress/kendo-angular-common';
import { PivotGridDataService } from './data-binding/pivotgrid-data.service';
import { fromEvent, Subscription } from 'rxjs';
import { cloneArray, syncScroll, syncWheel } from './util';
import { merge } from 'rxjs/operators';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { ConfiguratorNavigation, PivotGridNavigation } from '@progress/kendo-pivotgrid-common';
import { PivotLocalizationService } from './localization/pivot-localization.service';
import { gearIcon } from '@progress/kendo-svg-icons';
import { CellTemplateDirective } from './rendering/templates/pivotgrid-cell-template.directive';
import { ValueCellTemplateDirective } from './rendering/templates/pivotgrid-value-cell-template.directive';
import { RowHeaderCellTemplateDirective } from './rendering/templates/pivotgrid-row-header-cell-template.directive';
import { ColumnHeaderCellTemplateDirective } from './rendering/templates/pivotgrid-column-header-cell-template.directive';
import { PivotGridConfiguratorComponent } from './configurator/configurator.component';
import { NgIf } from '@angular/common';
import { PivotGridTableComponent } from './rendering/pivotgrid-table.component';
import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
import { LoaderComponent } from '@progress/kendo-angular-indicators';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { normalizeVirtualSettings } from './models/virtualization-settings';
import { PivotGridScrollService } from './virtual/scroll.service';
import * as i0 from "@angular/core";
import * as i1 from "./data-binding/pivotgrid-data.service";
import * as i2 from "@progress/kendo-angular-l10n";
import * as i3 from "@progress/kendo-angular-common";
import * as i4 from "./virtual/scroll.service";
const DEFAULT_LOADER_SETTINGS = {
type: 'converging-spinner',
themeColor: 'primary',
size: 'large'
};
const DEFAULT_CONFIGURATOR_SETTINGS = {
position: 'right',
orientation: 'vertical'
};
/**
* Represents the Kendo UI PivotGrid component for Angular.
*/
export class PivotGridComponent {
hostEl;
zone;
dataService;
localization;
renderer;
scrollService;
hostClass = true;
get rightPositionClass() {
return !this.configuratorSettings || this.configuratorSettings.position === 'right';
}
get leftPositionClass() {
return this.configuratorSettings?.position === 'left';
}
get bottomPositionClass() {
return this.configuratorSettings?.position === 'bottom';
}
get topPositionClass() {
return this.configuratorSettings?.position === 'top';
}
get dir() {
return this.direction;
}
colHeadersTable;
rowHeadersTable;
valuesTable;
table;
configuratorWrapper;
customCellTemplate;
valueCellTemplate;
rowHeaderCellTemplate;
columnHeaderCellTemplate;
/**
* Specify the type, size and color of the PivotGrid's loader.
*
* The default settings are:
* * type: `converging-spinner`
* * color: `primary`
* * size: `large`
*/
set loaderSettings(settings) {
this._loaderSettings = Object.assign({}, DEFAULT_LOADER_SETTINGS, settings);
}
get loaderSettings() {
return this._loaderSettings;
}
/**
* @hidden
*/
get loadingText() {
return this.localization.get('loading');
}
/**
* Specifies whether the axes configurator should be displayed.
*/
configurator;
/**
* Sets the virtualization options of the component. By default the virtual scrolling functionality is disabled.
*
* @default false
*/
set virtualScrolling(value) {
this._virtualScrolling = normalizeVirtualSettings(value);
this.scrollService.virtualScrolling = !!value;
}
get virtualScrolling() {
return this._virtualScrolling;
}
get configuratorSettings() {
return this.configurator && Object.assign({}, DEFAULT_CONFIGURATOR_SETTINGS, this.configurator);
}
/**
* Specify the width of the column header and data cells. Value is treated as pixels [(see example)]({% slug appearance_pivotgrid %}#toc-column-headers-width).
*
* @default 200
*/
columnHeadersWidth = 200;
/**
* If set to true, the user can use dedicated shortcuts to interact with the PivotGrid. By default, navigation is disabled.
*
* @default false
*/
navigable = false;
/**
* Holds the displayed aggregated PivotGrid values.
*/
get aggregateData() {
return cloneArray(this.dataService.aggregateData);
}
/**
* @hidden
*/
gearSVGIcon = gearIcon;
loading;
showConfigurator;
configuratorNavigation;
resizeObservers = [];
_loaderSettings = DEFAULT_LOADER_SETTINGS;
_virtualScrolling = normalizeVirtualSettings(false);
subs = new Subscription();
rtl = false;
direction;
navigation;
navigationSubs;
constructor(hostEl, zone, dataService, localization, renderer, _scrollbarWidthService, scrollService) {
this.hostEl = hostEl;
this.zone = zone;
this.dataService = dataService;
this.localization = localization;
this.renderer = renderer;
this.scrollService = scrollService;
validatePackage(packageMetadata);
this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
this.rtl = rtl;
this.direction = this.rtl ? 'rtl' : 'ltr';
}));
dataService.wrapper = this.hostEl.nativeElement;
this.scrollService.pivotGrid = this;
}
ngAfterViewInit() {
if (isDocumentAvailable()) {
this.zone.runOutsideAngular(() => {
const rowHeadersTable = this.rowHeadersTable.nativeElement.firstElementChild;
const headerColsResizeObserver = new ResizeObserver(() => setTimeout(() => this.resizeContainer('Columns', rowHeadersTable)));
headerColsResizeObserver.observe(rowHeadersTable);
const colHeadersTable = this.colHeadersTable.nativeElement.firstElementChild;
const headerRowsResizeObserver = new ResizeObserver(() => setTimeout(() => this.resizeContainer('Rows', colHeadersTable)));
headerRowsResizeObserver.observe(colHeadersTable);
this.resizeObservers = [headerColsResizeObserver, headerRowsResizeObserver];
this.subs.add(fromEvent(rowHeadersTable, 'wheel')
.pipe(merge(fromEvent(colHeadersTable, 'wheel'), fromEvent(this.valuesTable.nativeElement, 'scroll'))).subscribe((ev) => this.handleScroll(ev)));
if (this.navigable) {
this.initNavigation();
}
const emptyCell = this.hostEl.nativeElement.querySelector('.k-pivotgrid-empty-cell');
emptyCell && this.renderer.setAttribute(emptyCell, 'id', `k-pivotgrid-${this.dataService.pivotGridId}-empty-cell`);
});
}
}
ngAfterContentInit() {
this.subs.add(this.dataService.loading.subscribe(state => this.loading = state));
}
ngOnChanges(changes) {
if (isChanged('navigable', changes)) {
if (this.navigable) {
this.initNavigation();
}
else {
this.stopNavigation();
}
}
}
ngOnDestroy() {
this.resizeObservers.forEach(o => o.disconnect());
this.subs.unsubscribe();
this.stopNavigation();
}
/**
* @hidden
*/
messageFor(localizationToken) {
return this.localization.get(localizationToken);
}
/**
* @hidden
*/
toggleConfigurator() {
this.showConfigurator = !this.showConfigurator;
if (!this.navigable) {
return;
}
if (this.showConfigurator) {
this.zone.runOutsideAngular(() => setTimeout(() => this.initConfiguratorNavigation()));
}
else {
this.stopConfiguratorNavigation();
const el = this.navigation.current;
if (el) {
this.zone.runOutsideAngular(() => {
setTimeout(() => this.navigation.focusElement(el, null));
});
}
}
}
resizeContainer = (axis, element) => {
const isRows = axis === 'Rows';
const table = this.table.nativeElement;
const size = isRows ? 'offsetHeight' : 'offsetWidth';
table.style[`gridTemplate${axis}`] = '';
table.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
};
handleScroll = (event) => {
if (event.target === this.valuesTable.nativeElement) {
syncScroll(event.target, [
this.rowHeadersTable.nativeElement,
this.colHeadersTable.nativeElement
]);
}
else if (event.target.closest('.k-pivotgrid-row-headers')) {
event.preventDefault();
syncWheel(event, [this.valuesTable.nativeElement, this.rowHeadersTable.nativeElement], 'scrollTop', 'Y');
}
else if (event.target.closest('.k-pivotgrid-column-headers')) {
event.preventDefault();
syncWheel(event, [this.valuesTable.nativeElement, this.colHeadersTable.nativeElement], 'scrollLeft', 'X');
}
};
/**
* @hidden
*/
initNavigation() {
this.stopNavigation();
this.navigation = new PivotGridNavigation({ tabIndex: 0 });
this.navigation.start(this.table.nativeElement);
const firstCell = this.navigation.first;
if (firstCell) {
firstCell.setAttribute('tabindex', '0');
}
if (!this.navigationSubs) {
this.navigationSubs = this.dataService.directive.expandChange.pipe(merge(this.dataService.directive.configurationChange)).subscribe(() => this.zone.runOutsideAngular(() => {
setTimeout(() => this.navigation.update());
}));
this.subs.add(this.navigationSubs);
}
}
stopNavigation() {
if (this.navigation) {
const lastFocusedEl = this.navigation.elements.find(el => el.hasAttribute('tabindex'));
if (lastFocusedEl) {
this.renderer.removeAttribute(lastFocusedEl, 'tabindex');
}
this.navigation.stop();
}
}
initConfiguratorNavigation() {
this.stopConfiguratorNavigation();
this.configuratorNavigation = new ConfiguratorNavigation({ tabIndex: 0 });
this.configuratorNavigation.start(this.configuratorWrapper.nativeElement);
this.configuratorNavigation.first.setAttribute('tabindex', '0');
}
stopConfiguratorNavigation() {
if (this.configuratorNavigation) {
const lastFocusedEl = this.configuratorNavigation.elements.find(el => el.hasAttribute('tabindex'));
if (lastFocusedEl) {
this.renderer.removeAttribute(lastFocusedEl, 'tabindex');
}
this.configuratorNavigation.stop();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i3.ScrollbarWidthService }, { token: i4.PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PivotGridComponent, isStandalone: true, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", configurator: "configurator", virtualScrolling: "virtualScrolling", columnHeadersWidth: "columnHeadersWidth", navigable: "navigable" }, host: { properties: { "class.k-d-flex": "this.hostClass", "class.k-pos-relative": "this.hostClass", "class.k-flex-row": "this.rightPositionClass", "class.k-flex-row-reverse": "this.leftPositionClass", "class.k-flex-column": "this.bottomPositionClass", "class.k-flex-column-reverse": "this.topPositionClass", "attr.dir": "this.dir" } }, providers: [
PivotGridDataService,
LocalizationService,
PivotLocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.pivotgrid'
},
PivotGridScrollService
], 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"
i18n-emptyCellLabel="kendo.pivotgrid.emptyCellLabel|The value of the aria-label attribute placed on the focusable empty cell element"
emptyCellLabel="PivotGrid Empty Cell"
i18n-fieldMenuFilterItemLabel="kendo.pivotgrid.fieldMenuFilterItemLabel|The text content of the filter item in the column and row fields menu"
fieldMenuFilterItemLabel="Filter"
i18n-fieldMenuSortAscendingItemLabel="kendo.pivotgrid.fieldMenuSortAscendingItemLabel|The text content of the sort ascending item in the column and row fields menu"
fieldMenuSortAscendingItemLabel="Sort ascending"
i18n-fieldMenuSortDescendingItemLabel="kendo.pivotgrid.fieldMenuSortDescendingItemLabel|The text content of the sort descending item in the column and row fields menu"
fieldMenuSortDescendingItemLabel="Sort descending"
i18n-filterInputLabel="kendo.pivotgrid.filterInputLabel|The label of the filter input"
filterInputLabel="{{ '{fields} Filter' }}"
i18n-filterOperatorsDropDownLabel="kendo.pivotgrid.filterOperatorsDropDownLabel|The label of the filter operators DropDownList"
filterOperatorsDropDownLabel="{{ '{fields} Filter Operators' }}"
i18n-filterEqOperator="kendo.pivotgrid.filterEqOperator|The text of the equal filter operator"
filterEqOperator="Is equal to"
i18n-filterNotEqOperator="kendo.pivotgrid.filterNotEqOperator|The text of the not equal filter operator"
filterNotEqOperator="Is not equal to"
i18n-filterIsNullOperator="kendo.pivotgrid.filterIsNullOperator|The text of the is null filter operator"
filterIsNullOperator="Is null"
i18n-filterIsNotNullOperator="kendo.pivotgrid.filterIsNotNullOperator|The text of the is not null filter operator"
filterIsNotNullOperator="Is not null"
i18n-filterIsEmptyOperator="kendo.pivotgrid.filterIsEmptyOperator|The text of the is empty filter operator"
filterIsEmptyOperator="Is empty"
i18n-filterIsNotEmptyOperator="kendo.pivotgrid.filterIsNotEmptyOperator|The text of the is not empty filter operator"
filterIsNotEmptyOperator="Is not empty"
i18n-filterStartsWithOperator="kendo.pivotgrid.filterStartsWithOperator|The text of the starts with filter operator"
filterStartsWithOperator="Starts with"
i18n-filterContainsOperator="kendo.pivotgrid.filterContainsOperator|The text of the contains filter operator"
filterContainsOperator="Contains"
i18n-filterNotContainsOperator="kendo.pivotgrid.filterNotContainsOperator|The text of the does not contain filter operator"
filterNotContainsOperator="Does not contain"
i18n-filterEndsWithOperator="kendo.pivotgrid.filterEndsWithOperator|The text of the ends with filter operator"
filterEndsWithOperator="Ends with"
i18n-filterFilterButton="kendo.pivotgrid.filterFilterButton|The text of the filter button"
filterFilterButton="Filter"
i18n-filterClearButton="kendo.pivotgrid.filterClearButton|The text of the clear filter button"
filterClearButton="Clear"
i18n-configuratorButtonText="kendo.pivotgrid.configuratorButtonText|The text content of the button that opens and closes the PivotGrid configurator"
configuratorButtonText="Change Settings"
i18n-configuratorHeaderText="kendo.pivotgrid.configuratorHeaderText|The text content of the PivotGrid configurator title element"
configuratorHeaderText="Settings"
i18n-configuratorFieldsText="kendo.pivotgrid.configuratorFieldsText|The text content of the PivotGrid configurator fields section title element"
configuratorFieldsText="Fields"
i18n-configuratorColumnsText="kendo.pivotgrid.configuratorColumnsText|The text content of the PivotGrid configurator columns section title element"
configuratorColumnsText="Columns"
i18n-configuratorRowsText="kendo.pivotgrid.configuratorRowsText|The text content of the PivotGrid configurator rows section title element"
configuratorRowsText="Rows"
i18n-configuratorValuesText="kendo.pivotgrid.configuratorValuesText|The text content of the PivotGrid configurator values section title element"
configuratorValuesText="Values"
i18n-configuratorCancelButtonText="kendo.pivotgrid.configuratorCancelButtonText|The text content of the PivotGrid configurator configurator Cancel button"
configuratorCancelButtonText="Cancel"
i18n-configuratorApplyButtonText="kendo.pivotgrid.configuratorApplyButtonText|The text content of the PivotGrid configurator configurator Apply button"
configuratorApplyButtonText="Apply"
i18n-configuratorEmptyRowsText="kendo.pivotgrid.configuratorEmptyRowsText|The text content of the PivotGrid configurator empty rows container"
configuratorEmptyRowsText="Select some fields to begin setup"
i18n-configuratorEmptyColumnsText="kendo.pivotgrid.configuratorEmptyColumnsText|The text content of the PivotGrid configurator empty columns container"
configuratorEmptyColumnsText="Select some fields to begin setup"
i18n-configuratorEmptyMeasuresText="kendo.pivotgrid.configuratorEmptyMeasuresText|The text content of the PivotGrid configurator empty measures container"
configuratorEmptyMeasuresText="Select some fields to begin setup"
i18n-chipMenuIconTitle="kendo.grid.chipMenuIconTitle|The title of the field menu icon"
chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"
i18n-fieldMenuMoveToColumnsItem="kendo.pivotgrid.fieldMenuMoveToColumnsItem|The text content of the Move to Columns item in the column and row fields menu."
fieldMenuMoveToColumnsItem="Move to Columns"
i18n-fieldMenuMoveToRowsItem="kendo.pivotgrid.fieldMenuMoveToRowsItem|The text content of the Move to Rows item in the column and row fields menu."
fieldMenuMoveToRowsItem="Move to Rows"
i18n-fieldMenuMovePreviousItem="kendo.pivotgrid.fieldMenuMovePreviousItem|The text content of the Move as previous item in the column, row, and value fields menu."
fieldMenuMovePreviousItem="Move as previous"
i18n-fieldMenuMoveNextItem="kendo.pivotgrid.fieldMenuMoveNextItem|The text content of the Move as next item in the column, row, and value fields menu."
fieldMenuMoveNextItem="Move as next"></ng-container>
<div #table class="k-pivotgrid" role="grid">
<span class="k-pivotgrid-empty-cell" role="columnheader">
<span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
</span>
<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"
[scrollableSettings]="virtualScrolling"
tableType="values"></kendo-pivotgrid-table>
<div *ngIf="loading" [style]="'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);'">
<kendo-loader
[type]="loaderSettings?.type"
[themeColor]="loaderSettings?.themeColor"
[size]="loaderSettings?.size"
>
</kendo-loader>
<span class="k-loading-text">{{ loadingText }}</span>
</div>
</div>
<kendo-pivotgrid-configurator
#configurator
*ngIf="showConfigurator"
[navigation]="configuratorNavigation"
[orientation]="configuratorSettings.orientation"
(close)="toggleConfigurator()">
</kendo-pivotgrid-configurator>
<div *ngIf="configurator"
#configuratorButton
class="k-pivotgrid-configurator-button"
aria-hidden="true"
(click)="toggleConfigurator()">
<span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
</span>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { kind: "component", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate", "scrollableSettings"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { kind: "component", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter", "navigation"], outputs: ["close"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-pivotgrid',
providers: [
PivotGridDataService,
LocalizationService,
PivotLocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.pivotgrid'
},
PivotGridScrollService
],
template: `
<ng-container kendoPivotGridLocalizedMessages
i18n-loading="kendo.pivotgrid.loading|The loading text"
loading="Loading"
i18n-emptyCellLabel="kendo.pivotgrid.emptyCellLabel|The value of the aria-label attribute placed on the focusable empty cell element"
emptyCellLabel="PivotGrid Empty Cell"
i18n-fieldMenuFilterItemLabel="kendo.pivotgrid.fieldMenuFilterItemLabel|The text content of the filter item in the column and row fields menu"
fieldMenuFilterItemLabel="Filter"
i18n-fieldMenuSortAscendingItemLabel="kendo.pivotgrid.fieldMenuSortAscendingItemLabel|The text content of the sort ascending item in the column and row fields menu"
fieldMenuSortAscendingItemLabel="Sort ascending"
i18n-fieldMenuSortDescendingItemLabel="kendo.pivotgrid.fieldMenuSortDescendingItemLabel|The text content of the sort descending item in the column and row fields menu"
fieldMenuSortDescendingItemLabel="Sort descending"
i18n-filterInputLabel="kendo.pivotgrid.filterInputLabel|The label of the filter input"
filterInputLabel="{{ '{fields} Filter' }}"
i18n-filterOperatorsDropDownLabel="kendo.pivotgrid.filterOperatorsDropDownLabel|The label of the filter operators DropDownList"
filterOperatorsDropDownLabel="{{ '{fields} Filter Operators' }}"
i18n-filterEqOperator="kendo.pivotgrid.filterEqOperator|The text of the equal filter operator"
filterEqOperator="Is equal to"
i18n-filterNotEqOperator="kendo.pivotgrid.filterNotEqOperator|The text of the not equal filter operator"
filterNotEqOperator="Is not equal to"
i18n-filterIsNullOperator="kendo.pivotgrid.filterIsNullOperator|The text of the is null filter operator"
filterIsNullOperator="Is null"
i18n-filterIsNotNullOperator="kendo.pivotgrid.filterIsNotNullOperator|The text of the is not null filter operator"
filterIsNotNullOperator="Is not null"
i18n-filterIsEmptyOperator="kendo.pivotgrid.filterIsEmptyOperator|The text of the is empty filter operator"
filterIsEmptyOperator="Is empty"
i18n-filterIsNotEmptyOperator="kendo.pivotgrid.filterIsNotEmptyOperator|The text of the is not empty filter operator"
filterIsNotEmptyOperator="Is not empty"
i18n-filterStartsWithOperator="kendo.pivotgrid.filterStartsWithOperator|The text of the starts with filter operator"
filterStartsWithOperator="Starts with"
i18n-filterContainsOperator="kendo.pivotgrid.filterContainsOperator|The text of the contains filter operator"
filterContainsOperator="Contains"
i18n-filterNotContainsOperator="kendo.pivotgrid.filterNotContainsOperator|The text of the does not contain filter operator"
filterNotContainsOperator="Does not contain"
i18n-filterEndsWithOperator="kendo.pivotgrid.filterEndsWithOperator|The text of the ends with filter operator"
filterEndsWithOperator="Ends with"
i18n-filterFilterButton="kendo.pivotgrid.filterFilterButton|The text of the filter button"
filterFilterButton="Filter"
i18n-filterClearButton="kendo.pivotgrid.filterClearButton|The text of the clear filter button"
filterClearButton="Clear"
i18n-configuratorButtonText="kendo.pivotgrid.configuratorButtonText|The text content of the button that opens and closes the PivotGrid configurator"
configuratorButtonText="Change Settings"
i18n-configuratorHeaderText="kendo.pivotgrid.configuratorHeaderText|The text content of the PivotGrid configurator title element"
configuratorHeaderText="Settings"
i18n-configuratorFieldsText="kendo.pivotgrid.configuratorFieldsText|The text content of the PivotGrid configurator fields section title element"
configuratorFieldsText="Fields"
i18n-configuratorColumnsText="kendo.pivotgrid.configuratorColumnsText|The text content of the PivotGrid configurator columns section title element"
configuratorColumnsText="Columns"
i18n-configuratorRowsText="kendo.pivotgrid.configuratorRowsText|The text content of the PivotGrid configurator rows section title element"
configuratorRowsText="Rows"
i18n-configuratorValuesText="kendo.pivotgrid.configuratorValuesText|The text content of the PivotGrid configurator values section title element"
configuratorValuesText="Values"
i18n-configuratorCancelButtonText="kendo.pivotgrid.configuratorCancelButtonText|The text content of the PivotGrid configurator configurator Cancel button"
configuratorCancelButtonText="Cancel"
i18n-configuratorApplyButtonText="kendo.pivotgrid.configuratorApplyButtonText|The text content of the PivotGrid configurator configurator Apply button"
configuratorApplyButtonText="Apply"
i18n-configuratorEmptyRowsText="kendo.pivotgrid.configuratorEmptyRowsText|The text content of the PivotGrid configurator empty rows container"
configuratorEmptyRowsText="Select some fields to begin setup"
i18n-configuratorEmptyColumnsText="kendo.pivotgrid.configuratorEmptyColumnsText|The text content of the PivotGrid configurator empty columns container"
configuratorEmptyColumnsText="Select some fields to begin setup"
i18n-configuratorEmptyMeasuresText="kendo.pivotgrid.configuratorEmptyMeasuresText|The text content of the PivotGrid configurator empty measures container"
configuratorEmptyMeasuresText="Select some fields to begin setup"
i18n-chipMenuIconTitle="kendo.grid.chipMenuIconTitle|The title of the field menu icon"
chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"
i18n-fieldMenuMoveToColumnsItem="kendo.pivotgrid.fieldMenuMoveToColumnsItem|The text content of the Move to Columns item in the column and row fields menu."
fieldMenuMoveToColumnsItem="Move to Columns"
i18n-fieldMenuMoveToRowsItem="kendo.pivotgrid.fieldMenuMoveToRowsItem|The text content of the Move to Rows item in the column and row fields menu."
fieldMenuMoveToRowsItem="Move to Rows"
i18n-fieldMenuMovePreviousItem="kendo.pivotgrid.fieldMenuMovePreviousItem|The text content of the Move as previous item in the column, row, and value fields menu."
fieldMenuMovePreviousItem="Move as previous"
i18n-fieldMenuMoveNextItem="kendo.pivotgrid.fieldMenuMoveNextItem|The text content of the Move as next item in the column, row, and value fields menu."
fieldMenuMoveNextItem="Move as next"></ng-container>
<div #table class="k-pivotgrid" role="grid">
<span class="k-pivotgrid-empty-cell" role="columnheader">
<span class="k-sr-only">{{messageFor('emptyCellLabel')}}</span>
</span>
<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"
[scrollableSettings]="virtualScrolling"
tableType="values"></kendo-pivotgrid-table>
<div *ngIf="loading" [style]="'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);'">
<kendo-loader
[type]="loaderSettings?.type"
[themeColor]="loaderSettings?.themeColor"
[size]="loaderSettings?.size"
>
</kendo-loader>
<span class="k-loading-text">{{ loadingText }}</span>
</div>
</div>
<kendo-pivotgrid-configurator
#configurator
*ngIf="showConfigurator"
[navigation]="configuratorNavigation"
[orientation]="configuratorSettings.orientation"
(close)="toggleConfigurator()">
</kendo-pivotgrid-configurator>
<div *ngIf="configurator"
#configuratorButton
class="k-pivotgrid-configurator-button"
aria-hidden="true"
(click)="toggleConfigurator()">
<span>{{messageFor('configuratorButtonText')}}<kendo-icon-wrapper name="gear" [svgIcon]="gearSVGIcon"></kendo-icon-wrapper>
</span>
</div>
`,
standalone: true,
imports: [LocalizedMessagesDirective, PivotGridTableComponent, NgIf, LoaderComponent, PivotGridConfiguratorComponent, IconWrapperComponent]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i3.ScrollbarWidthService }, { type: i4.PivotGridScrollService }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-d-flex']
}, {
type: HostBinding,
args: ['class.k-pos-relative']
}], rightPositionClass: [{
type: HostBinding,
args: ['class.k-flex-row']
}], leftPositionClass: [{
type: HostBinding,
args: ['class.k-flex-row-reverse']
}], bottomPositionClass: [{
type: HostBinding,
args: ['class.k-flex-column']
}], topPositionClass: [{
type: HostBinding,
args: ['class.k-flex-column-reverse']
}], dir: [{
type: HostBinding,
args: ['attr.dir']
}], colHeadersTable: [{
type: ViewChild,
args: ['colHeadersTable', { read: ElementRef }]
}], rowHeadersTable: [{
type: ViewChild,
args: ['rowHeadersTable', { read: ElementRef }]
}], valuesTable: [{
type: ViewChild,
args: ['valuesTable', { read: ElementRef }]
}], table: [{
type: ViewChild,
args: ['table', { read: ElementRef }]
}], 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: [{
type: Input
}], virtualScrolling: [{
type: Input
}], columnHeadersWidth: [{
type: Input
}], navigable: [{
type: Input
}] } });