@progress/kendo-angular-pivotgrid 17.0.0-develop.4 → 17.0.0-develop.41

package/{esm2020 → esm2022}/configurator/configurator.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, Component, EventEmitter, HostBinding, Input, NgZone, Output, ViewChild } from '@angular/core';
 import { ConfiguratorNavigation } from '@progress/kendo-pivotgrid-common';
-import { ExpandDirective, NodeTemplateDirective, TreeViewComponent } from '@progress/kendo-angular-treeview';
+import { CheckDirective, ExpandDirective, NodeTemplateDirective, TreeViewComponent } from '@progress/kendo-angular-treeview';
 import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
 import { ConfiguratorService } from './configurator.service';
 import { DropCueService } from './drop-cue.service';
@@ -20,7 +20,7 @@ import { DraggableChipDirective } from './draggable.directive';
 import { DropTargetDirective } from './drop-target.directive';
 import { NgClass, NgStyle, NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
 import { DraggableDirective } from '@progress/kendo-angular-common';
-import { CheckBoxDirective } from '@progress/kendo-angular-inputs';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 import * as i1 from "../data-binding/pivotgrid-data.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -30,41 +30,44 @@ import * as i3 from "./configurator.service";
  * Represents the Kendo UI PivotGrid Configurator component for Angular.
  */
 export class PivotGridConfiguratorComponent {
+    dataService;
+    localization;
+    configuratorService;
+    cdr;
+    zone;
+    hostClass = true;
+    hostAriaRole = 'dialog';
+    get headerTextId() {
+        return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-header`;
+    }
+    orientation = 'vertical';
+    sort = new Array();
+    filter;
+    navigation;
+    close = new EventEmitter();
+    treeView;
+    columnsList;
+    rowsList;
+    originalState;
+    state;
+    fields;
+    checked = [];
+    get isHorizontal() {
+        return this.orientation === 'horizontal';
+    }
+    subs = new Subscription();
+    /**
+     * A function which determines if a specific node has child nodes.
+     */
+    hasChildren = (node) => !('hierarchyUniqueName' in node) && !('aggregator' in node);
     constructor(dataService, localization, configuratorService, cdr, zone) {
         this.dataService = dataService;
         this.localization = localization;
         this.configuratorService = configuratorService;
         this.cdr = cdr;
         this.zone = zone;
-        this.hostClass = true;
-        this.hostAriaRole = 'dialog';
-        this.orientation = 'vertical';
-        this.sort = new Array();
-        this.close = new EventEmitter();
-        this.checked = [];
-        this.subs = new Subscription();
-        /**
-         * A function which determines if a specific node has child nodes.
-         */
-        this.hasChildren = (node) => !('hierarchyUniqueName' in node) && !('aggregator' in node);
-        /**
-         * A function which provides the child nodes for a given parent node.
-         */
-        this.children = (node) => {
-            if (this.dataService.directive.type === 'olap') {
-                const observable = from(this.dataService.directive.fetchChildren(node, this.fields));
-                return observable.pipe(mergeMap(value => of(value)));
-            }
-            return of(node.children);
-        };
         this.configuratorService.configuratorInstance = this;
     }
-    get headerTextId() {
-        return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-header`;
-    }
-    get isHorizontal() {
-        return this.orientation === 'horizontal';
-    }
     ngOnInit() {
         this.subs.add(this.dataService.fields
             .subscribe(res => {
@@ -201,16 +204,9 @@ export class PivotGridConfiguratorComponent {
         ].some((h) => (h === f.uniqueName || h === f.defaultHierarchy)));
         this.checked = checked;
     }
-    /**
-     * A function which determines if a specific node is checked/
-     */
-    isItemChecked(node) {
-        const res = this.checked.some(s => node.defaultHierarchy
-            ? s.defaultHierarchy === node.defaultHierarchy
-            : s.uniqueName === node.uniqueName)
-            || (node.children?.length && node.children?.every((c) => c.checked));
-        return res || null;
-    }
+    checkItemBy = (context) => {
+        return context.dataItem;
+    };
     /**
      * Determines if a checkbox should be rendered.
      */
@@ -220,6 +216,16 @@ export class PivotGridConfiguratorComponent {
             || (node.type === 2)
             || node.uniqueName === '[KPIs]');
     }
+    /**
+     * A function which provides the child nodes for a given parent node.
+     */
+    children = (node) => {
+        if (this.dataService.directive.type === 'olap') {
+            const observable = from(this.dataService.directive.fetchChildren(node, this.fields));
+            return observable.pipe(mergeMap(value => of(value)));
+        }
+        return of(node.children);
+    };
     /**
      * Check if the newly loaded child nodes have checked items.
      * (Only for OLAP data-binding directive)
@@ -231,21 +237,14 @@ export class PivotGridConfiguratorComponent {
         const fields = event.children.map(item => item.dataItem);
         this.setChecked(fields);
     }
-    handleCheckedChange(event, item) {
-        if (event.target.checked) {
-            this.checked = [...this.checked, item];
-        }
-        else {
-            const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === item.uniqueName);
-            this.checked.splice(itemIndex, 1);
-        }
+    handleCheckedChange(event) {
+        const itemIndex = this.checked.findIndex(checkedItem => checkedItem.uniqueName === event.item.dataItem.uniqueName);
+        this.checked.splice(itemIndex, 1);
         const action = {
             type: 'PIVOT_CONFIGURATOR_ACTION_TOGGLE_SELECTION',
-            payload: item
+            payload: event.item.dataItem
         };
         this.configuratorService.parseConfiguratorState(action);
-        const closestItem = event.target.closest('.k-treeview-item');
-        this.zone.runOutsideAngular(() => setTimeout(() => closestItem.focus()));
     }
     onTreeViewSelect(ev) {
         const closestItem = ev.target.closest('.k-treeview-item');
@@ -313,13 +312,12 @@ export class PivotGridConfiguratorComponent {
         this.cdr.detectChanges();
         this[`${targetCollectionName}sList`]?.chips.last.focus();
     }
-}
-PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PivotGridConfiguratorComponent, isStandalone: true, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
-        ConfiguratorService,
-        DropCueService,
-        SinglePopupService
-    ], viewQueries: [{ propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "columnsList", first: true, predicate: ["columnsChiplist"], descendants: true }, { propertyName: "rowsList", first: true, predicate: ["rowsChiplist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PivotGridConfiguratorComponent, isStandalone: true, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
+            ConfiguratorService,
+            DropCueService,
+            SinglePopupService
+        ], viewQueries: [{ propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "columnsList", first: true, predicate: ["columnsChiplist"], descendants: true }, { propertyName: "rowsList", first: true, predicate: ["rowsChiplist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div 
             class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
             [ngClass]="{
@@ -334,7 +332,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </div>
 
             <div class="k-pivotgrid-configurator-content">
-                <div class="k-form" [class.k-form-horizontal]="isHorizontal" role="form">
+                <div class="k-form k-form-md" [class.k-form-horizontal]="isHorizontal" [class.k-form-vertical]="!isHorizontal" role="form">
                     <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
                         <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -349,21 +347,14 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                                     textField="caption"
                                     [children]="children"
                                     [hasChildren]="hasChildren"
+                                    kendoTreeViewCheckable
+                                    [hasCheckbox]="isSelectable"
+                                    [(checkedKeys)]="checked"
+                                    [checkBy]="checkItemBy"
+                                    (checkedChange)="handleCheckedChange($event)"
                                     kendoTreeViewExpandable
                                     (childrenLoaded)="handleChildrenLoaded($event)"
                                     (keydown.space)="onTreeViewSelect($event)">
-                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
-                                    <input kendoCheckBox
-                                        *ngIf="isSelectable(dataItem)"
-                                        type="checkbox"
-                                        kendoCheckBox
-                                        tabindex="-1"
-                                        role="none"
-                                        aria-hidden="true"
-                                        [checked]="isItemChecked(dataItem)"
-                                        (change)="handleCheckedChange($event, dataItem)"/>
-                                    {{ dataItem.caption }}
-                                </ng-template>
                                 </kendo-treeview>
 
                             </div>
@@ -381,8 +372,10 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                         <kendo-chiplist
                             *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            [navigable]="false"
                             #columnsChiplist
                             kendoDropTarget
+                            class="k-column-fields"
                             axes="columnAxes"
                             [style.width.%]="100"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
@@ -390,20 +383,25 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         >
                             <ng-container *ngFor="let item of state.columnAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="columnAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuColumns.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'column')"
                                     (reorder)="onReorder($event, 'column', item)"
-                                >{{ getName(item.name) }}
+                                >
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuColumns
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -418,8 +416,10 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                         <kendo-chiplist
                             *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            [navigable]="false"
                             #rowsChiplist
                             kendoDropTarget
+                            class="k-row-fields"
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
@@ -427,22 +427,25 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="rowAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuRows.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'row')"
                                     (reorder)="onReorder($event, 'row', item)"
                                 >
-                                    {{ getName(item.name) }}
-    
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuRows
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -463,30 +466,34 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
 
                         <kendo-chiplist
                             *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            [navigable]="false"
                             kendoDropTarget
+                            class="k-filter-fields"
                             axes="measureAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                             [style.width.%]="100"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
+                                #chip
                                 kendoChipDraggable
                                 kendoDraggable
                                 kendoDropTarget
                                 kendoChipKeyboardNavigation
                                 [item]="item"
+                                [label]="getName(item.name)"
                                 axes="measureAxes"
-                                rounded="full"
                                 [removable]="true"
+                                [hasMenu]="true"
+                                (menuToggle)="chipMenuValues.toggle($event)"
                                 (remove)="onChipRemove($event, item, 'measure')"
                                 (reorder)="onReorder($event, 'measure', item)"
                                 >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [isMeasureField]="true"
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
+                                    <kendo-pivot-chip-menu
+                                        #chipMenuValues
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -497,13 +504,14 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                     
                 </div>
             </div>
-            <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
+            <div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
                 <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `, 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
+   `, 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", "avatarSettings", "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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-pivotgrid-configurator',
@@ -527,7 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </div>
 
             <div class="k-pivotgrid-configurator-content">
-                <div class="k-form" [class.k-form-horizontal]="isHorizontal" role="form">
+                <div class="k-form k-form-md" [class.k-form-horizontal]="isHorizontal" [class.k-form-vertical]="!isHorizontal" role="form">
                     <div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
                         <div class="k-form-field" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
                             <span [id]="contentLabelId('fields')" class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -542,21 +550,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                                     textField="caption"
                                     [children]="children"
                                     [hasChildren]="hasChildren"
+                                    kendoTreeViewCheckable
+                                    [hasCheckbox]="isSelectable"
+                                    [(checkedKeys)]="checked"
+                                    [checkBy]="checkItemBy"
+                                    (checkedChange)="handleCheckedChange($event)"
                                     kendoTreeViewExpandable
                                     (childrenLoaded)="handleChildrenLoaded($event)"
                                     (keydown.space)="onTreeViewSelect($event)">
-                                <ng-template kendoTreeViewNodeTemplate let-dataItem>
-                                    <input kendoCheckBox
-                                        *ngIf="isSelectable(dataItem)"
-                                        type="checkbox"
-                                        kendoCheckBox
-                                        tabindex="-1"
-                                        role="none"
-                                        aria-hidden="true"
-                                        [checked]="isItemChecked(dataItem)"
-                                        (change)="handleCheckedChange($event, dataItem)"/>
-                                    {{ dataItem.caption }}
-                                </ng-template>
                                 </kendo-treeview>
 
                             </div>
@@ -574,8 +575,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
                         <kendo-chiplist
                             *ngIf="state.columnAxes && state.columnAxes.length; else noColumnAxes"
+                            [navigable]="false"
                             #columnsChiplist
                             kendoDropTarget
+                            class="k-column-fields"
                             axes="columnAxes"
                             [style.width.%]="100"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
@@ -583,20 +586,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         >
                             <ng-container *ngFor="let item of state.columnAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="columnAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuColumns.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'column')"
                                     (reorder)="onReorder($event, 'column', item)"
-                                >{{ getName(item.name) }}
+                                >
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuColumns
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -611,8 +619,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
                         <kendo-chiplist
                             *ngIf="state.rowAxes && state.rowAxes.length; else noRowAxes"
+                            [navigable]="false"
                             #rowsChiplist
                             kendoDropTarget
+                            class="k-row-fields"
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
@@ -620,22 +630,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
+                                    #chip
                                     kendoChipDraggable
                                     kendoDraggable
                                     kendoDropTarget
                                     kendoChipKeyboardNavigation
                                     [item]="item"
+                                    [label]="getName(item.name)"
                                     axes="rowAxes"
-                                    rounded="full"
                                     [removable]="true"
+                                    [hasMenu]="true"
+                                    (menuToggle)="chipMenuRows.toggle($event)"
                                     (remove)="onChipRemove($event, item, 'row')"
                                     (reorder)="onReorder($event, 'row', item)"
                                 >
-                                    {{ getName(item.name) }}
-    
                                     <kendo-pivot-chip-menu
-                                        [chip]="item">
-                                    </kendo-pivot-chip-menu>
+                                        #chipMenuRows
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                                 </kendo-chip>
                             </ng-container>
                         </kendo-chiplist>
@@ -656,30 +669,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
                         <kendo-chiplist
                             *ngIf="state.measureAxes && state.measureAxes.length; else noMeasureAxes"
+                            [navigable]="false"
                             kendoDropTarget
+                            class="k-filter-fields"
                             axes="measureAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('values')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                             [style.width.%]="100"
                         >
                             <kendo-chip *ngFor="let item of state.measureAxes"
+                                #chip
                                 kendoChipDraggable
                                 kendoDraggable
                                 kendoDropTarget
                                 kendoChipKeyboardNavigation
                                 [item]="item"
+                                [label]="getName(item.name)"
                                 axes="measureAxes"
-                                rounded="full"
                                 [removable]="true"
+                                [hasMenu]="true"
+                                (menuToggle)="chipMenuValues.toggle($event)"
                                 (remove)="onChipRemove($event, item, 'measure')"
                                 (reorder)="onReorder($event, 'measure', item)"
                                 >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [isMeasureField]="true"
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
+                                    <kendo-pivot-chip-menu
+                                        #chipMenuValues
+                                        [chip]="item"
+                                        [anchor]="chip"
+                                    ></kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -690,7 +707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     
                 </div>
             </div>
-            <div class="k-pivotgrid-configurator-actions k-actions k-hstack k-justify-content-end">
+            <div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
                 <button kendoButton type="button" (click)="handleReset()">{{messageFor('configuratorCancelButtonText')}}</button>
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
@@ -698,7 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
    `,
                     standalone: true,
                     imports: [
-                        NgClass, NgStyle, TreeViewComponent, ExpandDirective, NodeTemplateDirective, NgIf, CheckBoxDirective,
+                        NgClass, NgStyle, TreeViewComponent, ExpandDirective, CheckDirective, NodeTemplateDirective, NgIf, CheckBoxComponent,
                         NgTemplateOutlet, DropTargetDirective, ChipListComponent, NgFor, ChipComponent, DraggableChipDirective,
                         DraggableDirective, ChipKeyboardNavigationDirective, ChipMenuComponent, ButtonComponent
                     ]

package/{esm2020 → esm2022}/configurator/configurator.service.mjs

@@ -12,10 +12,17 @@ import * as i1 from "../data-binding/pivotgrid-data.service";
  * @hidden
  */
 export class ConfiguratorService {
+    dataService;
+    configuratorInstance;
+    state;
+    draggedElement;
+    dropTargetElement;
+    cueContainer;
+    orientation;
+    configuratorStateChange = new EventEmitter();
+    closeMenu = new EventEmitter();
     constructor(dataService) {
         this.dataService = dataService;
-        this.configuratorStateChange = new EventEmitter();
-        this.closeMenu = new EventEmitter();
     }
     parseConfiguratorState(action) {
         const newState = configuratorReducer({
@@ -34,10 +41,10 @@ export class ConfiguratorService {
         this.dataService.state = new PivotGridState(this.state.columnAxes, this.state.rowAxes, this.state.measureAxes, this.state.sort, this.state.filter);
         this.configuratorStateChange.emit(this.state);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfiguratorService, deps: [{ token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfiguratorService });
 }
-ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfiguratorService, deps: [{ token: i1.PivotGridDataService }], target: i0.ɵɵFactoryTarget.Injectable });
-ConfiguratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfiguratorService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfiguratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfiguratorService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.PivotGridDataService }]; }, propDecorators: { configuratorStateChange: [{
                 type: Output