@progress/kendo-angular-pivotgrid 21.1.1-develop.1 → 21.2.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/configurator/chip-menu/chip-menu-item.component.mjs +26 -20
- package/esm2022/configurator/chip-menu/chip-menu-reorder.component.mjs +40 -37
- package/esm2022/configurator/chip-menu/chip-menu.component.mjs +56 -57
- package/esm2022/configurator/configurator.component.mjs +211 -165
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/pivotgrid.component.mjs +296 -287
- package/esm2022/rendering/pivotgrid-cell.directive.mjs +53 -31
- package/esm2022/rendering/pivotgrid-table.component.mjs +144 -83
- package/fesm2022/progress-kendo-angular-pivotgrid.mjs +807 -658
- package/package.json +13 -13
- package/rendering/pivotgrid-table.component.d.ts +7 -0
- package/schematics/ngAdd/index.js +6 -2
|
@@ -9,7 +9,7 @@ import { CellTemplateDirective } from './templates/pivotgrid-cell-template.direc
|
|
|
9
9
|
import { ValueCellTemplateDirective } from './templates/pivotgrid-value-cell-template.directive';
|
|
10
10
|
import { RowHeaderCellTemplateDirective } from './templates/pivotgrid-row-header-cell-template.directive';
|
|
11
11
|
import { ColumnHeaderCellTemplateDirective } from './templates/pivotgrid-column-header-cell-template.directive';
|
|
12
|
-
import { NgClass
|
|
12
|
+
import { NgClass } from '@angular/common';
|
|
13
13
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
14
14
|
import { EventsOutsideAngularDirective, TemplateContextDirective } from '@progress/kendo-angular-common';
|
|
15
15
|
import * as i0 from "@angular/core";
|
|
@@ -72,17 +72,19 @@ export class PivotGridCellDirective {
|
|
|
72
72
|
});
|
|
73
73
|
};
|
|
74
74
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
76
|
-
|
|
77
|
-
|
|
75
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
|
|
76
|
+
@if (kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total) {
|
|
77
|
+
<kendo-icon-wrapper
|
|
78
78
|
aria-hidden="true"
|
|
79
79
|
[kendoEventsOutsideAngular]="{ click: handleClick }"
|
|
80
80
|
[name]="expanded ? 'chevron-up' : 'chevron-down'"
|
|
81
81
|
[svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
|
|
82
82
|
innerCssClass="k-pivotgrid-toggle">
|
|
83
|
-
|
|
83
|
+
</kendo-icon-wrapper>
|
|
84
|
+
}
|
|
84
85
|
<!--value cell template-->
|
|
85
|
-
|
|
86
|
+
@if (tableType === 'values' && valueCellTemplate) {
|
|
87
|
+
<ng-template
|
|
86
88
|
[templateContext]="{
|
|
87
89
|
templateRef: valueCellTemplate.templateRef,
|
|
88
90
|
$implicit: kendoPivotGridCell,
|
|
@@ -91,9 +93,11 @@ export class PivotGridCellDirective {
|
|
|
91
93
|
columnIndex: colIndex,
|
|
92
94
|
tableType: tableType
|
|
93
95
|
}">
|
|
94
|
-
|
|
96
|
+
</ng-template>
|
|
97
|
+
}
|
|
95
98
|
<!--row header cell template-->
|
|
96
|
-
|
|
99
|
+
@if (tableType === 'rowHeader' && rowHeaderCellTemplate) {
|
|
100
|
+
<ng-template
|
|
97
101
|
[templateContext]="{
|
|
98
102
|
templateRef: rowHeaderCellTemplate.templateRef,
|
|
99
103
|
$implicit: kendoPivotGridCell,
|
|
@@ -103,9 +107,11 @@ export class PivotGridCellDirective {
|
|
|
103
107
|
tableType: tableType,
|
|
104
108
|
expanded: expanded
|
|
105
109
|
}">
|
|
106
|
-
|
|
110
|
+
</ng-template>
|
|
111
|
+
}
|
|
107
112
|
<!--column header cell template-->
|
|
108
|
-
|
|
113
|
+
@if (tableType === 'columnHeader' && columnHeaderCellTemplate) {
|
|
114
|
+
<ng-template
|
|
109
115
|
[templateContext]="{
|
|
110
116
|
templateRef: columnHeaderCellTemplate.templateRef,
|
|
111
117
|
$implicit: kendoPivotGridCell,
|
|
@@ -115,9 +121,11 @@ export class PivotGridCellDirective {
|
|
|
115
121
|
tableType: tableType,
|
|
116
122
|
expanded: expanded
|
|
117
123
|
}">
|
|
118
|
-
|
|
124
|
+
</ng-template>
|
|
125
|
+
}
|
|
119
126
|
<!--cell template-->
|
|
120
|
-
|
|
127
|
+
@if (customCellTemplate && isNotProvidedCellTemplatePerType) {
|
|
128
|
+
<ng-template
|
|
121
129
|
[templateContext]="{
|
|
122
130
|
templateRef: customCellTemplate.templateRef,
|
|
123
131
|
$implicit: kendoPivotGridCell,
|
|
@@ -127,12 +135,15 @@ export class PivotGridCellDirective {
|
|
|
127
135
|
tableType: tableType,
|
|
128
136
|
expanded: expanded
|
|
129
137
|
}">
|
|
130
|
-
|
|
138
|
+
</ng-template>
|
|
139
|
+
}
|
|
131
140
|
<!--default cell content-->
|
|
132
|
-
|
|
141
|
+
@if (!customCellTemplate && isNotProvidedCellTemplatePerType) {
|
|
142
|
+
<span [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
|
|
133
143
|
{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
|
|
134
|
-
|
|
135
|
-
|
|
144
|
+
</span>
|
|
145
|
+
}
|
|
146
|
+
`, isInline: true, dependencies: [{ 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"] }] });
|
|
136
147
|
}
|
|
137
148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PivotGridCellDirective, decorators: [{
|
|
138
149
|
type: Component,
|
|
@@ -140,16 +151,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
140
151
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
141
152
|
selector: '[kendoPivotGridCell]',
|
|
142
153
|
template: `
|
|
143
|
-
|
|
144
|
-
|
|
154
|
+
@if (kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total) {
|
|
155
|
+
<kendo-icon-wrapper
|
|
145
156
|
aria-hidden="true"
|
|
146
157
|
[kendoEventsOutsideAngular]="{ click: handleClick }"
|
|
147
158
|
[name]="expanded ? 'chevron-up' : 'chevron-down'"
|
|
148
159
|
[svgIcon]="expanded ? chevronUpSVGIcon : chevronDownSVGIcon"
|
|
149
160
|
innerCssClass="k-pivotgrid-toggle">
|
|
150
|
-
|
|
161
|
+
</kendo-icon-wrapper>
|
|
162
|
+
}
|
|
151
163
|
<!--value cell template-->
|
|
152
|
-
|
|
164
|
+
@if (tableType === 'values' && valueCellTemplate) {
|
|
165
|
+
<ng-template
|
|
153
166
|
[templateContext]="{
|
|
154
167
|
templateRef: valueCellTemplate.templateRef,
|
|
155
168
|
$implicit: kendoPivotGridCell,
|
|
@@ -158,9 +171,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
158
171
|
columnIndex: colIndex,
|
|
159
172
|
tableType: tableType
|
|
160
173
|
}">
|
|
161
|
-
|
|
174
|
+
</ng-template>
|
|
175
|
+
}
|
|
162
176
|
<!--row header cell template-->
|
|
163
|
-
|
|
177
|
+
@if (tableType === 'rowHeader' && rowHeaderCellTemplate) {
|
|
178
|
+
<ng-template
|
|
164
179
|
[templateContext]="{
|
|
165
180
|
templateRef: rowHeaderCellTemplate.templateRef,
|
|
166
181
|
$implicit: kendoPivotGridCell,
|
|
@@ -170,9 +185,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
170
185
|
tableType: tableType,
|
|
171
186
|
expanded: expanded
|
|
172
187
|
}">
|
|
173
|
-
|
|
188
|
+
</ng-template>
|
|
189
|
+
}
|
|
174
190
|
<!--column header cell template-->
|
|
175
|
-
|
|
191
|
+
@if (tableType === 'columnHeader' && columnHeaderCellTemplate) {
|
|
192
|
+
<ng-template
|
|
176
193
|
[templateContext]="{
|
|
177
194
|
templateRef: columnHeaderCellTemplate.templateRef,
|
|
178
195
|
$implicit: kendoPivotGridCell,
|
|
@@ -182,9 +199,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
182
199
|
tableType: tableType,
|
|
183
200
|
expanded: expanded
|
|
184
201
|
}">
|
|
185
|
-
|
|
202
|
+
</ng-template>
|
|
203
|
+
}
|
|
186
204
|
<!--cell template-->
|
|
187
|
-
|
|
205
|
+
@if (customCellTemplate && isNotProvidedCellTemplatePerType) {
|
|
206
|
+
<ng-template
|
|
188
207
|
[templateContext]="{
|
|
189
208
|
templateRef: customCellTemplate.templateRef,
|
|
190
209
|
$implicit: kendoPivotGridCell,
|
|
@@ -194,14 +213,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
194
213
|
tableType: tableType,
|
|
195
214
|
expanded: expanded
|
|
196
215
|
}">
|
|
197
|
-
|
|
216
|
+
</ng-template>
|
|
217
|
+
}
|
|
198
218
|
<!--default cell content-->
|
|
199
|
-
|
|
219
|
+
@if (!customCellTemplate && isNotProvidedCellTemplatePerType) {
|
|
220
|
+
<span [ngClass]="{'k-pivotgrid-header-title': !kendoPivotGridCell.data, 'k-pivotgrid-content': kendoPivotGridCell.data}">
|
|
200
221
|
{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
|
|
201
|
-
|
|
202
|
-
|
|
222
|
+
</span>
|
|
223
|
+
}
|
|
224
|
+
`,
|
|
203
225
|
standalone: true,
|
|
204
|
-
imports: [
|
|
226
|
+
imports: [IconWrapperComponent, EventsOutsideAngularDirective, TemplateContextDirective, NgClass]
|
|
205
227
|
}]
|
|
206
228
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.PivotGridDataService }], propDecorators: { cellClass: [{
|
|
207
229
|
type: HostBinding,
|
|
@@ -11,7 +11,7 @@ import { ColumnHeaderCellTemplateDirective } from './templates/pivotgrid-column-
|
|
|
11
11
|
import { RowHeaderCellTemplateDirective } from './templates/pivotgrid-row-header-cell-template.directive';
|
|
12
12
|
import { ScrollableTable } from '../virtual/scrollable-container';
|
|
13
13
|
import { PivotGridCellDirective } from './pivotgrid-cell.directive';
|
|
14
|
-
import {
|
|
14
|
+
import { NgStyle } from '@angular/common';
|
|
15
15
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
16
16
|
import { Keys, isDocumentAvailable, normalizeNumpadKeys } from '@progress/kendo-angular-common';
|
|
17
17
|
import { isVisible, matchAriaAttributes } from '../util';
|
|
@@ -37,6 +37,10 @@ export class PivotGridTableComponent {
|
|
|
37
37
|
startRowIndex = 0;
|
|
38
38
|
startColIndex = 0;
|
|
39
39
|
rtl = false;
|
|
40
|
+
itemIdCounter = 0;
|
|
41
|
+
itemIdMap = new WeakMap();
|
|
42
|
+
rowIdMap = new WeakMap();
|
|
43
|
+
cellIdMap = new WeakMap();
|
|
40
44
|
tableType;
|
|
41
45
|
colWidth;
|
|
42
46
|
customCellTemplate;
|
|
@@ -87,6 +91,45 @@ export class PivotGridTableComponent {
|
|
|
87
91
|
this.subs.unsubscribe();
|
|
88
92
|
this.scrollable?.destroy();
|
|
89
93
|
}
|
|
94
|
+
trackByColIndex(index, item) {
|
|
95
|
+
// Always include index to ensure uniqueness even if same object appears multiple times
|
|
96
|
+
if (!item || typeof item !== 'object') {
|
|
97
|
+
return `col-${index + this.startColIndex}-${item}`;
|
|
98
|
+
}
|
|
99
|
+
// Get or assign stable ID for this object
|
|
100
|
+
if (!this.itemIdMap.has(item)) {
|
|
101
|
+
this.itemIdMap.set(item, ++this.itemIdCounter);
|
|
102
|
+
}
|
|
103
|
+
const objectId = this.itemIdMap.get(item);
|
|
104
|
+
// Combine object ID with position to handle same object at different indices
|
|
105
|
+
return `col-${index + this.startColIndex}-obj${objectId}`;
|
|
106
|
+
}
|
|
107
|
+
trackByRowIndex(index, row) {
|
|
108
|
+
// Always include index to ensure uniqueness even if same object appears multiple times
|
|
109
|
+
if (!row || typeof row !== 'object') {
|
|
110
|
+
return `row-${index + this.startRowIndex}-${row}`;
|
|
111
|
+
}
|
|
112
|
+
// Get or assign stable ID for this object
|
|
113
|
+
if (!this.rowIdMap.has(row)) {
|
|
114
|
+
this.rowIdMap.set(row, ++this.itemIdCounter);
|
|
115
|
+
}
|
|
116
|
+
const objectId = this.rowIdMap.get(row);
|
|
117
|
+
// Combine object ID with position to handle same object at different indices
|
|
118
|
+
return `row-${index + this.startRowIndex}-obj${objectId}`;
|
|
119
|
+
}
|
|
120
|
+
trackByCellIndex(index, cell) {
|
|
121
|
+
// Always include index to ensure uniqueness even if same object appears multiple times
|
|
122
|
+
if (!cell || typeof cell !== 'object') {
|
|
123
|
+
return `cell-${index + this.startColIndex}-${cell}`;
|
|
124
|
+
}
|
|
125
|
+
// Get or assign stable ID for this object
|
|
126
|
+
if (!this.cellIdMap.has(cell)) {
|
|
127
|
+
this.cellIdMap.set(cell, ++this.itemIdCounter);
|
|
128
|
+
}
|
|
129
|
+
const objectId = this.cellIdMap.get(cell);
|
|
130
|
+
// Combine object ID with position to handle same object at different indices
|
|
131
|
+
return `cell-${index + this.startColIndex}-obj${objectId}`;
|
|
132
|
+
}
|
|
90
133
|
colsUpdateCallback = (cols) => {
|
|
91
134
|
this.renderedCols = Math.min(cols.length, this.scrollableSettings?.columns);
|
|
92
135
|
this.renderedCols && this.scrollable && (this.scrollable.totalCols = cols.length);
|
|
@@ -202,55 +245,64 @@ export class PivotGridTableComponent {
|
|
|
202
245
|
}, true);
|
|
203
246
|
}
|
|
204
247
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i0.ElementRef }, { token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i0.NgZone }, { token: i3.PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
|
|
205
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PivotGridTableComponent, isStandalone: true, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth", customCellTemplate: "customCellTemplate", valueCellTemplate: "valueCellTemplate", rowHeaderCellTemplate: "rowHeaderCellTemplate", columnHeaderCellTemplate: "columnHeaderCellTemplate", scrollableSettings: "scrollableSettings" }, ngImport: i0, template: `
|
|
206
249
|
<table
|
|
207
|
-
|
|
208
|
-
|
|
250
|
+
class="k-pivotgrid-table"
|
|
251
|
+
role="presentation"
|
|
209
252
|
[ngStyle]="{
|
|
210
253
|
float: tableType === 'values' ? this.rtl ? 'right' : 'left' : 'initial',
|
|
211
254
|
overflow: 'scroll',
|
|
212
255
|
'-ms-overflow-style': tableType !== 'values' ? 'none' : 'auto',
|
|
213
256
|
'scrollbar-width': tableType !== 'values' ? 'none' : 'auto'
|
|
214
257
|
}">
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
258
|
+
<colgroup>
|
|
259
|
+
@if (tableType === 'values' && columnVirtualization && startColIndex > 0) {
|
|
260
|
+
<col [style.width]="startColIndex * (colWidth >= 0 ? colWidth : 200) + 'px'"/>
|
|
261
|
+
}
|
|
262
|
+
@for (item of (tableType === 'values' && columnVirtualization ? headerItems?.slice(0, renderedCols) : headerItems); track trackByColIndex($index, item)) {
|
|
263
|
+
<col
|
|
264
|
+
[style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
|
|
265
|
+
}
|
|
266
|
+
</colgroup>
|
|
267
|
+
<tbody class="k-pivotgrid-tbody" [attr.role]="tableType === 'values' ? 'none' : 'rowgroup'">
|
|
268
|
+
@for (row of (tableType === 'values' && rowVirtualization ? renderedRows : rows); track trackByRowIndex($index, row); let rowIndex = $index) {
|
|
269
|
+
<tr
|
|
270
|
+
class="k-pivotgrid-row"
|
|
271
|
+
[attr.role]="tableType === 'values' ? 'none' : 'row'">
|
|
272
|
+
@if (tableType === 'values' && columnVirtualization && startColIndex > 0) {
|
|
273
|
+
<td class="k-pivotgrid-cell"></td>
|
|
274
|
+
}
|
|
275
|
+
@for (cell of (tableType === 'values' && columnVirtualization ? row?.cells.slice(startColIndex, (startColIndex + renderedCols)) : row?.cells); track trackByCellIndex($index, cell); let colIndex = $index) {
|
|
276
|
+
@if (cell && tableType !== 'values') {
|
|
277
|
+
<th
|
|
278
|
+
[kendoPivotGridCell]="cell"
|
|
279
|
+
[customCellTemplate]="customCellTemplate"
|
|
280
|
+
[rowHeaderCellTemplate]="rowHeaderCellTemplate"
|
|
281
|
+
[columnHeaderCellTemplate]="columnHeaderCellTemplate"
|
|
282
|
+
[tableType]="tableType"
|
|
283
|
+
[colIndex]="colIndex + startColIndex"
|
|
284
|
+
[rowIndex]="rowIndex + startRowIndex"
|
|
285
|
+
[attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
|
|
286
|
+
[attr.role]="tableType === 'columnHeader' ? 'columnheader' : tableType === 'rowHeader' ? 'rowheader' : 'none'"
|
|
287
|
+
[attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
|
|
288
|
+
}
|
|
289
|
+
@if (cell && tableType === 'values') {
|
|
290
|
+
<td
|
|
291
|
+
[customCellTemplate]="customCellTemplate"
|
|
292
|
+
[valueCellTemplate]="valueCellTemplate"
|
|
293
|
+
[kendoPivotGridCell]="cell"
|
|
294
|
+
tableType="values"
|
|
295
|
+
[colIndex]="colIndex + startColIndex"
|
|
296
|
+
[rowIndex]="rowIndex + startRowIndex"
|
|
297
|
+
role="gridcell"
|
|
298
|
+
[attr.id]="pivotGridId + 'cell-' + (rowIndex + startRowIndex + 1) + '-' + (colIndex + startColIndex + 1)"></td>
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
</tr>
|
|
302
|
+
}
|
|
303
|
+
</tbody>
|
|
252
304
|
</table>
|
|
253
|
-
|
|
305
|
+
`, isInline: true, dependencies: [{ kind: "component", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
254
306
|
}
|
|
255
307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PivotGridTableComponent, decorators: [{
|
|
256
308
|
type: Component,
|
|
@@ -258,55 +310,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
258
310
|
selector: 'kendo-pivotgrid-table',
|
|
259
311
|
template: `
|
|
260
312
|
<table
|
|
261
|
-
|
|
262
|
-
|
|
313
|
+
class="k-pivotgrid-table"
|
|
314
|
+
role="presentation"
|
|
263
315
|
[ngStyle]="{
|
|
264
316
|
float: tableType === 'values' ? this.rtl ? 'right' : 'left' : 'initial',
|
|
265
317
|
overflow: 'scroll',
|
|
266
318
|
'-ms-overflow-style': tableType !== 'values' ? 'none' : 'auto',
|
|
267
319
|
'scrollbar-width': tableType !== 'values' ? 'none' : 'auto'
|
|
268
320
|
}">
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
321
|
+
<colgroup>
|
|
322
|
+
@if (tableType === 'values' && columnVirtualization && startColIndex > 0) {
|
|
323
|
+
<col [style.width]="startColIndex * (colWidth >= 0 ? colWidth : 200) + 'px'"/>
|
|
324
|
+
}
|
|
325
|
+
@for (item of (tableType === 'values' && columnVirtualization ? headerItems?.slice(0, renderedCols) : headerItems); track trackByColIndex($index, item)) {
|
|
326
|
+
<col
|
|
327
|
+
[style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
|
|
328
|
+
}
|
|
329
|
+
</colgroup>
|
|
330
|
+
<tbody class="k-pivotgrid-tbody" [attr.role]="tableType === 'values' ? 'none' : 'rowgroup'">
|
|
331
|
+
@for (row of (tableType === 'values' && rowVirtualization ? renderedRows : rows); track trackByRowIndex($index, row); let rowIndex = $index) {
|
|
332
|
+
<tr
|
|
333
|
+
class="k-pivotgrid-row"
|
|
334
|
+
[attr.role]="tableType === 'values' ? 'none' : 'row'">
|
|
335
|
+
@if (tableType === 'values' && columnVirtualization && startColIndex > 0) {
|
|
336
|
+
<td class="k-pivotgrid-cell"></td>
|
|
337
|
+
}
|
|
338
|
+
@for (cell of (tableType === 'values' && columnVirtualization ? row?.cells.slice(startColIndex, (startColIndex + renderedCols)) : row?.cells); track trackByCellIndex($index, cell); let colIndex = $index) {
|
|
339
|
+
@if (cell && tableType !== 'values') {
|
|
340
|
+
<th
|
|
341
|
+
[kendoPivotGridCell]="cell"
|
|
342
|
+
[customCellTemplate]="customCellTemplate"
|
|
343
|
+
[rowHeaderCellTemplate]="rowHeaderCellTemplate"
|
|
344
|
+
[columnHeaderCellTemplate]="columnHeaderCellTemplate"
|
|
345
|
+
[tableType]="tableType"
|
|
346
|
+
[colIndex]="colIndex + startColIndex"
|
|
347
|
+
[rowIndex]="rowIndex + startRowIndex"
|
|
348
|
+
[attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
|
|
349
|
+
[attr.role]="tableType === 'columnHeader' ? 'columnheader' : tableType === 'rowHeader' ? 'rowheader' : 'none'"
|
|
350
|
+
[attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
|
|
351
|
+
}
|
|
352
|
+
@if (cell && tableType === 'values') {
|
|
353
|
+
<td
|
|
354
|
+
[customCellTemplate]="customCellTemplate"
|
|
355
|
+
[valueCellTemplate]="valueCellTemplate"
|
|
356
|
+
[kendoPivotGridCell]="cell"
|
|
357
|
+
tableType="values"
|
|
358
|
+
[colIndex]="colIndex + startColIndex"
|
|
359
|
+
[rowIndex]="rowIndex + startRowIndex"
|
|
360
|
+
role="gridcell"
|
|
361
|
+
[attr.id]="pivotGridId + 'cell-' + (rowIndex + startRowIndex + 1) + '-' + (colIndex + startColIndex + 1)"></td>
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
</tr>
|
|
365
|
+
}
|
|
366
|
+
</tbody>
|
|
306
367
|
</table>
|
|
307
|
-
|
|
368
|
+
`,
|
|
308
369
|
standalone: true,
|
|
309
|
-
imports: [
|
|
370
|
+
imports: [PivotGridCellDirective, NgStyle]
|
|
310
371
|
}]
|
|
311
372
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i3.PivotGridScrollService }], propDecorators: { tableType: [{
|
|
312
373
|
type: Input
|