@progress/kendo-angular-pivotgrid 1.0.2 → 1.1.0-dev.202210190858
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/kendo-angular-pivotgrid.umd.js +1 -1
- package/configurator/chip-kb-nav.directive.d.ts +24 -0
- package/configurator/configurator.component.d.ts +20 -6
- package/esm2015/configurator/chip-kb-nav.directive.js +62 -0
- package/esm2015/configurator/chip-menu/chip-menu.component.js +1 -1
- package/esm2015/configurator/configurator.component.js +169 -31
- package/esm2015/data-binding/base-binding-directive.js +1 -0
- package/esm2015/localization/custom-messages.component.js +1 -1
- package/esm2015/package-metadata.js +1 -1
- package/esm2015/pivotgrid.component.js +59 -13
- package/esm2015/pivotgrid.module.js +5 -2
- package/esm2015/util.js +8 -0
- package/fesm2015/kendo-angular-pivotgrid.js +296 -49
- package/localization/custom-messages.component.d.ts +1 -1
- package/package.json +2 -2
- package/pivotgrid.component.d.ts +9 -0
- package/pivotgrid.module.d.ts +7 -6
- package/util.d.ts +4 -0
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, HostBinding, Input } from '@angular/core';
|
|
5
|
+
import { Component, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
|
|
6
|
+
import { TreeViewComponent } from '@progress/kendo-angular-treeview';
|
|
6
7
|
import { ConfiguratorService } from './configurator.service';
|
|
7
8
|
import { DropCueService } from './drop-cue.service';
|
|
8
9
|
import { from, of, Subscription } from 'rxjs';
|
|
9
10
|
import { mergeMap } from 'rxjs/operators';
|
|
10
|
-
import { clone } from '../util';
|
|
11
|
+
import { clone, swapItems } from '../util';
|
|
11
12
|
import { SinglePopupService } from './chip-menu/single-popup.service';
|
|
12
13
|
import * as i0 from "@angular/core";
|
|
13
14
|
import * as i1 from "../data-binding/pivotgrid-data.service";
|
|
@@ -21,19 +22,23 @@ import * as i8 from "@progress/kendo-angular-inputs";
|
|
|
21
22
|
import * as i9 from "./drop-target.directive";
|
|
22
23
|
import * as i10 from "./draggable.directive";
|
|
23
24
|
import * as i11 from "@progress/kendo-angular-common";
|
|
25
|
+
import * as i12 from "./chip-kb-nav.directive";
|
|
24
26
|
/**
|
|
25
27
|
* @hidden
|
|
26
28
|
* Represents the Kendo UI PivotGrid Configurator component for Angular.
|
|
27
29
|
*/
|
|
28
30
|
export class PivotGridConfiguratorComponent {
|
|
29
|
-
constructor(dataService, localization, configuratorService, cdr) {
|
|
31
|
+
constructor(dataService, localization, configuratorService, cdr, zone) {
|
|
30
32
|
this.dataService = dataService;
|
|
31
33
|
this.localization = localization;
|
|
32
34
|
this.configuratorService = configuratorService;
|
|
33
35
|
this.cdr = cdr;
|
|
36
|
+
this.zone = zone;
|
|
34
37
|
this.hostClass = true;
|
|
38
|
+
this.hostAriaRole = 'dialog';
|
|
35
39
|
this.orientation = 'vertical';
|
|
36
40
|
this.sort = new Array();
|
|
41
|
+
this.close = new EventEmitter();
|
|
37
42
|
this.checked = [];
|
|
38
43
|
this.subs = new Subscription();
|
|
39
44
|
/**
|
|
@@ -51,6 +56,9 @@ export class PivotGridConfiguratorComponent {
|
|
|
51
56
|
return of(node.children);
|
|
52
57
|
};
|
|
53
58
|
}
|
|
59
|
+
get headerTextId() {
|
|
60
|
+
return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-header`;
|
|
61
|
+
}
|
|
54
62
|
get isHorizontal() {
|
|
55
63
|
return this.orientation === 'horizontal';
|
|
56
64
|
}
|
|
@@ -79,6 +87,9 @@ export class PivotGridConfiguratorComponent {
|
|
|
79
87
|
this.cdr.detectChanges();
|
|
80
88
|
}));
|
|
81
89
|
}
|
|
90
|
+
ngAfterViewInit() {
|
|
91
|
+
this.treeView.focus();
|
|
92
|
+
}
|
|
82
93
|
ngOnDestroy() {
|
|
83
94
|
this.subs.unsubscribe();
|
|
84
95
|
}
|
|
@@ -90,6 +101,9 @@ export class PivotGridConfiguratorComponent {
|
|
|
90
101
|
getName(name) {
|
|
91
102
|
return name.toString();
|
|
92
103
|
}
|
|
104
|
+
contentLabelId(section) {
|
|
105
|
+
return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-${section}`;
|
|
106
|
+
}
|
|
93
107
|
setState(state) {
|
|
94
108
|
this.dataService.state = {
|
|
95
109
|
columnAxes: state.columnAxes,
|
|
@@ -100,6 +114,60 @@ export class PivotGridConfiguratorComponent {
|
|
|
100
114
|
};
|
|
101
115
|
this.state = this.configuratorService.state = state;
|
|
102
116
|
}
|
|
117
|
+
onReorder(ev, name, item) {
|
|
118
|
+
var _a, _b;
|
|
119
|
+
console.log(name, ev.direction);
|
|
120
|
+
const currentCollection = this.state[`${name}Axes`];
|
|
121
|
+
const itemIndex = currentCollection.indexOf(item);
|
|
122
|
+
switch (ev.direction) {
|
|
123
|
+
case 'right':
|
|
124
|
+
if (itemIndex !== currentCollection.length - 1) {
|
|
125
|
+
swapItems(currentCollection, itemIndex, itemIndex + 1);
|
|
126
|
+
this.dataService.state[`${name}Axes`] = currentCollection;
|
|
127
|
+
const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
|
|
128
|
+
this.setState(newState);
|
|
129
|
+
}
|
|
130
|
+
break;
|
|
131
|
+
case 'left':
|
|
132
|
+
if (itemIndex !== 0) {
|
|
133
|
+
swapItems(currentCollection, itemIndex, itemIndex - 1);
|
|
134
|
+
this.dataService.state[`${name}Axes`] = currentCollection;
|
|
135
|
+
const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
|
|
136
|
+
this.setState(newState);
|
|
137
|
+
this.cdr.detectChanges();
|
|
138
|
+
ev.sender.focus();
|
|
139
|
+
}
|
|
140
|
+
break;
|
|
141
|
+
case 'up':
|
|
142
|
+
if (name === 'row') {
|
|
143
|
+
currentCollection.splice(itemIndex, 1);
|
|
144
|
+
const columnAxes = this.state.columnAxes;
|
|
145
|
+
columnAxes.push(item);
|
|
146
|
+
this.dataService.state[`${name}Axes`] = currentCollection;
|
|
147
|
+
this.dataService.state[`columnAxes`] = columnAxes;
|
|
148
|
+
const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
|
|
149
|
+
this.setState(newState);
|
|
150
|
+
this.cdr.detectChanges();
|
|
151
|
+
(_a = this.columnsList) === null || _a === void 0 ? void 0 : _a.chips.last.focus();
|
|
152
|
+
}
|
|
153
|
+
break;
|
|
154
|
+
case 'down':
|
|
155
|
+
if (name === 'column') {
|
|
156
|
+
currentCollection.splice(itemIndex, 1);
|
|
157
|
+
const rowAxes = this.state.rowAxes;
|
|
158
|
+
rowAxes.push(item);
|
|
159
|
+
this.dataService.state[`${name}Axes`] = currentCollection;
|
|
160
|
+
this.dataService.state[`rowAxes`] = rowAxes;
|
|
161
|
+
const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
|
|
162
|
+
this.setState(newState);
|
|
163
|
+
this.cdr.detectChanges();
|
|
164
|
+
(_b = this.rowsList) === null || _b === void 0 ? void 0 : _b.chips.last.focus();
|
|
165
|
+
}
|
|
166
|
+
break;
|
|
167
|
+
default:
|
|
168
|
+
break;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
103
171
|
/**
|
|
104
172
|
* Returns the localized message for a given token
|
|
105
173
|
*/
|
|
@@ -131,12 +199,18 @@ export class PivotGridConfiguratorComponent {
|
|
|
131
199
|
* Updates the respective axis configuration of the current state
|
|
132
200
|
* when a chip is deleted from the UI
|
|
133
201
|
*/
|
|
134
|
-
onChipRemove(item, section) {
|
|
202
|
+
onChipRemove(ev, item, section) {
|
|
135
203
|
const filteredItems = this.dataService.state[`${section}Axes`].filter(descriptor => descriptor !== item);
|
|
136
204
|
this.dataService.state[`${section}Axes`] = filteredItems;
|
|
137
205
|
const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
|
|
138
206
|
this.checked = this.checked.filter(checkedItem => checkedItem.uniqueName !== item.name[0]);
|
|
139
207
|
this.setState(newState);
|
|
208
|
+
if (!this.navigation) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
;
|
|
212
|
+
const targetIndex = this.navigation.elements.indexOf(ev.sender.element.nativeElement);
|
|
213
|
+
this.zone.runOutsideAngular(() => setTimeout(() => this.navigation.focusElement(this.navigation.elements[targetIndex - 1], this.navigation.elements[targetIndex])));
|
|
140
214
|
}
|
|
141
215
|
/**
|
|
142
216
|
* Constructs an array with all selected fields.
|
|
@@ -196,6 +270,19 @@ export class PivotGridConfiguratorComponent {
|
|
|
196
270
|
payload: item
|
|
197
271
|
};
|
|
198
272
|
this.configuratorService.parseConfiguratorState(action);
|
|
273
|
+
const closestItem = event.target.closest('.k-treeview-item');
|
|
274
|
+
this.zone.runOutsideAngular(() => setTimeout(() => closestItem.focus()));
|
|
275
|
+
}
|
|
276
|
+
onTreeViewSelect(ev) {
|
|
277
|
+
var _a;
|
|
278
|
+
const closestItem = ev.target.closest('.k-treeview-item');
|
|
279
|
+
if (closestItem) {
|
|
280
|
+
(_a = closestItem.querySelector('.k-checkbox')) === null || _a === void 0 ? void 0 : _a.click();
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
onTreeViewEscape(ev) {
|
|
284
|
+
ev.stopImmediatePropagation();
|
|
285
|
+
this.close.emit();
|
|
199
286
|
}
|
|
200
287
|
handleSubmit() {
|
|
201
288
|
this.dataService.configuratorFieldChange.emit(this.dataService.state);
|
|
@@ -229,12 +316,12 @@ export class PivotGridConfiguratorComponent {
|
|
|
229
316
|
}
|
|
230
317
|
;
|
|
231
318
|
}
|
|
232
|
-
PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ConfiguratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
233
|
-
PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass" } }, providers: [
|
|
319
|
+
PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
320
|
+
PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
|
|
234
321
|
ConfiguratorService,
|
|
235
322
|
DropCueService,
|
|
236
323
|
SinglePopupService
|
|
237
|
-
], usesOnChanges: true, ngImport: i0, template: `
|
|
324
|
+
], viewQueries: [{ propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "columnsList", first: true, predicate: ["columnsChiplist"], descendants: true }, { propertyName: "rowsList", first: true, predicate: ["rowsChiplist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
238
325
|
<div
|
|
239
326
|
class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
|
|
240
327
|
[ngClass]="{
|
|
@@ -243,31 +330,36 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
243
330
|
}"
|
|
244
331
|
>
|
|
245
332
|
<div class="k-pivotgrid-configurator-header">
|
|
246
|
-
<div
|
|
333
|
+
<div
|
|
334
|
+
[id]="headerTextId"
|
|
335
|
+
class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
|
|
247
336
|
</div>
|
|
248
337
|
|
|
249
338
|
<div class="k-pivotgrid-configurator-content">
|
|
250
339
|
<div class="k-form" [class.k-form-horizontal]="isHorizontal">
|
|
251
340
|
<div class="k-form-field-wrapper">
|
|
252
341
|
<div class="k-form-field">
|
|
253
|
-
<span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
342
|
+
<span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
254
343
|
</div>
|
|
255
|
-
|
|
256
344
|
<div class="k-form-field">
|
|
257
345
|
<div class="k-fields-list-wrapper">
|
|
258
346
|
<kendo-treeview
|
|
347
|
+
#treeview
|
|
348
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('fields')"
|
|
349
|
+
(focus)="treeview.focus()"
|
|
259
350
|
[nodes]="fields"
|
|
260
351
|
textField="caption"
|
|
261
352
|
[children]="children"
|
|
262
353
|
[hasChildren]="hasChildren"
|
|
263
354
|
kendoTreeViewExpandable
|
|
264
355
|
(childrenLoaded)="handleChildrenLoaded($event)"
|
|
265
|
-
|
|
356
|
+
(keydown.space)="onTreeViewSelect($event)">
|
|
266
357
|
<ng-template kendoTreeViewNodeTemplate let-dataItem>
|
|
267
358
|
<input kendoCheckBox
|
|
268
359
|
*ngIf="isSelectable(dataItem)"
|
|
269
360
|
type="checkbox"
|
|
270
361
|
kendoCheckBox
|
|
362
|
+
tabindex="-1"
|
|
271
363
|
[checked]="isItemChecked(dataItem)"
|
|
272
364
|
(change)="handleCheckedChange($event, dataItem)"/>
|
|
273
365
|
{{ dataItem.caption }}
|
|
@@ -284,24 +376,28 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
284
376
|
|
|
285
377
|
<ng-template #verticalTemplate>
|
|
286
378
|
<div class="k-form-field" kendoDropTarget axes="columnAxes">
|
|
287
|
-
<span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
379
|
+
<span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
288
380
|
</div>
|
|
289
381
|
|
|
290
382
|
<kendo-chiplist
|
|
291
383
|
*ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
|
|
384
|
+
#columnsChiplist
|
|
292
385
|
kendoDropTarget
|
|
293
386
|
axes="columnAxes"
|
|
387
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
|
|
294
388
|
>
|
|
295
|
-
<ng-container *ngFor="let item of state.columnAxes">
|
|
389
|
+
<ng-container *ngFor="let item of state.columnAxes; let i = index;">
|
|
296
390
|
<kendo-chip *ngIf="item.name.length === 1"
|
|
297
391
|
kendoChipDraggable
|
|
298
392
|
kendoDraggable
|
|
299
393
|
kendoDropTarget
|
|
394
|
+
kendoChipKeyboardNavigation
|
|
300
395
|
[item]="item"
|
|
301
396
|
axes="columnAxes"
|
|
302
397
|
rounded="full"
|
|
303
398
|
[removable]="true"
|
|
304
|
-
(remove)="onChipRemove(item, 'column')"
|
|
399
|
+
(remove)="onChipRemove($event, item, 'column')"
|
|
400
|
+
(reorder)="onReorder($event, 'column', item)"
|
|
305
401
|
>{{ getName(item.name) }}
|
|
306
402
|
<kendo-pivot-chip-menu
|
|
307
403
|
[chip]="item">
|
|
@@ -315,24 +411,28 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
315
411
|
</ng-template>
|
|
316
412
|
|
|
317
413
|
<div class="k-form-field" kendoDropTarget axes="rowAxes">
|
|
318
|
-
<span class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
414
|
+
<span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
319
415
|
</div>
|
|
320
416
|
|
|
321
417
|
<kendo-chiplist
|
|
322
418
|
*ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
|
|
419
|
+
#rowsChiplist
|
|
323
420
|
kendoDropTarget
|
|
324
421
|
axes="rowAxes"
|
|
422
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
|
|
325
423
|
>
|
|
326
424
|
<ng-container *ngFor="let item of state.rowAxes">
|
|
327
425
|
<kendo-chip *ngIf="item.name.length === 1"
|
|
328
426
|
kendoChipDraggable
|
|
329
427
|
kendoDraggable
|
|
330
428
|
kendoDropTarget
|
|
429
|
+
kendoChipKeyboardNavigation
|
|
331
430
|
[item]="item"
|
|
332
431
|
axes="rowAxes"
|
|
333
432
|
rounded="full"
|
|
334
433
|
[removable]="true"
|
|
335
|
-
(remove)="onChipRemove(item, 'row')"
|
|
434
|
+
(remove)="onChipRemove($event, item, 'row')"
|
|
435
|
+
(reorder)="onReorder($event, 'row', item)"
|
|
336
436
|
>
|
|
337
437
|
{{ getName(item.name) }}
|
|
338
438
|
|
|
@@ -354,23 +454,26 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
354
454
|
|
|
355
455
|
<ng-template #verticalMeasuresTemplate>
|
|
356
456
|
<div class="k-form-field" kendoDropTarget axes="measureAxes">
|
|
357
|
-
<span class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
457
|
+
<span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
358
458
|
</div>
|
|
359
459
|
|
|
360
460
|
<kendo-chiplist
|
|
361
461
|
*ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
|
|
362
462
|
kendoDropTarget
|
|
363
463
|
axes="measureAxes"
|
|
464
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
|
|
364
465
|
>
|
|
365
466
|
<kendo-chip *ngFor="let item of state.measureAxes"
|
|
366
467
|
kendoChipDraggable
|
|
367
468
|
kendoDraggable
|
|
368
469
|
kendoDropTarget
|
|
470
|
+
kendoChipKeyboardNavigation
|
|
369
471
|
[item]="item"
|
|
370
472
|
axes="measureAxes"
|
|
371
473
|
rounded="full"
|
|
372
474
|
[removable]="true"
|
|
373
|
-
(remove)="onChipRemove(item, 'measure')"
|
|
475
|
+
(remove)="onChipRemove($event, item, 'measure')"
|
|
476
|
+
(reorder)="onReorder($event, 'measure', item)"
|
|
374
477
|
>
|
|
375
478
|
{{ getName(item.name) }}
|
|
376
479
|
</kendo-chip>
|
|
@@ -388,7 +491,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
388
491
|
<button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
|
|
389
492
|
</div>
|
|
390
493
|
</div>
|
|
391
|
-
`, isInline: true, styles: ["\n .k-form .k-chip-list {\n width: 100%;\n }\n\n .k-form .k-form-field,\n .k-form .k-settings-description {\n padding-top: 1em;\n margin-top: 0;\n }\n\n .k-form.k-form-horizontal .k-form-field,\n .k-form.k-form-horizontal .k-chip-list {\n padding-top: 0;\n padding-left: 16px;\n }\n\n .k-form.k-form-horizontal .k-form-field-wrapper {\n padding-left: 0;\n }\n "], components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: i6.ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i11.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
494
|
+
`, isInline: true, styles: ["\n .k-form .k-chip-list {\n width: 100%;\n }\n\n .k-form .k-form-field,\n .k-form .k-settings-description {\n padding-top: 1em;\n margin-top: 0;\n }\n\n .k-form.k-form-horizontal .k-form-field,\n .k-form.k-form-horizontal .k-chip-list {\n padding-top: 0;\n padding-left: 16px;\n }\n\n .k-form.k-form-horizontal .k-form-field-wrapper {\n padding-left: 0;\n }\n "], components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: i6.ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i11.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i12.ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
392
495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
|
|
393
496
|
type: Component,
|
|
394
497
|
args: [{
|
|
@@ -407,31 +510,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
407
510
|
}"
|
|
408
511
|
>
|
|
409
512
|
<div class="k-pivotgrid-configurator-header">
|
|
410
|
-
<div
|
|
513
|
+
<div
|
|
514
|
+
[id]="headerTextId"
|
|
515
|
+
class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
|
|
411
516
|
</div>
|
|
412
517
|
|
|
413
518
|
<div class="k-pivotgrid-configurator-content">
|
|
414
519
|
<div class="k-form" [class.k-form-horizontal]="isHorizontal">
|
|
415
520
|
<div class="k-form-field-wrapper">
|
|
416
521
|
<div class="k-form-field">
|
|
417
|
-
<span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
522
|
+
<span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
418
523
|
</div>
|
|
419
|
-
|
|
420
524
|
<div class="k-form-field">
|
|
421
525
|
<div class="k-fields-list-wrapper">
|
|
422
526
|
<kendo-treeview
|
|
527
|
+
#treeview
|
|
528
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('fields')"
|
|
529
|
+
(focus)="treeview.focus()"
|
|
423
530
|
[nodes]="fields"
|
|
424
531
|
textField="caption"
|
|
425
532
|
[children]="children"
|
|
426
533
|
[hasChildren]="hasChildren"
|
|
427
534
|
kendoTreeViewExpandable
|
|
428
535
|
(childrenLoaded)="handleChildrenLoaded($event)"
|
|
429
|
-
|
|
536
|
+
(keydown.space)="onTreeViewSelect($event)">
|
|
430
537
|
<ng-template kendoTreeViewNodeTemplate let-dataItem>
|
|
431
538
|
<input kendoCheckBox
|
|
432
539
|
*ngIf="isSelectable(dataItem)"
|
|
433
540
|
type="checkbox"
|
|
434
541
|
kendoCheckBox
|
|
542
|
+
tabindex="-1"
|
|
435
543
|
[checked]="isItemChecked(dataItem)"
|
|
436
544
|
(change)="handleCheckedChange($event, dataItem)"/>
|
|
437
545
|
{{ dataItem.caption }}
|
|
@@ -448,24 +556,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
448
556
|
|
|
449
557
|
<ng-template #verticalTemplate>
|
|
450
558
|
<div class="k-form-field" kendoDropTarget axes="columnAxes">
|
|
451
|
-
<span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
559
|
+
<span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
452
560
|
</div>
|
|
453
561
|
|
|
454
562
|
<kendo-chiplist
|
|
455
563
|
*ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
|
|
564
|
+
#columnsChiplist
|
|
456
565
|
kendoDropTarget
|
|
457
566
|
axes="columnAxes"
|
|
567
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
|
|
458
568
|
>
|
|
459
|
-
<ng-container *ngFor="let item of state.columnAxes">
|
|
569
|
+
<ng-container *ngFor="let item of state.columnAxes; let i = index;">
|
|
460
570
|
<kendo-chip *ngIf="item.name.length === 1"
|
|
461
571
|
kendoChipDraggable
|
|
462
572
|
kendoDraggable
|
|
463
573
|
kendoDropTarget
|
|
574
|
+
kendoChipKeyboardNavigation
|
|
464
575
|
[item]="item"
|
|
465
576
|
axes="columnAxes"
|
|
466
577
|
rounded="full"
|
|
467
578
|
[removable]="true"
|
|
468
|
-
(remove)="onChipRemove(item, 'column')"
|
|
579
|
+
(remove)="onChipRemove($event, item, 'column')"
|
|
580
|
+
(reorder)="onReorder($event, 'column', item)"
|
|
469
581
|
>{{ getName(item.name) }}
|
|
470
582
|
<kendo-pivot-chip-menu
|
|
471
583
|
[chip]="item">
|
|
@@ -479,24 +591,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
479
591
|
</ng-template>
|
|
480
592
|
|
|
481
593
|
<div class="k-form-field" kendoDropTarget axes="rowAxes">
|
|
482
|
-
<span class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
594
|
+
<span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
483
595
|
</div>
|
|
484
596
|
|
|
485
597
|
<kendo-chiplist
|
|
486
598
|
*ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
|
|
599
|
+
#rowsChiplist
|
|
487
600
|
kendoDropTarget
|
|
488
601
|
axes="rowAxes"
|
|
602
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
|
|
489
603
|
>
|
|
490
604
|
<ng-container *ngFor="let item of state.rowAxes">
|
|
491
605
|
<kendo-chip *ngIf="item.name.length === 1"
|
|
492
606
|
kendoChipDraggable
|
|
493
607
|
kendoDraggable
|
|
494
608
|
kendoDropTarget
|
|
609
|
+
kendoChipKeyboardNavigation
|
|
495
610
|
[item]="item"
|
|
496
611
|
axes="rowAxes"
|
|
497
612
|
rounded="full"
|
|
498
613
|
[removable]="true"
|
|
499
|
-
(remove)="onChipRemove(item, 'row')"
|
|
614
|
+
(remove)="onChipRemove($event, item, 'row')"
|
|
615
|
+
(reorder)="onReorder($event, 'row', item)"
|
|
500
616
|
>
|
|
501
617
|
{{ getName(item.name) }}
|
|
502
618
|
|
|
@@ -518,23 +634,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
518
634
|
|
|
519
635
|
<ng-template #verticalMeasuresTemplate>
|
|
520
636
|
<div class="k-form-field" kendoDropTarget axes="measureAxes">
|
|
521
|
-
<span class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
637
|
+
<span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
522
638
|
</div>
|
|
523
639
|
|
|
524
640
|
<kendo-chiplist
|
|
525
641
|
*ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
|
|
526
642
|
kendoDropTarget
|
|
527
643
|
axes="measureAxes"
|
|
644
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
|
|
528
645
|
>
|
|
529
646
|
<kendo-chip *ngFor="let item of state.measureAxes"
|
|
530
647
|
kendoChipDraggable
|
|
531
648
|
kendoDraggable
|
|
532
649
|
kendoDropTarget
|
|
650
|
+
kendoChipKeyboardNavigation
|
|
533
651
|
[item]="item"
|
|
534
652
|
axes="measureAxes"
|
|
535
653
|
rounded="full"
|
|
536
654
|
[removable]="true"
|
|
537
|
-
(remove)="onChipRemove(item, 'measure')"
|
|
655
|
+
(remove)="onChipRemove($event, item, 'measure')"
|
|
656
|
+
(reorder)="onReorder($event, 'measure', item)"
|
|
538
657
|
>
|
|
539
658
|
{{ getName(item.name) }}
|
|
540
659
|
</kendo-chip>
|
|
@@ -575,13 +694,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
575
694
|
}
|
|
576
695
|
`]
|
|
577
696
|
}]
|
|
578
|
-
}], ctorParameters: function () { return [{ type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
|
|
697
|
+
}], ctorParameters: function () { return [{ type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ConfiguratorService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { hostClass: [{
|
|
579
698
|
type: HostBinding,
|
|
580
699
|
args: ['class.k-pivotgrid-configurator']
|
|
700
|
+
}], hostAriaRole: [{
|
|
701
|
+
type: HostBinding,
|
|
702
|
+
args: ['attr.role']
|
|
703
|
+
}], headerTextId: [{
|
|
704
|
+
type: HostBinding,
|
|
705
|
+
args: ['attr.aria-labelledby']
|
|
581
706
|
}], orientation: [{
|
|
582
707
|
type: Input
|
|
583
708
|
}], sort: [{
|
|
584
709
|
type: Input
|
|
585
710
|
}], filter: [{
|
|
586
711
|
type: Input
|
|
712
|
+
}], navigation: [{
|
|
713
|
+
type: Input
|
|
714
|
+
}], close: [{
|
|
715
|
+
type: Output
|
|
716
|
+
}], treeView: [{
|
|
717
|
+
type: ViewChild,
|
|
718
|
+
args: [TreeViewComponent]
|
|
719
|
+
}], columnsList: [{
|
|
720
|
+
type: ViewChild,
|
|
721
|
+
args: ['columnsChiplist']
|
|
722
|
+
}], rowsList: [{
|
|
723
|
+
type: ViewChild,
|
|
724
|
+
args: ['rowsChiplist']
|
|
587
725
|
}] } });
|
|
@@ -8,7 +8,7 @@ import * as i0 from "@angular/core";
|
|
|
8
8
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
9
9
|
/**
|
|
10
10
|
* Custom component messages override default component messages
|
|
11
|
-
* ([see example]({% slug globalization_pivotgrid %}#toc-
|
|
11
|
+
* ([see example]({% slug globalization_pivotgrid %}#toc-custom-messages)).
|
|
12
12
|
*/
|
|
13
13
|
export class CustomMessagesComponent extends PivotGridMessages {
|
|
14
14
|
constructor(service) {
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-pivotgrid',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1666169839,
|
|
13
13
|
version: '',
|
|
14
14
|
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'
|
|
15
15
|
};
|