@progress/kendo-angular-pivotgrid 0.1.5-dev.202205170847 → 0.2.0-dev.202208181233

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("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(e,t,G,n,s,a,V,r,o,i){"use strict";function l(n){if(n&&n.__esModule)return n;var r=Object.create(null);return n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(r,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),r.default=n,Object.freeze(r)}var d=l(t),c=l(n),p=l(r),u=l(o),N={name:"@progress/kendo-angular-pivotgrid",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1652777244,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 r,o,a=n.call(e),i=[];try{for(;(void 0===t||0<t--)&&!(r=a.next()).done;)i.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return i}function h(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||((r=r||Array.prototype.slice.call(t,0,o))[o]=t[o]);return e.concat(r||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],r=e[2],e=e[3],o=s.toTree((this.columns||[]).slice()),o=m(s.toColumns(o),3),a=o[0],i=o[1],o=o[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,o,r))};var y=f;function f(){this.expandedStateChange=new t.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:t.Injectable}],propDecorators:{expandedStateChange:[{type:t.Output}]}});function b(e,t,n,r){(e="Y"===r?-k(e,r):k(e,r))&&(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 r=this;this.hostEl=e,this.renderer=t,this.dataService=n,this.cellClass=!0,this.handleClick=function(){r.dataService.expandedStateChange.emit({action:r.expanded?"collapse":"expand",cell:r.kendoPivotGridCell,tableType:r.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: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:d.ElementRef},{type:d.Renderer2},{type:y}]},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}]}});w.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}))},w.prototype.ngOnDestroy=function(){this.dataChangeSubs.unsubscribe()};var x=w;function w(e){this.dataService=e,this.dataChangeSubs=new a.Subscription}x.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:x,deps:[{token:y}],target:d.ɵɵFactoryTarget.Component}),x.ɵcmp=d.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:x,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:x,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:y}]},propDecorators:{tableType:[{type:t.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 o=this;n.isDocumentAvailable()&&this.zone.runOutsideAngular(function(){var e=o.rowHeadersTable.nativeElement.firstElementChild,t=new ResizeObserver(function(){return o.resizeContainer("Columns",e)}),n=(t.observe(e),o.colHeadersTable.nativeElement.firstElementChild),r=new ResizeObserver(function(){return o.resizeContainer("Rows",n)});r.observe(n),o.resizeObservers=[t,r],o.subs.add(a.fromEvent(e,"wheel").pipe(V.merge(a.fromEvent(n,"wheel"),a.fromEvent(o.valuesTable.nativeElement,"scroll"))).subscribe(function(e){return o.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,r){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,r="Rows"===e?"offsetHeight":"offsetWidth";n.style["gridTemplate"+e]="",n.style["gridTemplate"+e]=t[r]+"px 1fr"},this.handleScroll=function(e){var t,n,r,o,a;e.target===i.valuesTable.nativeElement?(t=e.target,n=[i.rowHeadersTable.nativeElement,i.colHeadersTable.nativeElement],r=t.scrollTop,t=t.scrollLeft,o=n[0].scrollTop,a=t!==n[1].scrollLeft,r!==o?n[0].scrollTop=r: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:t.ElementRef},{propertyName:"rowHeadersTable",first:!0,predicate:["rowHeadersTable"],descendants:!0,read:t.ElementRef},{propertyName:"valuesTable",first:!0,predicate:["valuesTable"],descendants:!0,read:t.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:x,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:t.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:t.HostBinding,args:["class.k-pivotgrid"]}],colHeadersTable:[{type:t.ViewChild,args:["colHeadersTable",{read:t.ElementRef}]}],rowHeadersTable:[{type:t.ViewChild,args:["rowHeadersTable",{read:t.ElementRef}]}],valuesTable:[{type:t.ViewChild,args:["valuesTable",{read:t.ElementRef}]}],loaderSettings:[{type:t.Input}]}});D.prototype.ngOnInit=function(){var r=this;this.loadData(),this.expandedStateSub=this.dataService.expandedStateChange.subscribe(function(n){r.zone.run(function(){var e="columnHeader"===n.tableType,t=e?"columnAxes":"rowAxes",e=s.toTree((e?r.dataService.columns:r.dataService.rows||[]).slice());r.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:t.Directive,args:[{selector:"kendo-base-binding-directive"}]}],ctorParameters:function(){return[{type:y},{type:d.NgZone}]},propDecorators:{columnAxes:[{type:t.Input}],rowAxes:[{type:t.Input}],measureAxes:[{type:t.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),r=this.measureAxes.map(function(t){return e.measures.find(function(e){return String(e.name)===String(t.name)})}).filter(Boolean),o=s.createDataTree(this.data,n,t,r,O);this.dataState=s.createLocalDataState({dataTree:o,rowSettings:n,columnSettings:t,rowAxes:this.rowAxes,columnAxes:this.columnAxes,measures:r,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:t.Directive,args:[{selector:"[kendoPivotLocalBinding]",exportAs:"kendoPivotLocalBinding"}]}],ctorParameters:function(){return[{type:y},{type:d.NgZone}]},propDecorators:{data:[{type:t.Input,args:["kendoPivotLocalBinding"]}],dimensions:[{type:t.Input}],measures:[{type:t.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:t.Directive,args:[{selector:"[kendoPivotOLAPBinding]",exportAs:"kendoPivotOLAPBinding"}]}],ctorParameters:function(){return[{type:y},{type:d.NgZone}]},propDecorators:{url:[{type:t.Input}],cube:[{type:t.Input}],catalog:[{type:t.Input}]}});var R=[r.CommonModule,n.EventsModule,o.IndicatorsModule],L=[S,x,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,x,I,p,u],imports:[r.CommonModule,n.EventsModule,o.IndicatorsModule],exports:[S,x,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:t.NgModule,args:[{imports:h([],m(R)),declarations:h([],m(L)),exports:h([],m(L)),providers:[{provide:i.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=S,e.PivotGridModule=F,e.PivotGridTableComponent=x,e.PivotLocalBindingDirective=p,e.PivotOLAPBindingDirective=u,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(e,t,F,l,d,i,V,n,r,o){"use strict";function a(n){var r;return n&&n.__esModule?n:(r=Object.create(null),n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(r,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),r.default=n,Object.freeze(r))}var s=a(t),c=a(l),p=a(n),u=a(r),N={name:"@progress/kendo-angular-pivotgrid",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1660825955,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 h(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),a=[];try{for(;(void 0===t||0<t--)&&!(r=i.next()).done;)a.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}function m(e,t,n){if(n||2===arguments.length)for(var r,o=0,i=t.length;o<i;o++)!r&&o in t||((r=r||Array.prototype.slice.call(t,0,o))[o]=t[o]);return e.concat(r||Array.prototype.slice.call(t))}Object.create;function y(e,t,n,r){(e="Y"===r?-b(e,r):b(e,r))&&(t[0][n]=t[1][n]+=e)}function f(e,n,r){return e.reduce(function(e,t){return n(t)?m(m([],h(e)),[r(t)]):e},[])}var b=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},L=0,k=(I.prototype.updateRowsAndCols=function(){var n=this,e=d.toTree((this.rows||[]).slice()),e=h(d.toRows(e),4),t=e[0],r=e[1],o=e[2],e=e[3],i=d.toTree((this.columns||[]).slice()),i=h(d.toColumns(i),3),a=i[0],s=i[1],i=i[2];this.columnHeaderLeaves=s,this.columnHeaderCols.next(s),this.columnHeaderRows.next(a),this.rowHeaderLeaves=r,this.rowHeaderCols.next(new Array(e).fill({})),this.rowHeaderRows.next(t),this.valuesRows.next(d.toData((this.normalizedData||[]).slice(),s,r,i,o)),l.isDocumentAvailable()&&this.ngZone.runOutsideAngular(function(){setTimeout(function(){return e=n.wrapper,t=e.querySelectorAll(".k-pivotgrid-row-headers .k-pivotgrid-row"),r=e.querySelectorAll(".k-pivotgrid-column-headers th"),o=e.querySelectorAll(".k-pivotgrid-values td"),t.forEach(function(e,t){var n=f(Array.from(o),function(e){return e.getAttribute("id").split("-")[4]===(t+1).toString()},function(e){return e.getAttribute("id")});e.setAttribute("aria-owns",n.join(" "))}),void o.forEach(function(e){var n=+e.getAttribute("id").split("-")[5],t=f(Array.from(r),function(e){var t=+e.getAttribute("id").split("-")[5],e=+e.getAttribute("colspan");return n==t||1<e&&n<=t+e-1},function(e){return e.getAttribute("id")});e.setAttribute("aria-describedby",t.join(" "))});var e,t,r,o})})},I);function I(e){this.ngZone=e,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),this.pivotGridId=L++}k.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:k,deps:[{token:s.NgZone}],target:s.ɵɵFactoryTarget.Injectable}),k.ɵprov=s.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:k}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:k,decorators:[{type:t.Injectable}],ctorParameters:function(){return[{type:s.NgZone}]},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,n=this.hostEl.nativeElement,r=(this.renderer.setAttribute(n,"rowspan",this.kendoPivotGridCell.rowSpan||1),this.renderer.setAttribute(n,"colspan",this.kendoPivotGridCell.colSpan||1),{"k-pivotgrid-header-total":(null==(e=this.kendoPivotGridCell)?void 0:e.total)||"values"===this.tableType&&(this.dataService.rowHeaderLeaves[this.rowIndex].total||this.dataService.columnHeaderLeaves[this.colIndex].total),"k-pivotgrid-header-root":0===(null==(e=this.kendoPivotGridCell)?void 0:e.levelNum),"k-pivotgrid-expanded":(null==(e=this.kendoPivotGridCell)?void 0:e.hasChildren)&&this.kendoPivotGridCell.children.length,"k-first":0<this.colIndex});for(t in r)r[t]&&this.renderer.addClass(n,t)};var w=x;function x(e,t,n){var r=this;this.hostEl=e,this.renderer=t,this.dataService=n,this.cellClass=!0,this.handleClick=function(){r.dataService.expandedStateChange.emit({action:r.expanded?"collapse":"expand",cell:r.kendoPivotGridCell,tableType:r.tableType})}}w.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:w,deps:[{token:s.ElementRef},{token:s.Renderer2},{token:k}],target:s.ɵɵFactoryTarget.Component}),w.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:w,selector:"[kendoPivotGridCell]",inputs:{kendoPivotGridCell:"kendoPivotGridCell",tableType:"tableType",rowIndex:"rowIndex",colIndex:"colIndex"},host:{properties:{"class.k-pivotgrid-cell":"this.cellClass"}},ngImport:s,template:'\n        <span \n            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"\n            class="k-icon"\n            aria-hidden="true"\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"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:w,decorators:[{type:t.Component,args:[{selector:"[kendoPivotGridCell]",template:'\n        <span \n            *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"\n            class="k-icon"\n            aria-hidden="true"\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:s.ElementRef},{type:s.Renderer2},{type:k}]},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}]}});Object.defineProperty(A.prototype,"pivotGridId",{get:function(){return"kendo-pivotgrid-"+this.dataService.pivotGridId+"-"},enumerable:!1,configurable:!0}),A.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}))},A.prototype.ngOnDestroy=function(){this.dataChangeSubs.unsubscribe()};var C=A;function A(e){this.dataService=e,this.dataChangeSubs=new i.Subscription}C.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:C,deps:[{token:k}],target:s.ɵɵFactoryTarget.Component}),C.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:C,selector:"kendo-pivotgrid-table",inputs:{tableType:"tableType",colWidth:"colWidth"},ngImport:s,template:'\n        <table\n            class="k-pivotgrid-table"\n            role="presentation">\n            <colgroup>\n                <col \n                    *ngFor="let item of headerItems;"\n                    [style.width]="tableType !== \'rowHeader\' ? colWidth >= 0 ? colWidth + \'px\' : \'200px\' : undefined" />\n            </colgroup>\n            <tbody class="k-pivotgrid-tbody" role="rowgroup">\n                <tr *ngFor="let row of rows; index as rowIndex"\n                    class="k-pivotgrid-row"\n                    role="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"\n                            [attr.aria-expanded]="cell.hasChildren && cell.children.length ? \'true\' : \'false\'"\n                            [attr.role]="tableType === \'columnHeader\' ? \'columnheader\' : \'rowheader\'"\n                            [attr.id]="pivotGridId + (tableType === \'columnHeader\' ? \'ch-\' : \'rh-\') + (rowIndex + 1) + \'-\' + (colIndex + 1)"></th>\n                        <td\n                            *ngIf="cell && tableType === \'values\'"\n                            [kendoPivotGridCell]="cell"\n                            tableType="values"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"\n                            role="gridcell"\n                            [attr.id]="pivotGridId + \'cell-\' + (rowIndex + 1) + \'-\' + (colIndex + 1)"></td>\n                    </ng-container>\n                </tr>\n            </tbody>\n        </table>\n    ',isInline:!0,components:[{type:w,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"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:C,decorators:[{type:t.Component,args:[{selector:"kendo-pivotgrid-table",template:'\n        <table\n            class="k-pivotgrid-table"\n            role="presentation">\n            <colgroup>\n                <col \n                    *ngFor="let item of headerItems;"\n                    [style.width]="tableType !== \'rowHeader\' ? colWidth >= 0 ? colWidth + \'px\' : \'200px\' : undefined" />\n            </colgroup>\n            <tbody class="k-pivotgrid-tbody" role="rowgroup">\n                <tr *ngFor="let row of rows; index as rowIndex"\n                    class="k-pivotgrid-row"\n                    role="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"\n                            [attr.aria-expanded]="cell.hasChildren && cell.children.length ? \'true\' : \'false\'"\n                            [attr.role]="tableType === \'columnHeader\' ? \'columnheader\' : \'rowheader\'"\n                            [attr.id]="pivotGridId + (tableType === \'columnHeader\' ? \'ch-\' : \'rh-\') + (rowIndex + 1) + \'-\' + (colIndex + 1)"></th>\n                        <td\n                            *ngIf="cell && tableType === \'values\'"\n                            [kendoPivotGridCell]="cell"\n                            tableType="values"\n                            [colIndex]="colIndex"\n                            [rowIndex]="rowIndex"\n                            role="gridcell"\n                            [attr.id]="pivotGridId + \'cell-\' + (rowIndex + 1) + \'-\' + (colIndex + 1)"></td>\n                    </ng-container>\n                </tr>\n            </tbody>\n        </table>\n    '}]}],ctorParameters:function(){return[{type:k}]},propDecorators:{tableType:[{type:t.Input}],colWidth:[{type:t.Input}]}});var T={type:"converging-spinner",themeColor:"primary",size:"large"},S=(Object.defineProperty(D.prototype,"loaderSettings",{get:function(){return this._loaderSettings},set:function(e){this._loaderSettings=Object.assign({},T,e)},enumerable:!1,configurable:!0}),D.prototype.ngAfterViewInit=function(){var o=this;l.isDocumentAvailable()&&this.zone.runOutsideAngular(function(){var e=o.rowHeadersTable.nativeElement.firstElementChild,t=new ResizeObserver(function(){return o.resizeContainer("Columns",e)}),n=(t.observe(e),o.colHeadersTable.nativeElement.firstElementChild),r=new ResizeObserver(function(){return o.resizeContainer("Rows",n)});r.observe(n),o.resizeObservers=[t,r],o.subs.add(i.fromEvent(e,"wheel").pipe(V.merge(i.fromEvent(n,"wheel"),i.fromEvent(o.valuesTable.nativeElement,"scroll"))).subscribe(function(e){return o.handleScroll(e)}))})},D.prototype.ngAfterContentInit=function(){var t=this;this.subs.add(this.dataService.loading.subscribe(function(e){return t.loading=e}))},D.prototype.ngOnDestroy=function(){this.resizeObservers.forEach(function(e){return e.disconnect()}),this.subs.unsubscribe()},D);function D(e,t,n,r){var a=this;this.hostEl=e,this.zone=t,this.dataService=n,this.hostClass=!0,this.ariaRole="grid",this.columnHeadersWidth=200,this.resizeObservers=[],this._loaderSettings=T,this.subs=new i.Subscription,this.resizeContainer=function(e,t){var n=a.hostEl.nativeElement,r="Rows"===e?"offsetHeight":"offsetWidth";n.style["gridTemplate"+e]="",n.style["gridTemplate"+e]=t[r]+"px 1fr"},this.handleScroll=function(e){var t,n,r,o,i;e.target===a.valuesTable.nativeElement?(t=e.target,n=[a.rowHeadersTable.nativeElement,a.colHeadersTable.nativeElement],r=t.scrollTop,t=t.scrollLeft,o=n[0].scrollTop,i=t!==n[1].scrollLeft,r!==o?n[0].scrollTop=r:i&&(n[1].scrollLeft=t)):e.target.closest(".k-pivotgrid-row-headers")?y(e,[a.valuesTable.nativeElement,a.rowHeadersTable.nativeElement],"scrollTop","Y"):e.target.closest(".k-pivotgrid-column-headers")&&y(e,[a.valuesTable.nativeElement,a.colHeadersTable.nativeElement],"scrollLeft","X")},F.validatePackage(N),n.wrapper=e.nativeElement}S.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:S,deps:[{token:s.ElementRef},{token:s.NgZone},{token:k},{token:c.ScrollbarWidthService}],target:s.ɵɵFactoryTarget.Component}),S.ɵcmp=s.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:S,selector:"kendo-pivotgrid",inputs:{loaderSettings:"loaderSettings",columnHeadersWidth:"columnHeadersWidth"},host:{properties:{"class.k-pivotgrid":"this.hostClass","attr.role":"this.ariaRole"}},providers:[k],viewQueries:[{propertyName:"colHeadersTable",first:!0,predicate:["colHeadersTable"],descendants:!0,read:t.ElementRef},{propertyName:"rowHeadersTable",first:!0,predicate:["rowHeadersTable"],descendants:!0,read:t.ElementRef},{propertyName:"valuesTable",first:!0,predicate:["valuesTable"],descendants:!0,read:t.ElementRef}],ngImport:s,template:'\n        <span class="k-pivotgrid-empty-cell"></span>\n        <kendo-pivotgrid-table\n            #colHeadersTable\n            [colWidth]="columnHeadersWidth"\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            [colWidth]="columnHeadersWidth"\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:C,selector:"kendo-pivotgrid-table",inputs:["tableType","colWidth"]},{type:u.LoaderComponent,selector:"kendo-loader",inputs:["type","themeColor","size"]}],directives:[{type:p.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:S,decorators:[{type:t.Component,args:[{selector:"kendo-pivotgrid",providers:[k],template:'\n        <span class="k-pivotgrid-empty-cell"></span>\n        <kendo-pivotgrid-table\n            #colHeadersTable\n            [colWidth]="columnHeadersWidth"\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            [colWidth]="columnHeadersWidth"\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:s.ElementRef},{type:s.NgZone},{type:k},{type:c.ScrollbarWidthService}]},propDecorators:{hostClass:[{type:t.HostBinding,args:["class.k-pivotgrid"]}],ariaRole:[{type:t.HostBinding,args:["attr.role"]}],colHeadersTable:[{type:t.ViewChild,args:["colHeadersTable",{read:t.ElementRef}]}],rowHeadersTable:[{type:t.ViewChild,args:["rowHeadersTable",{read:t.ElementRef}]}],valuesTable:[{type:t.ViewChild,args:["valuesTable",{read:t.ElementRef}]}],loaderSettings:[{type:t.Input}],columnHeadersWidth:[{type:t.Input}]}});P.prototype.ngOnInit=function(){var r=this;this.loadData(),this.expandedStateSub=this.dataService.expandedStateChange.subscribe(function(n){r.zone.run(function(){var e="columnHeader"===n.tableType,t=e?"columnAxes":"rowAxes",e=d.toTree((e?r.dataService.columns:r.dataService.rows||[]).slice());r.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:d.HEADERS_ACTION.toggle,payload:n},n=d.headersReducer(this[e].slice(),Object.assign(Object.assign({},n),{tree:t}));this[e]=n,this.loadData()};u=P;function P(e,t){this.dataService=e,this.zone=t,this.columnAxes=[],this.rowAxes=[],this.measureAxes=[],this.expandedStateSub=new i.Subscription}u.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,deps:[{token:k},{token:s.NgZone}],target:s.ɵɵFactoryTarget.Directive}),u.ɵdir=s.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:u,selector:"kendo-base-binding-directive",inputs:{columnAxes:"columnAxes",rowAxes:"rowAxes",measureAxes:"measureAxes"},ngImport:s}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,decorators:[{type:t.Directive,args:[{selector:"kendo-base-binding-directive"}]}],ctorParameters:function(){return[{type:k},{type:s.NgZone}]},propDecorators:{columnAxes:[{type:t.Input}],rowAxes:[{type:t.Input}],measureAxes:[{type:t.Input}]}});var O,E={dataField:"aggregate",columnsData:"columns"},p=(v(H,O=u),H.prototype.ngOnChanges=function(e){l.anyChanged(["data","dimensions","columnAxes","rowAxes","measureAxes","measures"],e)&&this.loadData()},H.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),r=this.measureAxes.map(function(t){return e.measures.find(function(e){return String(e.name)===String(t.name)})}).filter(Boolean),o=d.createDataTree(this.data,n,t,r,E);this.dataState=d.createLocalDataState({dataTree:o,rowSettings:n,columnSettings:t,rowAxes:this.rowAxes,columnAxes:this.columnAxes,measures:r,sort:[],fields:E}),this.updateDataServiceFields()},H.prototype.getRootAxes=function(e){return Array.from(d.rootFields(e).keys()).join("&")},H);function H(e,t){var n=O.call(this,e,t)||this;return n.createAxisSettings=function(e){return Object.assign({key:e},n.dimensions[e])},n}p.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:p,deps:[{token:k},{token:s.NgZone}],target:s.ɵɵFactoryTarget.Directive}),p.ɵdir=s.ɵɵ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:s}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:p,decorators:[{type:t.Directive,args:[{selector:"[kendoPivotLocalBinding]",exportAs:"kendoPivotLocalBinding"}]}],ctorParameters:function(){return[{type:k},{type:s.NgZone}]},propDecorators:{data:[{type:t.Input,args:["kendoPivotLocalBinding"]}],dimensions:[{type:t.Input}],measures:[{type:t.Input}]}});v(G,j=u),G.prototype.ngOnChanges=function(e){l.anyChanged(["url","cube","catalog","columnAxes","rowAxes","measureAxes"],e)&&this.loadData()},G.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});d.fetchData({url:this.url},JSON.parse(JSON.stringify(e))).then(d.createDataState).then(function(e){t.dataState=e,t.updateDataServiceFields(),t.dataService.loading.next(!1)})};var j,u=G;function G(e,t){return j.call(this,e,t)||this}u.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,deps:[{token:k},{token:s.NgZone}],target:s.ɵɵFactoryTarget.Directive}),u.ɵdir=s.ɵɵ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:s}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:u,decorators:[{type:t.Directive,args:[{selector:"[kendoPivotOLAPBinding]",exportAs:"kendoPivotOLAPBinding"}]}],ctorParameters:function(){return[{type:k},{type:s.NgZone}]},propDecorators:{url:[{type:t.Input}],cube:[{type:t.Input}],catalog:[{type:t.Input}]}});var B=[n.CommonModule,l.EventsModule,r.IndicatorsModule],W=[S,C,w,p,u],R=function(){};R.ɵfac=s.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:R,deps:[],target:s.ɵɵFactoryTarget.NgModule}),R.ɵmod=s.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:R,declarations:[S,C,w,p,u],imports:[n.CommonModule,l.EventsModule,r.IndicatorsModule],exports:[S,C,w,p,u]}),R.ɵinj=s.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:R,providers:[{provide:o.L10N_PREFIX,useValue:"kendo.pivotgrid"}],imports:[m([],h(B))]}),s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:s,type:R,decorators:[{type:t.NgModule,args:[{imports:m([],h(B)),declarations:m([],h(W)),exports:m([],h(W)),providers:[{provide:o.L10N_PREFIX,useValue:"kendo.pivotgrid"}]}]}]}),Object.defineProperty(e,"averageAggregate",{enumerable:!0,get:function(){return d.averageAggregate}}),Object.defineProperty(e,"maxAggregate",{enumerable:!0,get:function(){return d.maxAggregate}}),Object.defineProperty(e,"minAggregate",{enumerable:!0,get:function(){return d.minAggregate}}),Object.defineProperty(e,"sumAggregate",{enumerable:!0,get:function(){return d.sumAggregate}}),e.PivotGridCellDirective=w,e.PivotGridComponent=S,e.PivotGridModule=R,e.PivotGridTableComponent=C,e.PivotLocalBindingDirective=p,e.PivotOLAPBindingDirective=u,Object.defineProperty(e,"__esModule",{value:!0})});

