@progress/kendo-angular-pivotgrid 17.0.0-develop.6 → 17.0.0-develop.8

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.
@@ -2,12 +2,13 @@
2
2
  * Copyright © 2024 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 { OnDestroy, ElementRef, Renderer2 } from '@angular/core';
5
+ import { OnDestroy, Renderer2, TemplateRef } from '@angular/core';
6
6
  import { SinglePopupService } from './single-popup.service';
7
7
  import { ChipMenuService } from './chip-menu.service';
8
8
  import { PivotLocalizationService } from '../../localization/pivot-localization.service';
9
9
  import { AxisDescriptor } from '@progress/kendo-pivotgrid-common';
10
10
  import { SVGIcon } from '@progress/kendo-svg-icons';
11
+ import { ChipComponent } from '@progress/kendo-angular-buttons';
11
12
  import * as i0 from "@angular/core";
12
13
  /**
13
14
  * @hidden
@@ -25,15 +26,16 @@ export declare class ChipMenuComponent implements OnDestroy {
25
26
  chip: AxisDescriptor;
26
27
  tabIndex: string;
27
28
  isMeasureField: boolean;
28
- anchor: ElementRef;
29
+ anchor: ChipComponent;
30
+ template: TemplateRef<any>;
29
31
  menuItemSVGIcon: SVGIcon;
30
32
  private popupRef;
31
33
  private closeSubscription;
32
34
  constructor(popupService: SinglePopupService, localization: PivotLocalizationService, service: ChipMenuService, renderer: Renderer2);
33
35
  ngOnDestroy(): void;
34
- toggle(e: any, template: any): void;
36
+ toggle(e: any): void;
35
37
  close(): void;
36
38
  get chipMenuTitle(): string;
37
39
  static ɵfac: i0.ɵɵFactoryDeclaration<ChipMenuComponent, never>;
38
- static ɵcmp: i0.ɵɵComponentDeclaration<ChipMenuComponent, "kendo-pivot-chip-menu", never, { "chip": "chip"; "tabIndex": "tabIndex"; "isMeasureField": "isMeasureField"; }, {}, never, never, true, never>;
40
+ static ɵcmp: i0.ɵɵComponentDeclaration<ChipMenuComponent, "kendo-pivot-chip-menu", never, { "chip": "chip"; "tabIndex": "tabIndex"; "isMeasureField": "isMeasureField"; "anchor": "anchor"; }, {}, never, never, true, never>;
39
41
  }
@@ -81,10 +81,7 @@ export declare class PivotGridConfiguratorComponent implements OnInit, OnChanges
81
81
  * Child nodes are concatinated to the root level nodes.
82
82
  */
83
83
  setChecked(fields?: any[]): void;
84
- /**
85
- * A function which determines if a specific node is checked/
86
- */
87
- isItemChecked(node: any): any;
84
+ checkItemBy: (context: any) => any;
88
85
  /**
89
86
  * Determines if a checkbox should be rendered.
90
87
  */
@@ -101,7 +98,7 @@ export declare class PivotGridConfiguratorComponent implements OnInit, OnChanges
101
98
  children: TreeItem[];
102
99
  item: TreeItem;
103
100
  }): void;
104
- handleCheckedChange(event: any, item: any): void;
101
+ handleCheckedChange(event: any): void;
105
102
  onTreeViewSelect(ev: Event): void;
106
103
  onTreeViewEscape(ev: KeyboardEvent): void;
107
104
  handleSubmit(): void;
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /* eslint-disable @typescript-eslint/no-explicit-any */
6
6
  import { MenuTabbingService } from './filtering/menu-tabbing.service';
7
- import { Component, Input, ElementRef, ViewChild, Renderer2 } from '@angular/core';
7
+ import { Component, Input, ViewChild, Renderer2, TemplateRef } from '@angular/core';
8
8
  import { SinglePopupService } from './single-popup.service';
9
9
  import { ChipMenuService } from './chip-menu.service';
10
10
  import { PivotLocalizationService } from '../../localization/pivot-localization.service';
@@ -17,6 +17,7 @@ import { ChipMenuSortComponent } from './chip-menu-sort.component';
17
17
  import { NgIf } from '@angular/common';
18
18
  import { ChipMenuContainerComponent } from './chip-menu-container.component';
