@progress/kendo-angular-pivotgrid 17.0.0-develop.8 → 17.0.0

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.
Files changed (90) hide show
  1. package/README.md +37 -15
  2. package/configurator/chip-menu/chip-menu-filter.component.d.ts +1 -1
  3. package/configurator/chip-menu/chip-menu-item-base.d.ts +1 -1
  4. package/configurator/chip-menu/chip-menu-item.component.d.ts +1 -1
  5. package/configurator/chip-menu/chip-menu-item.directive.d.ts +1 -1
  6. package/configurator/chip-menu/chip-menu-reorder.component.d.ts +1 -1
  7. package/configurator/chip-menu/chip-menu-sort.component.d.ts +1 -1
  8. package/configurator/chip-menu/chip-menu.component.d.ts +1 -1
  9. package/configurator/chip-menu/filtering/filter-menu-container.component.d.ts +1 -1
  10. package/configurator/chip-menu/filtering/filter-menu-dropdownlist.directive.d.ts +1 -1
  11. package/configurator/chip-menu/filtering/string-filter-menu.component.d.ts +3 -3
  12. package/configurator/configurator.component.d.ts +1 -1
  13. package/configurator/draggable.directive.d.ts +4 -5
  14. package/configurator/drop-target.directive.d.ts +1 -1
  15. package/data-binding/base-binding-directive.d.ts +1 -1
  16. package/data-binding/local-binding.directive.d.ts +1 -1
  17. package/data-binding/olap-binding.directive.d.ts +1 -1
  18. package/{esm2020 → esm2022}/configurator/chip-kb-nav.directive.mjs +8 -5
  19. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-container.component.mjs +8 -5
  20. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-filter.component.mjs +25 -19
  21. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-item-base.mjs +9 -6
  22. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-item-content-template.directive.mjs +4 -3
  23. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-item.component.mjs +65 -40
  24. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-item.directive.mjs +35 -28
  25. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-reorder.component.mjs +27 -19
  26. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu-sort.component.mjs +10 -6
  27. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu.component.mjs +22 -10
  28. package/{esm2020 → esm2022}/configurator/chip-menu/chip-menu.service.mjs +12 -10
  29. package/{esm2020 → esm2022}/configurator/chip-menu/filtering/filter-menu-container.component.mjs +21 -8
  30. package/{esm2020 → esm2022}/configurator/chip-menu/filtering/filter-menu-dropdownlist.directive.mjs +11 -9
  31. package/{esm2020 → esm2022}/configurator/chip-menu/filtering/menu-tabbing.service.mjs +7 -6
  32. package/{esm2020 → esm2022}/configurator/chip-menu/filtering/string-filter-menu.component.mjs +25 -15
  33. package/{esm2020 → esm2022}/configurator/chip-menu/single-popup.service.mjs +21 -10
  34. package/{esm2020 → esm2022}/configurator/configurator.component.mjs +58 -39
  35. package/{esm2020 → esm2022}/configurator/configurator.service.mjs +12 -5
  36. package/{esm2020 → esm2022}/configurator/draggable.directive.mjs +22 -15
  37. package/{esm2020 → esm2022}/configurator/drop-cue.service.mjs +4 -3
  38. package/{esm2020 → esm2022}/configurator/drop-target.directive.mjs +15 -4
  39. package/{esm2020 → esm2022}/data-binding/base-binding-directive.mjs +43 -35
  40. package/{esm2020 → esm2022}/data-binding/local-binding.directive.mjs +17 -5
  41. package/{esm2020 → esm2022}/data-binding/olap-binding.directive.mjs +16 -4
  42. package/{esm2020 → esm2022}/data-binding/pivotgrid-data.service.mjs +25 -14
  43. package/{esm2020 → esm2022}/localization/custom-messages.component.mjs +9 -8
  44. package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs +9 -8
  45. package/esm2022/localization/messages.mjs +284 -0
  46. package/{esm2020 → esm2022}/localization/pivot-localization.service.mjs +4 -3
  47. package/{esm2020 → esm2022}/models/configuration-change-event.mjs +20 -0
  48. package/{esm2020 → esm2022}/models/configurator-settings.mjs +5 -0
  49. package/{esm2020 → esm2022}/models/expanded-change-event.mjs +12 -0
  50. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  51. package/{esm2020 → esm2022}/pivotgrid.component.mjs +98 -73
  52. package/{esm2020 → esm2022}/pivotgrid.module.mjs +13 -14
  53. package/{esm2020 → esm2022}/rendering/pivotgrid-cell.directive.mjs +30 -19
  54. package/{esm2020 → esm2022}/rendering/pivotgrid-table.component.mjs +66 -48
  55. package/{esm2020 → esm2022}/rendering/templates/pivotgrid-cell-template.directive.mjs +4 -3
  56. package/{esm2020 → esm2022}/rendering/templates/pivotgrid-column-header-cell-template.directive.mjs +4 -3
  57. package/{esm2020 → esm2022}/rendering/templates/pivotgrid-row-header-cell-template.directive.mjs +4 -3
  58. package/{esm2020 → esm2022}/rendering/templates/pivotgrid-value-cell-template.directive.mjs +4 -3
  59. package/{esm2020 → esm2022}/virtual/scroll.service.mjs +5 -6
  60. package/{esm2020 → esm2022}/virtual/scrollable-container.mjs +57 -43
  61. package/{fesm2020 → fesm2022}/progress-kendo-angular-pivotgrid.mjs +1067 -560
  62. package/localization/messages.d.ts +1 -1
  63. package/models/configurator-chipmenu-reorder-target.d.ts +1 -1
  64. package/models/configurator-orientation.d.ts +1 -1
  65. package/models/configurator-position.d.ts +1 -1
  66. package/models/drop-section.d.ts +1 -1
  67. package/models/drop-target.d.ts +1 -1
  68. package/models/expanded-state-action.d.ts +2 -2
  69. package/models/virtualization-settings.d.ts +1 -1
  70. package/package.json +22 -28
  71. package/pivotgrid.component.d.ts +1 -1
  72. package/pivotgrid.module.d.ts +1 -2
  73. package/rendering/pivotgrid-cell.directive.d.ts +1 -1
  74. package/rendering/pivotgrid-table.component.d.ts +1 -1
  75. package/schematics/ngAdd/index.js +3 -3
  76. package/esm2020/localization/messages.mjs +0 -87
  77. package/fesm2015/progress-kendo-angular-pivotgrid.mjs +0 -4928
  78. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  79. /package/{esm2020 → esm2022}/index.mjs +0 -0
  80. /package/{esm2020 → esm2022}/models/configurator-chipmenu-reorder-target.mjs +0 -0
  81. /package/{esm2020 → esm2022}/models/configurator-orientation.mjs +0 -0
  82. /package/{esm2020 → esm2022}/models/configurator-position.mjs +0 -0
  83. /package/{esm2020 → esm2022}/models/data-row-item.mjs +0 -0
  84. /package/{esm2020 → esm2022}/models/drop-section.mjs +0 -0
  85. /package/{esm2020 → esm2022}/models/drop-target.mjs +0 -0
  86. /package/{esm2020 → esm2022}/models/expanded-state-action.mjs +0 -0
  87. /package/{esm2020 → esm2022}/models/loader-settings.mjs +0 -0
  88. /package/{esm2020 → esm2022}/models/virtualization-settings.mjs +0 -0
  89. /package/{esm2020 → esm2022}/progress-kendo-angular-pivotgrid.mjs +0 -0
  90. /package/{esm2020 → esm2022}/util.mjs +0 -0