package/data-binding/pivotgrid-data.service.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, NgZone } from '@angular/core';
 import { PivotDataItem, Tuple } from '@progress/kendo-pivotgrid-common';
 import { BehaviorSubject } from 'rxjs';
 import { ExpandedStateChangeEvent } from '../models/expanded-state-action';
@@ -11,10 +11,12 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export declare class PivotGridDataService {
+    private ngZone;
     expandedStateChange: EventEmitter<ExpandedStateChangeEvent>;
     normalizedData: any[];
     rows: Tuple[];
     columns: Tuple[];
+    wrapper: Element;
     columnHeaderLeaves: {
         total: boolean;
         path: string[];
@@ -32,6 +34,8 @@ export declare class PivotGridDataService {
         cells: PivotDataItem[];
     }[]>;
     loading: BehaviorSubject<boolean>;
+    pivotGridId: number;
+    constructor(ngZone: NgZone);
     updateRowsAndCols(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PivotGridDataService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<PivotGridDataService>;

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

@@ -3,14 +3,21 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter, Injectable, Output } from '@angular/core';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { toColumns, toData, toRows, toTree } from '@progress/kendo-pivotgrid-common';
 import { BehaviorSubject } from 'rxjs';
+import { matchAriaAttributes } from '../util';
 import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+let nextPivotGridId = 0;
 /**
  * @hidden
  */
 export class PivotGridDataService {
-    constructor() {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
         this.expandedStateChange = new EventEmitter();
         this.columnHeaderRows = new BehaviorSubject([]);
         this.columnHeaderCols = new BehaviorSubject([]);
@@ -18,6 +25,7 @@ export class PivotGridDataService {
         this.rowHeaderRows = new BehaviorSubject([]);
         this.valuesRows = new BehaviorSubject([]);
         this.loading = new BehaviorSubject(false);
+        this.pivotGridId = nextPivotGridId++;
     }
     updateRowsAndCols() {
         const rowsTree = toTree((this.rows || []).slice());
@@ -31,12 +39,19 @@ export class PivotGridDataService {
         this.rowHeaderCols.next(new Array(rowHeaderBreadth).fill({}));
         this.rowHeaderRows.next(rowHeaderRows);
         this.valuesRows.next(toData((this.normalizedData || []).slice(), columnHeaderLeaves, rowHeaderLeaves, columnHeaderBreadth, rowHeaderDepth));
+        if (isDocumentAvailable()) {
+            this.ngZone.runOutsideAngular(() => {
+                // needed because all tables need to be rendered in accordance with the new settings
+                // before applying the required DOM attributes
+                setTimeout(() => matchAriaAttributes(this.wrapper));
+            });
+        }
     }
 }
-PivotGridDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PivotGridDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 PivotGridDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService, decorators: [{
             type: Injectable
-        }], propDecorators: { expandedStateChange: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { expandedStateChange: [{
                 type: Output
             }] } });

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: 1652777244,
+    publishDate: 1660825955,
     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

@@ -31,6 +31,13 @@ export class PivotGridComponent {
         this.zone = zone;
         this.dataService = dataService;
         this.hostClass = true;
+        this.ariaRole = 'grid';
+        /**
+         * Specify the width of the column header and data cells. Value is treated as pixels.
+         *
+         * @default 200
+         */
+        this.columnHeadersWidth = 200;
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
         this.subs = new Subscription();
@@ -56,6 +63,7 @@ export class PivotGridComponent {
             }
         };
         validatePackage(packageMetadata);
+        dataService.wrapper = hostEl.nativeElement;
     }
     /**
      * Specify the type, size and color of the PivotGrid's loader.
@@ -96,12 +104,13 @@ export class PivotGridComponent {
     }
 }
 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: [
+PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", columnHeadersWidth: "columnHeadersWidth" }, host: { properties: { "class.k-pivotgrid": "this.hostClass", "attr.role": "this.ariaRole" } }, providers: [
         PivotGridDataService
     ], 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
+            [colWidth]="columnHeadersWidth"
             class="k-pivotgrid-column-headers"
             tableType="columnHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
@@ -110,6 +119,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             tableType="rowHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
             #valuesTable
+            [colWidth]="columnHeadersWidth"
             class="k-pivotgrid-values"
             tableType="values"></kendo-pivotgrid-table>
 
@@ -121,7 +131,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: 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"] }] });
+   `, 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", "colWidth"] }, { 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: [{
@@ -133,6 +143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <span class="k-pivotgrid-empty-cell"></span>
         <kendo-pivotgrid-table
             #colHeadersTable
+            [colWidth]="columnHeadersWidth"
             class="k-pivotgrid-column-headers"
             tableType="columnHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
@@ -141,6 +152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             tableType="rowHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
             #valuesTable
+            [colWidth]="columnHeadersWidth"
             class="k-pivotgrid-values"
             tableType="values"></kendo-pivotgrid-table>
 
@@ -166,6 +178,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.PivotGridDataService }, { type: i2.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pivotgrid']
+            }], ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], colHeadersTable: [{
                 type: ViewChild,
                 args: ['colHeadersTable', { read: ElementRef }]
@@ -177,4 +192,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['valuesTable', { read: ElementRef }]
             }], loaderSettings: [{
                 type: Input
+            }], columnHeadersWidth: [{
+                type: Input
             }] } });

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

@@ -29,15 +29,16 @@ export class PivotGridCellDirective {
         return ((_a = this.kendoPivotGridCell) === null || _a === void 0 ? void 0 : _a.hasChildren) && this.kendoPivotGridCell.children.length;
     }
     ngOnInit() {
+        var _a, _b, _c;
         const nativeElement = this.hostEl.nativeElement;
         this.renderer.setAttribute(nativeElement, 'rowspan', this.kendoPivotGridCell.rowSpan || 1);
         this.renderer.setAttribute(nativeElement, 'colspan', this.kendoPivotGridCell.colSpan || 1);
         const classesToAdd = {
-            'k-pivotgrid-header-total': this.kendoPivotGridCell.total || (this.tableType === 'values'
+            'k-pivotgrid-header-total': ((_a = this.kendoPivotGridCell) === null || _a === void 0 ? void 0 : _a.total) || (this.tableType === 'values'
                 && (this.dataService.rowHeaderLeaves[this.rowIndex].total ||
                     this.dataService.columnHeaderLeaves[this.colIndex].total)),
-            'k-pivotgrid-header-root': this.kendoPivotGridCell.levelNum === 0,
-            'k-pivotgrid-expanded': this.kendoPivotGridCell.hasChildren && this.kendoPivotGridCell.children.length,
+            'k-pivotgrid-header-root': ((_b = this.kendoPivotGridCell) === null || _b === void 0 ? void 0 : _b.levelNum) === 0,
+            'k-pivotgrid-expanded': ((_c = this.kendoPivotGridCell) === null || _c === void 0 ? void 0 : _c.hasChildren) && this.kendoPivotGridCell.children.length,
             'k-first': this.colIndex > 0
         };
         for (let prop in classesToAdd) {
@@ -52,6 +53,7 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <span 
             *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
             class="k-icon"
+            aria-hidden="true"
             [kendoEventsOutsideAngular]="{
                 click: handleClick
             }"
@@ -68,6 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <span 
             *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
             class="k-icon"
+            aria-hidden="true"
             [kendoEventsOutsideAngular]="{
                 click: handleClick
             }"

package/esm2015/rendering/pivotgrid-table.component.js

@@ -16,6 +16,9 @@ export class PivotGridTableComponent {
         this.dataService = dataService;
         this.dataChangeSubs = new Subscription();
     }
+    get pivotGridId() {
+        return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
+    }
     ngOnInit() {
         this.dataChangeSubs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => this.rows = rows));
         this.dataChangeSubs.add(this.tableType === 'values' ?
@@ -27,27 +30,37 @@ export class PivotGridTableComponent {
     }
 }
 PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType" }, ngImport: i0, template: `
-        <table class="k-pivotgrid-table">
+PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth" }, ngImport: i0, template: `
+        <table
+            class="k-pivotgrid-table"
+            role="presentation">
             <colgroup>
-                <col *ngFor="let item of headerItems;" />
+                <col 
+                    *ngFor="let item of headerItems;"
+                    [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
             </colgroup>
-            <tbody class="k-pivotgrid-tbody">
+            <tbody class="k-pivotgrid-tbody" role="rowgroup">
                 <tr *ngFor="let row of rows; index as rowIndex"
-                    class="k-pivotgrid-row">
+                    class="k-pivotgrid-row"
+                    role="row">
                     <ng-container *ngFor="let cell of row.cells; index as colIndex">
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
                             [tableType]="tableType"
                             [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"></th>
+                            [rowIndex]="rowIndex"
+                            [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
+                            [attr.role]="tableType === 'columnHeader' ? 'columnheader' : 'rowheader'"
+                            [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
                         <td
                             *ngIf="cell && tableType === 'values'"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
                             [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"></td>
+                            [rowIndex]="rowIndex"
+                            role="gridcell"
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
                     </ng-container>
                 </tr>
             </tbody>
@@ -58,26 +71,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             args: [{
                     selector: 'kendo-pivotgrid-table',
                     template: `
-        <table class="k-pivotgrid-table">
+        <table
+            class="k-pivotgrid-table"
+            role="presentation">
             <colgroup>
-                <col *ngFor="let item of headerItems;" />
+                <col 
+                    *ngFor="let item of headerItems;"
+                    [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
             </colgroup>
-            <tbody class="k-pivotgrid-tbody">
+            <tbody class="k-pivotgrid-tbody" role="rowgroup">
                 <tr *ngFor="let row of rows; index as rowIndex"
-                    class="k-pivotgrid-row">
+                    class="k-pivotgrid-row"
+                    role="row">
                     <ng-container *ngFor="let cell of row.cells; index as colIndex">
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
                             [tableType]="tableType"
                             [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"></th>
+                            [rowIndex]="rowIndex"
+                            [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
+                            [attr.role]="tableType === 'columnHeader' ? 'columnheader' : 'rowheader'"
+                            [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
                         <td
                             *ngIf="cell && tableType === 'values'"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
                             [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"></td>
+                            [rowIndex]="rowIndex"
+                            role="gridcell"
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
                     </ng-container>
                 </tr>
             </tbody>
@@ -86,4 +109,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.PivotGridDataService }]; }, propDecorators: { tableType: [{
                 type: Input
+            }], colWidth: [{
+                type: Input
             }] } });

package/esm2015/util.js

@@ -64,3 +64,30 @@ export const syncWheel = (event, tables, prop, axis) => {
             tables[1][prop] += delta;
     }
 };
+/**
+ * @hidden
+ */
+export const matchAriaAttributes = (wrapper) => {
+    const rowHeaderRows = wrapper.querySelectorAll('.k-pivotgrid-row-headers .k-pivotgrid-row');
+    const colHeaderCells = wrapper.querySelectorAll('.k-pivotgrid-column-headers th');
+    const valueTableCells = wrapper.querySelectorAll('.k-pivotgrid-values td');
+    rowHeaderRows.forEach((row, index) => {
+        const valueCellsIds = filterAndMap(Array.from(valueTableCells), c => c.getAttribute('id').split('-')[4] === (index + 1).toString(), c => c.getAttribute('id'));
+        row.setAttribute('aria-owns', valueCellsIds.join(' '));
+    });
+    valueTableCells.forEach(cell => {
+        const cellColIndex = +cell.getAttribute('id').split('-')[5];
+        const colHeaderCellsIds = filterAndMap(Array.from(colHeaderCells), c => {
+            const headerCellColIndex = +c.getAttribute('id').split('-')[5];
+            const headerCellColspan = +c.getAttribute('colspan');
+            const colIndexIsEqual = cellColIndex === headerCellColIndex;
+            const cellColIndexIsWithinHeaderCellRange = headerCellColspan > 1 && (headerCellColIndex + headerCellColspan - 1 >= cellColIndex);
+            return colIndexIsEqual || cellColIndexIsWithinHeaderCellRange;
+        }, c => c.getAttribute('id'));
+        cell.setAttribute('aria-describedby', colHeaderCellsIds.join(' '));
+    });
+};
+/**
+ * @hidden
+ */
+export const filterAndMap = (arr, predicate, mapper) => arr.reduce((acc, curr) => predicate(curr) ? [...acc, mapper(curr)] : acc, []);

package/fesm2015/kendo-angular-pivotgrid.js

@@ -24,46 +24,11 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1652777244,
+    publishDate: 1660825955,
     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
- */
-class PivotGridDataService {
-    constructor() {
-        this.expandedStateChange = new EventEmitter();
-        this.columnHeaderRows = new BehaviorSubject([]);
-        this.columnHeaderCols = new BehaviorSubject([]);
-        this.rowHeaderCols = new BehaviorSubject([]);
-        this.rowHeaderRows = new BehaviorSubject([]);
-        this.valuesRows = new BehaviorSubject([]);
-        this.loading = new BehaviorSubject(false);
-    }
-    updateRowsAndCols() {
-        const rowsTree = toTree((this.rows || []).slice());
-        const [rowHeaderRows, rowHeaderLeaves, rowHeaderDepth, rowHeaderBreadth] = toRows(rowsTree);
-        const columnsTree = toTree((this.columns || []).slice());
-        const [columnHeaderRows, columnHeaderLeaves, columnHeaderBreadth] = toColumns(columnsTree);
-        this.columnHeaderLeaves = columnHeaderLeaves;
-        this.columnHeaderCols.next(columnHeaderLeaves);
-        this.columnHeaderRows.next(columnHeaderRows);
-        this.rowHeaderLeaves = rowHeaderLeaves;
-        this.rowHeaderCols.next(new Array(rowHeaderBreadth).fill({}));
-        this.rowHeaderRows.next(rowHeaderRows);
-        this.valuesRows.next(toData((this.normalizedData || []).slice(), columnHeaderLeaves, rowHeaderLeaves, columnHeaderBreadth, rowHeaderDepth));
-    }
-}
-PivotGridDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PivotGridDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService, decorators: [{
-            type: Injectable
-        }], propDecorators: { expandedStateChange: [{
-                type: Output
-            }] } });
-
 /**
  * @hidden
  */
