@progress/kendo-angular-pivotgrid 0.1.2 → 0.1.4-dev.202205131602

package/bundles/kendo-angular-pivotgrid.umd.js

@@ -2,4 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-common"),require("@progress/kendo-pivotgrid-common"),require("rxjs"),require("@angular/common"),require("@progress/kendo-angular-indicators"),require("@progress/kendo-angular-l10n")):"function"==typeof define&&define.amd?define("KendoAngularPivotgrid",["exports","@angular/core","@progress/kendo-licensing","@progress/kendo-angular-common","@progress/kendo-pivotgrid-common","rxjs","@angular/common","@progress/kendo-angular-indicators","@progress/kendo-angular-l10n"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularPivotgrid={},e.ng.core,e.KendoLicensing,e.KendoAngularCommon,e.KendoPivotgridCommon,e.rxjs,e.ng.common,e.KendoAngularIndicators,e.KendoAngularL10N)}(this,function(e,t,o,n,s,i,r,a,l){"use strict";function d(n){if(n&&n.__esModule)return n;var o=Object.create(null);return n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),o.default=n,Object.freeze(o)}function V(){var e;return null===v&&n.isDocumentAvailable()&&document.createElement&&((e=document.createElement("div")).style.cssText="overflow:scroll;overflow-x:hidden;zoom:1;clear:both;display:block",e.innerHTML="&nbsp;",document.body.appendChild(e),v=e.offsetWidth-e.scrollWidth,document.body.removeChild(e)),v}var c=d(t),p=d(n),u=d(r),g=d(a),N={name:"@progress/kendo-angular-pivotgrid",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1652282669,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"},v=null,m=function(e,t){return(m=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}m(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;function y(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),a=[];try{for(;(void 0===t||0<t--)&&!(o=i.next()).done;)a.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function f(e,t,n){if(n||2===arguments.length)for(var o,r=0,i=t.length;r<i;r++)!o&&r in t||((o=o||Array.prototype.slice.call(t,0,r))[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}Object.create;k.prototype.updateRowsAndCols=function(){var e=s.toTree((this.rows||[]).slice()),e=y(s.toRows(e),4),t=e[0],n=e[1],o=e[2],e=e[3],r=s.toTree((this.columns||[]).slice()),r=y(s.toColumns(r),3),i=r[0],a=r[1],r=r[2];this.columnHeaderLeaves=a,this.columnHeaderCols.next(new Array(r).fill({})),this.columnHeaderRows.next(i),this.rowHeaderLeaves=n,this.rowHeaderCols.next(new Array(e).fill({})),this.rowHeaderRows.next(t),this.valuesRows.next(s.toData((this.normalizedData||[]).slice(),a,n,r,o))};var b=k;function k(){this.expandedStateChange=new t.EventEmitter,this.columnHeaderRows=new i.BehaviorSubject([]),this.columnHeaderCols=new i.BehaviorSubject([]),this.rowHeaderCols=new i.BehaviorSubject([]),this.rowHeaderRows=new i.BehaviorSubject([]),this.valuesRows=new i.BehaviorSubject([]),this.loading=new i.BehaviorSubject(!1)}b.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:b,deps:[],target:c.ɵɵFactoryTarget.Injectable}),b.ɵprov=c.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:b}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:b,decorators:[{type:t.Injectable}],propDecorators:{expandedStateChange:[{type:t.Output}]}});Object.defineProperty(x.prototype,"expanded",{get:function(){var e;return(null==(e=this.kendoPivotGridCell)?void 0:e.hasChildren)&&this.kendoPivotGridCell.children.length},enumerable:!1,configurable:!0}),x.prototype.ngOnInit=function(){var e,t=this.hostEl.nativeElement,n=(this.renderer.setAttribute(t,"rowspan",this.kendoPivotGridCell.rowSpan||1),this.renderer.setAttribute(t,"colspan",this.kendoPivotGridCell.colSpan||1),{"k-pivotgrid-header-total":this.kendoPivotGridCell.total||"values"===this.tableType&&(this.dataService.rowHeaderLeaves[this.rowIndex].total||this.dataService.columnHeaderLeaves[this.colIndex].total),"k-pivotgrid-header-root":0===this.kendoPivotGridCell.levelNum,"k-pivotgrid-expanded":this.kendoPivotGridCell.hasChildren&&this.kendoPivotGridCell.children.length,"k-first":1===this.colIndex});for(e in n)n[e]&&this.renderer.addClass(t,e)};var I=x;function x(e,t,n){var o=this;this.hostEl=e,this.renderer=t,this.dataService=n,this.cellClass=!0,this.handleClick=function(){o.dataService.expandedStateChange.emit({action:o.expanded?"collapse":"expand",cell:o.kendoPivotGridCell,tableType:o.tableType})}}I.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:I,deps:[{token:c.ElementRef},{token:c.Renderer2},{token:b}],target:c.ɵɵFactoryTarget.Component}),I.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:I,selector:"[kendoPivotGridCell]",inputs:{kendoPivotGridCell:"kendoPivotGridCell",tableType:"tableType",rowIndex:"rowIndex",colIndex:"colIndex"},host:{properties:{"class.k-pivotgrid-cell":"this.cellClass"}},ngImport:c,template:'\n        <span \n            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"\n            class="k-icon"\n            [kendoEventsOutsideAngular]="{\n                click: handleClick\n            }"\n            [ngClass]="{\n                \'k-i-arrow-chevron-up\': expanded,\n                \'k-i-arrow-chevron-down\': !expanded\n            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}',isInline:!0,directives:[{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:p.EventsOutsideAngularDirective,selector:"[kendoEventsOutsideAngular]",inputs:["kendoEventsOutsideAngular","scope"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:I,decorators:[{type:t.Component,args:[{selector:"[kendoPivotGridCell]",template:'\n        <span \n            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"\n            class="k-icon"\n            [kendoEventsOutsideAngular]="{\n                click: handleClick\n            }"\n            [ngClass]="{\n                \'k-i-arrow-chevron-up\': expanded,\n                \'k-i-arrow-chevron-down\': !expanded\n            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}'}]}],ctorParameters:function(){return[{type:c.ElementRef},{type:c.Renderer2},{type:b}]},propDecorators:{cellClass:[{type:t.HostBinding,args:["class.k-pivotgrid-cell"]}],kendoPivotGridCell:[{type:t.Input}],tableType:[{type:t.Input}],rowIndex:[{type:t.Input}],colIndex:[{type:t.Input}]}});C.prototype.ngOnInit=function(){var t=this;this.dataChangeSubs.add(this.dataService[this.tableType+"Rows"].subscribe(function(e){return t.rows=e})),this.dataChangeSubs.add("values"===this.tableType?this.dataService.columnHeaderCols.subscribe(function(e){return t.headerItems=e}):this.dataService[this.tableType+"Cols"].subscribe(function(e){return t.headerItems=e}))},C.prototype.ngOnDestroy=function(){this.dataChangeSubs.unsubscribe()};p=C;function C(e){this.dataService=e,this.dataChangeSubs=new i.Subscription}p.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,deps:[{token:b}],target:c.ɵɵFactoryTarget.Component}),p.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:p,selector:"kendo-pivotgrid-table",inputs:{tableType:"tableType"},ngImport:c,template:'\n        <table class="k-pivotgrid-table">\n            <colgroup>\n                <col *ngFor="let item of headerItems;" />\n            </colgroup>\n            <tbody class="k-pivotgrid-tbody">\n                <tr *ngFor="let row of rows; index as rowIndex"\n                    class="k-pivotgrid-row">\n                    <ng-container *ngFor="let cell of row.cells; index as colIndex">\n                        <th\n                            *ngIf="cell && tableType !== \'values\'" \n                            [kendoPivotGridCell]="cell"\n                            [tableType]="tableType"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"></th>\n                        <td\n                            *ngIf="cell && tableType === \'values\'"\n                            [kendoPivotGridCell]="cell"\n                            tableType="values"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"></td>\n                    </ng-container>\n                </tr>\n            </tbody>\n        </table>\n    ',isInline:!0,components:[{type:I,selector:"[kendoPivotGridCell]",inputs:["kendoPivotGridCell","tableType","rowIndex","colIndex"]}],directives:[{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,decorators:[{type:t.Component,args:[{selector:"kendo-pivotgrid-table",template:'\n        <table class="k-pivotgrid-table">\n            <colgroup>\n                <col *ngFor="let item of headerItems;" />\n            </colgroup>\n            <tbody class="k-pivotgrid-tbody">\n                <tr *ngFor="let row of rows; index as rowIndex"\n                    class="k-pivotgrid-row">\n                    <ng-container *ngFor="let cell of row.cells; index as colIndex">\n                        <th\n                            *ngIf="cell && tableType !== \'values\'" \n                            [kendoPivotGridCell]="cell"\n                            [tableType]="tableType"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"></th>\n                        <td\n                            *ngIf="cell && tableType === \'values\'"\n                            [kendoPivotGridCell]="cell"\n                            tableType="values"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"></td>\n                    </ng-container>\n                </tr>\n            </tbody>\n        </table>\n    '}]}],ctorParameters:function(){return[{type:b}]},propDecorators:{tableType:[{type:t.Input}]}});var w={type:"converging-spinner",themeColor:"primary",size:"large"},A=(Object.defineProperty(S.prototype,"scrollbarWidth",{get:function(){return V()+"px"},enumerable:!1,configurable:!0}),Object.defineProperty(S.prototype,"loaderSettings",{get:function(){return this._loaderSettings},set:function(e){this._loaderSettings=Object.assign({},w,e)},enumerable:!1,configurable:!0}),S.prototype.ngAfterViewInit=function(){var r=this;n.isDocumentAvailable()&&this.zone.runOutsideAngular(function(){var e=document.querySelector(".k-pivotgrid-row-headers .k-pivotgrid-table"),t=new ResizeObserver(function(){return r.resizeContainer("Columns",e)}),n=(t.observe(e),document.querySelector(".k-pivotgrid-column-headers .k-pivotgrid-table")),o=new ResizeObserver(function(){return r.resizeContainer("Rows",n)});o.observe(n),r.resizeObservers=[t,o]})},S.prototype.ngAfterContentInit=function(){var t=this;this.loadingSubscription.add(this.dataService.loading.subscribe(function(e){return t.loading=e}))},S.prototype.ngOnDestroy=function(){this.resizeObservers.forEach(function(e){return e.disconnect()}),this.loadingSubscription.unsubscribe()},S);function S(e,t,n){var r=this;this.hostEl=e,this.zone=t,this.dataService=n,this.hostClass=!0,this.resizeObservers=[],this._loaderSettings=w,this.loadingSubscription=new i.Subscription,this.resizeContainer=function(e,t){var n=r.hostEl.nativeElement,o="Rows"===e?"offsetHeight":"offsetWidth";n.style["gridTemplate"+e]="",n.style["gridTemplate"+e]=t[o]+"px 1fr"},o.validatePackage(N)}A.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:A,deps:[{token:c.ElementRef},{token:c.NgZone},{token:b}],target:c.ɵɵFactoryTarget.Component}),A.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:A,selector:"kendo-pivotgrid",inputs:{loaderSettings:"loaderSettings"},host:{properties:{"class.k-pivotgrid":"this.hostClass","style.--kendo-scrollbar-width":"this.scrollbarWidth"}},providers:[b],ngImport:c,template:'\n        <span class="k-pivotgrid-empty-cell"></span>\n        <kendo-pivotgrid-table\n            class="k-pivotgrid-column-headers"\n            tableType="columnHeader"></kendo-pivotgrid-table>\n        <kendo-pivotgrid-table\n            class="k-pivotgrid-row-headers"\n            tableType="rowHeader"></kendo-pivotgrid-table>\n        <kendo-pivotgrid-table\n            class="k-pivotgrid-values"\n            tableType="values"></kendo-pivotgrid-table>\n\n        <div *ngIf="loading" class="k-loader">\n            <kendo-loader\n                [type]="loaderSettings?.type"\n                [themeColor]="loaderSettings?.themeColor"\n                [size]="loaderSettings?.size"\n            >\n            </kendo-loader>\n        </div>\n   ',isInline:!0,styles:["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "],components:[{type:p,selector:"kendo-pivotgrid-table",inputs:["tableType"]},{type:g.LoaderComponent,selector:"kendo-loader",inputs:["type","themeColor","size"]}],directives:[{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:A,decorators:[{type:t.Component,args:[{selector:"kendo-pivotgrid",providers:[b],template:'\n        <span class="k-pivotgrid-empty-cell"></span>\n        <kendo-pivotgrid-table\n            class="k-pivotgrid-column-headers"\n            tableType="columnHeader"></kendo-pivotgrid-table>\n        <kendo-pivotgrid-table\n            class="k-pivotgrid-row-headers"\n            tableType="rowHeader"></kendo-pivotgrid-table>\n        <kendo-pivotgrid-table\n            class="k-pivotgrid-values"\n            tableType="values"></kendo-pivotgrid-table>\n\n        <div *ngIf="loading" class="k-loader">\n            <kendo-loader\n                [type]="loaderSettings?.type"\n                [themeColor]="loaderSettings?.themeColor"\n                [size]="loaderSettings?.size"\n            >\n            </kendo-loader>\n        </div>\n   ',styles:["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "]}]}],ctorParameters:function(){return[{type:c.ElementRef},{type:c.NgZone},{type:b}]},propDecorators:{hostClass:[{type:t.HostBinding,args:["class.k-pivotgrid"]}],scrollbarWidth:[{type:t.HostBinding,args:["style.--kendo-scrollbar-width"]}],loaderSettings:[{type:t.Input}]}});P.prototype.ngOnInit=function(){var o=this;this.loadData(),this.expandedStateSub=this.dataService.expandedStateChange.subscribe(function(n){o.zone.run(function(){var e="columnHeader"===n.tableType,t=e?"columnAxes":"rowAxes",e=s.toTree((e?o.dataService.columns:o.dataService.rows||[]).slice());o.updateHeaders(t,e,n.cell.path)})})},P.prototype.ngOnDestroy=function(){this.expandedStateSub.unsubscribe()},P.prototype.updateDataServiceFields=function(){this.dataService.normalizedData=this.dataState.data,this.dataService.rows=this.dataState.rows,this.dataService.columns=this.dataState.columns,this.dataService.updateRowsAndCols()},P.prototype.updateHeaders=function(e,t,n){n={type:s.HEADERS_ACTION.toggle,payload:n},n=s.headersReducer(this[e].slice(),Object.assign(Object.assign({},n),{tree:t}));this[e]=n,this.loadData()};g=P;function P(e,t){this.dataService=e,this.zone=t,this.columnAxes=[],this.rowAxes=[],this.measureAxes=[],this.expandedStateSub=new i.Subscription}g.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,deps:[{token:b},{token:c.NgZone}],target:c.ɵɵFactoryTarget.Directive}),g.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:g,selector:"kendo-base-binding-directive",inputs:{columnAxes:"columnAxes",rowAxes:"rowAxes",measureAxes:"measureAxes"},ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,decorators:[{type:t.Directive,args:[{selector:"kendo-base-binding-directive"}]}],ctorParameters:function(){return[{type:b},{type:c.NgZone}]},propDecorators:{columnAxes:[{type:t.Input}],rowAxes:[{type:t.Input}],measureAxes:[{type:t.Input}]}});var D,O={dataField:"aggregate",columnsData:"columns"},u=(h(T,D=g),T.prototype.ngOnChanges=function(e){n.anyChanged(["data","dimensions","columnAxes","rowAxes","measureAxes","measures"],e)&&this.loadData()},T.prototype.loadData=function(){var e=this,t=this.getRootAxes(this.columnAxes),n=this.getRootAxes(this.rowAxes),t=t.split("&").map(this.createAxisSettings),n=n.split("&").map(this.createAxisSettings),o=this.measureAxes.map(function(t){return e.measures.find(function(e){return String(e.name)===String(t.name)})}).filter(Boolean),r=s.createDataTree(this.data,n,t,o,O);this.dataState=s.createLocalDataState({dataTree:r,rowSettings:n,columnSettings:t,rowAxes:this.rowAxes,columnAxes:this.columnAxes,measures:o,sort:[],fields:O}),this.updateDataServiceFields()},T.prototype.getRootAxes=function(e){return Array.from(s.rootFields(e).keys()).join("&")},T);function T(e,t){var n=D.call(this,e,t)||this;return n.createAxisSettings=function(e){return Object.assign({key:e},n.dimensions[e])},n}u.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,deps:[{token:b},{token:c.NgZone}],target:c.ɵɵFactoryTarget.Directive}),u.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:u,selector:"[kendoPivotLocalBinding]",inputs:{data:["kendoPivotLocalBinding","data"],dimensions:"dimensions",measures:"measures"},exportAs:["kendoPivotLocalBinding"],usesInheritance:!0,usesOnChanges:!0,ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,decorators:[{type:t.Directive,args:[{selector:"[kendoPivotLocalBinding]",exportAs:"kendoPivotLocalBinding"}]}],ctorParameters:function(){return[{type:b},{type:c.NgZone}]},propDecorators:{data:[{type:t.Input,args:["kendoPivotLocalBinding"]}],dimensions:[{type:t.Input}],measures:[{type:t.Input}]}});h(E,j=g),E.prototype.ngOnChanges=function(e){n.anyChanged(["url","cube","catalog","columnAxes","rowAxes","measureAxes"],e)&&this.loadData()},E.prototype.loadData=function(){var t=this,e=(this.dataService.loading.next(!0),{connection:{catalog:this.catalog,cube:this.cube},columnAxes:this.columnAxes,rowAxes:this.rowAxes,measureAxes:this.measureAxes});s.fetchData({url:this.url},JSON.parse(JSON.stringify(e))).then(s.createDataState).then(function(e){t.dataState=e,t.updateDataServiceFields(),t.dataService.loading.next(!1)})};var j,g=E;function E(e,t){return j.call(this,e,t)||this}g.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,deps:[{token:b},{token:c.NgZone}],target:c.ɵɵFactoryTarget.Directive}),g.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:g,selector:"[kendoPivotOLAPBinding]",inputs:{url:"url",cube:"cube",catalog:"catalog"},exportAs:["kendoPivotOLAPBinding"],usesInheritance:!0,usesOnChanges:!0,ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,decorators:[{type:t.Directive,args:[{selector:"[kendoPivotOLAPBinding]",exportAs:"kendoPivotOLAPBinding"}]}],ctorParameters:function(){return[{type:b},{type:c.NgZone}]},propDecorators:{url:[{type:t.Input}],cube:[{type:t.Input}],catalog:[{type:t.Input}]}});var F=[r.CommonModule,n.EventsModule,a.IndicatorsModule],G=[A,p,I,u,g],R=function(){};R.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:R,deps:[],target:c.ɵɵFactoryTarget.NgModule}),R.ɵmod=c.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:R,declarations:[A,p,I,u,g],imports:[r.CommonModule,n.EventsModule,a.IndicatorsModule],exports:[A,p,I,u,g]}),R.ɵinj=c.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:R,providers:[{provide:l.L10N_PREFIX,useValue:"kendo.pivotgrid"}],imports:[f([],y(F))]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:R,decorators:[{type:t.NgModule,args:[{imports:f([],y(F)),declarations:f([],y(G)),exports:f([],y(G)),providers:[{provide:l.L10N_PREFIX,useValue:"kendo.pivotgrid"}]}]}]}),Object.defineProperty(e,"averageAggregate",{enumerable:!0,get:function(){return s.averageAggregate}}),Object.defineProperty(e,"maxAggregate",{enumerable:!0,get:function(){return s.maxAggregate}}),Object.defineProperty(e,"minAggregate",{enumerable:!0,get:function(){return s.minAggregate}}),Object.defineProperty(e,"sumAggregate",{enumerable:!0,get:function(){return s.sumAggregate}}),e.PivotGridCellDirective=I,e.PivotGridComponent=A,e.PivotGridModule=R,e.PivotGridTableComponent=p,e.PivotLocalBindingDirective=u,e.PivotOLAPBindingDirective=g,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-common"),require("@progress/kendo-pivotgrid-common"),require("rxjs"),require("rxjs/operators"),require("@angular/common"),require("@progress/kendo-angular-indicators"),require("@progress/kendo-angular-l10n")):"function"==typeof define&&define.amd?define("KendoAngularPivotgrid",["exports","@angular/core","@progress/kendo-licensing","@progress/kendo-angular-common","@progress/kendo-pivotgrid-common","rxjs","rxjs/operators","@angular/common","@progress/kendo-angular-indicators","@progress/kendo-angular-l10n"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularPivotgrid={},e.ng.core,e.KendoLicensing,e.KendoAngularCommon,e.KendoPivotgridCommon,e.rxjs,e.rxjs.operators,e.ng.common,e.KendoAngularIndicators,e.KendoAngularL10N)}(this,function(t,e,G,n,s,a,V,o,r,i){"use strict";function l(n){if(n&&n.__esModule)return n;var o=Object.create(null);return n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),o.default=n,Object.freeze(o)}var d=l(e),c=l(n),p=l(o),u=l(r),N={name:"@progress/kendo-angular-pivotgrid",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1652457707,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"},g=function(e,t){return(g=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function v(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}g(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;function m(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,a=n.call(e),i=[];try{for(;(void 0===t||0<t--)&&!(o=a.next()).done;)i.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=a.return)&&n.call(a)}finally{if(r)throw r.error}}return i}function h(e,t,n){if(n||2===arguments.length)for(var o,r=0,a=t.length;r<a;r++)!o&&r in t||((o=o||Array.prototype.slice.call(t,0,r))[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}Object.create;f.prototype.updateRowsAndCols=function(){var e=s.toTree((this.rows||[]).slice()),e=m(s.toRows(e),4),t=e[0],n=e[1],o=e[2],e=e[3],r=s.toTree((this.columns||[]).slice()),r=m(s.toColumns(r),3),a=r[0],i=r[1],r=r[2];this.columnHeaderLeaves=i,this.columnHeaderCols.next(i),this.columnHeaderRows.next(a),this.rowHeaderLeaves=n,this.rowHeaderCols.next(new Array(e).fill({})),this.rowHeaderRows.next(t),this.valuesRows.next(s.toData((this.normalizedData||[]).slice(),i,n,r,o))};var y=f;function f(){this.expandedStateChange=new e.EventEmitter,this.columnHeaderRows=new a.BehaviorSubject([]),this.columnHeaderCols=new a.BehaviorSubject([]),this.rowHeaderCols=new a.BehaviorSubject([]),this.rowHeaderRows=new a.BehaviorSubject([]),this.valuesRows=new a.BehaviorSubject([]),this.loading=new a.BehaviorSubject(!1)}y.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:y,deps:[],target:d.ɵɵFactoryTarget.Injectable}),y.ɵprov=d.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:y}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:y,decorators:[{type:e.Injectable}],propDecorators:{expandedStateChange:[{type:e.Output}]}});function b(e,t,n,o){(e="Y"===o?-k(e,o):k(e,o))&&(t[0][n]=t[1][n]+=e)}var k=function(e,t){var n=e["wheelDelta"+t];return e.wheelDelta&&(void 0===n||n)?e.wheelDelta:e.detail&&e.axis===e["X"===t?"HORIZONTAL_AXIS":"VERTICAL_AXIS"]?10*-e.detail:0},I=(Object.defineProperty(C.prototype,"expanded",{get:function(){var e;return(null==(e=this.kendoPivotGridCell)?void 0:e.hasChildren)&&this.kendoPivotGridCell.children.length},enumerable:!1,configurable:!0}),C.prototype.ngOnInit=function(){var e,t=this.hostEl.nativeElement,n=(this.renderer.setAttribute(t,"rowspan",this.kendoPivotGridCell.rowSpan||1),this.renderer.setAttribute(t,"colspan",this.kendoPivotGridCell.colSpan||1),{"k-pivotgrid-header-total":this.kendoPivotGridCell.total||"values"===this.tableType&&(this.dataService.rowHeaderLeaves[this.rowIndex].total||this.dataService.columnHeaderLeaves[this.colIndex].total),"k-pivotgrid-header-root":0===this.kendoPivotGridCell.levelNum,"k-pivotgrid-expanded":this.kendoPivotGridCell.hasChildren&&this.kendoPivotGridCell.children.length,"k-first":0<this.colIndex});for(e in n)n[e]&&this.renderer.addClass(t,e)},C);function C(e,t,n){var o=this;this.hostEl=e,this.renderer=t,this.dataService=n,this.cellClass=!0,this.handleClick=function(){o.dataService.expandedStateChange.emit({action:o.expanded?"collapse":"expand",cell:o.kendoPivotGridCell,tableType:o.tableType})}}I.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:I,deps:[{token:d.ElementRef},{token:d.Renderer2},{token:y}],target:d.ɵɵFactoryTarget.Component}),I.ɵcmp=d.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:I,selector:"[kendoPivotGridCell]",inputs:{kendoPivotGridCell:"kendoPivotGridCell",tableType:"tableType",rowIndex:"rowIndex",colIndex:"colIndex"},host:{properties:{"class.k-pivotgrid-cell":"this.cellClass"}},ngImport:d,template:'\n        <span \n            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"\n            class="k-icon"\n            [kendoEventsOutsideAngular]="{\n                click: handleClick\n            }"\n            [ngClass]="{\n                \'k-i-arrow-chevron-up\': expanded,\n                \'k-i-arrow-chevron-down\': !expanded\n            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}',isInline:!0,directives:[{type:p.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:c.EventsOutsideAngularDirective,selector:"[kendoEventsOutsideAngular]",inputs:["kendoEventsOutsideAngular","scope"]},{type:p.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}]}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:I,decorators:[{type:e.Component,args:[{selector:"[kendoPivotGridCell]",template:'\n        <span \n            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"\n            class="k-icon"\n            [kendoEventsOutsideAngular]="{\n                click: handleClick\n            }"\n            [ngClass]="{\n                \'k-i-arrow-chevron-up\': expanded,\n                \'k-i-arrow-chevron-down\': !expanded\n            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}'}]}],ctorParameters:function(){return[{type:d.ElementRef},{type:d.Renderer2},{type:y}]},propDecorators:{cellClass:[{type:e.HostBinding,args:["class.k-pivotgrid-cell"]}],kendoPivotGridCell:[{type:e.Input}],tableType:[{type:e.Input}],rowIndex:[{type:e.Input}],colIndex:[{type:e.Input}]}});x.prototype.ngOnInit=function(){var t=this;this.dataChangeSubs.add(this.dataService[this.tableType+"Rows"].subscribe(function(e){return t.rows=e})),this.dataChangeSubs.add("values"===this.tableType?this.dataService.columnHeaderCols.subscribe(function(e){return t.headerItems=e}):this.dataService[this.tableType+"Cols"].subscribe(function(e){return t.headerItems=e}))},x.prototype.ngOnDestroy=function(){this.dataChangeSubs.unsubscribe()};var w=x;function x(e){this.dataService=e,this.dataChangeSubs=new a.Subscription}w.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:w,deps:[{token:y}],target:d.ɵɵFactoryTarget.Component}),w.ɵcmp=d.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:w,selector:"kendo-pivotgrid-table",inputs:{tableType:"tableType"},ngImport:d,template:'\n        <table class="k-pivotgrid-table">\n            <colgroup>\n                <col *ngFor="let item of headerItems;" />\n            </colgroup>\n            <tbody class="k-pivotgrid-tbody">\n                <tr *ngFor="let row of rows; index as rowIndex"\n                    class="k-pivotgrid-row">\n                    <ng-container *ngFor="let cell of row.cells; index as colIndex">\n                        <th\n                            *ngIf="cell && tableType !== \'values\'" \n                            [kendoPivotGridCell]="cell"\n                            [tableType]="tableType"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"></th>\n                        <td\n                            *ngIf="cell && tableType === \'values\'"\n                            [kendoPivotGridCell]="cell"\n                            tableType="values"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"></td>\n                    </ng-container>\n                </tr>\n            </tbody>\n        </table>\n    ',isInline:!0,components:[{type:I,selector:"[kendoPivotGridCell]",inputs:["kendoPivotGridCell","tableType","rowIndex","colIndex"]}],directives:[{type:p.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:p.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:w,decorators:[{type:e.Component,args:[{selector:"kendo-pivotgrid-table",template:'\n        <table class="k-pivotgrid-table">\n            <colgroup>\n                <col *ngFor="let item of headerItems;" />\n            </colgroup>\n            <tbody class="k-pivotgrid-tbody">\n                <tr *ngFor="let row of rows; index as rowIndex"\n                    class="k-pivotgrid-row">\n                    <ng-container *ngFor="let cell of row.cells; index as colIndex">\n                        <th\n                            *ngIf="cell && tableType !== \'values\'" \n                            [kendoPivotGridCell]="cell"\n                            [tableType]="tableType"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"></th>\n                        <td\n                            *ngIf="cell && tableType === \'values\'"\n                            [kendoPivotGridCell]="cell"\n                            tableType="values"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"></td>\n                    </ng-container>\n                </tr>\n            </tbody>\n        </table>\n    '}]}],ctorParameters:function(){return[{type:y}]},propDecorators:{tableType:[{type:e.Input}]}});var T={type:"converging-spinner",themeColor:"primary",size:"large"},S=(Object.defineProperty(A.prototype,"loaderSettings",{get:function(){return this._loaderSettings},set:function(e){this._loaderSettings=Object.assign({},T,e)},enumerable:!1,configurable:!0}),A.prototype.ngAfterViewInit=function(){var r=this;n.isDocumentAvailable()&&this.zone.runOutsideAngular(function(){var e=r.rowHeadersTable.nativeElement.firstElementChild,t=new ResizeObserver(function(){return r.resizeContainer("Columns",e)}),n=(t.observe(e),r.colHeadersTable.nativeElement.firstElementChild),o=new ResizeObserver(function(){return r.resizeContainer("Rows",n)});o.observe(n),r.resizeObservers=[t,o],r.subs.add(a.fromEvent(e,"wheel").pipe(V.mergeWith(a.fromEvent(n,"wheel"),a.fromEvent(r.valuesTable.nativeElement,"scroll"))).subscribe(function(e){return r.handleScroll(e)}))})},A.prototype.ngAfterContentInit=function(){var t=this;this.subs.add(this.dataService.loading.subscribe(function(e){return t.loading=e}))},A.prototype.ngOnDestroy=function(){this.resizeObservers.forEach(function(e){return e.disconnect()}),this.subs.unsubscribe()},A);function A(e,t,n,o){var i=this;this.hostEl=e,this.zone=t,this.dataService=n,this.hostClass=!0,this.resizeObservers=[],this._loaderSettings=T,this.subs=new a.Subscription,this.resizeContainer=function(e,t){var n=i.hostEl.nativeElement,o="Rows"===e?"offsetHeight":"offsetWidth";n.style["gridTemplate"+e]="",n.style["gridTemplate"+e]=t[o]+"px 1fr"},this.handleScroll=function(e){var t,n,o,r,a;e.target===i.valuesTable.nativeElement?(t=e.target,n=[i.rowHeadersTable.nativeElement,i.colHeadersTable.nativeElement],o=t.scrollTop,t=t.scrollLeft,r=n[0].scrollTop,a=t!==n[1].scrollLeft,o!==r?n[0].scrollTop=o:a&&(n[1].scrollLeft=t)):e.target.closest(".k-pivotgrid-row-headers")?b(e,[i.valuesTable.nativeElement,i.rowHeadersTable.nativeElement],"scrollTop","Y"):e.target.closest(".k-pivotgrid-column-headers")&&b(e,[i.valuesTable.nativeElement,i.colHeadersTable.nativeElement],"scrollLeft","X")},G.validatePackage(N)}S.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:S,deps:[{token:d.ElementRef},{token:d.NgZone},{token:y},{token:c.ScrollbarWidthService}],target:d.ɵɵFactoryTarget.Component}),S.ɵcmp=d.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:S,selector:"kendo-pivotgrid",inputs:{loaderSettings:"loaderSettings"},host:{properties:{"class.k-pivotgrid":"this.hostClass"}},providers:[y],viewQueries:[{propertyName:"colHeadersTable",first:!0,predicate:["colHeadersTable"],descendants:!0,read:e.ElementRef},{propertyName:"rowHeadersTable",first:!0,predicate:["rowHeadersTable"],descendants:!0,read:e.ElementRef},{propertyName:"valuesTable",first:!0,predicate:["valuesTable"],descendants:!0,read:e.ElementRef}],ngImport:d,template:'\n        <span class="k-pivotgrid-empty-cell"></span>\n        <kendo-pivotgrid-table\n            #colHeadersTable\n            class="k-pivotgrid-column-headers"\n            tableType="columnHeader"></kendo-pivotgrid-table>\n        <kendo-pivotgrid-table\n            #rowHeadersTable\n            class="k-pivotgrid-row-headers"\n            tableType="rowHeader"></kendo-pivotgrid-table>\n        <kendo-pivotgrid-table\n            #valuesTable\n            class="k-pivotgrid-values"\n            tableType="values"></kendo-pivotgrid-table>\n\n        <div *ngIf="loading" class="k-loader">\n            <kendo-loader\n                [type]="loaderSettings?.type"\n                [themeColor]="loaderSettings?.themeColor"\n                [size]="loaderSettings?.size"\n            >\n            </kendo-loader>\n        </div>\n   ',isInline:!0,styles:["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "],components:[{type:w,selector:"kendo-pivotgrid-table",inputs:["tableType"]},{type:u.LoaderComponent,selector:"kendo-loader",inputs:["type","themeColor","size"]}],directives:[{type:p.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:S,decorators:[{type:e.Component,args:[{selector:"kendo-pivotgrid",providers:[y],template:'\n        <span class="k-pivotgrid-empty-cell"></span>\n        <kendo-pivotgrid-table\n            #colHeadersTable\n            class="k-pivotgrid-column-headers"\n            tableType="columnHeader"></kendo-pivotgrid-table>\n        <kendo-pivotgrid-table\n            #rowHeadersTable\n            class="k-pivotgrid-row-headers"\n            tableType="rowHeader"></kendo-pivotgrid-table>\n        <kendo-pivotgrid-table\n            #valuesTable\n            class="k-pivotgrid-values"\n            tableType="values"></kendo-pivotgrid-table>\n\n        <div *ngIf="loading" class="k-loader">\n            <kendo-loader\n                [type]="loaderSettings?.type"\n                [themeColor]="loaderSettings?.themeColor"\n                [size]="loaderSettings?.size"\n            >\n            </kendo-loader>\n        </div>\n   ',styles:["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "]}]}],ctorParameters:function(){return[{type:d.ElementRef},{type:d.NgZone},{type:y},{type:c.ScrollbarWidthService}]},propDecorators:{hostClass:[{type:e.HostBinding,args:["class.k-pivotgrid"]}],colHeadersTable:[{type:e.ViewChild,args:["colHeadersTable",{read:e.ElementRef}]}],rowHeadersTable:[{type:e.ViewChild,args:["rowHeadersTable",{read:e.ElementRef}]}],valuesTable:[{type:e.ViewChild,args:["valuesTable",{read:e.ElementRef}]}],loaderSettings:[{type:e.Input}]}});D.prototype.ngOnInit=function(){var o=this;this.loadData(),this.expandedStateSub=this.dataService.expandedStateChange.subscribe(function(n){o.zone.run(function(){var e="columnHeader"===n.tableType,t=e?"columnAxes":"rowAxes",e=s.toTree((e?o.dataService.columns:o.dataService.rows||[]).slice());o.updateHeaders(t,e,n.cell.path)})})},D.prototype.ngOnDestroy=function(){this.expandedStateSub.unsubscribe()},D.prototype.updateDataServiceFields=function(){this.dataService.normalizedData=this.dataState.data,this.dataService.rows=this.dataState.rows,this.dataService.columns=this.dataState.columns,this.dataService.updateRowsAndCols()},D.prototype.updateHeaders=function(e,t,n){n={type:s.HEADERS_ACTION.toggle,payload:n},n=s.headersReducer(this[e].slice(),Object.assign(Object.assign({},n),{tree:t}));this[e]=n,this.loadData()};u=D;function D(e,t){this.dataService=e,this.zone=t,this.columnAxes=[],this.rowAxes=[],this.measureAxes=[],this.expandedStateSub=new a.Subscription}u.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:u,deps:[{token:y},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),u.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:u,selector:"kendo-base-binding-directive",inputs:{columnAxes:"columnAxes",rowAxes:"rowAxes",measureAxes:"measureAxes"},ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:u,decorators:[{type:e.Directive,args:[{selector:"kendo-base-binding-directive"}]}],ctorParameters:function(){return[{type:y},{type:d.NgZone}]},propDecorators:{columnAxes:[{type:e.Input}],rowAxes:[{type:e.Input}],measureAxes:[{type:e.Input}]}});var P,O={dataField:"aggregate",columnsData:"columns"},p=(v(E,P=u),E.prototype.ngOnChanges=function(e){n.anyChanged(["data","dimensions","columnAxes","rowAxes","measureAxes","measures"],e)&&this.loadData()},E.prototype.loadData=function(){var e=this,t=this.getRootAxes(this.columnAxes),n=this.getRootAxes(this.rowAxes),t=t.split("&").map(this.createAxisSettings),n=n.split("&").map(this.createAxisSettings),o=this.measureAxes.map(function(t){return e.measures.find(function(e){return String(e.name)===String(t.name)})}).filter(Boolean),r=s.createDataTree(this.data,n,t,o,O);this.dataState=s.createLocalDataState({dataTree:r,rowSettings:n,columnSettings:t,rowAxes:this.rowAxes,columnAxes:this.columnAxes,measures:o,sort:[],fields:O}),this.updateDataServiceFields()},E.prototype.getRootAxes=function(e){return Array.from(s.rootFields(e).keys()).join("&")},E);function E(e,t){var n=P.call(this,e,t)||this;return n.createAxisSettings=function(e){return Object.assign({key:e},n.dimensions[e])},n}p.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:p,deps:[{token:y},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),p.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:p,selector:"[kendoPivotLocalBinding]",inputs:{data:["kendoPivotLocalBinding","data"],dimensions:"dimensions",measures:"measures"},exportAs:["kendoPivotLocalBinding"],usesInheritance:!0,usesOnChanges:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:p,decorators:[{type:e.Directive,args:[{selector:"[kendoPivotLocalBinding]",exportAs:"kendoPivotLocalBinding"}]}],ctorParameters:function(){return[{type:y},{type:d.NgZone}]},propDecorators:{data:[{type:e.Input,args:["kendoPivotLocalBinding"]}],dimensions:[{type:e.Input}],measures:[{type:e.Input}]}});v(j,H=u),j.prototype.ngOnChanges=function(e){n.anyChanged(["url","cube","catalog","columnAxes","rowAxes","measureAxes"],e)&&this.loadData()},j.prototype.loadData=function(){var t=this,e=(this.dataService.loading.next(!0),{connection:{catalog:this.catalog,cube:this.cube},columnAxes:this.columnAxes,rowAxes:this.rowAxes,measureAxes:this.measureAxes});s.fetchData({url:this.url},JSON.parse(JSON.stringify(e))).then(s.createDataState).then(function(e){t.dataState=e,t.updateDataServiceFields(),t.dataService.loading.next(!1)})};var H,u=j;function j(e,t){return H.call(this,e,t)||this}u.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:u,deps:[{token:y},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),u.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:u,selector:"[kendoPivotOLAPBinding]",inputs:{url:"url",cube:"cube",catalog:"catalog"},exportAs:["kendoPivotOLAPBinding"],usesInheritance:!0,usesOnChanges:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:u,decorators:[{type:e.Directive,args:[{selector:"[kendoPivotOLAPBinding]",exportAs:"kendoPivotOLAPBinding"}]}],ctorParameters:function(){return[{type:y},{type:d.NgZone}]},propDecorators:{url:[{type:e.Input}],cube:[{type:e.Input}],catalog:[{type:e.Input}]}});var R=[o.CommonModule,n.EventsModule,r.IndicatorsModule],L=[S,w,I,p,u],F=function(){};F.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:F,deps:[],target:d.ɵɵFactoryTarget.NgModule}),F.ɵmod=d.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:F,declarations:[S,w,I,p,u],imports:[o.CommonModule,n.EventsModule,r.IndicatorsModule],exports:[S,w,I,p,u]}),F.ɵinj=d.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:F,providers:[{provide:i.L10N_PREFIX,useValue:"kendo.pivotgrid"}],imports:[h([],m(R))]}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:F,decorators:[{type:e.NgModule,args:[{imports:h([],m(R)),declarations:h([],m(L)),exports:h([],m(L)),providers:[{provide:i.L10N_PREFIX,useValue:"kendo.pivotgrid"}]}]}]}),t.PivotGridCellDirective=I,t.PivotGridComponent=S,t.PivotGridModule=F,t.PivotGridTableComponent=w,t.PivotLocalBindingDirective=p,t.PivotOLAPBindingDirective=u,Object.keys(s).forEach(function(e){"default"===e||t.hasOwnProperty(e)||Object.defineProperty(t,e,{enumerable:!0,get:function(){return s[e]}})}),Object.defineProperty(t,"__esModule",{value:!0})});