@@ -7,7 +7,6 @@ import { IconsService } from '@progress/kendo-angular-icons';
7
7
  import { KENDO_PIVOTGRID, KENDO_PIVOTGRID_CHIPMENU_DECLARATIONS, KENDO_PIVOTGRID_DECLARATIONS } from './directives';
8
8
  import { PopupService } from '@progress/kendo-angular-popup';
9
9
  import { DialogContainerService, DialogService, WindowContainerService, WindowService } from '@progress/kendo-angular-dialog';
10
- import { FormsModule, ReactiveFormsModule } from '@angular/forms';
11
10
  import { ResizeBatchService } from '@progress/kendo-angular-common';
12
11
  import * as i0 from "@angular/core";
13
12
  import * as i1 from "./configurator/chip-menu/chip-menu-item.component";
@@ -69,22 +68,22 @@ import * as i26 from "./rendering/templates/pivotgrid-column-header-cell-templat
69
68
  * ```
70
69
  */
71
70
  export class PivotGridModule {
71
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
72
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PivotGridModule, imports: [i1.ChipMenuItemComponent, i2.ChipMenuSortComponent, i3.ChipMenuComponent, i4.ChipMenuFilterComponent, i5.ChipMenuItemContentTemplateDirective, i6.FilterMenuContainerComponent, i7.StringFilterMenuComponent, i8.FilterMenuDropDownListDirective, i9.ChipMenuContainerComponent, i10.ChipMenuItemDirective, i11.ChipMenuReorderComponent, i12.PivotGridComponent, i13.PivotGridTableComponent, i14.PivotGridConfiguratorComponent, i15.PivotGridCellDirective, i16.PivotLocalBindingDirective, i17.PivotOLAPBindingDirective, i18.DraggableChipDirective, i19.DropTargetDirective, i20.LocalizedMessagesDirective, i21.CustomMessagesComponent, i22.ChipKeyboardNavigationDirective, i23.CellTemplateDirective, i24.ValueCellTemplateDirective, i25.RowHeaderCellTemplateDirective, i26.ColumnHeaderCellTemplateDirective], exports: [i12.PivotGridComponent, i13.PivotGridTableComponent, i15.PivotGridCellDirective, i16.PivotLocalBindingDirective, i17.PivotOLAPBindingDirective, i21.CustomMessagesComponent, i23.CellTemplateDirective, i24.ValueCellTemplateDirective, i25.RowHeaderCellTemplateDirective, i26.ColumnHeaderCellTemplateDirective] });
73
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridModule, providers: [
74
+ IconsService,
75
+ PopupService,
76
+ ResizeBatchService,
77
+ DialogContainerService,
78
+ DialogService,
79
+ WindowService,
80
+ WindowContainerService
81
+ ], imports: [i1.ChipMenuItemComponent, i2.ChipMenuSortComponent, i3.ChipMenuComponent, i4.ChipMenuFilterComponent, i6.FilterMenuContainerComponent, i7.StringFilterMenuComponent, i11.ChipMenuReorderComponent, i12.PivotGridComponent, i13.PivotGridTableComponent, i14.PivotGridConfiguratorComponent, i15.PivotGridCellDirective] });
72
82
  }
73
- PivotGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
74
- PivotGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PivotGridModule, imports: [i1.ChipMenuItemComponent, i2.ChipMenuSortComponent, i3.ChipMenuComponent, i4.ChipMenuFilterComponent, i5.ChipMenuItemContentTemplateDirective, i6.FilterMenuContainerComponent, i7.StringFilterMenuComponent, i8.FilterMenuDropDownListDirective, i9.ChipMenuContainerComponent, i10.ChipMenuItemDirective, i11.ChipMenuReorderComponent, i12.PivotGridComponent, i13.PivotGridTableComponent, i14.PivotGridConfiguratorComponent, i15.PivotGridCellDirective, i16.PivotLocalBindingDirective, i17.PivotOLAPBindingDirective, i18.DraggableChipDirective, i19.DropTargetDirective, i20.LocalizedMessagesDirective, i21.CustomMessagesComponent, i22.ChipKeyboardNavigationDirective, i23.CellTemplateDirective, i24.ValueCellTemplateDirective, i25.RowHeaderCellTemplateDirective, i26.ColumnHeaderCellTemplateDirective, FormsModule, ReactiveFormsModule], exports: [i12.PivotGridComponent, i13.PivotGridTableComponent, i15.PivotGridCellDirective, i16.PivotLocalBindingDirective, i17.PivotOLAPBindingDirective, i21.CustomMessagesComponent, i23.CellTemplateDirective, i24.ValueCellTemplateDirective, i25.RowHeaderCellTemplateDirective, i26.ColumnHeaderCellTemplateDirective] });
75
- PivotGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridModule, providers: [
76
- IconsService,
77
- PopupService,
78
- ResizeBatchService,
79
- DialogContainerService,
80
- DialogService,
81
- WindowService,
82
- WindowContainerService
83
- ], imports: [i1.ChipMenuItemComponent, i2.ChipMenuSortComponent, i3.ChipMenuComponent, i4.ChipMenuFilterComponent, i6.FilterMenuContainerComponent, i7.StringFilterMenuComponent, i9.ChipMenuContainerComponent, i11.ChipMenuReorderComponent, i12.PivotGridComponent, i13.PivotGridTableComponent, i14.PivotGridConfiguratorComponent, i15.PivotGridCellDirective, i21.CustomMessagesComponent, FormsModule, ReactiveFormsModule] });
84
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridModule, decorators: [{
83
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridModule, decorators: [{
85
84
  type: NgModule,
86
85
  args: [{
87
- imports: [...KENDO_PIVOTGRID_CHIPMENU_DECLARATIONS, ...KENDO_PIVOTGRID_DECLARATIONS, FormsModule, ReactiveFormsModule],
86
+ imports: [...KENDO_PIVOTGRID_CHIPMENU_DECLARATIONS, ...KENDO_PIVOTGRID_DECLARATIONS],
88
87
  exports: [...KENDO_PIVOTGRID],
89
88
  providers: [
90
89
  IconsService,
@@ -18,21 +18,18 @@ import * as i1 from "../data-binding/pivotgrid-data.service";
18
18
  * @hidden
19
19
  */
20
20
  export class PivotGridCellDirective {
21
- constructor(hostEl, renderer, dataService) {
22
- this.hostEl = hostEl;
23
- this.renderer = renderer;
24
- this.dataService = dataService;
25
- this.cellClass = true;
26
- this.chevronUpSVGIcon = chevronUpIcon;
27
- this.chevronDownSVGIcon = chevronDownIcon;
28
- this.handleClick = () => {
29
- this.dataService.expandedStateChange.emit({
30
- action: this.expanded ? 'collapse' : 'expand',
31
- cell: this.kendoPivotGridCell,
32
- tableType: this.tableType
33
- });
34
- };
35
- }
21
+ hostEl;
22
+ renderer;
23
+ dataService;
24
+ cellClass = true;
25
+ kendoPivotGridCell;
26
+ tableType;
27
+ rowIndex;
28
+ colIndex;
29
+ customCellTemplate;
30
+ valueCellTemplate;
31
+ rowHeaderCellTemplate;
32
+ columnHeaderCellTemplate;
36
33
  get isNotProvidedCellTemplatePerType() {
37
34
  return (this.tableType === 'values' && !this.valueCellTemplate)
38
35
  || (this.tableType === 'rowHeader' && !this.rowHeaderCellTemplate)
@@ -41,6 +38,13 @@ export class PivotGridCellDirective {
41
38
  get expanded() {
42
39
  return (this.kendoPivotGridCell?.hasChildren && this.kendoPivotGridCell.children.length > 0) || false;
43
40
  }
41
+ chevronUpSVGIcon = chevronUpIcon;
42
+ chevronDownSVGIcon = chevronDownIcon;
43
+ constructor(hostEl, renderer, dataService) {
44
+ this.hostEl = hostEl;
45
+ this.renderer = renderer;
46
+ this.dataService = dataService;
47
+ }
44
48
  ngOnInit() {
45
49
  const nativeElement = this.hostEl.nativeElement;
46
50
  this.renderer.setAttribute(nativeElement, 'rowspan', this.kendoPivotGridCell.rowSpan || 1);
@@ -60,9 +64,15 @@ export class PivotGridCellDirective {
60
64
  }
61
65
  }
62
66
  }
63
- }
64
- PivotGridCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridCellDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
65
- PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
67
+ handleClick = () => {
68
+ this.dataService.expandedStateChange.emit({
69
+ action: this.expanded ? 'collapse' : 'expand',
70
+ cell: this.kendoPivotGridCell,
71
+ tableType: this.tableType
72
+ });
73
+ };
74
+ 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 });
75
+ 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: `
66
76
  <kendo-icon-wrapper