@@ -126,6 +91,81 @@ const syncWheel = (event, tables, prop, axis) => {
             tables[1][prop] += delta;
     }
 };
+/**
+ * @hidden
+ */
+const matchAriaAttributes = (wrapper) => {
+    const rowHeaderRows = wrapper.querySelectorAll('.k-pivotgrid-row-headers .k-pivotgrid-row');
+    const colHeaderCells = wrapper.querySelectorAll('.k-pivotgrid-column-headers th');
+    const valueTableCells = wrapper.querySelectorAll('.k-pivotgrid-values td');
+    rowHeaderRows.forEach((row, index) => {
+        const valueCellsIds = filterAndMap(Array.from(valueTableCells), c => c.getAttribute('id').split('-')[4] === (index + 1).toString(), c => c.getAttribute('id'));
+        row.setAttribute('aria-owns', valueCellsIds.join(' '));
+    });
+    valueTableCells.forEach(cell => {
+        const cellColIndex = +cell.getAttribute('id').split('-')[5];
+        const colHeaderCellsIds = filterAndMap(Array.from(colHeaderCells), c => {
+            const headerCellColIndex = +c.getAttribute('id').split('-')[5];
+            const headerCellColspan = +c.getAttribute('colspan');
+            const colIndexIsEqual = cellColIndex === headerCellColIndex;
+            const cellColIndexIsWithinHeaderCellRange = headerCellColspan > 1 && (headerCellColIndex + headerCellColspan - 1 >= cellColIndex);
+            return colIndexIsEqual || cellColIndexIsWithinHeaderCellRange;
+        }, c => c.getAttribute('id'));
+        cell.setAttribute('aria-describedby', colHeaderCellsIds.join(' '));
+    });
+};
+/**
+ * @hidden
+ */
+const filterAndMap = (arr, predicate, mapper) => arr.reduce((acc, curr) => predicate(curr) ? [...acc, mapper(curr)] : acc, []);
+
+/**
+ * @hidden
+ */
+let nextPivotGridId = 0;
+/**
+ * @hidden
+ */
+class PivotGridDataService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.expandedStateChange = new EventEmitter();
+        this.columnHeaderRows = new BehaviorSubject([]);
+        this.columnHeaderCols = new BehaviorSubject([]);
+        this.rowHeaderCols = new BehaviorSubject([]);
+        this.rowHeaderRows = new BehaviorSubject([]);
+        this.valuesRows = new BehaviorSubject([]);
+        this.loading = new BehaviorSubject(false);
+        this.pivotGridId = nextPivotGridId++;
+    }
+    updateRowsAndCols() {
+        const rowsTree = toTree((this.rows || []).slice());
+        const [rowHeaderRows, rowHeaderLeaves, rowHeaderDepth, rowHeaderBreadth] = toRows(rowsTree);
+        const columnsTree = toTree((this.columns || []).slice());
+        const [columnHeaderRows, columnHeaderLeaves, columnHeaderBreadth] = toColumns(columnsTree);
+        this.columnHeaderLeaves = columnHeaderLeaves;
+        this.columnHeaderCols.next(columnHeaderLeaves);
+        this.columnHeaderRows.next(columnHeaderRows);
+        this.rowHeaderLeaves = rowHeaderLeaves;
+        this.rowHeaderCols.next(new Array(rowHeaderBreadth).fill({}));
+        this.rowHeaderRows.next(rowHeaderRows);
+        this.valuesRows.next(toData((this.normalizedData || []).slice(), columnHeaderLeaves, rowHeaderLeaves, columnHeaderBreadth, rowHeaderDepth));
+        if (isDocumentAvailable()) {
+            this.ngZone.runOutsideAngular(() => {
+                // needed because all tables need to be rendered in accordance with the new settings
+                // before applying the required DOM attributes
+                setTimeout(() => matchAriaAttributes(this.wrapper));
+            });
+        }
+    }
+}
+PivotGridDataService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+PivotGridDataService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridDataService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { expandedStateChange: [{
+                type: Output
+            }] } });
 
 /**
  * @hidden
@@ -149,15 +189,16 @@ class PivotGridCellDirective {
         return ((_a = this.kendoPivotGridCell) === null || _a === void 0 ? void 0 : _a.hasChildren) && this.kendoPivotGridCell.children.length;
     }
     ngOnInit() {
+        var _a, _b, _c;
         const nativeElement = this.hostEl.nativeElement;
         this.renderer.setAttribute(nativeElement, 'rowspan', this.kendoPivotGridCell.rowSpan || 1);
         this.renderer.setAttribute(nativeElement, 'colspan', this.kendoPivotGridCell.colSpan || 1);
         const classesToAdd = {
-            'k-pivotgrid-header-total': this.kendoPivotGridCell.total || (this.tableType === 'values'
+            'k-pivotgrid-header-total': ((_a = this.kendoPivotGridCell) === null || _a === void 0 ? void 0 : _a.total) || (this.tableType === 'values'
                 && (this.dataService.rowHeaderLeaves[this.rowIndex].total ||
                     this.dataService.columnHeaderLeaves[this.colIndex].total)),
-            'k-pivotgrid-header-root': this.kendoPivotGridCell.levelNum === 0,
-            'k-pivotgrid-expanded': this.kendoPivotGridCell.hasChildren && this.kendoPivotGridCell.children.length,
+            'k-pivotgrid-header-root': ((_b = this.kendoPivotGridCell) === null || _b === void 0 ? void 0 : _b.levelNum) === 0,
+            'k-pivotgrid-expanded': ((_c = this.kendoPivotGridCell) === null || _c === void 0 ? void 0 : _c.hasChildren) && this.kendoPivotGridCell.children.length,
             'k-first': this.colIndex > 0
         };
         for (let prop in classesToAdd) {
@@ -172,6 +213,7 @@ PivotGridCellDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <span 
             *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
             class="k-icon"
+            aria-hidden="true"
             [kendoEventsOutsideAngular]="{
                 click: handleClick
             }"
@@ -188,6 +230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <span 
             *ngIf="kendoPivotGridCell.hasChildren && !kendoPivotGridCell.total"
             class="k-icon"
+            aria-hidden="true"
             [kendoEventsOutsideAngular]="{
                 click: handleClick
             }"
@@ -217,6 +260,9 @@ class PivotGridTableComponent {
         this.dataService = dataService;
         this.dataChangeSubs = new Subscription();
     }
+    get pivotGridId() {
+        return `kendo-pivotgrid-${this.dataService.pivotGridId}-`;
+    }
     ngOnInit() {
         this.dataChangeSubs.add(this.dataService[`${this.tableType}Rows`].subscribe(rows => this.rows = rows));
         this.dataChangeSubs.add(this.tableType === 'values' ?
@@ -228,27 +274,37 @@ class PivotGridTableComponent {
     }
 }
 PivotGridTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridTableComponent, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType" }, ngImport: i0, template: `
-        <table class="k-pivotgrid-table">
+PivotGridTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: { tableType: "tableType", colWidth: "colWidth" }, ngImport: i0, template: `
+        <table
+            class="k-pivotgrid-table"
+            role="presentation">
             <colgroup>
-                <col *ngFor="let item of headerItems;" />
+                <col 
+                    *ngFor="let item of headerItems;"
+                    [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
             </colgroup>
-            <tbody class="k-pivotgrid-tbody">
+            <tbody class="k-pivotgrid-tbody" role="rowgroup">
                 <tr *ngFor="let row of rows; index as rowIndex"
-                    class="k-pivotgrid-row">
+                    class="k-pivotgrid-row"
+                    role="row">
                     <ng-container *ngFor="let cell of row.cells; index as colIndex">
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
                             [tableType]="tableType"
                             [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"></th>
+                            [rowIndex]="rowIndex"
+                            [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
+                            [attr.role]="tableType === 'columnHeader' ? 'columnheader' : 'rowheader'"
+                            [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
                         <td
                             *ngIf="cell && tableType === 'values'"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
                             [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"></td>
+                            [rowIndex]="rowIndex"
+                            role="gridcell"
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
                     </ng-container>
                 </tr>
             </tbody>
@@ -259,26 +315,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             args: [{
                     selector: 'kendo-pivotgrid-table',
                     template: `
-        <table class="k-pivotgrid-table">
+        <table
+            class="k-pivotgrid-table"
+            role="presentation">
             <colgroup>
-                <col *ngFor="let item of headerItems;" />
+                <col 
+                    *ngFor="let item of headerItems;"
+                    [style.width]="tableType !== 'rowHeader' ? colWidth >= 0 ? colWidth + 'px' : '200px' : undefined" />
             </colgroup>
-            <tbody class="k-pivotgrid-tbody">
+            <tbody class="k-pivotgrid-tbody" role="rowgroup">
                 <tr *ngFor="let row of rows; index as rowIndex"
-                    class="k-pivotgrid-row">
+                    class="k-pivotgrid-row"
+                    role="row">
                     <ng-container *ngFor="let cell of row.cells; index as colIndex">
                         <th
                             *ngIf="cell && tableType !== 'values'" 
                             [kendoPivotGridCell]="cell"
                             [tableType]="tableType"
                             [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"></th>
+                            [rowIndex]="rowIndex"
+                            [attr.aria-expanded]="cell.hasChildren && cell.children.length ? 'true' : 'false'"
+                            [attr.role]="tableType === 'columnHeader' ? 'columnheader' : 'rowheader'"
+                            [attr.id]="pivotGridId + (tableType === 'columnHeader' ? 'ch-' : 'rh-') + (rowIndex + 1) + '-' + (colIndex + 1)"></th>
                         <td
                             *ngIf="cell && tableType === 'values'"
                             [kendoPivotGridCell]="cell"
                             tableType="values"
                             [colIndex]="colIndex"
-                            [rowIndex]="rowIndex"></td>
+                            [rowIndex]="rowIndex"
+                            role="gridcell"
+                            [attr.id]="pivotGridId + 'cell-' + (rowIndex + 1) + '-' + (colIndex + 1)"></td>
                     </ng-container>
                 </tr>
             </tbody>
@@ -287,6 +353,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { tableType: [{
                 type: Input
+            }], colWidth: [{
+                type: Input
             }] } });
 
 const DEFAULT_LOADER_SETTINGS = {
@@ -303,6 +371,13 @@ class PivotGridComponent {
         this.zone = zone;
         this.dataService = dataService;
         this.hostClass = true;
+        this.ariaRole = 'grid';
+        /**
+         * Specify the width of the column header and data cells. Value is treated as pixels.
+         *
+         * @default 200
+         */
+        this.columnHeadersWidth = 200;
         this.resizeObservers = [];
         this._loaderSettings = DEFAULT_LOADER_SETTINGS;
         this.subs = new Subscription();
