@progress/kendo-angular-pivotgrid 0.2.0-dev.202208181226 → 0.2.0-dev.202208190706

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.
Files changed (45) hide show
  1. package/bundles/kendo-angular-pivotgrid.umd.js +1 -1
  2. package/configurator/configurator.component.d.ts +96 -0
  3. package/configurator/configurator.service.d.ts +17 -0
  4. package/configurator/draggable.directive.d.ts +32 -0
  5. package/configurator/drop-cue.service.d.ts +22 -0
  6. package/configurator/drop-target.directive.d.ts +32 -0
  7. package/data-binding/base-binding-directive.d.ts +27 -5
  8. package/data-binding/local-binding.directive.d.ts +8 -1
  9. package/data-binding/olap-binding.directive.d.ts +13 -1
  10. package/data-binding/pivotgrid-data.service.d.ts +13 -4
  11. package/esm2015/configurator/configurator.component.js +500 -0
  12. package/esm2015/configurator/configurator.service.js +38 -0
  13. package/esm2015/configurator/draggable.directive.js +94 -0
  14. package/esm2015/configurator/drop-cue.service.js +64 -0
  15. package/esm2015/configurator/drop-target.directive.js +82 -0
  16. package/esm2015/data-binding/base-binding-directive.js +68 -9
  17. package/esm2015/data-binding/local-binding.directive.js +20 -8
  18. package/esm2015/data-binding/olap-binding.directive.js +131 -6
  19. package/esm2015/data-binding/pivotgrid-data.service.js +26 -3
  20. package/esm2015/localization/custom-messages.component.js +41 -0
  21. package/esm2015/localization/localized-messages.directive.js +36 -0
  22. package/esm2015/localization/messages.js +77 -0
  23. package/esm2015/main.js +8 -0
  24. package/esm2015/models/configuration-change-event.js +18 -0
  25. package/esm2015/models/configurator-settings.js +14 -0
  26. package/esm2015/models/expanded-change-event.js +18 -0
  27. package/esm2015/package-metadata.js +1 -1
  28. package/esm2015/pivotgrid.component.js +360 -63
  29. package/esm2015/pivotgrid.module.js +43 -16
  30. package/esm2015/rendering/pivotgrid-cell.directive.js +6 -3
  31. package/esm2015/rendering/pivotgrid-table.component.js +29 -10
  32. package/esm2015/util.js +86 -0
  33. package/fesm2015/kendo-angular-pivotgrid.js +1696 -156
  34. package/localization/custom-messages.component.d.ts +18 -0
  35. package/localization/localized-messages.directive.d.ts +16 -0
  36. package/localization/messages.d.ts +172 -0
  37. package/main.d.ts +6 -0
  38. package/models/configuration-change-event.d.ts +36 -0
  39. package/models/configurator-settings.d.ts +32 -0
  40. package/models/expanded-change-event.d.ts +27 -0
  41. package/package.json +7 -1
  42. package/pivotgrid.component.d.ts +28 -3
  43. package/pivotgrid.module.d.ts +15 -7
  44. package/rendering/pivotgrid-table.component.d.ts +3 -2
  45. package/util.d.ts +31 -0
@@ -2,19 +2,24 @@
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 { EventEmitter } from '@angular/core';
6
- import { PivotDataItem, Tuple } from '@progress/kendo-pivotgrid-common';
5
+ import { EventEmitter, NgZone } from '@angular/core';
6
+ import { PivotDataItem, PivotGridField, Tuple } from '@progress/kendo-pivotgrid-common';
7
7
  import { BehaviorSubject } from 'rxjs';
8
- import { ExpandedStateChangeEvent } from '../models/expanded-state-action';
8
+ import { PivotBaseBindingDirective } from './base-binding-directive';
9
9
  import * as i0 from "@angular/core";
10
10
  /**
11
11
  * @hidden
12
12
  */