19
19
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
20
+ import { ChipComponent } from '@progress/kendo-angular-buttons';
20
21
  import * as i0 from "@angular/core";
21
22
  import * as i1 from "./single-popup.service";
22
23
  import * as i2 from "../../localization/pivot-localization.service";
@@ -42,22 +43,22 @@ export class ChipMenuComponent {
42
43
  this.close();
43
44
  this.closeSubscription.unsubscribe();
44
45
  }
45
- toggle(e, template) {
46
- if (e) {
47
- e.preventDefault();
48
- e.stopImmediatePropagation();
46
+ toggle(e) {
47
+ if (e?.originalEvent) {
48
+ e.originalEvent.preventDefault();
49
+ e.originalEvent.stopImmediatePropagation();
49
50
  }
50
- const anchor = this.anchor.nativeElement;
51
- this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
51
+ const anchorElement = this.anchor.element.nativeElement;
52
+ this.popupRef = this.popupService.open(anchorElement, this.template, this.popupRef, POPUP_CLASS);
52
53
  this.popupRef && this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
53
54
  if (!this.popupRef) {
54
- anchor.focus();
55
+ anchorElement.focus();
55
56
  }
56
57
  }
57
58
  close() {
58
59
  this.popupService.destroy();
59
60
  this.popupRef = null;
60
- this.anchor.nativeElement.closest('.k-chip').focus();
61
+ this.anchor.element.nativeElement.closest('.k-chip').focus();
61
62
  }
62
63
  get chipMenuTitle() {
63
64
  const localizationMsg = this.localization.get('chipMenuIconTitle') || '';
@@ -66,19 +67,10 @@ export class ChipMenuComponent {
66
67
  }
67
68
  }
68
69
  ChipMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.PivotLocalizationService }, { token: i3.ChipMenuService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
69
- ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuComponent, isStandalone: true, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex", isMeasureField: "isMeasureField" }, providers: [
70
+ ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChipMenuComponent, isStandalone: true, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex", isMeasureField: "isMeasureField", anchor: "anchor" }, providers: [
70
71
  ChipMenuService,
71
72
  MenuTabbingService
72
- ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
73
- <kendo-icon-wrapper
74
- #anchor
75
- name="more-vertical"
76
- [svgIcon]="menuItemSVGIcon"
77
- (click)="toggle($event, template)"
78
- [tabindex]="tabIndex"
79
- [attr.title]="chipMenuTitle"
80
- >
81
- </kendo-icon-wrapper>
73
+ ], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
82
74
  <ng-template #template>
83
75
  <kendo-pivot-chipmenu-container
84
76
  (keydown.escape)="close()"
@@ -107,7 +99,7 @@ ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
107
99
  [service]="service"></kendo-pivot-chipmenu-reorder>
108
100
  </kendo-pivot-chipmenu-container>
109
101
  </ng-template>
110
- `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { kind: "directive", type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }, { kind: "component", type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }] });
102
+ `, isInline: true, dependencies: [{ kind: "component", type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { kind: "directive", type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }, { kind: "component", type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }] });
111
103
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipMenuComponent, decorators: [{
112
104
  type: Component,
113
105
  args: [{
@@ -117,15 +109,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
117
109
  ],
118
110
  selector: 'kendo-pivot-chip-menu',
119
111
  template: `
120
- <kendo-icon-wrapper
121
- #anchor
122
- name="more-vertical"
123
- [svgIcon]="menuItemSVGIcon"
124
- (click)="toggle($event, template)"
125
- [tabindex]="tabIndex"
126
- [attr.title]="chipMenuTitle"
127
- >
128
- </kendo-icon-wrapper>
129
112
  <ng-template #template>
130
113
  <kendo-pivot-chipmenu-container
131
114
  (keydown.escape)="close()"
@@ -165,6 +148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
165
148
  }], isMeasureField: [{
166
149
  type: Input
167
150
  }], anchor: [{
151
+ type: Input
152
+ }], template: [{
168
153
  type: ViewChild,
169
- args: ['anchor', { static: true, read: ElementRef }]
154
+ args: ['template', { static: true }]
170
155
  }] } });
@@ -114,7 +114,7 @@ FilterMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
114
114
  </div>
115
115
  </div>
116
116
  </form>
117
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
117
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: StringFilterMenuComponent, selector: "kendo-pivot-string-filter-menu", inputs: ["chip", "menuTabbingService"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
118
118
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
119
119
  type: Component,
120
120
  args: [{
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, NgZone, Output, ViewChild } from '@angular/core';
6
6
  import { ConfiguratorNavigation } from '@progress/kendo-pivotgrid-common';
7
- import { ExpandDirective, NodeTemplateDirective, TreeViewComponent } from '@progress/kendo-angular-treeview';
7
+ import { CheckDirective, ExpandDirective, NodeTemplateDirective, TreeViewComponent } 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 { DropCueService } from './drop-cue.service';
@@ -20,7 +20,7 @@ import { DraggableChipDirective } from './draggable.directive';
20
20
  import { DropTargetDirective } from './drop-target.directive';
21
21
  import { NgClass, NgStyle, NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
22
22
  import { DraggableDirective } from '@progress/kendo-angular-common';
23
- import { CheckBoxDirective } from '@progress/kendo-angular-inputs';
23
+ import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
24
24
  import * as i0 from "@angular/core";
25
25
  import * as i1 from "../data-binding/pivotgrid-data.service";
26
26
  import * as i2 from "@progress/kendo-angular-l10n";
@@ -47,6 +47,9 @@ export class PivotGridConfiguratorComponent {
47
47
  * A function which determines if a specific node has child nodes.
48
48
  */
49
49
  this.hasChildren = (node) => !('hierarchyUniqueName' in node) && !('aggregator' in node);
50
+ this.checkItemBy = (context) => {
51
+ return context.dataItem;
52
+ };
50
53
  /**
51
54
  * A function which provides the child nodes for a given parent node.
52
55
  */
@@ -201,16 +204,6 @@ export class PivotGridConfiguratorComponent {
201
204
  ].some((h) => (h === f.uniqueName || h === f.defaultHierarchy)));
202
205
  this.checked = checked;
203
206
  }
204
- /**
205
- * A function which determines if a specific node is checked/
206
- */
207
- isItemChecked(node) {
208
- const res = this.checked.some(s => node.defaultHierarchy
209
- ? s.defaultHierarchy === node.defaultHierarchy
210
- : s.uniqueName === node.uniqueName)
211
- || (node.children?.length && node.children?.every((c) => c.checked));
212
- return res || null;
213
- }
214
207
  /**
215
208
  * Determines if a checkbox should be rendered.
216
209
  */
@@ -231,21 +224,14 @@ export class PivotGridConfiguratorComponent {
231
224
  const fields = event.children.map(item => item.dataItem);
232
225
  this.setChecked(fields);
233
226
  }
234
- handleCheckedChange(event, item) {
235
- if (event.target.checked) {
236
- this.checked = [...this.checked, item];
237
- }
238
- else {
239
- const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === item.uniqueName);
240
- this.checked.splice(itemIndex, 1);
241
- }
227
+ handleCheckedChange(event) {
228
+ const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === event.item.dataItem.uniqueName);
229
+ this.checked.splice(itemIndex, 1);
242
230
  const action = {
243
231
  type: 'PIVOT_CONFIGURATOR_ACTION_TOGGLE_SELECTION',
244
- payload: item
232
+ payload: event.item.dataItem
245
233
  };
246
234
  this.configuratorService.parseConfiguratorState(action);
247
- const closestItem = event.target.closest('.k-treeview-item');
248
- this.zone.runOutsideAngular(() => setTimeout(() => closestItem.focus()));
249
235
  }
250
236
  onTreeViewSelect(ev) {
251
237
  const closestItem = ev.target.closest('.k-treeview-item');
@@ -334,7 +320,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
334
320
  </div>
335
321
 
336
322
  <div class="k-pivotgrid-configurator-content">
337
- <div class="k-form" [class.k-form-horizontal]="isHorizontal" role="form">
323
+ <div class="k-form k-form-md" [class.k-form-horizontal]="isHorizontal" [class.k-form-vertical]="!isHorizontal" role="form">
338
324
  <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
339
325
  <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
340
326
  <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -349,21 +335,14 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
349
335
  textField="caption"
350
336
  [children]="children"
351
337
  [hasChildren]="hasChildren"
338
+ kendoTreeViewCheckable
339
+ [hasCheckbox]="isSelectable"
340
+ [(checkedKeys)]="checked"
341
+ [checkBy]="checkItemBy"
342
+ (checkedChange)="handleCheckedChange($event)"
352
343
  kendoTreeViewExpandable
353
344
  (childrenLoaded)="handleChildrenLoaded($event)"
354
345
  (keydown.space)="onTreeViewSelect($event)">
355
- <ng-template kendoTreeViewNodeTemplate let-dataItem>
356
- <input kendoCheckBox
357
- *ngIf="isSelectable(dataItem)"
358
- type="checkbox"
359
- kendoCheckBox
360
- tabindex="-1"
361
- role="none"
362
- aria-hidden="true"
363
- [checked]="isItemChecked(dataItem)"
364
- (change)="handleCheckedChange($event, dataItem)"/>
365
- {{ dataItem.caption }}
366
- </ng-template>
367
346
  </kendo-treeview>
368
347
 
369
348
  </div>
@@ -383,6 +362,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
383
362
  *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
384
363
  #columnsChiplist
385
364
  kendoDropTarget
365
+ class="k-column-fields"
386
366
  axes="columnAxes"
387
367
  [style.width.%]="100"
388
368
  [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
@@ -390,20 +370,25 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
390
370
  >
391
371
  <ng-container *ngFor="let item of state.columnAxes">
392
372
  <kendo-chip *ngIf="item.name.length === 1"
373
+ #chip
393
374
  kendoChipDraggable
394
375
  kendoDraggable
395
376
  kendoDropTarget
396
377
  kendoChipKeyboardNavigation
397
378
  [item]="item"
379
+ [label]="getName(item.name)"
398
380
  axes="columnAxes"
399
- rounded="full"
400
381
  [removable]="true"
382
+ [hasMenu]="true"
383
+ (menuToggle)="chipMenuColumns.toggle($event)"
401
384
  (remove)="onChipRemove($event, item, 'column')"
402
385
  (reorder)="onReorder($event, 'column', item)"
403
- >{{ getName(item.name) }}
386
+ >
404
387
  <kendo-pivot-chip-menu
405
- [chip]="item">
406
- </kendo-pivot-chip-menu>
388
+ #chipMenuColumns
389
+ [chip]="item"
390
+ [anchor]="chip"
391
+ ></kendo-pivot-chip-menu>
407
392
  </kendo-chip>
408
393
  </ng-container>
409
394
  </kendo-chiplist>
@@ -420,6 +405,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
420
405
  *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
421
406
  #rowsChiplist
422
407
  kendoDropTarget
408
+ class="k-row-fields"
423
409
  axes="rowAxes"
424
410
  [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
425
411
  [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
@@ -427,22 +413,25 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
427
413
  >
428
414
  <ng-container *ngFor="let item of state.rowAxes">
429
415
  <kendo-chip *ngIf="item.name.length === 1"
416
+ #chip
430
417
  kendoChipDraggable
431
418
  kendoDraggable
432
419
  kendoDropTarget
433
420
  kendoChipKeyboardNavigation
434
421
  [item]="item"
422
+ [label]="getName(item.name)"
435
423
  axes="rowAxes"
436
- rounded="full"
437
424
  [removable]="true"
425
+ [hasMenu]="true"
426
+ (menuToggle)="chipMenuRows.toggle($event)"
438
427
  (remove)="onChipRemove($event, item, 'row')"
439
428
  (reorder)="onReorder($event, 'row', item)"
440
429
  >
441
- {{ getName(item.name) }}
442
-
443
430
  <kendo-pivot-chip-menu
444
- [chip]="item">
445
- </kendo-pivot-chip-menu>
431
+ #chipMenuRows
432
+ [chip]="item"
433
+ [anchor]="chip"
434
+ ></kendo-pivot-chip-menu>
446
435
  </kendo-chip>
447
436
  </ng-container>
448
437
  </kendo-chiplist>
@@ -464,29 +453,32 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
464
453
  <kendo-chiplist
465
454
  *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
466
455
  kendoDropTarget
456
+ class="k-filter-fields"
467
457
  axes="measureAxes"
468
458
  [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
469
459
  [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
470
460
  [style.width.%]="100"
471
461
  >
472
462
  <kendo-chip *ngFor="let item of state.measureAxes"
463
+ #chip
473
464
  kendoChipDraggable
474
465
  kendoDraggable
475
466
  kendoDropTarget
476
467
  kendoChipKeyboardNavigation
477
468
  [item]="item"
469
+ [label]="getName(item.name)"
478
470
  axes="measureAxes"
479
- rounded="full"
480
471
  [removable]="true"
472
+ [hasMenu]="true"
473
+ (menuToggle)="chipMenuValues.toggle($event)"
481
474
  (remove)="onChipRemove($event, item, 'measure')"
482
475
  (reorder)="onReorder($event, 'measure', item)"
483
476
  >
484
- {{ getName(item.name) }}
485
-
486
- <kendo-pivot-chip-menu
487
- [isMeasureField]="true"
488
- [chip]="item">
489
- </kendo-pivot-chip-menu>
477
+ <kendo-pivot-chip-menu
478
+ #chipMenuValues
479
+ [chip]="item"
480
+ [anchor]="chip"
481
+ ></kendo-pivot-chip-menu>
490
482
  </kendo-chip>
491
483
  </kendo-chiplist>
492
484
 
@@ -497,12 +489,12 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
497
489
 
498
490
  </div>
499
491
  </div>
500
- <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
492
+ <div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
501
493
  <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
502
494
  <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
503
495
  </div>
504
496
  </div>
505
- `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "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"] }, { kind: "directive", type: ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { kind: "component", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "directive", type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }, { kind: "component", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex", "isMeasureField"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
497
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "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"] }, { kind: "directive", type: ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { kind: "component", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "directive", type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }, { kind: "component", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex", "isMeasureField", "anchor"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
506
498
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
507
499
  type: Component,
508
500
  args: [{
@@ -527,7 +519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
527
519
  </div>
528
520
 
529
521
  <div class="k-pivotgrid-configurator-content">
530
- <div class="k-form" [class.k-form-horizontal]="isHorizontal" role="form">
522
+ <div class="k-form k-form-md" [class.k-form-horizontal]="isHorizontal" [class.k-form-vertical]="!isHorizontal" role="form">
531
523
  <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
532
524
  <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
533
525
  <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -542,21 +534,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
542
534
  textField="caption"
543
535
  [children]="children"
544
536
  [hasChildren]="hasChildren"
537
+ kendoTreeViewCheckable
538
+ [hasCheckbox]="isSelectable"
539
+ [(checkedKeys)]="checked"
540
+ [checkBy]="checkItemBy"
541
+ (checkedChange)="handleCheckedChange($event)"
545
542
  kendoTreeViewExpandable
546
543
  (childrenLoaded)="handleChildrenLoaded($event)"
547
544
  (keydown.space)="onTreeViewSelect($event)">
548
- <ng-template kendoTreeViewNodeTemplate let-dataItem>
549
- <input kendoCheckBox
550
- *ngIf="isSelectable(dataItem)"
551
- type="checkbox"
552
- kendoCheckBox
553
- tabindex="-1"
554
- role="none"
555
- aria-hidden="true"
556
- [checked]="isItemChecked(dataItem)"
557
- (change)="handleCheckedChange($event, dataItem)"/>
558
- {{ dataItem.caption }}
559
- </ng-template>
560
545
  </kendo-treeview>
561
546
 
562
547
  </div>
@@ -576,6 +561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
576
561
  *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
577
562
  #columnsChiplist
578
563
  kendoDropTarget
564
+ class="k-column-fields"
579
565
  axes="columnAxes"
580
566
  [style.width.%]="100"
581
567
  [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
@@ -583,20 +569,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
583
569
  >
584
570
  <ng-container *ngFor="let item of state.columnAxes">
585
571
  <kendo-chip *ngIf="item.name.length === 1"
572
+ #chip
586
573
  kendoChipDraggable
587
574
  kendoDraggable
588
575
  kendoDropTarget
589
576
  kendoChipKeyboardNavigation
590
577
  [item]="item"
578
+ [label]="getName(item.name)"
591
579
  axes="columnAxes"
592
- rounded="full"
593
580
  [removable]="true"
581
+ [hasMenu]="true"
582
+ (menuToggle)="chipMenuColumns.toggle($event)"
594
583
  (remove)="onChipRemove($event, item, 'column')"
595
584
  (reorder)="onReorder($event, 'column', item)"
596
- >{{ getName(item.name) }}
585
+ >
597
586
  <kendo-pivot-chip-menu
598
- [chip]="item">
599
- </kendo-pivot-chip-menu>
587
+ #chipMenuColumns
588
+ [chip]="item"
589
+ [anchor]="chip"
590
+ ></kendo-pivot-chip-menu>
600
591
  </kendo-chip>
601
592
  </ng-container>
602
593
  </kendo-chiplist>
@@ -613,6 +604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
613
604
  *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
614
605
  #rowsChiplist
615
606
  kendoDropTarget
607
+ class="k-row-fields"
616
608
  axes="rowAxes"
617
609
  [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
618
610
  [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
@@ -620,22 +612,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
620
612
  >
621
613
  <ng-container *ngFor="let item of state.rowAxes">
622
614
  <kendo-chip *ngIf="item.name.length === 1"
615
+ #chip
623
616
  kendoChipDraggable
624
617
  kendoDraggable
625
618
  kendoDropTarget
626
619
  kendoChipKeyboardNavigation
627
620
  [item]="item"
621
+ [label]="getName(item.name)"
628
622
  axes="rowAxes"
629
- rounded="full"
630
623
  [removable]="true"
624
+ [hasMenu]="true"
625
+ (menuToggle)="chipMenuRows.toggle($event)"
631
626
  (remove)="onChipRemove($event, item, 'row')"
632
627
  (reorder)="onReorder($event, 'row', item)"
633
628
  >
634
- {{ getName(item.name) }}
635
-
636
629
  <kendo-pivot-chip-menu
637
- [chip]="item">
638
- </kendo-pivot-chip-menu>
630
+ #chipMenuRows
631
+ [chip]="item"
632
+ [anchor]="chip"
633
+ ></kendo-pivot-chip-menu>
639
634
  </kendo-chip>
640
635
  </ng-container>
641
636
  </kendo-chiplist>
@@ -657,29 +652,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
657
652
  <kendo-chiplist
658
653
  *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
659
654
  kendoDropTarget
655
+ class="k-filter-fields"
660
656
  axes="measureAxes"
661
657
  [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
662
658
  [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
663
659
  [style.width.%]="100"
664
660
  >
665
661
  <kendo-chip *ngFor="let item of state.measureAxes"
662
+ #chip
666
663
  kendoChipDraggable
667
664
  kendoDraggable
668
665
  kendoDropTarget
669
666
  kendoChipKeyboardNavigation
670
667
  [item]="item"
668
+ [label]="getName(item.name)"
671
669
  axes="measureAxes"
672
- rounded="full"
673
670
  [removable]="true"
671
+ [hasMenu]="true"
672
+ (menuToggle)="chipMenuValues.toggle($event)"
674
673
  (remove)="onChipRemove($event, item, 'measure')"
675
674
  (reorder)="onReorder($event, 'measure', item)"
676
675
  >
677
- {{ getName(item.name) }}
678
-
679
- <kendo-pivot-chip-menu
680
- [isMeasureField]="true"
681
- [chip]="item">
682
- </kendo-pivot-chip-menu>
676
+ <kendo-pivot-chip-menu
677
+ #chipMenuValues
678
+ [chip]="item"
679
+ [anchor]="chip"
680
+ ></kendo-pivot-chip-menu>
683
681
  </kendo-chip>
684
682
  </kendo-chiplist>
685
683
 
@@ -690,7 +688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
690
688
 
691
689
  </div>
692
690
  </div>
693
- <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
691
+ <div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
694
692
  <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
695
693
  <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
696
694
  </div>
@@ -698,7 +696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
698
696
  `,
699
697
  standalone: true,
700
698
  imports: [
701
- NgClass, NgStyle, TreeViewComponent, ExpandDirective, NodeTemplateDirective, NgIf, CheckBoxDirective,
699
+ NgClass, NgStyle, TreeViewComponent, ExpandDirective, CheckDirective, NodeTemplateDirective, NgIf, CheckBoxComponent,
702
700
  NgTemplateOutlet, DropTargetDirective, ChipListComponent, NgFor, ChipComponent, DraggableChipDirective,
703
701
  DraggableDirective, ChipKeyboardNavigationDirective, ChipMenuComponent, ButtonComponent
704
702
  ]
@@ -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: 1729020318,
13
- version: '17.0.0-develop.6',
12
+ publishDate: 1729170378,
13
+ version: '17.0.0-develop.8',
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
  };