@progress/kendo-angular-pivotgrid 1.0.3-dev.202210121054 → 1.1.0-dev.202210240946
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 +25 -0
- package/configurator/configurator.component.d.ts +28 -6
- package/esm2015/configurator/chip-kb-nav.directive.js +59 -0
- package/esm2015/configurator/chip-menu/chip-menu.component.js +1 -1
- package/esm2015/configurator/configurator.component.js +169 -29
- 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 +293 -47
- 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,35 @@ export class PivotGridConfiguratorComponent {
|
|
|
100
114
|
};
|
|
101
115
|
this.state = this.configuratorService.state = state;
|
|
102
116
|
}
|
|
117
|
+
onReorder(ev, name, item) {
|
|
118
|
+
const currentCollection = this.state[`${name}Axes`];
|
|
119
|
+
const itemIndex = currentCollection.indexOf(item);
|
|
120
|
+
switch (ev.direction) {
|
|
121
|
+
case 'right':
|
|
122
|
+
if (itemIndex !== currentCollection.length - 1) {
|
|
123
|
+
this.swapChips(currentCollection, itemIndex, ev.direction, name);
|
|
124
|
+
}
|
|
125
|
+
break;
|
|
126
|
+
case 'left':
|
|
127
|
+
if (itemIndex !== 0) {
|
|
128
|
+
this.swapChips(currentCollection, itemIndex, ev.direction, name);
|
|
129
|
+
ev.sender.focus();
|
|
130
|
+
}
|
|
131
|
+
break;
|
|
132
|
+
case 'up':
|
|
133
|
+
if (name === 'row') {
|
|
134
|
+
this.moveChip(currentCollection, item, itemIndex, name);
|
|
135
|
+
}
|
|
136
|
+
break;
|
|
137
|
+
case 'down':
|
|
138
|
+
if (name === 'column') {
|
|
139
|
+
this.moveChip(currentCollection, item, itemIndex, name);
|
|
140
|
+
}
|
|
141
|
+
break;
|
|
142
|
+
default:
|
|
143
|
+
break;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
103
146
|
/**
|
|
104
147
|
* Returns the localized message for a given token
|
|
105
148
|
*/
|
|
@@ -131,12 +174,18 @@ export class PivotGridConfiguratorComponent {
|
|
|
131
174
|
* Updates the respective axis configuration of the current state
|
|
132
175
|
* when a chip is deleted from the UI
|
|
133
176
|
*/
|
|
134
|
-
onChipRemove(item, section) {
|
|
177
|
+
onChipRemove(ev, item, section) {
|
|
135
178
|
const filteredItems = this.dataService.state[`${section}Axes`].filter(descriptor => descriptor !== item);
|
|
136
179
|
this.dataService.state[`${section}Axes`] = filteredItems;
|
|
137
180
|
const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
|
|
138
181
|
this.checked = this.checked.filter(checkedItem => checkedItem.uniqueName !== item.name[0]);
|
|
139
182
|
this.setState(newState);
|
|
183
|
+
if (!this.navigation) {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
;
|
|
187
|
+
const targetIndex = this.navigation.elements.indexOf(ev.sender.element.nativeElement);
|
|
188
|
+
this.zone.runOutsideAngular(() => setTimeout(() => this.navigation.focusElement(this.navigation.elements[targetIndex - 1], this.navigation.elements[targetIndex])));
|
|
140
189
|
}
|
|
141
190
|
/**
|
|
142
191
|
* Constructs an array with all selected fields.
|
|
@@ -196,6 +245,19 @@ export class PivotGridConfiguratorComponent {
|
|
|
196
245
|
payload: item
|
|
197
246
|
};
|
|
198
247
|
this.configuratorService.parseConfiguratorState(action);
|
|
248
|
+
const closestItem = event.target.closest('.k-treeview-item');
|
|
249
|
+
this.zone.runOutsideAngular(() => setTimeout(() => closestItem.focus()));
|
|
250
|
+
}
|
|
251
|
+
onTreeViewSelect(ev) {
|
|
252
|
+
var _a;
|
|
253
|
+
const closestItem = ev.target.closest('.k-treeview-item');
|
|
254
|
+
if (closestItem) {
|
|
255
|
+
(_a = closestItem.querySelector('.k-checkbox')) === null || _a === void 0 ? void 0 : _a.click();
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
onTreeViewEscape(ev) {
|
|
259
|
+
ev.stopImmediatePropagation();
|
|
260
|
+
this.close.emit();
|
|
199
261
|
}
|
|
200
262
|
handleSubmit() {
|
|
201
263
|
this.dataService.configuratorFieldChange.emit(this.dataService.state);
|
|
@@ -228,13 +290,40 @@ export class PivotGridConfiguratorComponent {
|
|
|
228
290
|
return Array.from(result);
|
|
229
291
|
}
|
|
230
292
|
;
|
|
293
|
+
/**
|
|
294
|
+
* Swaps chips within the same ChipList
|
|
295
|
+
*/
|
|
296
|
+
swapChips(collection, itemIndex, direction, name) {
|
|
297
|
+
const targetIndex = itemIndex + (direction === 'right' ? 1 : -1);
|
|
298
|
+
swapItems(collection, itemIndex, targetIndex);
|
|
299
|
+
this.dataService.state[`${name}Axes`] = collection;
|
|
300
|
+
const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
|
|
301
|
+
this.setState(newState);
|
|
302
|
+
this.cdr.detectChanges();
|
|
303
|
+
}
|
|
304
|
+
/**
|
|
305
|
+
* Moves a chip from one ChipList to another
|
|
306
|
+
*/
|
|
307
|
+
moveChip(collection, item, itemIndex, name) {
|
|
308
|
+
var _a;
|
|
309
|
+
collection.splice(itemIndex, 1);
|
|
310
|
+
const targetCollectionName = name === 'row' ? 'column' : 'row';
|
|
311
|
+
const axes = this.state[`${targetCollectionName}Axes`];
|
|
312
|
+
axes.push(item);
|
|
313
|
+
this.dataService.state[`${name}Axes`] = collection;
|
|
314
|
+
this.dataService.state[targetCollectionName] = axes;
|
|
315
|
+
const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
|
|
316
|
+
this.setState(newState);
|
|
317
|
+
this.cdr.detectChanges();
|
|
318
|
+
(_a = this[`${targetCollectionName}sList`]) === null || _a === void 0 ? void 0 : _a.chips.last.focus();
|
|
319
|
+
}
|
|
231
320
|
}
|
|
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: [
|
|
321
|
+
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 });
|
|
322
|
+
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
323
|
ConfiguratorService,
|
|
235
324
|
DropCueService,
|
|
236
325
|
SinglePopupService
|
|
237
|
-
], usesOnChanges: true, ngImport: i0, template: `
|
|
326
|
+
], 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
327
|
<div
|
|
239
328
|
class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
|
|
240
329
|
[ngClass]="{
|
|
@@ -243,31 +332,36 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
243
332
|
}"
|
|
244
333
|
>
|
|
245
334
|
<div class="k-pivotgrid-configurator-header">
|
|
246
|
-
<div
|
|
335
|
+
<div
|
|
336
|
+
[id]="headerTextId"
|
|
337
|
+
class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
|
|
247
338
|
</div>
|
|
248
339
|
|
|
249
340
|
<div class="k-pivotgrid-configurator-content">
|
|
250
341
|
<div class="k-form" [class.k-form-horizontal]="isHorizontal">
|
|
251
342
|
<div class="k-form-field-wrapper">
|
|
252
343
|
<div class="k-form-field">
|
|
253
|
-
<span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
344
|
+
<span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
254
345
|
</div>
|
|
255
|
-
|
|
256
346
|
<div class="k-form-field">
|
|
257
347
|
<div class="k-fields-list-wrapper">
|
|
258
348
|
<kendo-treeview
|
|
349
|
+
#treeview
|
|
350
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('fields')"
|
|
351
|
+
(focus)="treeview.focus()"
|
|
259
352
|
[nodes]="fields"
|
|
260
353
|
textField="caption"
|
|
261
354
|
[children]="children"
|
|
262
355
|
[hasChildren]="hasChildren"
|
|
263
356
|
kendoTreeViewExpandable
|
|
264
357
|
(childrenLoaded)="handleChildrenLoaded($event)"
|
|
265
|
-
|
|
358
|
+
(keydown.space)="onTreeViewSelect($event)">
|
|
266
359
|
<ng-template kendoTreeViewNodeTemplate let-dataItem>
|
|
267
360
|
<input kendoCheckBox
|
|
268
361
|
*ngIf="isSelectable(dataItem)"
|
|
269
362
|
type="checkbox"
|
|
270
363
|
kendoCheckBox
|
|
364
|
+
tabindex="-1"
|
|
271
365
|
[checked]="isItemChecked(dataItem)"
|
|
272
366
|
(change)="handleCheckedChange($event, dataItem)"/>
|
|
273
367
|
{{ dataItem.caption }}
|
|
@@ -284,24 +378,28 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
284
378
|
|
|
285
379
|
<ng-template #verticalTemplate>
|
|
286
380
|
<div class="k-form-field" kendoDropTarget axes="columnAxes">
|
|
287
|
-
<span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
381
|
+
<span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
288
382
|
</div>
|
|
289
383
|
|
|
290
384
|
<kendo-chiplist
|
|
291
385
|
*ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
|
|
386
|
+
#columnsChiplist
|
|
292
387
|
kendoDropTarget
|
|
293
388
|
axes="columnAxes"
|
|
389
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
|
|
294
390
|
>
|
|
295
391
|
<ng-container *ngFor="let item of state.columnAxes">
|
|
296
392
|
<kendo-chip *ngIf="item.name.length === 1"
|
|
297
393
|
kendoChipDraggable
|
|
298
394
|
kendoDraggable
|
|
299
395
|
kendoDropTarget
|
|
396
|
+
kendoChipKeyboardNavigation
|
|
300
397
|
[item]="item"
|
|
301
398
|
axes="columnAxes"
|
|
302
399
|
rounded="full"
|
|
303
400
|
[removable]="true"
|
|
304
|
-
(remove)="onChipRemove(item, 'column')"
|
|
401
|
+
(remove)="onChipRemove($event, item, 'column')"
|
|
402
|
+
(reorder)="onReorder($event, 'column', item)"
|
|
305
403
|
>{{ getName(item.name) }}
|
|
306
404
|
<kendo-pivot-chip-menu
|
|
307
405
|
[chip]="item">
|
|
@@ -315,24 +413,28 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
315
413
|
</ng-template>
|
|
316
414
|
|
|
317
415
|
<div class="k-form-field" kendoDropTarget axes="rowAxes">
|
|
318
|
-
<span class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
416
|
+
<span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
319
417
|
</div>
|
|
320
418
|
|
|
321
419
|
<kendo-chiplist
|
|
322
420
|
*ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
|
|
421
|
+
#rowsChiplist
|
|
323
422
|
kendoDropTarget
|
|
324
423
|
axes="rowAxes"
|
|
424
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
|
|
325
425
|
>
|
|
326
426
|
<ng-container *ngFor="let item of state.rowAxes">
|
|
327
427
|
<kendo-chip *ngIf="item.name.length === 1"
|
|
328
428
|
kendoChipDraggable
|
|
329
429
|
kendoDraggable
|
|
330
430
|
kendoDropTarget
|
|
431
|
+
kendoChipKeyboardNavigation
|
|
331
432
|
[item]="item"
|
|
332
433
|
axes="rowAxes"
|
|
333
434
|
rounded="full"
|
|
334
435
|
[removable]="true"
|
|
335
|
-
(remove)="onChipRemove(item, 'row')"
|
|
436
|
+
(remove)="onChipRemove($event, item, 'row')"
|
|
437
|
+
(reorder)="onReorder($event, 'row', item)"
|
|
336
438
|
>
|
|
337
439
|
{{ getName(item.name) }}
|
|
338
440
|
|
|
@@ -354,23 +456,26 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
354
456
|
|
|
355
457
|
<ng-template #verticalMeasuresTemplate>
|
|
356
458
|
<div class="k-form-field" kendoDropTarget axes="measureAxes">
|
|
357
|
-
<span class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
459
|
+
<span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
358
460
|
</div>
|
|
359
461
|
|
|
360
462
|
<kendo-chiplist
|
|
361
463
|
*ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
|
|
362
464
|
kendoDropTarget
|
|
363
465
|
axes="measureAxes"
|
|
466
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
|
|
364
467
|
>
|
|
365
468
|
<kendo-chip *ngFor="let item of state.measureAxes"
|
|
366
469
|
kendoChipDraggable
|
|
367
470
|
kendoDraggable
|
|
368
471
|
kendoDropTarget
|
|
472
|
+
kendoChipKeyboardNavigation
|
|
369
473
|
[item]="item"
|
|
370
474
|
axes="measureAxes"
|
|
371
475
|
rounded="full"
|
|
372
476
|
[removable]="true"
|
|
373
|
-
(remove)="onChipRemove(item, 'measure')"
|
|
477
|
+
(remove)="onChipRemove($event, item, 'measure')"
|
|
478
|
+
(reorder)="onReorder($event, 'measure', item)"
|
|
374
479
|
>
|
|
375
480
|
{{ getName(item.name) }}
|
|
376
481
|
</kendo-chip>
|
|
@@ -388,7 +493,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
388
493
|
<button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
|
|
389
494
|
</div>
|
|
390
495
|
</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"] }] });
|
|
496
|
+
`, 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
497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
|
|
393
498
|
type: Component,
|
|
394
499
|
args: [{
|
|
@@ -407,31 +512,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
407
512
|
}"
|
|
408
513
|
>
|
|
409
514
|
<div class="k-pivotgrid-configurator-header">
|
|
410
|
-
<div
|
|
515
|
+
<div
|
|
516
|
+
[id]="headerTextId"
|
|
517
|
+
class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
|
|
411
518
|
</div>
|
|
412
519
|
|
|
413
520
|
<div class="k-pivotgrid-configurator-content">
|
|
414
521
|
<div class="k-form" [class.k-form-horizontal]="isHorizontal">
|
|
415
522
|
<div class="k-form-field-wrapper">
|
|
416
523
|
<div class="k-form-field">
|
|
417
|
-
<span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
524
|
+
<span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
418
525
|
</div>
|
|
419
|
-
|
|
420
526
|
<div class="k-form-field">
|
|
421
527
|
<div class="k-fields-list-wrapper">
|
|
422
528
|
<kendo-treeview
|
|
529
|
+
#treeview
|
|
530
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('fields')"
|
|
531
|
+
(focus)="treeview.focus()"
|
|
423
532
|
[nodes]="fields"
|
|
424
533
|
textField="caption"
|
|
425
534
|
[children]="children"
|
|
426
535
|
[hasChildren]="hasChildren"
|
|
427
536
|
kendoTreeViewExpandable
|
|
428
537
|
(childrenLoaded)="handleChildrenLoaded($event)"
|
|
429
|
-
|
|
538
|
+
(keydown.space)="onTreeViewSelect($event)">
|
|
430
539
|
<ng-template kendoTreeViewNodeTemplate let-dataItem>
|
|
431
540
|
<input kendoCheckBox
|
|
432
541
|
*ngIf="isSelectable(dataItem)"
|
|
433
542
|
type="checkbox"
|
|
434
543
|
kendoCheckBox
|
|
544
|
+
tabindex="-1"
|
|
435
545
|
[checked]="isItemChecked(dataItem)"
|
|
436
546
|
(change)="handleCheckedChange($event, dataItem)"/>
|
|
437
547
|
{{ dataItem.caption }}
|
|
@@ -448,24 +558,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
448
558
|
|
|
449
559
|
<ng-template #verticalTemplate>
|
|
450
560
|
<div class="k-form-field" kendoDropTarget axes="columnAxes">
|
|
451
|
-
<span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
561
|
+
<span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
452
562
|
</div>
|
|
453
563
|
|
|
454
564
|
<kendo-chiplist
|
|
455
565
|
*ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
|
|
566
|
+
#columnsChiplist
|
|
456
567
|
kendoDropTarget
|
|
457
568
|
axes="columnAxes"
|
|
569
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
|
|
458
570
|
>
|
|
459
571
|
<ng-container *ngFor="let item of state.columnAxes">
|
|
460
572
|
<kendo-chip *ngIf="item.name.length === 1"
|
|
461
573
|
kendoChipDraggable
|
|
462
574
|
kendoDraggable
|
|
463
575
|
kendoDropTarget
|
|
576
|
+
kendoChipKeyboardNavigation
|
|
464
577
|
[item]="item"
|
|
465
578
|
axes="columnAxes"
|
|
466
579
|
rounded="full"
|
|
467
580
|
[removable]="true"
|
|
468
|
-
(remove)="onChipRemove(item, 'column')"
|
|
581
|
+
(remove)="onChipRemove($event, item, 'column')"
|
|
582
|
+
(reorder)="onReorder($event, 'column', item)"
|
|
469
583
|
>{{ getName(item.name) }}
|
|
470
584
|
<kendo-pivot-chip-menu
|
|
471
585
|
[chip]="item">
|
|
@@ -479,24 +593,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
479
593
|
</ng-template>
|
|
480
594
|
|
|
481
595
|
<div class="k-form-field" kendoDropTarget axes="rowAxes">
|
|
482
|
-
<span class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
596
|
+
<span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
483
597
|
</div>
|
|
484
598
|
|
|
485
599
|
<kendo-chiplist
|
|
486
600
|
*ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
|
|
601
|
+
#rowsChiplist
|
|
487
602
|
kendoDropTarget
|
|
488
603
|
axes="rowAxes"
|
|
604
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
|
|
489
605
|
>
|
|
490
606
|
<ng-container *ngFor="let item of state.rowAxes">
|
|
491
607
|
<kendo-chip *ngIf="item.name.length === 1"
|
|
492
608
|
kendoChipDraggable
|
|
493
609
|
kendoDraggable
|
|
494
610
|
kendoDropTarget
|
|
611
|
+
kendoChipKeyboardNavigation
|
|
495
612
|
[item]="item"
|
|
496
613
|
axes="rowAxes"
|
|
497
614
|
rounded="full"
|
|
498
615
|
[removable]="true"
|
|
499
|
-
(remove)="onChipRemove(item, 'row')"
|
|
616
|
+
(remove)="onChipRemove($event, item, 'row')"
|
|
617
|
+
(reorder)="onReorder($event, 'row', item)"
|
|
500
618
|
>
|
|
501
619
|
{{ getName(item.name) }}
|
|
502
620
|
|
|
@@ -518,23 +636,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
518
636
|
|
|
519
637
|
<ng-template #verticalMeasuresTemplate>
|
|
520
638
|
<div class="k-form-field" kendoDropTarget axes="measureAxes">
|
|
521
|
-
<span class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
639
|
+
<span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
522
640
|
</div>
|
|
523
641
|
|
|
524
642
|
<kendo-chiplist
|
|
525
643
|
*ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
|
|
526
644
|
kendoDropTarget
|
|
527
645
|
axes="measureAxes"
|
|
646
|
+
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
|
|
528
647
|
>
|
|
529
648
|
<kendo-chip *ngFor="let item of state.measureAxes"
|
|
530
649
|
kendoChipDraggable
|
|
531
650
|
kendoDraggable
|
|
532
651
|
kendoDropTarget
|
|
652
|
+
kendoChipKeyboardNavigation
|
|
533
653
|
[item]="item"
|
|
534
654
|
axes="measureAxes"
|
|
535
655
|
rounded="full"
|
|
536
656
|
[removable]="true"
|
|
537
|
-
(remove)="onChipRemove(item, 'measure')"
|
|
657
|
+
(remove)="onChipRemove($event, item, 'measure')"
|
|
658
|
+
(reorder)="onReorder($event, 'measure', item)"
|
|
538
659
|
>
|
|
539
660
|
{{ getName(item.name) }}
|
|
540
661
|
</kendo-chip>
|
|
@@ -575,13 +696,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
575
696
|
}
|
|
576
697
|
`]
|
|
577
698
|
}]
|
|
578
|
-
}], ctorParameters: function () { return [{ type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
|
|
699
|
+
}], ctorParameters: function () { return [{ type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ConfiguratorService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { hostClass: [{
|
|
579
700
|
type: HostBinding,
|
|
580
701
|
args: ['class.k-pivotgrid-configurator']
|
|
702
|
+
}], hostAriaRole: [{
|
|
703
|
+
type: HostBinding,
|
|
704
|
+
args: ['attr.role']
|
|
705
|
+
}], headerTextId: [{
|
|
706
|
+
type: HostBinding,
|
|
707
|
+
args: ['attr.aria-labelledby']
|
|
581
708
|
}], orientation: [{
|
|
582
709
|
type: Input
|
|
583
710
|
}], sort: [{
|
|
584
711
|
type: Input
|
|
585
712
|
}], filter: [{
|
|
586
713
|
type: Input
|
|
714
|
+
}], navigation: [{
|
|
715
|
+
type: Input
|
|
716
|
+
}], close: [{
|
|
717
|
+
type: Output
|
|
718
|
+
}], treeView: [{
|
|
719
|
+
type: ViewChild,
|
|
720
|
+
args: [TreeViewComponent]
|
|
721
|
+
}], columnsList: [{
|
|
722
|
+
type: ViewChild,
|
|
723
|
+
args: ['columnsChiplist']
|
|
724
|
+
}], rowsList: [{
|
|
725
|
+
type: ViewChild,
|
|
726
|
+
args: ['rowsChiplist']
|
|
587
727
|
}] } });
|
|
@@ -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: 1666604767,
|
|
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
|
};
|