13
13
  export declare class PivotGridDataService {
14
- expandedStateChange: EventEmitter<ExpandedStateChangeEvent>;
14
+ private ngZone;
15
+ expandedStateChange: EventEmitter<any>;
16
+ configuratorFieldChange: EventEmitter<any>;
17
+ expandedFieldChange: EventEmitter<any>;
18
+ directive: PivotBaseBindingDirective;
15
19
  normalizedData: any[];
16
20
  rows: Tuple[];
17
21
  columns: Tuple[];
22
+ wrapper: Element;
18
23
  columnHeaderLeaves: {
19
24
  total: boolean;
20
25
  path: string[];
@@ -32,6 +37,10 @@ export declare class PivotGridDataService {
32
37
  cells: PivotDataItem[];
33
38
  }[]>;
34
39
  loading: BehaviorSubject<boolean>;
40
+ pivotGridId: number;
41
+ constructor(ngZone: NgZone);
42
+ fields: BehaviorSubject<PivotGridField[]>;
43
+ configuredFields: BehaviorSubject<any>;
35
44
  updateRowsAndCols(): void;
36
45
  static ɵfac: i0.ɵɵFactoryDeclaration<PivotGridDataService, never>;
37
46
  static ɵprov: i0.ɵɵInjectableDeclaration<PivotGridDataService>;
@@ -0,0 +1,500 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { Component, HostBinding, Input } from '@angular/core';
6
+ import { ConfiguratorService } from './configurator.service';
7
+ import { DropCueService } from './drop-cue.service';
8
+ import { from, of, Subscription } from 'rxjs';
9
+ import { mergeMap } from 'rxjs/operators';
10
+ import { clone } from '../util';
11
+ import * as i0 from "@angular/core";
12
+ import * as i1 from "../data-binding/pivotgrid-data.service";
13
+ import * as i2 from "@progress/kendo-angular-l10n";
14
+ import * as i3 from "./configurator.service";
15
+ import * as i4 from "@progress/kendo-angular-treeview";
16
+ import * as i5 from "@progress/kendo-angular-buttons";
17
+ import * as i6 from "@angular/common";
18
+ import * as i7 from "@progress/kendo-angular-inputs";
19
+ import * as i8 from "./drop-target.directive";
20
+ import * as i9 from "./draggable.directive";
21
+ import * as i10 from "@progress/kendo-angular-common";
22
+ /**
23
+ * @hidden
24
+ * Represents the Kendo UI PivotGrid Configurator component for Angular.
25
+ */
26
+ export class PivotGridConfiguratorComponent {
27
+ constructor(dataService, localization, configuratorService, cdr) {
28
+ this.dataService = dataService;
29
+ this.localization = localization;
30
+ this.configuratorService = configuratorService;
31
+ this.cdr = cdr;
32
+ this.hostClass = true;
33
+ this.horizontal = false;
34
+ this.checked = [];
35
+ this.subs = new Subscription();
36
+ /**
37
+ * A function which determines if a specific node has child nodes.
38
+ */
39
+ this.hasChildren = (node) => !('hierarchyUniqueName' in node) && !('aggregator' in node);
40
+ /**
41
+ * A function which provides the child nodes for a given parent node.
42
+ */
43
+ this.children = (node) => {
44
+ if (this.dataService.directive.type === 'olap') {
45
+ const observable = from(this.dataService.directive.fetchChildren(node, this.fields));
46
+ return observable.pipe(mergeMap(value => of(value)));
47
+ }
48
+ return of(node.children);
49
+ };
50
+ }
51
+ ngOnInit() {
52
+ this.subs.add(this.dataService.fields
53
+ .subscribe(res => {
54
+ this.fields = res;
55
+ }));
56
+ this.subs.add(this.dataService.configuredFields
57
+ .subscribe(res => {
58
+ this.originalState = clone(res);
59
+ this.setState(clone(res));
60
+ this.setChecked();
61
+ }));
62
+ this.subs.add(this.configuratorService.configuratorStateChange
63
+ .subscribe(res => {
64
+ this.state = res;
65
+ this.cdr.detectChanges();
66
+ }));
67
+ }
68
+ ngOnDestroy() {
69
+ this.subs.unsubscribe();
70
+ }
71
+ getName(name) {
72
+ return name.toString();
73
+ }
74
+ setState(state) {
75
+ this.state = state;
76
+ this.configuratorService.state = state;
77
+ }
78
+ /**
79
+ * Returns the localized message for a given token
80
+ */
81
+ messageFor(localizationToken) {
82
+ return this.localization.get(localizationToken);
83
+ }
84
+ /**
85
+ * Retrieves the 'Columns' section item names
86
+ */
87
+ get columnHierarchies() {
88
+ return this.extractDefaultFields(this.state.columnAxes);
89
+ }
90
+ ;
91
+ /**
92
+ * Retrieves the 'Rows' section item names
93
+ */
94
+ get rowHierarchies() {
95
+ return this.extractDefaultFields(this.state.rowAxes);
96
+ }
97
+ ;
98
+ /**
99
+ * Retrieves the 'Value' section item names
100
+ */
101
+ get measureHierarchies() {
102
+ return this.extractDefaultFields(this.state.measureAxes);
103
+ }
104
+ ;
105
+ /**
106
+ * Constructs an array with all selected fields.
107
+ * @param fields - used for when child nodes are loaded on demand.
108
+ * Child nodes are concatinated to the root level nodes.
109
+ */
110
+ setChecked(fields = []) {
111
+ const allFields = [...this.fields, ...fields];
112
+ const checked = this.getFieldsFlatMap(allFields).filter((f) => [
113
+ ...this.columnHierarchies,
114
+ ...this.rowHierarchies,
115
+ ...this.measureHierarchies
116
+ ].some((h) => (h === f.uniqueName || h === f.defaultHierarchy)));
117
+ this.checked = checked;
118
+ }
119
+ /**
120
+ * A function which determines if a specific node is checked/
121
+ */
122
+ isItemChecked(node) {
123
+ var _a, _b;
124
+ const res = this.checked.some(s => node.defaultHierarchy
125
+ ? s.defaultHierarchy === node.defaultHierarchy
126
+ : s.uniqueName === node.uniqueName)
127
+ || (((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) && ((_b = node.children) === null || _b === void 0 ? void 0 : _b.every((c) => c.checked)));
128
+ return res || null;
129
+ }
130
+ /**
131
+ * Determines if a checkbox should be rendered.
132
+ */
133
+ isSelectable(node) {
134
+ const hasChildren = !('hierarchyUniqueName' in node) && !('aggregator' in node);
135
+ return !Boolean((!hasChildren && !node.aggregator && !node.measure)
136
+ || (node.type === 2)
137
+ || node.uniqueName === '[KPIs]');
138
+ }
139
+ /**
140
+ * Check if the newly loaded child nodes have checked items.
141
+ * (Only for OLAP data-binding directive)
142
+ */
143
+ handleChildrenLoaded(event) {
144
+ if (this.dataService.directive.type === 'local') {
145
+ return;
146
+ }
147
+ const fields = event.children.map(item => item.dataItem);
148
+ this.setChecked(fields);
149
+ }
150
+ handleCheckedChange(event, item) {
151
+ if (event.target.checked) {
152
+ this.checked = [...this.checked, item];
153
+ }
154
+ else {
155
+ const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === item.uniqueName);
156
+ this.checked.splice(itemIndex, 1);
157
+ }
158
+ const action = {
159
+ type: 'PIVOT_CONFIGURATOR_ACTION_TOGGLE_SELECTION',
160
+ payload: item
161
+ };
162
+ this.configuratorService.parseConfiguratorState(action);
163
+ }
164
+ handleSubmit() {
165
+ this.dataService.configuratorFieldChange.emit(this.state);
166
+ }
167
+ /**
168
+ * Reset the configurator to the last saved state
169
+ */
170
+ handleReset() {
171
+ this.setState(clone(this.originalState));
172
+ this.setChecked();
173
+ }
174
+ /**
175
+ * Flattens all available fields.
176
+ */
177
+ getFieldsFlatMap(nodes = []) {
178
+ let result = [...nodes];
179
+ (nodes || []).forEach((child) => {
180
+ result = result.concat(this.getFieldsFlatMap(child.children));
181
+ });
182
+ return result;
183
+ }
184
+ /**
185
+ * Creates an array containing only the field names, e.g. '[Date].[Calendar]' or 'Product'
186
+ */
187
+ extractDefaultFields(columns = []) {
188
+ const result = new Set();
189
+ columns.forEach((column) => {
190
+ result.add(String(column.name));
191
+ });
192
+ return Array.from(result);
193
+ }
194
+ ;
195
+ }
196
+ 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 });
197
+ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { horizontal: "horizontal" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass" } }, providers: [
198
+ ConfiguratorService,
199
+ DropCueService
200
+ ], ngImport: i0, template: `
201
+ <div
202
+ class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
203
+ [ngClass]="{
204
+ 'k-pivotgrid-configurator-horizontal': horizontal,
205
+ 'k-pivotgrid-configurator-vertical': !horizontal
206
+ }"
207
+ >
208
+ <div class="k-pivotgrid-configurator-header">
209
+ <div class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
210
+ </div>
211
+
212
+ <div class="k-pivotgrid-configurator-content">
213
+ <div class="k-form" [class.k-form-horizontal]="horizontal">
214
+ <div class="k-form-field-wrapper">
215
+ <div class="k-form-field">
216
+ <span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
217
+ </div>
218
+
219
+ <div class="k-form-field">
220
+ <div class="k-fields-list-wrapper">
221
+ <kendo-treeview
222
+ [nodes]="fields"
223
+ textField="caption"
224
+ [children]="children"
225
+ [hasChildren]="hasChildren"
226
+ kendoTreeViewExpandable
227
+ (childrenLoaded)="handleChildrenLoaded($event)"
228
+ >
229
+ <ng-template kendoTreeViewNodeTemplate let-dataItem>
230
+ <input kendoCheckBox
231
+ *ngIf="isSelectable(dataItem)"
232
+ type="checkbox"
233
+ kendoCheckBox
234
+ [checked]="isItemChecked(dataItem)"
235
+ (change)="handleCheckedChange($event, dataItem)"/>
236
+ {{ dataItem.caption }}
237
+ </ng-template>
238
+ </kendo-treeview>
239
+
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <div *ngIf="horizontal; else verticalTemplate" class="k-form-field-wrapper">
245
+ <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
246
+ </div>
247
+
248
+ <ng-template #verticalTemplate>
249
+ <div class="k-form-field" kendoDropTarget axes="columnAxes">
250
+ <span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
251
+ </div>
252
+
253
+ <kendo-chiplist
254
+ *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
255
+ kendoDropTarget
256
+ axes="columnAxes"
257
+ >
258
+ <kendo-chip *ngFor="let item of state.columnAxes"
259
+ kendoChipDraggable
260
+ kendoDraggable
261
+ kendoDropTarget
262
+ [item]="item"
263
+ axes="columnAxes"
264
+ rounded="full"
265
+ [removable]="true"
266
+ >
267
+ {{ getName(item.name) }}
268
+ </kendo-chip>
269
+ </kendo-chiplist>
270
+
271
+ <ng-template #noColumnAxes>
272
+ <div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
273
+ </ng-template>
274
+
275
+ <div class="k-form-field" kendoDropTarget axes="rowAxes">
276
+ <span class="k-label">{{messageFor('configuratorRowsText')}}</span>
277
+ </div>
278
+
279
+ <kendo-chiplist
280
+ *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
281
+ kendoDropTarget
282
+ axes="rowAxes"
283
+ >
284
+ <kendo-chip *ngFor="let item of state.rowAxes"
285
+ kendoChipDraggable
286
+ kendoDraggable
287
+ kendoDropTarget
288
+ [item]="item"
289
+ axes="rowAxes"
290
+ rounded="full"
291
+ [removable]="true"
292
+ >
293
+ {{ getName(item.name) }}
294
+ </kendo-chip>
295
+ </kendo-chiplist>
296
+
297
+ <ng-template #noRowAxes>
298
+ <div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
299
+ </ng-template>
300
+ </ng-template>
301
+
302
+ <div *ngIf="horizontal; else elseTpl2" class="k-form-field-wrapper">
303
+ <ng-container *ngTemplateOutlet="elseTpl2"></ng-container>
304
+ </div>
305
+
306
+ <ng-template #elseTpl2>
307
+ <div class="k-form-field" kendoDropTarget axes="measureAxes">
308
+ <span class="k-label">{{messageFor('configuratorValuesText')}}</span>
309
+ </div>
310
+
311
+ <kendo-chiplist
312
+ *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
313
+ kendoDropTarget
314
+ axes="measureAxes"
315
+ >
316
+ <kendo-chip *ngFor="let item of state.measureAxes"
317
+ kendoChipDraggable
318
+ kendoDraggable
319
+ kendoDropTarget
320
+ [item]="item"
321
+ axes="measureAxes"
322
+
323
+ rounded="full"
324
+ [removable]="true"
325
+ >
326
+ {{ getName(item.name) }}
327
+ </kendo-chip>
328
+ </kendo-chiplist>
329
+
330
+ <ng-template #noMeasureAxes>
331
+ <div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
332
+ </ng-template>
333
+ </ng-template>
334
+
335
+ </div>
336
+ </div>
337
+ <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
338
+ <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
339
+ <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
340
+ </div>
341
+ </div>
342
+ `, 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"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i10.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"] }] });
343
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
344
+ type: Component,
345
+ args: [{
346
+ selector: 'kendo-pivotgrid-configurator',
347
+ providers: [
348
+ ConfiguratorService,
349
+ DropCueService
350
+ ],
351
+ template: `
352
+ <div
353
+ class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
354
+ [ngClass]="{
355
+ 'k-pivotgrid-configurator-horizontal': horizontal,
356
+ 'k-pivotgrid-configurator-vertical': !horizontal
357
+ }"
358
+ >
359
+ <div class="k-pivotgrid-configurator-header">
360
+ <div class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
361
+ </div>
362
+
363
+ <div class="k-pivotgrid-configurator-content">
364
+ <div class="k-form" [class.k-form-horizontal]="horizontal">
365
+ <div class="k-form-field-wrapper">
366
+ <div class="k-form-field">
367
+ <span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
368
+ </div>
369
+
370
+ <div class="k-form-field">
371
+ <div class="k-fields-list-wrapper">
372
+ <kendo-treeview
373
+ [nodes]="fields"
374
+ textField="caption"
375
+ [children]="children"
376
+ [hasChildren]="hasChildren"
377
+ kendoTreeViewExpandable
378
+ (childrenLoaded)="handleChildrenLoaded($event)"
379
+ >
380
+ <ng-template kendoTreeViewNodeTemplate let-dataItem>
381
+ <input kendoCheckBox
382
+ *ngIf="isSelectable(dataItem)"
383
+ type="checkbox"
384
+ kendoCheckBox
385
+ [checked]="isItemChecked(dataItem)"
386
+ (change)="handleCheckedChange($event, dataItem)"/>
387
+ {{ dataItem.caption }}
388
+ </ng-template>
389
+ </kendo-treeview>
390
+
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <div *ngIf="horizontal; else verticalTemplate" class="k-form-field-wrapper">
396
+ <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
397
+ </div>
398
+
399
+ <ng-template #verticalTemplate>
400
+ <div class="k-form-field" kendoDropTarget axes="columnAxes">
401
+ <span class="k-label">{{messageFor('configuratorColumnsText')}}</span>
402
+ </div>
403
+
404
+ <kendo-chiplist
405
+ *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
406
+ kendoDropTarget
407
+ axes="columnAxes"
408
+ >
409
+ <kendo-chip *ngFor="let item of state.columnAxes"
410
+ kendoChipDraggable
411
+ kendoDraggable
412
+ kendoDropTarget
413
+ [item]="item"
414
+ axes="columnAxes"
415
+ rounded="full"
416
+ [removable]="true"
417
+ >
418
+ {{ getName(item.name) }}
419
+ </kendo-chip>
420
+ </kendo-chiplist>
421
+
422
+ <ng-template #noColumnAxes>
423
+ <div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
424
+ </ng-template>
425
+
426
+ <div class="k-form-field" kendoDropTarget axes="rowAxes">
427
+ <span class="k-label">{{messageFor('configuratorRowsText')}}</span>
428
+ </div>
429
+
430
+ <kendo-chiplist
431
+ *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
432
+ kendoDropTarget
433
+ axes="rowAxes"
434
+ >
435
+ <kendo-chip *ngFor="let item of state.rowAxes"
436
+ kendoChipDraggable
437
+ kendoDraggable
438
+ kendoDropTarget
439
+ [item]="item"
440
+ axes="rowAxes"
441
+ rounded="full"
442
+ [removable]="true"
443
+ >
444
+ {{ getName(item.name) }}
445
+ </kendo-chip>
446
+ </kendo-chiplist>
447
+
448
+ <ng-template #noRowAxes>
449
+ <div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
450
+ </ng-template>
451
+ </ng-template>
452
+
453
+ <div *ngIf="horizontal; else elseTpl2" class="k-form-field-wrapper">
454
+ <ng-container *ngTemplateOutlet="elseTpl2"></ng-container>
455
+ </div>
456
+
457
+ <ng-template #elseTpl2>
458
+ <div class="k-form-field" kendoDropTarget axes="measureAxes">
459
+ <span class="k-label">{{messageFor('configuratorValuesText')}}</span>
460
+ </div>
461
+
462
+ <kendo-chiplist
463
+ *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
464
+ kendoDropTarget
465
+ axes="measureAxes"
466
+ >
467
+ <kendo-chip *ngFor="let item of state.measureAxes"
468
+ kendoChipDraggable
469
+ kendoDraggable
470
+ kendoDropTarget
471
+ [item]="item"
472
+ axes="measureAxes"
473
+
474
+ rounded="full"
475
+ [removable]="true"
476
+ >
477
+ {{ getName(item.name) }}
478
+ </kendo-chip>
479
+ </kendo-chiplist>
480
+
481
+ <ng-template #noMeasureAxes>
482
+ <div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
483
+ </ng-template>
484
+ </ng-template>
485
+
486
+ </div>
487
+ </div>
488
+ <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
489
+ <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
490
+ <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
491
+ </div>
492
+ </div>
493
+ `
494
+ }]
495
+ }], ctorParameters: function () { return [{ type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
496
+ type: HostBinding,
497
+ args: ['class.k-pivotgrid-configurator']
498
+ }], horizontal: [{
499
+ type: Input
500
+ }] } });
@@ -0,0 +1,38 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { EventEmitter, Injectable, Output } from '@angular/core';
6
+ import { configuratorReducer } from '@progress/kendo-pivotgrid-common';
7
+ import * as i0 from "@angular/core";
8
+ /**
9
+ * @hidden
10
+ */
11
+ export class ConfiguratorService {
12
+ constructor() {
13
+ this.configuratorStateChange = new EventEmitter();
14
+ }
15
+ parseConfiguratorState(action) {
16
+ const newState = configuratorReducer({
17
+ filter: [],
18
+ sort: [],
19
+ rowAxes: this.state.rowAxes,
20
+ columnAxes: this.state.columnAxes,
21
+ measureAxes: this.state.measureAxes,
22
+ dragItem: this.state.dragItem,
23
+ dropDirection: this.state.dropDirection,
24
+ dropTarget: this.state.dropTarget,
25
+ dropZone: this.state.dropZone
26
+ }, action);
27
+ Object.keys(newState).forEach(key => newState[key] === undefined && delete newState[key]);
28
+ this.state = Object.assign(Object.assign({}, this.state), newState);
29
+ this.configuratorStateChange.emit(this.state);
30
+ }
31
+ }
32
+ ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
33
+ ConfiguratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService });
34
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, decorators: [{
35
+ type: Injectable
36
+ }], propDecorators: { configuratorStateChange: [{
37
+ type: Output
38
+ }] } });