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

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,89 @@ export const syncWheel = (event, tables, prop, axis) => {
             tables[1][prop] += delta;
     }
 };
+/**
+ * @hidden
+ */
+export function cloneTo(obj, result) {
+    for (let field in obj) {
+        if (obj.hasOwnProperty(field)) {
+            const value = obj[field];
+            if (Array.isArray(value)) {
+                result[field] = value.slice(0);
+            }
+            else if (value && typeof value === 'object' && !(value instanceof Date)) {
+                result[field] = result[field] || {};
+                cloneTo(value, result[field]);
+            }
+            else {
+                result[field] = value;
+            }
+        }
+    }
+}
+/**
+ * @hidden
+ */
+export function clone(obj) {
+    const result = {};
+    cloneTo(obj, result);
+    return result;
+}
+/**
+ * @hidden
+ */
+const getDocument = element => element.ownerDocument.documentElement;
+/**
+ * @hidden
+ */
+const getWindow = element => element.ownerDocument.defaultView;
+/**
+ * @hidden
+ */
+export const offset = element => {
+    const { clientTop, clientLeft } = getDocument(element);
+    const { pageYOffset, pageXOffset } = getWindow(element);
+    const { top, left } = element.getBoundingClientRect();
+    return {
+        top: top + pageYOffset - clientTop,
+        left: left + pageXOffset - clientLeft
+    };
+};
+/**
+ * @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 position = (target, before) => {
+    const targetRect = offset(target);
+    const { offsetWidth, offsetHeight } = target;
+    const left = targetRect.left + (before ? 0 : offsetWidth);
+    const top = targetRect.top + offsetHeight / 2;
+    const height = offsetHeight;
+    return { left, top, height };
+};
+/**
+ * @hidden
+ */
+export const filterAndMap = (arr, predicate, mapper) => arr.reduce((acc, curr) => predicate(curr) ? [...acc, mapper(curr)] : acc, []);