@progress/kendo-angular-pivotgrid 0.2.0 → 0.2.1-dev.202209131551
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/configurator.component.d.ts +10 -3
- package/configurator/configurator.service.d.ts +3 -0
- package/data-binding/base-binding-directive.d.ts +0 -4
- package/data-binding/pivotgrid-data.service.d.ts +2 -0
- package/esm2015/configurator/configurator.component.js +130 -87
- package/esm2015/configurator/configurator.service.js +12 -8
- package/esm2015/data-binding/base-binding-directive.js +9 -23
- package/esm2015/data-binding/local-binding.directive.js +1 -1
- package/esm2015/data-binding/olap-binding.directive.js +1 -1
- package/esm2015/models/configurator-orientation.js +5 -0
- package/esm2015/package-metadata.js +1 -1
- package/esm2015/pivotgrid.component.js +10 -11
- package/esm2015/rendering/pivotgrid-table.component.js +2 -8
- package/fesm2015/kendo-angular-pivotgrid.js +177 -153
- package/models/configurator-orientation.d.ts +10 -0
- package/models/configurator-settings.d.ts +8 -7
- package/package.json +3 -2
- package/pivotgrid.component.d.ts +2 -1
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
|
|
6
|
-
import { PivotGridField, PivotGridConfiguratorState } from '@progress/kendo-pivotgrid-common';
|
|
6
|
+
import { AxisDescriptor, PivotGridField, PivotGridConfiguratorState } from '@progress/kendo-pivotgrid-common';
|
|
7
7
|
import { TreeItem } from '@progress/kendo-angular-treeview';
|
|
8
8
|
import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
|
|
9
9
|
import { ConfiguratorService } from './configurator.service';
|
|
10
10
|
import { Observable } from 'rxjs';
|
|
11
11
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
12
12
|
import { FilterDescriptor, SortDescriptor } from '@progress/kendo-data-query';
|
|
13
|
+
import { PivotGridConfiguratorOrientation } from '../models/configurator-orientation';
|
|
13
14
|
import * as i0 from "@angular/core";
|
|
14
15
|
/**
|
|
15
16
|
* @hidden
|
|
@@ -21,13 +22,14 @@ export declare class PivotGridConfiguratorComponent implements OnInit, OnDestroy
|
|
|
21
22
|
configuratorService: ConfiguratorService;
|
|
22
23
|
private cdr;
|
|
23
24
|
hostClass: boolean;
|
|
24
|
-
|
|
25
|
+
orientation: PivotGridConfiguratorOrientation;
|
|
25
26
|
sort: Array<SortDescriptor>;
|
|
26
27
|
filter: FilterDescriptor[];
|
|
27
28
|
originalState: PivotGridConfiguratorState;
|
|
28
29
|
state: PivotGridConfiguratorState;
|
|
29
30
|
fields: PivotGridField[];
|
|
30
31
|
checked: any[];
|
|
32
|
+
get isHorizontal(): boolean;
|
|
31
33
|
private subs;
|
|
32
34
|
/**
|
|
33
35
|
* A function which determines if a specific node has child nodes.
|
|
@@ -54,6 +56,11 @@ export declare class PivotGridConfiguratorComponent implements OnInit, OnDestroy
|
|
|
54
56
|
* Retrieves the 'Value' section item names
|
|
55
57
|
*/
|
|
56
58
|
get measureHierarchies(): unknown[];
|
|
59
|
+
/**
|
|
60
|
+
* Updates the respective axis configuration of the current state
|
|
61
|
+
* when a chip is deleted from the UI
|
|
62
|
+
*/
|
|
63
|
+
onChipRemove(item: AxisDescriptor, section: 'column' | 'row' | 'measure'): void;
|
|
57
64
|
/**
|
|
58
65
|
* Constructs an array with all selected fields.
|
|
59
66
|
* @param fields - used for when child nodes are loaded on demand.
|
|
@@ -95,5 +102,5 @@ export declare class PivotGridConfiguratorComponent implements OnInit, OnDestroy
|
|
|
95
102
|
*/
|
|
96
103
|
private extractDefaultFields;
|
|
97
104
|
static ɵfac: i0.ɵɵFactoryDeclaration<PivotGridConfiguratorComponent, never>;
|
|
98
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<PivotGridConfiguratorComponent, "kendo-pivotgrid-configurator", never, { "
|
|
105
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PivotGridConfiguratorComponent, "kendo-pivotgrid-configurator", never, { "orientation": "orientation"; "sort": "sort"; "filter": "filter"; }, {}, never, never>;
|
|
99
106
|
}
|
|
@@ -4,13 +4,16 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { EventEmitter } from '@angular/core';
|
|
6
6
|
import { PivotGridConfiguratorState } from '@progress/kendo-pivotgrid-common';
|
|
7
|
+
import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
|
|
7
8
|
import * as i0 from "@angular/core";
|
|
8
9
|
/**
|
|
9
10
|
* @hidden
|
|
10
11
|
*/
|
|
11
12
|
export declare class ConfiguratorService {
|
|
13
|
+
private dataService;
|
|
12
14
|
state: PivotGridConfiguratorState;
|
|
13
15
|
configuratorStateChange: EventEmitter<any>;
|
|
16
|
+
constructor(dataService: PivotGridDataService);
|
|
14
17
|
parseConfiguratorState(action: any): void;
|
|
15
18
|
static ɵfac: i0.ɵɵFactoryDeclaration<ConfiguratorService, never>;
|
|
16
19
|
static ɵprov: i0.ɵɵInjectableDeclaration<ConfiguratorService>;
|
|
@@ -61,10 +61,6 @@ export declare abstract class PivotBaseBindingDirective implements OnInit, OnDes
|
|
|
61
61
|
protected configuratorFields: any;
|
|
62
62
|
private subs;
|
|
63
63
|
constructor(dataService: PivotGridDataService, zone: NgZone);
|
|
64
|
-
/**
|
|
65
|
-
* @hidden
|
|
66
|
-
*/
|
|
67
|
-
get state(): PivotGridState;
|
|
68
64
|
ngOnInit(): void;
|
|
69
65
|
ngOnDestroy(): void;
|
|
70
66
|
protected updateDataServiceFields(): void;
|
|
@@ -7,6 +7,7 @@ import { PivotDataItem, PivotGridField, Tuple } from '@progress/kendo-pivotgrid-
|
|
|
7
7
|
import { BehaviorSubject } from 'rxjs';
|
|
8
8
|
import { PivotBaseBindingDirective } from './base-binding-directive';
|
|
9
9
|
import { PivotDataRowItem } from '../models/data-row-item';
|
|
10
|
+
import { PivotGridState } from '../models/configurator-settings';
|
|
10
11
|
import * as i0 from "@angular/core";
|
|
11
12
|
/**
|
|
12
13
|
* @hidden
|
|
@@ -22,6 +23,7 @@ export declare class PivotGridDataService {
|
|
|
22
23
|
columns: Tuple[];
|
|
23
24
|
wrapper: Element;
|
|
24
25
|
aggregateData: PivotDataRowItem[];
|
|
26
|
+
state: PivotGridState;
|
|
25
27
|
columnHeaderLeaves: {
|
|
26
28
|
total: boolean;
|
|
27
29
|
path: string[];
|
|
@@ -32,7 +32,7 @@ export class PivotGridConfiguratorComponent {
|
|
|
32
32
|
this.configuratorService = configuratorService;
|
|
33
33
|
this.cdr = cdr;
|
|
34
34
|
this.hostClass = true;
|
|
35
|
-
this.
|
|
35
|
+
this.orientation = 'vertical';
|
|
36
36
|
this.sort = new Array();
|
|
37
37
|
this.checked = [];
|
|
38
38
|
this.subs = new Subscription();
|
|
@@ -51,6 +51,9 @@ export class PivotGridConfiguratorComponent {
|
|
|
51
51
|
return of(node.children);
|
|
52
52
|
};
|
|
53
53
|
}
|
|
54
|
+
get isHorizontal() {
|
|
55
|
+
return this.orientation === 'horizontal';
|
|
56
|
+
}
|
|
54
57
|
ngOnInit() {
|
|
55
58
|
this.subs.add(this.dataService.fields
|
|
56
59
|
.subscribe(res => {
|
|
@@ -58,13 +61,21 @@ export class PivotGridConfiguratorComponent {
|
|
|
58
61
|
}));
|
|
59
62
|
this.subs.add(this.dataService.configuredFields
|
|
60
63
|
.subscribe(res => {
|
|
61
|
-
|
|
62
|
-
this.
|
|
64
|
+
const normalizedState = clone(Object.assign(Object.assign({}, this.dataService.state), { dragItem: res.dragItem, dropTarget: res.dropTarget, dropZone: res.dropZone, dropDirection: res.dropDirection }));
|
|
65
|
+
this.originalState = normalizedState;
|
|
66
|
+
this.setState(normalizedState);
|
|
63
67
|
this.setChecked();
|
|
64
68
|
}));
|
|
65
69
|
this.subs.add(this.configuratorService.configuratorStateChange
|
|
66
70
|
.subscribe(res => {
|
|
67
71
|
this.state = res;
|
|
72
|
+
this.dataService.state = this.dataService.state = {
|
|
73
|
+
columnAxes: res.columnAxes,
|
|
74
|
+
rowAxes: res.rowAxes,
|
|
75
|
+
measureAxes: res.measureAxes,
|
|
76
|
+
sort: res.sort,
|
|
77
|
+
filter: res.filter
|
|
78
|
+
};
|
|
68
79
|
this.cdr.detectChanges();
|
|
69
80
|
}));
|
|
70
81
|
}
|
|
@@ -75,8 +86,14 @@ export class PivotGridConfiguratorComponent {
|
|
|
75
86
|
return name.toString();
|
|
76
87
|
}
|
|
77
88
|
setState(state) {
|
|
78
|
-
this.state =
|
|
79
|
-
|
|
89
|
+
this.dataService.state = {
|
|
90
|
+
columnAxes: state.columnAxes,
|
|
91
|
+
rowAxes: state.rowAxes,
|
|
92
|
+
measureAxes: state.measureAxes,
|
|
93
|
+
sort: state.sort,
|
|
94
|
+
filter: state.filter
|
|
95
|
+
};
|
|
96
|
+
this.state = this.configuratorService.state = state;
|
|
80
97
|
}
|
|
81
98
|
/**
|
|
82
99
|
* Returns the localized message for a given token
|
|
@@ -88,23 +105,34 @@ export class PivotGridConfiguratorComponent {
|
|
|
88
105
|
* Retrieves the 'Columns' section item names
|
|
89
106
|
*/
|
|
90
107
|
get columnHierarchies() {
|
|
91
|
-
return this.extractDefaultFields(this.state.columnAxes);
|
|
108
|
+
return this.extractDefaultFields(this.dataService.state.columnAxes);
|
|
92
109
|
}
|
|
93
110
|
;
|
|
94
111
|
/**
|
|
95
112
|
* Retrieves the 'Rows' section item names
|
|
96
113
|
*/
|
|
97
114
|
get rowHierarchies() {
|
|
98
|
-
return this.extractDefaultFields(this.state.rowAxes);
|
|
115
|
+
return this.extractDefaultFields(this.dataService.state.rowAxes);
|
|
99
116
|
}
|
|
100
117
|
;
|
|
101
118
|
/**
|
|
102
119
|
* Retrieves the 'Value' section item names
|
|
103
120
|
*/
|
|
104
121
|
get measureHierarchies() {
|
|
105
|
-
return this.extractDefaultFields(this.state.measureAxes);
|
|
122
|
+
return this.extractDefaultFields(this.dataService.state.measureAxes);
|
|
106
123
|
}
|
|
107
124
|
;
|
|
125
|
+
/**
|
|
126
|
+
* Updates the respective axis configuration of the current state
|
|
127
|
+
* when a chip is deleted from the UI
|
|
128
|
+
*/
|
|
129
|
+
onChipRemove(item, section) {
|
|
130
|
+
const filteredItems = this.dataService.state[`${section}Axes`].filter(descriptor => descriptor !== item);
|
|
131
|
+
this.dataService.state[`${section}Axes`] = filteredItems;
|
|
132
|
+
const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
|
|
133
|
+
this.checked = this.checked.filter(checkedItem => checkedItem.uniqueName !== item.name[0]);
|
|
134
|
+
this.setState(newState);
|
|
135
|
+
}
|
|
108
136
|
/**
|
|
109
137
|
* Constructs an array with all selected fields.
|
|
110
138
|
* @param fields - used for when child nodes are loaded on demand.
|
|
@@ -165,7 +193,7 @@ export class PivotGridConfiguratorComponent {
|
|
|
165
193
|
this.configuratorService.parseConfiguratorState(action);
|
|
166
194
|
}
|
|
167
195
|
handleSubmit() {
|
|
168
|
-
this.dataService.configuratorFieldChange.emit(this.state);
|
|
196
|
+
this.dataService.configuratorFieldChange.emit(this.dataService.state);
|
|
169
197
|
}
|
|
170
198
|
/**
|
|
171
199
|
* Reset the configurator to the last saved state
|
|
@@ -197,7 +225,7 @@ export class PivotGridConfiguratorComponent {
|
|
|
197
225
|
;
|
|
198
226
|
}
|
|
199
227
|
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 });
|
|
200
|
-
PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: {
|
|
228
|
+
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: [
|
|
201
229
|
ConfiguratorService,
|
|
202
230
|
DropCueService,
|
|
203
231
|
SinglePopupService
|
|
@@ -205,8 +233,8 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
205
233
|
<div
|
|
206
234
|
class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
|
|
207
235
|
[ngClass]="{
|
|
208
|
-
'k-pivotgrid-configurator-horizontal':
|
|
209
|
-
'k-pivotgrid-configurator-vertical': !
|
|
236
|
+
'k-pivotgrid-configurator-horizontal': isHorizontal,
|
|
237
|
+
'k-pivotgrid-configurator-vertical': !isHorizontal
|
|
210
238
|
}"
|
|
211
239
|
>
|
|
212
240
|
<div class="k-pivotgrid-configurator-header">
|
|
@@ -214,7 +242,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
214
242
|
</div>
|
|
215
243
|
|
|
216
244
|
<div class="k-pivotgrid-configurator-content">
|
|
217
|
-
<div class="k-form" [class.k-form-horizontal]="
|
|
245
|
+
<div class="k-form" [class.k-form-horizontal]="isHorizontal">
|
|
218
246
|
<div class="k-form-field-wrapper">
|
|
219
247
|
<div class="k-form-field">
|
|
220
248
|
<span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
@@ -245,7 +273,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
245
273
|
</div>
|
|
246
274
|
</div>
|
|
247
275
|
|
|
248
|
-
<div *ngIf="
|
|
276
|
+
<div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper">
|
|
249
277
|
<ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
|
|
250
278
|
</div>
|
|
251
279
|
|
|
@@ -259,21 +287,22 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
259
287
|
kendoDropTarget
|
|
260
288
|
axes="columnAxes"
|
|
261
289
|
>
|
|
262
|
-
<
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
290
|
+
<ng-container *ngFor="let item of state.columnAxes">
|
|
291
|
+
<kendo-chip *ngIf="item.name.length === 1"
|
|
292
|
+
kendoChipDraggable
|
|
293
|
+
kendoDraggable
|
|
294
|
+
kendoDropTarget
|
|
295
|
+
[item]="item"
|
|
296
|
+
axes="columnAxes"
|
|
297
|
+
rounded="full"
|
|
298
|
+
[removable]="true"
|
|
299
|
+
(remove)="onChipRemove(item, 'column')"
|
|
300
|
+
>{{ getName(item.name) }}
|
|
301
|
+
<kendo-pivot-chip-menu
|
|
302
|
+
[chip]="item">
|
|
303
|
+
</kendo-pivot-chip-menu>
|
|
304
|
+
</kendo-chip>
|
|
305
|
+
</ng-container>
|
|
277
306
|
</kendo-chiplist>
|
|
278
307
|
|
|
279
308
|
<ng-template #noColumnAxes>
|
|
@@ -289,21 +318,24 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
289
318
|
kendoDropTarget
|
|
290
319
|
axes="rowAxes"
|
|
291
320
|
>
|
|
292
|
-
<
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
321
|
+
<ng-container *ngFor="let item of state.rowAxes">
|
|
322
|
+
<kendo-chip *ngIf="item.name.length === 1"
|
|
323
|
+
kendoChipDraggable
|
|
324
|
+
kendoDraggable
|
|
325
|
+
kendoDropTarget
|
|
326
|
+
[item]="item"
|
|
327
|
+
axes="rowAxes"
|
|
328
|
+
rounded="full"
|
|
329
|
+
[removable]="true"
|
|
330
|
+
(remove)="onChipRemove(item, 'row')"
|
|
331
|
+
>
|
|
332
|
+
{{ getName(item.name) }}
|
|
333
|
+
|
|
334
|
+
<kendo-pivot-chip-menu
|
|
335
|
+
[chip]="item">
|
|
336
|
+
</kendo-pivot-chip-menu>
|
|
337
|
+
</kendo-chip>
|
|
338
|
+
</ng-container>
|
|
307
339
|
</kendo-chiplist>
|
|
308
340
|
|
|
309
341
|
<ng-template #noRowAxes>
|
|
@@ -311,11 +343,11 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
311
343
|
</ng-template>
|
|
312
344
|
</ng-template>
|
|
313
345
|
|
|
314
|
-
<div *ngIf="
|
|
315
|
-
<ng-container *ngTemplateOutlet="
|
|
346
|
+
<div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper">
|
|
347
|
+
<ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
|
|
316
348
|
</div>
|
|
317
349
|
|
|
318
|
-
<ng-template #
|
|
350
|
+
<ng-template #verticalMeasuresTemplate>
|
|
319
351
|
<div class="k-form-field" kendoDropTarget axes="measureAxes">
|
|
320
352
|
<span class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
321
353
|
</div>
|
|
@@ -333,6 +365,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
333
365
|
axes="measureAxes"
|
|
334
366
|
rounded="full"
|
|
335
367
|
[removable]="true"
|
|
368
|
+
(remove)="onChipRemove(item, 'measure')"
|
|
336
369
|
>
|
|
337
370
|
{{ getName(item.name) }}
|
|
338
371
|
</kendo-chip>
|
|
@@ -350,7 +383,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
350
383
|
<button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
|
|
351
384
|
</div>
|
|
352
385
|
</div>
|
|
353
|
-
`, isInline: true, 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"] }] });
|
|
386
|
+
`, isInline: true, styles: ["\n .k-form .k-chip-list {\n width: 100%;\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"] }] });
|
|
354
387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
|
|
355
388
|
type: Component,
|
|
356
389
|
args: [{
|
|
@@ -364,8 +397,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
364
397
|
<div
|
|
365
398
|
class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
|
|
366
399
|
[ngClass]="{
|
|
367
|
-
'k-pivotgrid-configurator-horizontal':
|
|
368
|
-
'k-pivotgrid-configurator-vertical': !
|
|
400
|
+
'k-pivotgrid-configurator-horizontal': isHorizontal,
|
|
401
|
+
'k-pivotgrid-configurator-vertical': !isHorizontal
|
|
369
402
|
}"
|
|
370
403
|
>
|
|
371
404
|
<div class="k-pivotgrid-configurator-header">
|
|
@@ -373,7 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
373
406
|
</div>
|
|
374
407
|
|
|
375
408
|
<div class="k-pivotgrid-configurator-content">
|
|
376
|
-
<div class="k-form" [class.k-form-horizontal]="
|
|
409
|
+
<div class="k-form" [class.k-form-horizontal]="isHorizontal">
|
|
377
410
|
<div class="k-form-field-wrapper">
|
|
378
411
|
<div class="k-form-field">
|
|
379
412
|
<span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
|
|
@@ -404,7 +437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
404
437
|
</div>
|
|
405
438
|
</div>
|
|
406
439
|
|
|
407
|
-
<div *ngIf="
|
|
440
|
+
<div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper">
|
|
408
441
|
<ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
|
|
409
442
|
</div>
|
|
410
443
|
|
|
@@ -418,21 +451,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
418
451
|
kendoDropTarget
|
|
419
452
|
axes="columnAxes"
|
|
420
453
|
>
|
|
421
|
-
<
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
454
|
+
<ng-container *ngFor="let item of state.columnAxes">
|
|
455
|
+
<kendo-chip *ngIf="item.name.length === 1"
|
|
456
|
+
kendoChipDraggable
|
|
457
|
+
kendoDraggable
|
|
458
|
+
kendoDropTarget
|
|
459
|
+
[item]="item"
|
|
460
|
+
axes="columnAxes"
|
|
461
|
+
rounded="full"
|
|
462
|
+
[removable]="true"
|
|
463
|
+
(remove)="onChipRemove(item, 'column')"
|
|
464
|
+
>{{ getName(item.name) }}
|
|
465
|
+
<kendo-pivot-chip-menu
|
|
466
|
+
[chip]="item">
|
|
467
|
+
</kendo-pivot-chip-menu>
|
|
468
|
+
</kendo-chip>
|
|
469
|
+
</ng-container>
|
|
436
470
|
</kendo-chiplist>
|
|
437
471
|
|
|
438
472
|
<ng-template #noColumnAxes>
|
|
@@ -448,21 +482,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
448
482
|
kendoDropTarget
|
|
449
483
|
axes="rowAxes"
|
|
450
484
|
>
|
|
451
|
-
<
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
485
|
+
<ng-container *ngFor="let item of state.rowAxes">
|
|
486
|
+
<kendo-chip *ngIf="item.name.length === 1"
|
|
487
|
+
kendoChipDraggable
|
|
488
|
+
kendoDraggable
|
|
489
|
+
kendoDropTarget
|
|
490
|
+
[item]="item"
|
|
491
|
+
axes="rowAxes"
|
|
492
|
+
rounded="full"
|
|
493
|
+
[removable]="true"
|
|
494
|
+
(remove)="onChipRemove(item, 'row')"
|
|
495
|
+
>
|
|
496
|
+
{{ getName(item.name) }}
|
|
497
|
+
|
|
498
|
+
<kendo-pivot-chip-menu
|
|
499
|
+
[chip]="item">
|
|
500
|
+
</kendo-pivot-chip-menu>
|
|
501
|
+
</kendo-chip>
|
|
502
|
+
</ng-container>
|
|
466
503
|
</kendo-chiplist>
|
|
467
504
|
|
|
468
505
|
<ng-template #noRowAxes>
|
|
@@ -470,11 +507,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
470
507
|
</ng-template>
|
|
471
508
|
</ng-template>
|
|
472
509
|
|
|
473
|
-
<div *ngIf="
|
|
474
|
-
<ng-container *ngTemplateOutlet="
|
|
510
|
+
<div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper">
|
|
511
|
+
<ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
|
|
475
512
|
</div>
|
|
476
513
|
|
|
477
|
-
<ng-template #
|
|
514
|
+
<ng-template #verticalMeasuresTemplate>
|
|
478
515
|
<div class="k-form-field" kendoDropTarget axes="measureAxes">
|
|
479
516
|
<span class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
480
517
|
</div>
|
|
@@ -492,6 +529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
492
529
|
axes="measureAxes"
|
|
493
530
|
rounded="full"
|
|
494
531
|
[removable]="true"
|
|
532
|
+
(remove)="onChipRemove(item, 'measure')"
|
|
495
533
|
>
|
|
496
534
|
{{ getName(item.name) }}
|
|
497
535
|
</kendo-chip>
|
|
@@ -509,12 +547,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
509
547
|
<button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
|
|
510
548
|
</div>
|
|
511
549
|
</div>
|
|
512
|
-
|
|
550
|
+
`,
|
|
551
|
+
styles: [`
|
|
552
|
+
.k-form .k-chip-list {
|
|
553
|
+
width: 100%;
|
|
554
|
+
}
|
|
555
|
+
`]
|
|
513
556
|
}]
|
|
514
557
|
}], ctorParameters: function () { return [{ type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
|
|
515
558
|
type: HostBinding,
|
|
516
559
|
args: ['class.k-pivotgrid-configurator']
|
|
517
|
-
}],
|
|
560
|
+
}], orientation: [{
|
|
518
561
|
type: Input
|
|
519
562
|
}], sort: [{
|
|
520
563
|
type: Input
|
|
@@ -4,21 +4,24 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { EventEmitter, Injectable, Output } from '@angular/core';
|
|
6
6
|
import { configuratorReducer } from '@progress/kendo-pivotgrid-common';
|
|
7
|
+
import { PivotGridState } from './../models/configurator-settings';
|
|
7
8
|
import * as i0 from "@angular/core";
|
|
9
|
+
import * as i1 from "../data-binding/pivotgrid-data.service";
|
|
8
10
|
/**
|
|
9
11
|
* @hidden
|
|
10
12
|
*/
|
|
11
13
|
export class ConfiguratorService {
|
|
12
|
-
constructor() {
|
|
14
|
+
constructor(dataService) {
|
|
15
|
+
this.dataService = dataService;
|
|
13
16
|
this.configuratorStateChange = new EventEmitter();
|
|
14
17
|
}
|
|
15
18
|
parseConfiguratorState(action) {
|
|
16
19
|
const newState = configuratorReducer({
|
|
17
|
-
filter: this.state.filter,
|
|
18
|
-
sort: this.state.sort,
|
|
19
|
-
rowAxes: this.state.rowAxes,
|
|
20
|
-
columnAxes: this.state.columnAxes,
|
|
21
|
-
measureAxes: this.state.measureAxes,
|
|
20
|
+
filter: this.dataService.state.filter,
|
|
21
|
+
sort: this.dataService.state.sort,
|
|
22
|
+
rowAxes: this.dataService.state.rowAxes,
|
|
23
|
+
columnAxes: this.dataService.state.columnAxes,
|
|
24
|
+
measureAxes: this.dataService.state.measureAxes,
|
|
22
25
|
dragItem: this.state.dragItem,
|
|
23
26
|
dropDirection: this.state.dropDirection,
|
|
24
27
|
dropTarget: this.state.dropTarget,
|
|
@@ -26,13 +29,14 @@ export class ConfiguratorService {
|
|
|
26
29
|
}, action);
|
|
27
30
|
Object.keys(newState).forEach(key => newState[key] === undefined && delete newState[key]);
|
|
28
31
|
this.state = Object.assign(Object.assign({}, this.state), newState);
|
|
32
|
+
this.dataService.state = new PivotGridState(this.state.columnAxes, this.state.rowAxes, this.state.measureAxes, this.state.sort, this.state.filter);
|
|
29
33
|
this.configuratorStateChange.emit(this.state);
|
|
30
34
|
}
|
|
31
35
|
}
|
|
32
|
-
ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
36
|
+
ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, deps: [{ token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
33
37
|
ConfiguratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService });
|
|
34
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, decorators: [{
|
|
35
39
|
type: Injectable
|
|
36
|
-
}], propDecorators: { configuratorStateChange: [{
|
|
40
|
+
}], ctorParameters: function () { return [{ type: i1.PivotGridDataService }]; }, propDecorators: { configuratorStateChange: [{
|
|
37
41
|
type: Output
|
|
38
42
|
}] } });
|
|
@@ -52,14 +52,9 @@ export class PivotBaseBindingDirective {
|
|
|
52
52
|
this.dataLoaded = new EventEmitter();
|
|
53
53
|
this.subs = new Subscription();
|
|
54
54
|
}
|
|
55
|
-
/**
|
|
56
|
-
* @hidden
|
|
57
|
-
*/
|
|
58
|
-
get state() {
|
|
59
|
-
return new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes, this.sort, this.filter);
|
|
60
|
-
}
|
|
61
55
|
ngOnInit() {
|
|
62
|
-
this.
|
|
56
|
+
this.dataService.state = new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes, this.sort, this.filter);
|
|
57
|
+
this.loadData(this.dataService.state);
|
|
63
58
|
this.loadFields();
|
|
64
59
|
this.subs.add(this.dataService.expandedStateChange.subscribe((state) => {
|
|
65
60
|
this.zone.run(() => {
|
|
@@ -79,14 +74,9 @@ export class PivotBaseBindingDirective {
|
|
|
79
74
|
return;
|
|
80
75
|
}
|
|
81
76
|
}
|
|
82
|
-
this.dataService.configuredFields.next(
|
|
83
|
-
columnAxes: state.columnAxes,
|
|
84
|
-
rowAxes: state.rowAxes,
|
|
85
|
-
measureAxes: state.measureAxes,
|
|
86
|
-
sort: state.sort,
|
|
87
|
-
filter: state.filter
|
|
88
|
-
});
|
|
77
|
+
this.dataService.configuredFields.next(this.dataService.state);
|
|
89
78
|
this.loadData(state);
|
|
79
|
+
this.dataService.state = state;
|
|
90
80
|
});
|
|
91
81
|
}));
|
|
92
82
|
this.subs.add(this.dataService.valuesRows.subscribe((data) => {
|
|
@@ -107,13 +97,7 @@ export class PivotBaseBindingDirective {
|
|
|
107
97
|
}
|
|
108
98
|
updateConfiguratorFields() {
|
|
109
99
|
this.dataService.fields.next(this.configuratorFields);
|
|
110
|
-
this.dataService.configuredFields.next(
|
|
111
|
-
columnAxes: this.columnAxes,
|
|
112
|
-
rowAxes: this.rowAxes,
|
|
113
|
-
measureAxes: this.measureAxes,
|
|
114
|
-
sort: this.sort,
|
|
115
|
-
filter: this.filter
|
|
116
|
-
});
|
|
100
|
+
this.dataService.configuredFields.next(this.dataService.state);
|
|
117
101
|
}
|
|
118
102
|
updateHeaders(axes, tree, path) {
|
|
119
103
|
// Action to determine expand/collapse state
|
|
@@ -125,16 +109,18 @@ export class PivotBaseBindingDirective {
|
|
|
125
109
|
// the expanded state based on the toggle action (expand/collapse)
|
|
126
110
|
// Update axes and reload data
|
|
127
111
|
const newHeaders = headersReducer(this[axes].slice(), Object.assign(Object.assign({}, action), { tree }));
|
|
112
|
+
const newState = Object.assign(Object.assign({}, this.dataService.state), { [axes]: newHeaders });
|
|
113
|
+
this.dataService.state = newState;
|
|
128
114
|
if (hasObservers(this.expandChange)) {
|
|
129
|
-
const newState = Object.assign(Object.assign({}, this.state), { [axes]: newHeaders });
|
|
130
115
|
const event = new ExpandChangeEvent(newState);
|
|
131
116
|
this.expandChange.emit(event);
|
|
132
117
|
if (event.isDefaultPrevented()) {
|
|
133
118
|
return;
|
|
134
119
|
}
|
|
135
120
|
}
|
|
121
|
+
this.dataService.configuredFields.next(this.dataService.state);
|
|
136
122
|
this[axes] = newHeaders;
|
|
137
|
-
this.loadData(this.state);
|
|
123
|
+
this.loadData(this.dataService.state);
|
|
138
124
|
}
|
|
139
125
|
;
|
|
140
126
|
}
|
|
@@ -23,7 +23,7 @@ export class PivotLocalBindingDirective extends PivotBaseBindingDirective {
|
|
|
23
23
|
}
|
|
24
24
|
ngOnChanges(changes) {
|
|
25
25
|
if (anyChanged(['data', 'dimensions', 'columnAxes', 'rowAxes', 'measureAxes', 'measures'], changes)) {
|
|
26
|
-
this.loadData(this.state);
|
|
26
|
+
this.loadData(this.dataService.state);
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
/**
|