@@ -328,6 +403,7 @@ class PivotGridComponent {
             }
         };
         validatePackage(packageMetadata);
+        dataService.wrapper = hostEl.nativeElement;
     }
     /**
      * Specify the type, size and color of the PivotGrid's loader.
@@ -368,12 +444,13 @@ class PivotGridComponent {
     }
 }
 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: [
+PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridComponent, selector: "kendo-pivotgrid", inputs: { loaderSettings: "loaderSettings", columnHeadersWidth: "columnHeadersWidth" }, host: { properties: { "class.k-pivotgrid": "this.hostClass", "attr.role": "this.ariaRole" } }, providers: [
         PivotGridDataService
     ], 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
+            [colWidth]="columnHeadersWidth"
             class="k-pivotgrid-column-headers"
             tableType="columnHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
@@ -382,6 +459,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             tableType="rowHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
             #valuesTable
+            [colWidth]="columnHeadersWidth"
             class="k-pivotgrid-values"
             tableType="values"></kendo-pivotgrid-table>
 
@@ -393,7 +471,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: i4.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", "colWidth"] }, { 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: [{
@@ -405,6 +483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <span class="k-pivotgrid-empty-cell"></span>
         <kendo-pivotgrid-table
             #colHeadersTable
+            [colWidth]="columnHeadersWidth"
             class="k-pivotgrid-column-headers"
             tableType="columnHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
@@ -413,6 +492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             tableType="rowHeader"></kendo-pivotgrid-table>
         <kendo-pivotgrid-table
             #valuesTable
+            [colWidth]="columnHeadersWidth"
             class="k-pivotgrid-values"
             tableType="values"></kendo-pivotgrid-table>
 
@@ -438,6 +518,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: PivotGridDataService }, { type: i2$1.ScrollbarWidthService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pivotgrid']
+            }], ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], colHeadersTable: [{
                 type: ViewChild,
                 args: ['colHeadersTable', { read: ElementRef }]
@@ -449,6 +532,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['valuesTable', { read: ElementRef }]
             }], loaderSettings: [{
                 type: Input
+            }], columnHeadersWidth: [{
+                type: Input
             }] } });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-pivotgrid",
-  "version": "0.1.5-dev.202205170847",
+  "version": "0.2.0-dev.202208181233",
   "description": "PivotGrid package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -31,10 +31,10 @@
     "@angular/core": "12 - 14",
     "@angular/forms": "12 - 14",
     "@progress/kendo-angular-common": "^3.0.0",
-    "@progress/kendo-data-query": "^1.5.5",
     "@progress/kendo-angular-indicators": "^2.0.0",
     "@progress/kendo-angular-intl": "^4.0.0",
     "@progress/kendo-angular-l10n": "^4.0.0",
+    "@progress/kendo-data-query": "^1.5.5",
     "@progress/kendo-licensing": "^1.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
@@ -70,11 +70,11 @@
     "fallbackTags": {
       "dev": "latest"
     },
-    "analyzeCommits": "@telerik/semantic-prerelease/analyzeCommits",
+    "analyzeCommits": "@progress/semantic-prerelease/analyzeCommits",
     "generateNotes": "@progress/kendo-angular-tasks/lib/generateNotes",
-    "getLastRelease": "@telerik/semantic-prerelease/getLastRelease",
-    "verifyConditions": "@telerik/semantic-prerelease/verifyConditions",
-    "verifyRelease": "@telerik/semantic-prerelease/verifyRelease"
+    "getLastRelease": "@progress/semantic-prerelease/getLastRelease",
+    "verifyConditions": "@progress/semantic-prerelease/verifyConditions",
+    "verifyRelease": "@progress/semantic-prerelease/verifyRelease"
   },
   "main": "bundles/kendo-angular-pivotgrid.umd.js",
   "module": "fesm2015/kendo-angular-pivotgrid.js",

package/pivotgrid.component.d.ts

@@ -15,6 +15,7 @@ export declare class PivotGridComponent implements AfterViewInit, AfterContentIn
     private zone;
     private dataService;
     hostClass: boolean;
+    ariaRole: string;
     private colHeadersTable;
     private rowHeadersTable;
     private valuesTable;
@@ -28,6 +29,12 @@ export declare class PivotGridComponent implements AfterViewInit, AfterContentIn
      */
     set loaderSettings(settings: LoaderSettings);
     get loaderSettings(): LoaderSettings;
