@progress/kendo-angular-pivotgrid 14.1.0-develop.10 → 14.1.0-develop.11

package/fesm2015/progress-kendo-angular-pivotgrid.mjs

@@ -10,10 +10,10 @@ import { isDocumentAvailable, PreventableEvent, Keys, isChanged, hasObservers, a
 import { toTree, toRows, toColumns, toData, configuratorReducer, PIVOT_CONFIGURATOR_ACTION, PivotGridNavigation, ConfiguratorNavigation, HEADERS_ACTION, headersReducer, createFlatSchemaDimensions, createDataTree, createLocalDataState, rootFields, fetchData, createDataState, fetchDiscover, addKPI, buildKPIMeasures } from '@progress/kendo-pivotgrid-common';
 export { averageAggregate, maxAggregate, minAggregate, sumAggregate } from '@progress/kendo-pivotgrid-common';
 import { BehaviorSubject, Subscription, Subject, from, of, fromEvent } from 'rxjs';
-import { take, mergeMap, merge } from 'rxjs/operators';
+import { take, tap, mergeMap, merge } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { chevronUpIcon, chevronDownIcon, sortAscSmallIcon, sortDescSmallIcon, filterIcon, moreVerticalIcon, gearIcon } from '@progress/kendo-svg-icons';
+import { chevronUpIcon, chevronDownIcon, sortAscSmallIcon, sortDescSmallIcon, filterIcon, columnsIcon, rowsIcon, arrowLeftIcon, arrowRightIcon, moreVerticalIcon, gearIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i7 from '@angular/common';
@@ -41,8 +41,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1699437592,
-    version: '14.1.0-develop.10',
+    publishDate: 1699450680,
+    version: '14.1.0-develop.11',
     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'
 };
 
@@ -528,6 +528,7 @@ class ConfiguratorService {
     constructor(dataService) {
         this.dataService = dataService;
         this.configuratorStateChange = new EventEmitter();
+        this.closeMenu = new EventEmitter();
     }
     parseConfiguratorState(action) {
         const newState = configuratorReducer({
@@ -553,6 +554,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { configuratorStateChange: [{
                 type: Output
+            }], closeMenu: [{
+                type: Output
             }] } });
 
 /**
@@ -755,9 +758,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents the service that is passed to the ChipMenuFilterComponent and ChipMenuSortComponent.
  */
 class ChipMenuService {
-    constructor(menuTabbingService) {
+    constructor(menuTabbingService, configuratorService) {
+        this.configuratorService = configuratorService;
         this.closeMenu = new EventEmitter();
+        this.sub = new Subscription();
         this.menuTabbingService = menuTabbingService;
+        configuratorService && (this.sub = configuratorService.closeMenu.subscribe(() => this.close()));
     }
     /**
      * Closes the chip menu.
@@ -765,12 +771,15 @@ class ChipMenuService {
     close() {
         this.closeMenu.emit();
     }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
 }
-ChipMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuService, deps: [{ token: MenuTabbingService }], target: i0.ɵɵFactoryTarget.Injectable });
+ChipMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuService, deps: [{ token: MenuTabbingService }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Injectable });
 ChipMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: MenuTabbingService }]; } });
+        }], ctorParameters: function () { return [{ type: MenuTabbingService }, { type: ConfiguratorService }]; } });
 
 /**
  * @hidden
@@ -993,14 +1002,16 @@ class ChipMenuItemComponent {
     }
 }
 ChipMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ChipMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ChipMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", expanded: "expanded", disabled: "disabled" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ChipMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div
             class="k-columnmenu-item"
             (click)="onClick($event)"
             (keydown.enter)="onClick($event)"
             [class.k-selected]="selected"
+            [class.k-disabled]="disabled"
             role="button"
             [attr.aria-expanded]="expanded"
+            [attr.aria-disabled]="disabled"
         >
             <kendo-icon-wrapper
                 *ngIf="icon"
@@ -1068,8 +1079,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (click)="onClick($event)"
             (keydown.enter)="onClick($event)"
             [class.k-selected]="selected"
+            [class.k-disabled]="disabled"
             role="button"
             [attr.aria-expanded]="expanded"
+            [attr.aria-disabled]="disabled"
         >
             <kendo-icon-wrapper
                 *ngIf="icon"
@@ -1099,6 +1112,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], expanded: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }], contentTemplate: [{
                 type: ContentChild,
                 args: [ChipMenuItemContentTemplateDirective, { static: false }]
@@ -1163,7 +1178,7 @@ ChipMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-pivot-chipmenu-item>
-    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuSortComponent, decorators: [{
             type: Component,
             args: [{
@@ -1565,7 +1580,7 @@ ChipMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </kendo-pivot-filter-menu-container>
             </ng-template>
         </kendo-pivot-chipmenu-item>
-    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: ["chip", "isLast", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }], directives: [{ type: ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }, { type: FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: ["chip", "isLast", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }], directives: [{ type: ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -1605,6 +1620,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ *
+ * Represents a chip-menu item for reordering PivotGrid fields.
+ */
+class ChipMenuReorderComponent extends ChipMenuItemBase {
+    constructor(localization, renderer, configuratorService, dataService, cdr, ngZone) {
+        super();
+        this.localization = localization;
+        this.renderer = renderer;
+        this.configuratorService = configuratorService;
+        this.dataService = dataService;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.columnsIcon = columnsIcon;
+        this.rowsIcon = rowsIcon;
+        this.arrowLeftIcon = arrowLeftIcon;
+        this.arrowRightIcon = arrowRightIcon;
+        this.rtl = false;
+        this.subs = this.localization.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
+    }
+    get isColumnsField() {
+        return this.configuratorService.state.columnAxes.some(item => item === this.chip);
+    }
+    get isRowsField() {
+        return this.configuratorService.state.rowAxes.some(item => item === this.chip);
+    }
+    get isMeasureField() {
+        return this.configuratorService.state.measureAxes.some(item => item === this.chip);
+    }
+    get isFirst() {
+        const state = this.configuratorService.state;
+        return this.isColumnsField && state.columnAxes[0] === this.chip ||
+            this.isRowsField && state.rowAxes[0] === this.chip ||
+            this.isMeasureField && state.measureAxes[0] === this.chip;
+    }
+    get isLast() {
+        const state = this.configuratorService.state;
+        return this.isColumnsField && state.columnAxes[state.columnAxes.length - 1] === this.chip ||
+            this.isRowsField && state.rowAxes[state.rowAxes.length - 1] === this.chip ||
+            this.isMeasureField && state.measureAxes[state.measureAxes.length - 1] === this.chip;
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    messageFor(localizationToken) {
+        return this.localization.get(localizationToken);
+    }
+    move(e, target) {
+        const isDisabled = e.target.closest('.k-columnmenu-item').getAttribute('aria-disabled') !== 'false';
+        if (isDisabled) {
+            return;
+        }
+        const currentState = this.configuratorService.state;
+        switch (target) {
+            case 'columns':
+                {
+                    const newRows = currentState.rowAxes.filter(item => item !== this.chip);
+                    const newCols = [...currentState.columnAxes, this.chip];
+                    const newState = Object.assign(Object.assign({}, currentState), { rowAxes: newRows, columnAxes: newCols });
+                    this.configuratorService.configuratorInstance.setState(newState);
+                    this.ngZone.runOutsideAngular(() => setTimeout(() => { var _a; return (_a = this.configuratorService.configuratorInstance[`${target}List`]) === null || _a === void 0 ? void 0 : _a.chips.last.element.nativeElement.click(); }));
+                }
+                break;
+            case 'rows':
+                {
+                    const newCols = currentState.columnAxes.filter(item => item !== this.chip);
+                    const newRows = [...currentState.rowAxes, this.chip];
+                    const newState = Object.assign(Object.assign({}, currentState), { rowAxes: newRows, columnAxes: newCols });
+                    this.configuratorService.configuratorInstance.setState(newState);
+                    this.ngZone.runOutsideAngular(() => setTimeout(() => { var _a; return (_a = this.configuratorService.configuratorInstance[`${target}List`]) === null || _a === void 0 ? void 0 : _a.chips.last.element.nativeElement.click(); }));
+                }
+                break;
+            case 'prev':
+                {
+                    const axis = currentState.rowAxes.indexOf(this.chip) > -1 ? 'row' : currentState.columnAxes.indexOf(this.chip) > -1 ? 'column' : 'measure';
+                    const index = currentState[`${axis}Axes`].indexOf(this.chip);
+                    swapItems(currentState[`${axis}Axes`], index, index - 1);
+                    const newState = Object.assign({}, currentState);
+                    this.configuratorService.configuratorInstance.setState(newState);
+                }
+                break;
+            case 'next':
+                {
+                    const axis = currentState.rowAxes.indexOf(this.chip) > -1 ? 'row' : currentState.columnAxes.indexOf(this.chip) > -1 ? 'column' : 'measure';
+                    const index = currentState[`${axis}Axes`].indexOf(this.chip);
+                    swapItems(currentState[`${axis}Axes`], index, index + 1);
+                    const newState = Object.assign({}, currentState);
+                    this.configuratorService.configuratorInstance.setState(newState);
+                }
+                break;
+        }
+        this.close();
+    }
+}
+ChipMenuReorderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuReorderComponent, deps: [{ token: PivotLocalizationService }, { token: i0.Renderer2 }, { token: ConfiguratorService }, { token: PivotGridDataService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuReorderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: { chip: "chip" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-pivot-chipmenu-item
+            *ngIf="!isMeasureField"
+            [disabled]="isColumnsField"
+            [text]="messageFor('fieldMenuMoveToColumnsItem')"
+            icon="columns"
+            [svgIcon]="columnsIcon"
+            (itemClick)="move($event, 'columns')">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            *ngIf="!isMeasureField"
+            [disabled]="isRowsField"
+            [text]="messageFor('fieldMenuMoveToRowsItem')"
+            icon="rows"
+            [svgIcon]="rowsIcon"
+            (itemClick)="move($event, 'rows')">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            [disabled]="isFirst"
+            [text]="messageFor('fieldMenuMovePreviousItem')"
+            [icon]="rtl ? 'arrow-right' : 'arrow-left'"
+            [svgIcon]="rtl ? arrowRightIcon : arrowLeftIcon"
+            (itemClick)="move($event, 'prev')">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            [disabled]="isLast"
+            [text]="messageFor('fieldMenuMoveNextItem')"
+            [icon]="rtl ? 'arrow-left' : 'arrow-right'"
+            [svgIcon]="rtl ? arrowLeftIcon : arrowRightIcon"
+            (itemClick)="move($event, 'next')">
+        </kendo-pivot-chipmenu-item>
+    `, isInline: true, components: [{ type: ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuReorderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-pivot-chipmenu-reorder',
+                    template: `
+        <kendo-pivot-chipmenu-item
+            *ngIf="!isMeasureField"
+            [disabled]="isColumnsField"
+            [text]="messageFor('fieldMenuMoveToColumnsItem')"
+            icon="columns"
+            [svgIcon]="columnsIcon"
+            (itemClick)="move($event, 'columns')">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            *ngIf="!isMeasureField"
+            [disabled]="isRowsField"
+            [text]="messageFor('fieldMenuMoveToRowsItem')"
+            icon="rows"
+            [svgIcon]="rowsIcon"
+            (itemClick)="move($event, 'rows')">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            [disabled]="isFirst"
+            [text]="messageFor('fieldMenuMovePreviousItem')"
+            [icon]="rtl ? 'arrow-right' : 'arrow-left'"
+            [svgIcon]="rtl ? arrowRightIcon : arrowLeftIcon"
+            (itemClick)="move($event, 'prev')">
+        </kendo-pivot-chipmenu-item>
+        <kendo-pivot-chipmenu-item
+            [disabled]="isLast"
+            [text]="messageFor('fieldMenuMoveNextItem')"
+            [icon]="rtl ? 'arrow-left' : 'arrow-right'"
+            [svgIcon]="rtl ? arrowLeftIcon : arrowRightIcon"
+            (itemClick)="move($event, 'next')">
+        </kendo-pivot-chipmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: PivotLocalizationService }, { type: i0.Renderer2 }, { type: ConfiguratorService }, { type: PivotGridDataService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { chip: [{
+                type: Input
+            }] } });
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const POPUP_CLASS = 'k-column-menu';
 /**
@@ -1613,11 +1797,13 @@ const POPUP_CLASS = 'k-column-menu';
  * Represents the field chip menu component.
  */
 class ChipMenuComponent {
-    constructor(popupService, localization, service) {
+    constructor(popupService, localization, service, renderer) {
         this.popupService = popupService;
         this.localization = localization;
         this.service = service;
+        this.renderer = renderer;
         this.tabIndex = '-1';
+        this.isMeasureField = false;
         this.menuItemSVGIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
@@ -1632,6 +1818,7 @@ class ChipMenuComponent {
         }
         const anchor = this.anchor.nativeElement;
         this.popupRef = this.popupService.open(anchor, template, this.popupRef, POPUP_CLASS);
+        this.popupRef && this.renderer.setAttribute(this.popupRef.popupElement, 'dir', this.localization.rtl ? 'rtl' : 'ltr');
         if (!this.popupRef) {
             anchor.focus();
         }
@@ -1647,8 +1834,8 @@ class ChipMenuComponent {
         return replaceMessagePlaceholder(localizationMsg, 'fieldName', chipName);
     }
 }
-ChipMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuComponent, deps: [{ token: SinglePopupService }, { token: PivotLocalizationService }, { token: ChipMenuService }], target: i0.ɵɵFactoryTarget.Component });
-ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex" }, providers: [
+ChipMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuComponent, deps: [{ token: SinglePopupService }, { token: PivotLocalizationService }, { token: ChipMenuService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: { chip: "chip", tabIndex: "tabIndex", isMeasureField: "isMeasureField" }, providers: [
         ChipMenuService,
         MenuTabbingService
     ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
@@ -1665,23 +1852,31 @@ ChipMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             <kendo-pivot-chipmenu-container
                 (keydown.escape)="close()"
                 (keydown.enter)="$event.stopImmediatePropagation()">
-                <kendo-pivot-chipmenu-sort
-                    #sortItem
+                <ng-container *ngIf="!isMeasureField">
+                    <kendo-pivot-chipmenu-sort
+                        #sortItem
+                        [chip]="chip"
+                        [kendoPivotChipMenuItem]="sortItem"
+                        [service]="service">
+                    </kendo-pivot-chipmenu-sort>
+                    <span class="k-separator" [style.borderColor]="'rgba(0, 0, 0, 0.08)'"></span>
+                    <kendo-pivot-chipmenu-filter
+                        #filterItem
+                        [chip]="chip"
+                        [isLast]="true"
+                        [kendoPivotChipMenuItem]="filterItem"
+                        [service]="service">
+                    </kendo-pivot-chipmenu-filter>
+                    <span class="k-separator" [style.borderColor]="'rgba(0, 0, 0, 0.08)'"></span>
+                </ng-container>
+                <kendo-pivot-chipmenu-reorder
+                    #reorderItem
                     [chip]="chip"
-                    [kendoPivotChipMenuItem]="sortItem"
-                    [service]="service">
-                </kendo-pivot-chipmenu-sort>
-
-                <kendo-pivot-chipmenu-filter
-                    #filterItem
-                    [chip]="chip"
-                    [isLast]="true"
-                    [kendoPivotChipMenuItem]="filterItem"
-                    [service]="service">
-                </kendo-pivot-chipmenu-filter>
+                    [kendoPivotChipMenuItem]="reorderItem"
+                    [service]="service"></kendo-pivot-chipmenu-reorder>
             </kendo-pivot-chipmenu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { type: ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { type: ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -1704,28 +1899,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-pivot-chipmenu-container
                 (keydown.escape)="close()"
                 (keydown.enter)="$event.stopImmediatePropagation()">
-                <kendo-pivot-chipmenu-sort
-                    #sortItem
-                    [chip]="chip"
-                    [kendoPivotChipMenuItem]="sortItem"
-                    [service]="service">
-                </kendo-pivot-chipmenu-sort>
-
-                <kendo-pivot-chipmenu-filter
-                    #filterItem
+                <ng-container *ngIf="!isMeasureField">
+                    <kendo-pivot-chipmenu-sort
+                        #sortItem
+                        [chip]="chip"
+                        [kendoPivotChipMenuItem]="sortItem"
+                        [service]="service">
+                    </kendo-pivot-chipmenu-sort>
+                    <span class="k-separator" [style.borderColor]="'rgba(0, 0, 0, 0.08)'"></span>
+                    <kendo-pivot-chipmenu-filter
+                        #filterItem
+                        [chip]="chip"
+                        [isLast]="true"
+                        [kendoPivotChipMenuItem]="filterItem"
+                        [service]="service">
+                    </kendo-pivot-chipmenu-filter>
+                    <span class="k-separator" [style.borderColor]="'rgba(0, 0, 0, 0.08)'"></span>
+                </ng-container>
+                <kendo-pivot-chipmenu-reorder
+                    #reorderItem
                     [chip]="chip"
-                    [isLast]="true"
-                    [kendoPivotChipMenuItem]="filterItem"
-                    [service]="service">
-                </kendo-pivot-chipmenu-filter>
+                    [kendoPivotChipMenuItem]="reorderItem"
+                    [service]="service"></kendo-pivot-chipmenu-reorder>
             </kendo-pivot-chipmenu-container>
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: PivotLocalizationService }, { type: ChipMenuService }]; }, propDecorators: { chip: [{
+        }], ctorParameters: function () { return [{ type: SinglePopupService }, { type: PivotLocalizationService }, { type: ChipMenuService }, { type: i0.Renderer2 }]; }, propDecorators: { chip: [{
                 type: Input
             }], tabIndex: [{
                 type: Input
+            }], isMeasureField: [{
+                type: Input
             }], anchor: [{
                 type: ViewChild,
                 args: ['anchor', { static: true, read: ElementRef }]
@@ -1903,16 +2108,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class DraggableChipDirective {
-    constructor(draggable, element, zone, service, cue, renderer) {
+    constructor(draggable, element, zone, service, cue, renderer, cdr) {
         this.draggable = draggable;
         this.element = element;
         this.zone = zone;
         this.service = service;
         this.cue = cue;
         this.renderer = renderer;
+        this.cdr = cdr;
         this.touchActions = 'none';
         this.initialX = {};
         this.initialY = {};
+        this.invalidTarget = false;
         this.subs = new Subscription();
     }
     get pointerEvents() {
@@ -1920,9 +2127,14 @@ class DraggableChipDirective {
     }
     ngOnInit() {
         this.subs.add(this.draggable.kendoPress
-            .subscribe((event) => {
+            .pipe(tap((e) => {
+            this.service.closeMenu.emit();
+            if (e.originalEvent.target.closest('.k-icon-wrapper-host')) {
+                this.invalidTarget = true;
+            }
+        })).subscribe((event) => {
             this.zone.runOutsideAngular(() => {
-                if (isDocumentAvailable()) {
+                if (isDocumentAvailable() && !this.invalidTarget) {
                     this.initialX.current = event.clientX;
                     this.initialY.current = event.clientY;
                     const element = this.element.nativeElement;
@@ -1939,14 +2151,14 @@ class DraggableChipDirective {
             .subscribe((event) => {
             this.zone.runOutsideAngular(() => {
                 var _a;
-                if (isDocumentAvailable()) {
+                if (isDocumentAvailable() && !this.invalidTarget) {
                     const isDragging = Math.abs(this.initialX.current - event.clientX) > 5 ||
                         Math.abs(this.initialY.current - event.clientY) > 5;
                     if (!isDragging) {
                         return;
                     }
                     this.drag = true;
-                    if (!((_a = document.elementFromPoint(event.clientX, event.clientY)) === null || _a === void 0 ? void 0 : _a.closest('.k-pivotgrid-configurator [kendodroptarget]'))) {
+                    if (!((_a = document.elementFromPoint(event.clientX, event.clientY)) === null || _a === void 0 ? void 0 : _a.closest('.k-pivotgrid-configurator'))) {
                         return;
                     }
                     this.renderer.setStyle(this.element.nativeElement, 'transform', `translate(${event.clientX - this.initialX.current}px, ${event.clientY - this.initialY.current}px)`);
@@ -1957,6 +2169,7 @@ class DraggableChipDirective {
             .subscribe(() => {
             this.zone.runOutsideAngular(() => {
                 this.drag = false;
+                this.invalidTarget = false;
                 if (this.service.state.dragItem) {
                     const element = this.element.nativeElement;
                     if (isDocumentAvailable()) {
@@ -1982,7 +2195,7 @@ class DraggableChipDirective {
         this.subs.unsubscribe();
     }
 }
-DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1$1.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1$1.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: ConfiguratorService }, { token: DropCueService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 DraggableChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: { item: "item" }, host: { properties: { "style.pointerEvents": "this.pointerEvents", "style.touch-action": "this.touchActions" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DraggableChipDirective, decorators: [{
             type: Directive,
@@ -1992,7 +2205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () {
         return [{ type: i1$1.DraggableDirective, decorators: [{
                         type: Optional
-                    }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: ConfiguratorService }, { type: DropCueService }, { type: i0.Renderer2 }];
+                    }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: ConfiguratorService }, { type: DropCueService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }];
     }, propDecorators: { pointerEvents: [{
                 type: HostBinding,
                 args: ['style.pointerEvents']
@@ -2088,6 +2301,7 @@ class PivotGridConfiguratorComponent {
             }
             return of(node.children);
         };
+        this.configuratorService.configuratorInstance = this;
     }
     get headerTextId() {
         return `k-pivotgrid-${this.dataService.pivotGridId}-configurator-header`;
@@ -2146,6 +2360,7 @@ class PivotGridConfiguratorComponent {
             filter: state.filter
         };
         this.state = this.configuratorService.state = state;
+        this.cdr.detectChanges();
     }
     onReorder(ev, name, item) {
         const currentCollection = this.state[`${name}Axes`];
@@ -2208,16 +2423,17 @@ class PivotGridConfiguratorComponent {
      * when a chip is deleted from the UI
      */
     onChipRemove(ev, item, section) {
+        var _a;
         const filteredItems = this.dataService.state[`${section}Axes`].filter(descriptor => descriptor !== item);
         this.dataService.state[`${section}Axes`] = filteredItems;
         const newState = Object.assign(Object.assign({}, this.state), this.dataService.state);
         this.checked = this.checked.filter(checkedItem => checkedItem.uniqueName !== item.name[0]);
+        const targetIndex = (_a = this.navigation) === null || _a === void 0 ? void 0 : _a.elements.indexOf(ev.sender.element.nativeElement);
         this.setState(newState);
         if (!this.navigation) {
             return;
         }
         ;
-        const targetIndex = this.navigation.elements.indexOf(ev.sender.element.nativeElement);
         this.zone.runOutsideAngular(() => setTimeout(() => this.navigation.focusElement(this.navigation.elements[targetIndex - 1], this.navigation.elements[targetIndex])));
     }
     /**
@@ -2421,6 +2637,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             #columnsChiplist
                             kendoDropTarget
                             axes="columnAxes"
+                            [style.width.%]="100"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                         >
@@ -2459,6 +2676,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
+                            [style.width.%]="100"
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
@@ -2502,6 +2720,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             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"
                                 kendoChipDraggable
@@ -2516,6 +2735,11 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                                 (reorder)="onReorder($event, 'measure', item)"
                                 >
                                 {{ getName(item.name) }}
+
+                                <kendo-pivot-chip-menu
+                                    [isMeasureField]="true"
+                                    [chip]="item">
+                                </kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -2531,7 +2755,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `, isInline: true, components: [{ type: i4.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"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "removeSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }, { type: i5.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"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }] });
+   `, isInline: true, components: [{ type: i4.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"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { type: i5.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"] }, { type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex", "isMeasureField"] }, { type: i5.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"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { type: i4.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
@@ -2606,6 +2830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             #columnsChiplist
                             kendoDropTarget
                             axes="columnAxes"
+                            [style.width.%]="100"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
                         >
@@ -2644,6 +2869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             axes="rowAxes"
                             [attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('rows')"
                             [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
+                            [style.width.%]="100"
                         >
                             <ng-container *ngFor="let item of state.rowAxes">
                                 <kendo-chip *ngIf="item.name.length === 1"
@@ -2687,6 +2913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             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"
                                 kendoChipDraggable
@@ -2701,6 +2928,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 (reorder)="onReorder($event, 'measure', item)"
                                 >
                                 {{ getName(item.name) }}
+
+                                <kendo-pivot-chip-menu
+                                    [isMeasureField]="true"
+                                    [chip]="item">
+                                </kendo-pivot-chip-menu>
                             </kendo-chip>
                         </kendo-chiplist>
 
@@ -2754,7 +2986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class PivotGridMessages extends ComponentMessages {
 }
 PivotGridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-PivotGridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridMessages, inputs: { fieldMenuFilterItemLabel: "fieldMenuFilterItemLabel", fieldMenuSortAscendingItemLabel: "fieldMenuSortAscendingItemLabel", fieldMenuSortDescendingItemLabel: "fieldMenuSortDescendingItemLabel", filterInputLabel: "filterInputLabel", filterOperatorsDropDownLabel: "filterOperatorsDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", loading: "loading", emptyCellLabel: "emptyCellLabel", configuratorButtonText: "configuratorButtonText", configuratorHeaderText: "configuratorHeaderText", configuratorFieldsText: "configuratorFieldsText", configuratorColumnsText: "configuratorColumnsText", configuratorRowsText: "configuratorRowsText", configuratorValuesText: "configuratorValuesText", configuratorCancelButtonText: "configuratorCancelButtonText", configuratorApplyButtonText: "configuratorApplyButtonText", configuratorEmptyRowsText: "configuratorEmptyRowsText", configuratorEmptyColumnsText: "configuratorEmptyColumnsText", configuratorEmptyMeasuresText: "configuratorEmptyMeasuresText", chipMenuIconTitle: "chipMenuIconTitle" }, usesInheritance: true, ngImport: i0 });
+PivotGridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PivotGridMessages, inputs: { fieldMenuFilterItemLabel: "fieldMenuFilterItemLabel", fieldMenuSortAscendingItemLabel: "fieldMenuSortAscendingItemLabel", fieldMenuSortDescendingItemLabel: "fieldMenuSortDescendingItemLabel", filterInputLabel: "filterInputLabel", filterOperatorsDropDownLabel: "filterOperatorsDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", loading: "loading", emptyCellLabel: "emptyCellLabel", configuratorButtonText: "configuratorButtonText", configuratorHeaderText: "configuratorHeaderText", configuratorFieldsText: "configuratorFieldsText", configuratorColumnsText: "configuratorColumnsText", configuratorRowsText: "configuratorRowsText", configuratorValuesText: "configuratorValuesText", configuratorCancelButtonText: "configuratorCancelButtonText", configuratorApplyButtonText: "configuratorApplyButtonText", configuratorEmptyRowsText: "configuratorEmptyRowsText", configuratorEmptyColumnsText: "configuratorEmptyColumnsText", configuratorEmptyMeasuresText: "configuratorEmptyMeasuresText", fieldMenuMoveToColumnsItem: "fieldMenuMoveToColumnsItem", fieldMenuMoveToRowsItem: "fieldMenuMoveToRowsItem", fieldMenuMovePreviousItem: "fieldMenuMovePreviousItem", fieldMenuMoveNextItem: "fieldMenuMoveNextItem", chipMenuIconTitle: "chipMenuIconTitle" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PivotGridMessages, decorators: [{
             type: Directive
         }], propDecorators: { fieldMenuFilterItemLabel: [{
@@ -2817,6 +3049,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], configuratorEmptyMeasuresText: [{
                 type: Input
+            }], fieldMenuMoveToColumnsItem: [{
+                type: Input
+            }], fieldMenuMoveToRowsItem: [{
+                type: Input
+            }], fieldMenuMovePreviousItem: [{
+                type: Input
+            }], fieldMenuMoveNextItem: [{
+                type: Input
             }], chipMenuIconTitle: [{
                 type: Input
             }] } });
@@ -3175,7 +3415,19 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         configuratorEmptyMeasuresText="Select some fields to begin setup"
         
         i18n-chipMenuIconTitle="kendo.grid.chipMenuIconTitle|The title of the field menu icon"
-        chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"></ng-container>
+        chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"
+
+        i18n-fieldMenuMoveToColumnsItem="kendo.pivotgrid.fieldMenuMoveToColumnsItem|The text content of the Move to Columns item in the column and row fields menu."
+        fieldMenuMoveToColumnsItem="Move to Columns"
+        
+        i18n-fieldMenuMoveToRowsItem="kendo.pivotgrid.fieldMenuMoveToRowsItem|The text content of the Move to Rows item in the column and row fields menu."
+        fieldMenuMoveToRowsItem="Move to Rows"
+        
+        i18n-fieldMenuMovePreviousItem="kendo.pivotgrid.fieldMenuMovePreviousItem|The text content of the Move as previous item in the column, row, and value fields menu."
+        fieldMenuMovePreviousItem="Move as previous"
+        
+        i18n-fieldMenuMoveNextItem="kendo.pivotgrid.fieldMenuMoveNextItem|The text content of the Move as next item in the column, row, and value fields menu."
+        fieldMenuMoveNextItem="Move as next"></ng-container>
 
         <div #table class="k-pivotgrid" role="grid">
             <span class="k-pivotgrid-empty-cell" role="columnheader">
@@ -3328,7 +3580,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         configuratorEmptyMeasuresText="Select some fields to begin setup"
         
         i18n-chipMenuIconTitle="kendo.grid.chipMenuIconTitle|The title of the field menu icon"
-        chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"></ng-container>
+        chipMenuIconTitle="{{ '{fieldName} Field Menu' }}"
+
+        i18n-fieldMenuMoveToColumnsItem="kendo.pivotgrid.fieldMenuMoveToColumnsItem|The text content of the Move to Columns item in the column and row fields menu."
+        fieldMenuMoveToColumnsItem="Move to Columns"
+        
+        i18n-fieldMenuMoveToRowsItem="kendo.pivotgrid.fieldMenuMoveToRowsItem|The text content of the Move to Rows item in the column and row fields menu."
+        fieldMenuMoveToRowsItem="Move to Rows"
+        
+        i18n-fieldMenuMovePreviousItem="kendo.pivotgrid.fieldMenuMovePreviousItem|The text content of the Move as previous item in the column, row, and value fields menu."
+        fieldMenuMovePreviousItem="Move as previous"
+        
+        i18n-fieldMenuMoveNextItem="kendo.pivotgrid.fieldMenuMoveNextItem|The text content of the Move as next item in the column, row, and value fields menu."
+        fieldMenuMoveNextItem="Move as next"></ng-container>
 
         <div #table class="k-pivotgrid" role="grid">
             <span class="k-pivotgrid-empty-cell" role="columnheader">
@@ -3911,7 +4175,8 @@ const COMPONENTS = [
     StringFilterMenuComponent,
     FilterMenuDropDownListDirective,
     ChipMenuContainerComponent,
-    ChipMenuItemDirective
+    ChipMenuItemDirective,
+    ChipMenuReorderComponent
 ];
 /**
  * @hidden
@@ -3921,6 +4186,7 @@ class ChipMenuModule {
         return [
             ChipMenuItemComponent,
             ChipMenuSortComponent,
+            ChipMenuReorderComponent,
             ChipMenuContainerComponent,
             ChipMenuItemDirective,
             ChipMenuComponent
@@ -3937,7 +4203,8 @@ ChipMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         StringFilterMenuComponent,
         FilterMenuDropDownListDirective,
         ChipMenuContainerComponent,
-        ChipMenuItemDirective], imports: [SharedModule,
+        ChipMenuItemDirective,
+        ChipMenuReorderComponent], imports: [SharedModule,
         ReactiveFormsModule,
         FormsModule], exports: [ChipMenuItemComponent,
         ChipMenuSortComponent,
@@ -3948,7 +4215,8 @@ ChipMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         StringFilterMenuComponent,
         FilterMenuDropDownListDirective,
         ChipMenuContainerComponent,
-        ChipMenuItemDirective] });
+        ChipMenuItemDirective,
+        ChipMenuReorderComponent] });
 ChipMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuModule, imports: [[
             SharedModule,
             ReactiveFormsModule,