67
77
  *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
68
78
  aria-hidden="true"
@@ -123,7 +133,8 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
123
133
  {{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}
124
134
  </span>
125
135
  `, 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"] }] });
126
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridCellDirective, decorators: [{
136
+ }
137
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridCellDirective, decorators: [{
127
138
  type: Component,
128
139
  args: [{
129
140
  // eslint-disable-next-line @angular-eslint/component-selector
@@ -24,61 +24,48 @@ import * as i3 from "../virtual/scroll.service";
24
24
  * @hidden
25
25
  */
26
26
  export class PivotGridTableComponent {
27
+ host;
28
+ dataService;
29
+ localization;
30
+ zone;
31
+ scrollService;
32
+ headerItems;
33
+ rows;
34
+ renderedRows;
35
+ renderedCols;
36
+ totalRows;
37
+ startRowIndex = 0;
38
+ startColIndex = 0;
39
+ rtl = false;
40
+ tableType;
41
+ colWidth;
42
+ customCellTemplate;
43
+ valueCellTemplate;
44
+ rowHeaderCellTemplate;
45
+ columnHeaderCellTemplate;
46
+ scrollableSettings;
47
+ get pivotGridId() {
48
+ return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
49
+ }
50
+ get columnVirtualization() {
51
+ return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'row';
52
+ }
53
+ get rowVirtualization() {
54
+ return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'column';
55
+ }
56
+ subs = new Subscription();
57
+ scrollable;
27
58
  constructor(host, dataService, localization, zone, scrollService) {
28
59
  this.host = host;
29
60
  this.dataService = dataService;
30
61
  this.localization = localization;
31
62
  this.zone = zone;
32
63
  this.scrollService = scrollService;
33
- this.startRowIndex = 0;
34
- this.startColIndex = 0;
35
- this.rtl = false;
36
- this.subs = new Subscription();
37
- this.colsUpdateCallback = (cols) => {
38
- this.renderedCols = Math.min(cols.length, this.scrollableSettings?.columns);
39
- this.renderedCols && this.scrollable && (this.scrollable.totalCols = cols.length);
40
- (this.scrollableSettings && this.scrollableSettings.type !== 'row') && this.scrollable?.onNewData(true);
41
- this.headerItems = cols;
42
- isDocumentAvailable() && !this.scrollable && this.tableType === 'values' && (this.columnVirtualization || this.rowVirtualization) && this.initScrollable();
43
- };
44
- this.initScrollable = () => {
45
- this.scrollable = new ScrollableTable(this.host.nativeElement, {
46
- onScroll: () => {
47
- this.startRowIndex = this.scrollable.startRow;
48
- this.startColIndex = this.scrollable.startCol;
49
- this.renderedRows = this.rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows);
50
- this.scrollable.renderedRows = this.renderedRows.length;
51
- this.scrollable.renderedCols = this.renderedCols;
52
- },
53
- onScrollEnd: () => {
54
- matchAriaAttributes(this.host.nativeElement.closest('.k-pivotgrid'));
55
- }
56
- }, {
57
- itemHeight: this.scrollableSettings.rowHeight,
58
- itemWidth: this.colWidth || 200,
59
- total: this.totalRows,
60
- totalCols: this.headerItems.length,
61
- renderedRows: this.scrollableSettings.rows,
62
- renderedCols: this.scrollableSettings.columns,
63
- columnVirtualization: this.columnVirtualization,
64
- rowVirtualization: this.rowVirtualization,
65
- rtl: this.rtl
66
- });
67
- };
68
64
  this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
69
65
  this.rtl = rtl;
70
66
  this.scrollable && (this.scrollable.rtl = rtl);
71
67
  }));
72
68
  }
73
- get pivotGridId() {
74
- return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
75
- }
76
- get columnVirtualization() {
77
- return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'row';
78
- }
79
- get rowVirtualization() {
80
- return this.scrollableSettings?.type && this.scrollableSettings?.type !== 'column';
81
- }
82
69
  ngOnInit() {
83
70
  this.subs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => {
84
71
  this.rows = rows;
@@ -100,6 +87,37 @@ export class PivotGridTableComponent {
100
87
  this.subs.unsubscribe();
101
88
  this.scrollable?.destroy();
102
89
  }
90
+ colsUpdateCallback = (cols) => {
91
+ this.renderedCols = Math.min(cols.length, this.scrollableSettings?.columns);
92
+ this.renderedCols && this.scrollable && (this.scrollable.totalCols = cols.length);
93
+ (this.scrollableSettings && this.scrollableSettings.type !== 'row') && this.scrollable?.onNewData(true);
94
+ this.headerItems = cols;
95
+ isDocumentAvailable() && !this.scrollable && this.tableType === 'values' && (this.columnVirtualization || this.rowVirtualization) && this.initScrollable();
96
+ };
97
+ initScrollable = () => {
98
+ this.scrollable = new ScrollableTable(this.host.nativeElement, {
99
+ onScroll: () => {
100
+ this.startRowIndex = this.scrollable.startRow;
101
+ this.startColIndex = this.scrollable.startCol;
102
+ this.renderedRows = this.rows.slice(this.startRowIndex, this.startRowIndex + this.scrollableSettings.rows);
103
+ this.scrollable.renderedRows = this.renderedRows.length;
104
+ this.scrollable.renderedCols = this.renderedCols;
105
+ },
106
+ onScrollEnd: () => {
107
+ matchAriaAttributes(this.host.nativeElement.closest('.k-pivotgrid'));
108
+ }
109
+ }, {
110
+ itemHeight: this.scrollableSettings.rowHeight,
111
+ itemWidth: this.colWidth || 200,
112
+ total: this.totalRows,
113
+ totalCols: this.headerItems.length,
114
+ renderedRows: this.scrollableSettings.rows,
115
+ renderedCols: this.scrollableSettings.columns,
116
+ columnVirtualization: this.columnVirtualization,
117
+ rowVirtualization: this.rowVirtualization,
118
+ rtl: this.rtl
119
+ });
120
+ };
103
121
  initScrollableKeyboardNavigation() {
104
122
  const pivotGrid = this.scrollService.pivotGrid;
105
123
  this.host.nativeElement.addEventListener('keydown', (e) => {
@@ -182,9 +200,8 @@ export class PivotGridTableComponent {
182
200
  }
183
201
  }, true);
184
202
  }
185
- }
186
- PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i0.ElementRef }, { token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i0.NgZone }, { token: i3.PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
187
- PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
203
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i0.ElementRef }, { token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i0.NgZone }, { token: i3.PivotGridScrollService }], target: i0.ɵɵFactoryTarget.Component });
204
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: `
188
205
  <table
189
206
  class="k-pivotgrid-table"
190
207
  role="presentation"
@@ -233,7 +250,8 @@ PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
233
250
  </tbody>
234
251
  </table>
235
252
  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PivotGridCellDirective, selector: "[kendoPivotGridCell]", inputs: ["kendoPivotGridCell", "tableType", "rowIndex", "colIndex", "customCellTemplate", "valueCellTemplate", "rowHeaderCellTemplate", "columnHeaderCellTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
236
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridTableComponent, decorators: [{
253
+ }
254
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridTableComponent, decorators: [{
237
255
  type: Component,
238
256
  args: [{
239
257
  selector: 'kendo-pivotgrid-table',
@@ -27,13 +27,14 @@ import * as i0 from "@angular/core";
27
27
  * ```
28
28
  */
29
29
  export class CellTemplateDirective {
30
+ templateRef;
30
31
  constructor(templateRef) {
31
32
  this.templateRef = templateRef;
32
33
  }
34
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
35
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridCellTemplate]", ngImport: i0 });
33
36
  }
34
- CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
35
- CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridCellTemplate]", ngImport: i0 });
36
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellTemplateDirective, decorators: [{
37
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellTemplateDirective, decorators: [{
37
38
  type: Directive,
38
39
  args: [{
39
40
  selector: '[kendoPivotGridCellTemplate]',
@@ -27,13 +27,14 @@ import * as i0 from "@angular/core";
27
27
  * ```
28
28
  */
29
29
  export class ColumnHeaderCellTemplateDirective {
30
+ templateRef;
30
31
  constructor(templateRef) {
31
32
  this.templateRef = templateRef;
32
33
  }
34
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
35
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHeaderCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridColumnHeaderCellTemplate]", ngImport: i0 });
33
36
  }
34
- ColumnHeaderCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
35
- ColumnHeaderCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ColumnHeaderCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridColumnHeaderCellTemplate]", ngImport: i0 });
36
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnHeaderCellTemplateDirective, decorators: [{
37
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHeaderCellTemplateDirective, decorators: [{
37
38
  type: Directive,
38
39
  args: [{
39
40
  selector: '[kendoPivotGridColumnHeaderCellTemplate]',
@@ -27,13 +27,14 @@ import * as i0 from "@angular/core";
27
27
  * ```
28
28
  */
29
29
  export class RowHeaderCellTemplateDirective {
30
+ templateRef;
30
31
  constructor(templateRef) {
31
32
  this.templateRef = templateRef;
32
33
  }
34
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
35
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RowHeaderCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridRowHeaderCellTemplate]", ngImport: i0 });
33
36
  }
34
- RowHeaderCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RowHeaderCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
35
- RowHeaderCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: RowHeaderCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridRowHeaderCellTemplate]", ngImport: i0 });
36
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RowHeaderCellTemplateDirective, decorators: [{
37
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RowHeaderCellTemplateDirective, decorators: [{
37
38
  type: Directive,
38
39
  args: [{
39
40
  selector: '[kendoPivotGridRowHeaderCellTemplate]',
@@ -26,13 +26,14 @@ import * as i0 from "@angular/core";
26
26
  * ```
27
27
  */
28
28
  export class ValueCellTemplateDirective {
29
+ templateRef;
29
30
  constructor(templateRef) {
30
31
  this.templateRef = templateRef;
31
32
  }
33
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
34
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ValueCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridValueCellTemplate]", ngImport: i0 });
32
35
  }
33
- ValueCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValueCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
34
- ValueCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ValueCellTemplateDirective, isStandalone: true, selector: "[kendoPivotGridValueCellTemplate]", ngImport: i0 });
35
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValueCellTemplateDirective, decorators: [{
36
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValueCellTemplateDirective, decorators: [{
36
37
  type: Directive,
37
38
  args: [{
38
39
  selector: '[kendoPivotGridValueCellTemplate]',
@@ -8,12 +8,11 @@ import * as i0 from "@angular/core";
8
8
  * @hidden
9
9
  */
10
10
  export class PivotGridScrollService {
11
- constructor() {
12
- this.virtualScrolling = false;
13
- }
11
+ virtualScrolling = false;
12
+ pivotGrid;
13
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
14
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridScrollService });
14
15
  }
15
- PivotGridScrollService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
16
- PivotGridScrollService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService });
17
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridScrollService, decorators: [{
16
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridScrollService, decorators: [{
18
17
  type: Injectable
19
18
  }] });
@@ -6,53 +6,28 @@
6
6
  * @hidden
7
7
  */
8
8
  export class ScrollableTable {
9
+ element;
10
+ handlers;
11
+ options;
12
+ startRow = 0;
13
+ endRow;
14
+ startCol = 0;
15
+ endCol;
16
+ renderedRows;
17
+ renderedCols;
18
+ total;
19
+ totalCols;
20
+ rtl;
21
+ visibleRows;
22
+ visibleCols;
23
+ lastKnownScrollPosition = { top: 0, left: 0 };
24
+ offsetFirst = 0;
25
+ stretcher;
26
+ rect;
9
27
  constructor(element, handlers, options) {
10
28
  this.element = element;
11
29
  this.handlers = handlers;
12
30
  this.options = options;
13
- this.startRow = 0;
14
- this.startCol = 0;
15
- this.lastKnownScrollPosition = { top: 0, left: 0 };
16
- this.offsetFirst = 0;
17
- this.scrollHandler = (e) => {
18
- const verticalDir = this.element.scrollTop - this.lastKnownScrollPosition.top;
19
- const horizontalDir = Math.abs(this.element.scrollLeft) - this.lastKnownScrollPosition.left;
20
- if (this.options.rowVirtualization) {
21
- if (verticalDir > 0) {
22
- if (this.element.scrollTop > (this.renderedRows * this.options.itemHeight + this.offsetFirst - this.rect.height)) {
23
- this.startRow = Math.floor(this.element.scrollTop / this.options.itemHeight);
24
- this.rowVirtualizationUpdate();
25
- }
26
- }
27
- else {
28
- if (this.element.scrollTop <= this.offsetFirst) {
29
- this.startRow = Math.max(0, Math.ceil(this.element.scrollTop / this.options.itemHeight) - Math.ceil(this.options.renderedRows / 3));
30
- this.rowVirtualizationUpdate();
31
- }
32
- }
33
- }
34
- if (this.options.columnVirtualization) {
35
- if (horizontalDir > 0) {
36
- if (Math.abs(this.element.scrollLeft) - (Math.max(this.startCol - 1, 0) * (this.options.colWidth || 200)) > (this.options.colWidth || 200)) {
37
- this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
38
- this.handlers.onScroll();
39
- }
40
- }
41
- else {
42
- if (Math.abs(this.element.scrollLeft) <= (this.startCol + 1) * (this.options.colWidth || 200)) {
43
- this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
44
- this.handlers.onScroll();
45
- }
46
- }
47
- }
48
- this.lastKnownScrollPosition = {
49
- top: this.element.scrollTop,
50
- left: Math.abs(this.element.scrollLeft)
51
- };
52
- };
53
- this.scrollEndHandler = () => {
54
- this.handlers.onScrollEnd();
55
- };
56
31
  this.initialize();
57
32
  }
58
33
  onNewData(recalculateSize = false) {
@@ -95,6 +70,45 @@ export class ScrollableTable {
95
70
  this.element.addEventListener('scroll', this.scrollHandler);
96
71
  this.element.addEventListener('scrollend', this.scrollEndHandler);
97
72
  }
73
+ scrollHandler = (e) => {
74
+ const verticalDir = this.element.scrollTop - this.lastKnownScrollPosition.top;
75
+ const horizontalDir = Math.abs(this.element.scrollLeft) - this.lastKnownScrollPosition.left;
76
+ if (this.options.rowVirtualization) {
77
+ if (verticalDir > 0) {
78
+ if (this.element.scrollTop > (this.renderedRows * this.options.itemHeight + this.offsetFirst - this.rect.height)) {
79
+ this.startRow = Math.floor(this.element.scrollTop / this.options.itemHeight);
80
+ this.rowVirtualizationUpdate();
81
+ }
82
+ }
83
+ else {
84
+ if (this.element.scrollTop <= this.offsetFirst) {
85
+ this.startRow = Math.max(0, Math.ceil(this.element.scrollTop / this.options.itemHeight) - Math.ceil(this.options.renderedRows / 3));
86
+ this.rowVirtualizationUpdate();
87
+ }
88
+ }
89
+ }
90
+ if (this.options.columnVirtualization) {
91
+ if (horizontalDir > 0) {
92
+ if (Math.abs(this.element.scrollLeft) - (Math.max(this.startCol - 1, 0) * (this.options.colWidth || 200)) > (this.options.colWidth || 200)) {
93
+ this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
94
+ this.handlers.onScroll();
95
+ }
96
+ }
97
+ else {
98
+ if (Math.abs(this.element.scrollLeft) <= (this.startCol + 1) * (this.options.colWidth || 200)) {
99
+ this.startCol = Math.min(Math.max(Math.floor(Math.abs(this.element.scrollLeft) / this.options.itemWidth) - 1, 0), this.totalCols - this.renderedCols);
100
+ this.handlers.onScroll();
101
+ }
102
+ }
103
+ }
104
+ this.lastKnownScrollPosition = {
105
+ top: this.element.scrollTop,
106
+ left: Math.abs(this.element.scrollLeft)
107
+ };
108
+ };
109
+ scrollEndHandler = () => {
110
+ this.handlers.onScrollEnd();
111
+ };
98
112
  recalculateSize() {
99
113
  const totalHeight = this.total * this.options.itemHeight;
100
114
  const totalWidth = this.totalCols * this.options.itemWidth;