+    /**
+     * Specify the width of the column header and data cells. Value is treated as pixels.
+     *
+     * @default 200
+     */
+    columnHeadersWidth: number;
     loading: boolean;
     private resizeObservers;
     private _loaderSettings;
@@ -39,5 +46,5 @@ export declare class PivotGridComponent implements AfterViewInit, AfterContentIn
     private resizeContainer;
     private handleScroll;
     static ɵfac: i0.ɵɵFactoryDeclaration<PivotGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PivotGridComponent, "kendo-pivotgrid", never, { "loaderSettings": "loaderSettings"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PivotGridComponent, "kendo-pivotgrid", never, { "loaderSettings": "loaderSettings"; "columnHeadersWidth": "columnHeadersWidth"; }, {}, never, never>;
 }

package/rendering/pivotgrid-table.component.d.ts

@@ -13,10 +13,12 @@ export declare class PivotGridTableComponent implements OnInit {
     headerItems: any;
     rows: any;
     tableType: string;
+    colWidth: number;
+    get pivotGridId(): string;
     private dataChangeSubs;
     constructor(dataService: PivotGridDataService);
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PivotGridTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PivotGridTableComponent, "kendo-pivotgrid-table", never, { "tableType": "tableType"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PivotGridTableComponent, "kendo-pivotgrid-table", never, { "tableType": "tableType"; "colWidth": "colWidth"; }, {}, never, never>;
 }

package/util.d.ts

@@ -24,3 +24,11 @@ export declare const syncScroll: (source: HTMLTableElement, targets: HTMLTableEl
  * @hidden
  */
 export declare const syncWheel: (event: Event, tables: Element[], prop: 'scrollTop' | 'scrollLeft', axis: 'X' | 'Y') => void;
+/**
+ * @hidden
+ */
+export declare const matchAriaAttributes: (wrapper: Element) => void;
+/**
+ * @hidden
+ */
+export declare const filterAndMap: (arr: any[], predicate: (item: any) => boolean, mapper: (item: any) => any) => any[];