package/esm2015/data-binding/pivotgrid-data.service.js

@@ -25,7 +25,7 @@ export class PivotGridDataService {
         const columnsTree = toTree((this.columns || []).slice());
         const [columnHeaderRows, columnHeaderLeaves, columnHeaderBreadth] = toColumns(columnsTree);
         this.columnHeaderLeaves = columnHeaderLeaves;
-        this.columnHeaderCols.next(new Array(columnHeaderBreadth).fill({}));
+        this.columnHeaderCols.next(columnHeaderLeaves);
         this.columnHeaderRows.next(columnHeaderRows);
         this.rowHeaderLeaves = rowHeaderLeaves;
         this.rowHeaderCols.next(new Array(rowHeaderBreadth).fill({}));

package/esm2015/main.js

@@ -11,4 +11,4 @@ export { PivotGridTableComponent } from './rendering/pivotgrid-table.component';
 export { PivotLocalBindingDirective } from './data-binding/local-binding.directive';
 export { PivotOLAPBindingDirective } from './data-binding/olap-binding.directive';
 // Export types from PivotGrid common package
-export { averageAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';
+export * from '@progress/kendo-pivotgrid-common';

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1652282669,
+    publishDate: 1652457707,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/pivotgrid.component.js

@@ -2,35 +2,37 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, ViewChild } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
-import { scrollbarWidth } from './util';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { PivotGridDataService } from './data-binding/pivotgrid-data.service';
-import { Subscription } from 'rxjs';
+import { fromEvent, Subscription } from 'rxjs';
+import { mergeWith } from 'rxjs/operators';
+import { syncScroll, syncWheel } from './util';
 import * as i0 from "@angular/core";
 import * as i1 from "./data-binding/pivotgrid-data.service";
-import * as i2 from "./rendering/pivotgrid-table.component";
-import * as i3 from "@progress/kendo-angular-indicators";
-import * as i4 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-common";
+import * as i3 from "./rendering/pivotgrid-table.component";
+import * as i4 from "@progress/kendo-angular-indicators";
+import * as i5 from "@angular/common";
 const DEFAULT_LOADER_SETTINGS = {
     type: 'converging-spinner',
     themeColor: 'primary',
     size: 'large'
 };
 /**
- * A sample component
+ * Represents the Kendo UI PivotGrid component for Angular.
  */
 export class PivotGridComponent {
-    constructor(hostEl, zone, dataService) {
+    constructor(hostEl, zone, dataService, _scrollbarWidthService) {
         this.hostEl = hostEl;
         this.zone = zone;
         this.dataService = dataService;
         this.hostClass = true;
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
-        this.loadingSubscription = new Subscription();
+        this.subs = new Subscription();
         this.resizeContainer = (axis, element) => {
             const isRows = axis === 'Rows';
             const wrapper = this.hostEl.nativeElement;
@@ -38,11 +40,22 @@ export class PivotGridComponent {
             wrapper.style[`gridTemplate${axis}`] = '';
             wrapper.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
         };
+        this.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')) {
+                syncWheel(event, [this.valuesTable.nativeElement, this.rowHeadersTable.nativeElement], 'scrollTop', 'Y');
+            }
+            else if (event.target.closest('.k-pivotgrid-column-headers')) {
+                syncWheel(event, [this.valuesTable.nativeElement, this.colHeadersTable.nativeElement], 'scrollLeft', 'X');
+            }
+        };
         validatePackage(packageMetadata);
     }
-    get scrollbarWidth() {
-        return `${scrollbarWidth()}px`;
-    }
     /**
      * Specify the type, size and color of the PivotGrid's loader.
      *
@@ -61,36 +74,41 @@ export class PivotGridComponent {
     ngAfterViewInit() {
         if (isDocumentAvailable()) {
             this.zone.runOutsideAngular(() => {
-                const rowHeadersTable = document.querySelector('.k-pivotgrid-row-headers .k-pivotgrid-table');
+                const rowHeadersTable = this.rowHeadersTable.nativeElement.firstElementChild;
                 const headerColsResizeObserver = new ResizeObserver(() => this.resizeContainer('Columns', rowHeadersTable));
                 headerColsResizeObserver.observe(rowHeadersTable);
-                const colHeadersTable = document.querySelector('.k-pivotgrid-column-headers .k-pivotgrid-table');
+                const colHeadersTable = this.colHeadersTable.nativeElement.firstElementChild;
                 const headerRowsResizeObserver = new ResizeObserver(() => this.resizeContainer('Rows', colHeadersTable));
                 headerRowsResizeObserver.observe(colHeadersTable);
                 this.resizeObservers = [headerColsResizeObserver, headerRowsResizeObserver];
+                this.subs.add(fromEvent(rowHeadersTable, 'wheel')
+                    .pipe(mergeWith(fromEvent(colHeadersTable, 'wheel'), fromEvent(this.valuesTable.nativeElement, 'scroll'))).subscribe((ev) => this.handleScroll(ev)));
             });
         }
     }
     ngAfterContentInit() {
-        this.loadingSubscription.add(this.dataService.loading.subscribe(state => this.loading = state));
+        this.subs.add(this.dataService.loading.subscribe(state => this.loading = state));
     }
     ngOnDestroy() {
         this.resizeObservers.forEach(o => o.disconnect());
-        this.loadingSubscription.unsubscribe();
+        this.subs.unsubscribe();
     }
 }
-PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings" }, host: { properties: { "class.k-pivotgrid": "this.hostClass", "style.--kendo-scrollbar-width": "this.scrollbarWidth" } }, providers: [
+PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.PivotGridDataService }, { token: i2.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings" }, host: { properties: { "class.k-pivotgrid": "this.hostClass" } }, providers: [
         PivotGridDataService
-    ], ngImport: i0, template: `
+    ], 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 }], ngImport: i0, template: `
         <span class="k-pivotgrid-empty-cell"></span>
         <kendo-pivotgrid-table
+            #colHeadersTable
             class="k-pivotgrid-column-headers"
             tableType="columnHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
+            #rowHeadersTable
             class="k-pivotgrid-row-headers"
             tableType="rowHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
+            #valuesTable
             class="k-pivotgrid-values"
             tableType="values"></kendo-pivotgrid-table>
 
@@ -102,7 +120,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             >
             </kendo-loader>
         </div>
-   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: i2.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType"] }, { type: i3.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: i3.PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType"] }, { type: i4.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -113,12 +131,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <span class="k-pivotgrid-empty-cell"></span>
         <kendo-pivotgrid-table
+            #colHeadersTable
             class="k-pivotgrid-column-headers"
             tableType="columnHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
+            #rowHeadersTable
             class="k-pivotgrid-row-headers"
             tableType="rowHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
+            #valuesTable
             class="k-pivotgrid-values"
             tableType="values"></kendo-pivotgrid-table>
 
@@ -141,12 +162,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
    `]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }, { type: i2.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pivotgrid']
-            }], scrollbarWidth: [{
-                type: HostBinding,
-                args: ['style.--kendo-scrollbar-width']
+            }], colHeadersTable: [{
+                type: ViewChild,
+                args: ['colHeadersTable', { read: ElementRef }]
+            }], rowHeadersTable: [{
+                type: ViewChild,
+                args: ['rowHeadersTable', { read: ElementRef }]
+            }], valuesTable: [{
+                type: ViewChild,
+                args: ['valuesTable', { read: ElementRef }]
             }], loaderSettings: [{
                 type: Input
             }] } });

package/esm2015/rendering/pivotgrid-cell.directive.js

@@ -38,7 +38,7 @@ export class PivotGridCellDirective {
                     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 === 1
+            'k-first': this.colIndex > 0
         };
         for (let prop in classesToAdd) {
             if (classesToAdd[prop]) {

package/esm2015/util.js

@@ -2,29 +2,6 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { isDocumentAvailable } from "@progress/kendo-angular-common";
-/**
- * @hidden
- */
-const canCreateElement = () => isDocumentAvailable() && document.createElement;
-/**
- * @hidden
- */
-let cachedScrollbarWidth = null;
-/**
- * @hidden
- */
-export const scrollbarWidth = () => {
-    if (cachedScrollbarWidth === null && canCreateElement()) {
-        const div = document.createElement("div");
-        div.style.cssText = "overflow:scroll;overflow-x:hidden;zoom:1;clear:both;display:block";
-        div.innerHTML = " ";
-        document.body.appendChild(div);
-        cachedScrollbarWidth = div.offsetWidth - div.scrollWidth;
-        document.body.removeChild(div);
-    }
-    return cachedScrollbarWidth;
-};
 /**
  * @hidden
  */
@@ -47,3 +24,43 @@ export const areSameArrays = (a1, a2) => {
     }
     return true;
 };
+/**
+ * @hidden
+ */
+export const wheelDelta = (e, axis) => {
+    const delta = e[`wheelDelta${axis}`];
+    if (e.wheelDelta && (delta === undefined || delta)) {
+        return e.wheelDelta;
+    }
+    if (e.detail && e.axis === e[axis === 'X' ? 'HORIZONTAL_AXIS' : 'VERTICAL_AXIS']) {
+        return (-e.detail) * 10;
+    }
+    return 0;
+};
+/**
+ * @hidden
+ */
+export const syncScroll = (source, targets) => {
+    const sourceScrollTop = source.scrollTop;
+    const sourceScrollLeft = source.scrollLeft;
+    const targetScrollTop = targets[0].scrollTop;
+    const targetScrollLeft = targets[1].scrollLeft;
+    const syncVertically = sourceScrollTop !== targetScrollTop;
+    const syncHorizontally = sourceScrollLeft !== targetScrollLeft;
+    if (syncVertically) {
+        targets[0].scrollTop = sourceScrollTop;
+    }
+    else if (syncHorizontally) {
+        targets[1].scrollLeft = sourceScrollLeft;
+    }
+};
+/**
+ * @hidden
+ */
+export const syncWheel = (event, tables, prop, axis) => {
+    const delta = axis === 'Y' ? -(wheelDelta(event, axis)) : wheelDelta(event, axis);
+    if (delta) {
+        tables[0][prop] =
+            tables[1][prop] += delta;
+    }
+};

package/fesm2015/kendo-angular-pivotgrid.js

@@ -3,16 +3,17 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Output, Component, HostBinding, Input, Directive, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Output, Component, HostBinding, Input, ElementRef, ViewChild, Directive, NgModule } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i3 from '@progress/kendo-angular-common';
+import * as i2$1 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, anyChanged, EventsModule } from '@progress/kendo-angular-common';
 import { toTree, toRows, toColumns, toData, HEADERS_ACTION, headersReducer, createDataTree, createLocalDataState, rootFields, fetchData, createDataState } from '@progress/kendo-pivotgrid-common';
-export { averageAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';
-import { BehaviorSubject, Subscription } from 'rxjs';
+export * from '@progress/kendo-pivotgrid-common';
+import { BehaviorSubject, Subscription, fromEvent } from 'rxjs';
+import { mergeWith } from 'rxjs/operators';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3$1 from '@progress/kendo-angular-indicators';
+import * as i4 from '@progress/kendo-angular-indicators';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
 
@@ -23,56 +24,11 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1652282669,
+    publishDate: 1652457707,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
-/**
- * @hidden
- */
-const canCreateElement = () => isDocumentAvailable() && document.createElement;
-/**
- * @hidden
- */
-let cachedScrollbarWidth = null;
-/**
- * @hidden
- */
-const scrollbarWidth = () => {
-    if (cachedScrollbarWidth === null && canCreateElement()) {
-        const div = document.createElement("div");
-        div.style.cssText = "overflow:scroll;overflow-x:hidden;zoom:1;clear:both;display:block";
-        div.innerHTML = " ";
-        document.body.appendChild(div);
-        cachedScrollbarWidth = div.offsetWidth - div.scrollWidth;
-        document.body.removeChild(div);
-    }
-    return cachedScrollbarWidth;
-};
-/**
- * @hidden
- */
-const isPresent = (value) => value !== null && value !== undefined;
-/**
- * @hidden
- * Returns whether two arrays contain the same values.
- * Assumes array elements are primitive types
- */
-const areSameArrays = (a1, a2) => {
-    const areArrays = (isPresent(a1) && Array.isArray(a1) && isPresent(a2) && Array.isArray(a2));
-    const areOfEqualLength = a1.length === a2.length;
-    if (!areArrays || !areOfEqualLength) {
-        return false;
-    }
-    for (let i = 0; i < a1.length; i++) {
-        if (a1[i] !== a2[i]) {
-            return false;
-        }
-    }
-    return true;
-};
-
 /**
  * @hidden
  */
@@ -92,7 +48,7 @@ class PivotGridDataService {
         const columnsTree = toTree((this.columns || []).slice());
         const [columnHeaderRows, columnHeaderLeaves, columnHeaderBreadth] = toColumns(columnsTree);
         this.columnHeaderLeaves = columnHeaderLeaves;
-        this.columnHeaderCols.next(new Array(columnHeaderBreadth).fill({}));
+        this.columnHeaderCols.next(columnHeaderLeaves);
         this.columnHeaderRows.next(columnHeaderRows);
         this.rowHeaderLeaves = rowHeaderLeaves;
         this.rowHeaderCols.next(new Array(rowHeaderBreadth).fill({}));
@@ -108,6 +64,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
+/**
+ * @hidden
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ * Returns whether two arrays contain the same values.
+ * Assumes array elements are primitive types
+ */
+const areSameArrays = (a1, a2) => {
+    const areArrays = (isPresent(a1) && Array.isArray(a1) && isPresent(a2) && Array.isArray(a2));
+    const areOfEqualLength = a1.length === a2.length;
+    if (!areArrays || !areOfEqualLength) {
+        return false;
+    }
+    for (let i = 0; i < a1.length; i++) {
+        if (a1[i] !== a2[i]) {
+            return false;
+        }
+    }
+    return true;
+};
+/**
+ * @hidden
+ */
+const wheelDelta = (e, axis) => {
+    const delta = e[`wheelDelta${axis}`];
+    if (e.wheelDelta && (delta === undefined || delta)) {
+        return e.wheelDelta;
+    }
+    if (e.detail && e.axis === e[axis === 'X' ? 'HORIZONTAL_AXIS' : 'VERTICAL_AXIS']) {
+        return (-e.detail) * 10;
+    }
+    return 0;
+};
+/**
+ * @hidden
+ */
+const syncScroll = (source, targets) => {
+    const sourceScrollTop = source.scrollTop;
+    const sourceScrollLeft = source.scrollLeft;
+    const targetScrollTop = targets[0].scrollTop;
+    const targetScrollLeft = targets[1].scrollLeft;
+    const syncVertically = sourceScrollTop !== targetScrollTop;
+    const syncHorizontally = sourceScrollLeft !== targetScrollLeft;
+    if (syncVertically) {
+        targets[0].scrollTop = sourceScrollTop;
+    }
+    else if (syncHorizontally) {
+        targets[1].scrollLeft = sourceScrollLeft;
+    }
+};
+/**
+ * @hidden
+ */
+const syncWheel = (event, tables, prop, axis) => {
+    const delta = axis === 'Y' ? -(wheelDelta(event, axis)) : wheelDelta(event, axis);
+    if (delta) {
+        tables[0][prop] =
+            tables[1][prop] += delta;
+    }
+};
+
 /**
  * @hidden
  */
@@ -139,7 +158,7 @@ class PivotGridCellDirective {
                     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 === 1
+            'k-first': this.colIndex > 0
         };
         for (let prop in classesToAdd) {
             if (classesToAdd[prop]) {
@@ -159,7 +178,7 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [ngClass]="{
                 'k-i-arrow-chevron-up': expanded,
                 'k-i-arrow-chevron-down': !expanded
-            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+            }"></span>{{ kendoPivotGridCell.data ? kendoPivotGridCell.data.fmtValue : kendoPivotGridCell.caption }}`, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridCellDirective, decorators: [{
             type: Component,
             args: [{
@@ -276,17 +295,17 @@ const DEFAULT_LOADER_SETTINGS = {
     size: 'large'
 };
 /**
- * A sample component
+ * Represents the Kendo UI PivotGrid component for Angular.
  */
 class PivotGridComponent {
-    constructor(hostEl, zone, dataService) {
+    constructor(hostEl, zone, dataService, _scrollbarWidthService) {
         this.hostEl = hostEl;
         this.zone = zone;
         this.dataService = dataService;
         this.hostClass = true;
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
-        this.loadingSubscription = new Subscription();
+        this.subs = new Subscription();
         this.resizeContainer = (axis, element) => {
             const isRows = axis === 'Rows';
             const wrapper = this.hostEl.nativeElement;
@@ -294,11 +313,22 @@ class PivotGridComponent {
             wrapper.style[`gridTemplate${axis}`] = '';
             wrapper.style[`gridTemplate${axis}`] = `${element[size]}px 1fr`;
         };
+        this.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')) {
+                syncWheel(event, [this.valuesTable.nativeElement, this.rowHeadersTable.nativeElement], 'scrollTop', 'Y');
+            }
+            else if (event.target.closest('.k-pivotgrid-column-headers')) {
+                syncWheel(event, [this.valuesTable.nativeElement, this.colHeadersTable.nativeElement], 'scrollLeft', 'X');
+            }
+        };
         validatePackage(packageMetadata);
     }
-    get scrollbarWidth() {
-        return `${scrollbarWidth()}px`;
-    }
     /**
      * Specify the type, size and color of the PivotGrid's loader.
      *
@@ -317,36 +347,41 @@ class PivotGridComponent {
     ngAfterViewInit() {
         if (isDocumentAvailable()) {
             this.zone.runOutsideAngular(() => {
-                const rowHeadersTable = document.querySelector('.k-pivotgrid-row-headers .k-pivotgrid-table');
+                const rowHeadersTable = this.rowHeadersTable.nativeElement.firstElementChild;
                 const headerColsResizeObserver = new ResizeObserver(() => this.resizeContainer('Columns', rowHeadersTable));
                 headerColsResizeObserver.observe(rowHeadersTable);
-                const colHeadersTable = document.querySelector('.k-pivotgrid-column-headers .k-pivotgrid-table');
+                const colHeadersTable = this.colHeadersTable.nativeElement.firstElementChild;
                 const headerRowsResizeObserver = new ResizeObserver(() => this.resizeContainer('Rows', colHeadersTable));
                 headerRowsResizeObserver.observe(colHeadersTable);
                 this.resizeObservers = [headerColsResizeObserver, headerRowsResizeObserver];
+                this.subs.add(fromEvent(rowHeadersTable, 'wheel')
+                    .pipe(mergeWith(fromEvent(colHeadersTable, 'wheel'), fromEvent(this.valuesTable.nativeElement, 'scroll'))).subscribe((ev) => this.handleScroll(ev)));
             });
         }
     }
     ngAfterContentInit() {
-        this.loadingSubscription.add(this.dataService.loading.subscribe(state => this.loading = state));
+        this.subs.add(this.dataService.loading.subscribe(state => this.loading = state));
     }
     ngOnDestroy() {
         this.resizeObservers.forEach(o => o.disconnect());
-        this.loadingSubscription.unsubscribe();
+        this.subs.unsubscribe();
     }
 }
-PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings" }, host: { properties: { "class.k-pivotgrid": "this.hostClass", "style.--kendo-scrollbar-width": "this.scrollbarWidth" } }, providers: [
+PivotGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PivotGridDataService }, { token: i2$1.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings" }, host: { properties: { "class.k-pivotgrid": "this.hostClass" } }, providers: [
         PivotGridDataService
-    ], ngImport: i0, template: `
+    ], 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 }], ngImport: i0, template: `
         <span class="k-pivotgrid-empty-cell"></span>
         <kendo-pivotgrid-table
+            #colHeadersTable
             class="k-pivotgrid-column-headers"
             tableType="columnHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
+            #rowHeadersTable
             class="k-pivotgrid-row-headers"
             tableType="rowHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
+            #valuesTable
             class="k-pivotgrid-values"
             tableType="values"></kendo-pivotgrid-table>
 
@@ -358,7 +393,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             >
             </kendo-loader>
         </div>
-   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType"] }, { type: i3$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType"] }, { type: i4.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -369,12 +404,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <span class="k-pivotgrid-empty-cell"></span>
         <kendo-pivotgrid-table
+            #colHeadersTable
             class="k-pivotgrid-column-headers"
             tableType="columnHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
+            #rowHeadersTable
             class="k-pivotgrid-row-headers"
             tableType="rowHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
+            #valuesTable
             class="k-pivotgrid-values"
             tableType="values"></kendo-pivotgrid-table>
 
@@ -397,12 +435,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }
    `]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i2$1.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pivotgrid']
-            }], scrollbarWidth: [{
-                type: HostBinding,
-                args: ['style.--kendo-scrollbar-width']
+            }], colHeadersTable: [{
+                type: ViewChild,
+                args: ['colHeadersTable', { read: ElementRef }]
+            }], rowHeadersTable: [{
+                type: ViewChild,
+                args: ['rowHeadersTable', { read: ElementRef }]
+            }], valuesTable: [{
+                type: ViewChild,
+                args: ['valuesTable', { read: ElementRef }]
             }], loaderSettings: [{
                 type: Input
             }] } });

package/main.d.ts

@@ -8,4 +8,4 @@ export { PivotGridCellDirective } from './rendering/pivotgrid-cell.directive';
 export { PivotGridTableComponent } from './rendering/pivotgrid-table.component';
 export { PivotLocalBindingDirective } from './data-binding/local-binding.directive';
 export { PivotOLAPBindingDirective } from './data-binding/olap-binding.directive';
-export { Dimension, Measure, PivotGridAxis, Aggregate, PivotGridField, averageAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';
+export * from '@progress/kendo-pivotgrid-common';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-pivotgrid",
-  "version": "0.1.2",
+  "version": "0.1.4-dev.202205131602",
   "description": "PivotGrid package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/pivotgrid.component.d.ts

@@ -3,18 +3,21 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { AfterContentInit, AfterViewInit, ElementRef, NgZone, OnDestroy } from '@angular/core';
+import { ScrollbarWidthService } from '@progress/kendo-angular-common';
 import { PivotGridDataService } from './data-binding/pivotgrid-data.service';
 import { LoaderSettings } from './models/loader-settings';
 import * as i0 from "@angular/core";
 /**
- * A sample component
+ * Represents the Kendo UI PivotGrid component for Angular.
  */
 export declare class PivotGridComponent implements AfterViewInit, AfterContentInit, OnDestroy {
     private hostEl;
     private zone;
     private dataService;
     hostClass: boolean;
-    get scrollbarWidth(): string;
+    private colHeadersTable;
+    private rowHeadersTable;
+    private valuesTable;
     /**
      * Specify the type, size and color of the PivotGrid's loader.
      *
@@ -28,12 +31,13 @@ export declare class PivotGridComponent implements AfterViewInit, AfterContentIn
     loading: boolean;
     private resizeObservers;
     private _loaderSettings;
-    private loadingSubscription;
-    constructor(hostEl: ElementRef, zone: NgZone, dataService: PivotGridDataService);
+    private subs;
+    constructor(hostEl: ElementRef, zone: NgZone, dataService: PivotGridDataService, _scrollbarWidthService: ScrollbarWidthService);
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     private resizeContainer;
+    private handleScroll;
     static ɵfac: i0.ɵɵFactoryDeclaration<PivotGridComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PivotGridComponent, "kendo-pivotgrid", never, { "loaderSettings": "loaderSettings"; }, {}, never, never>;
 }

package/util.d.ts

@@ -2,10 +2,6 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
-export declare const scrollbarWidth: () => number;
 /**
  * @hidden
  */
@@ -16,3 +12,15 @@ export declare const isPresent: (value: any) => boolean;
  * Assumes array elements are primitive types
  */
 export declare const areSameArrays: (a1: any[], a2: any[]) => boolean;
+/**
+ * @hidden
+ */
+export declare const wheelDelta: (e: any, axis: 'X' | 'Y') => number;
+/**
+ * @hidden
+ */
+export declare const syncScroll: (source: HTMLTableElement, targets: HTMLTableElement[]) => void;
+/**
+ * @hidden
+ */
+export declare const syncWheel: (event: Event, tables: Element[], prop: 'scrollTop' | 'scrollLeft', axis: 'X' | 'Y') => void;