@progress/kendo-angular-pivotgrid 14.1.0-develop.8 → 14.1.0

package/configurator/chip-menu/chip-menu-item.component.d.ts

@@ -45,6 +45,10 @@ export declare class ChipMenuItemComponent implements OnChanges {
      * Specifies if the item is expanded.
      */
     expanded: boolean;
+    /**
+     * Specified if the item is disabled
+     */
+    disabled: boolean;
     contentTemplate: ChipMenuItemContentTemplateDirective;
     get iconClass(): string;
     contentState: string;
@@ -52,5 +56,5 @@ export declare class ChipMenuItemComponent implements OnChanges {
     onClick(e: any): void;
     private updateContentState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipMenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChipMenuItemComponent, "kendo-pivot-chipmenu-item", never, { "icon": "icon"; "svgIcon": "svgIcon"; "text": "text"; "selected": "selected"; "expanded": "expanded"; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipMenuItemComponent, "kendo-pivot-chipmenu-item", never, { "icon": "icon"; "svgIcon": "svgIcon"; "text": "text"; "selected": "selected"; "expanded": "expanded"; "disabled": "disabled"; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never>;
 }

package/configurator/chip-menu/chip-menu-reorder.component.d.ts

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
+import { ChipMenuItemBase } from './chip-menu-item-base';
+import { ConfiguratorService } from '../configurator.service';
+import { AxisDescriptor } from '@progress/kendo-pivotgrid-common';
+import { PivotLocalizationService } from '../../localization/pivot-localization.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import { ChipMenuReorderTarget } from '../../models/configurator-chipmenu-reorder-target';
+import { PivotGridDataService } from '../../data-binding/pivotgrid-data.service';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ *
+ * Represents a chip-menu item for reordering PivotGrid fields.
+ */
+export declare class ChipMenuReorderComponent extends ChipMenuItemBase {
+    localization: PivotLocalizationService;
+    protected renderer: Renderer2;
+    protected configuratorService: ConfiguratorService;
+    protected dataService: PivotGridDataService;
+    protected cdr: ChangeDetectorRef;
+    protected ngZone: NgZone;
+    chip: AxisDescriptor;
+    columnsIcon: SVGIcon;
+    rowsIcon: SVGIcon;
+    arrowLeftIcon: SVGIcon;
+    arrowRightIcon: SVGIcon;
+    rtl: boolean;
+    get isColumnsField(): boolean;
+    get isRowsField(): boolean;
+    get isMeasureField(): boolean;
+    get isFirst(): boolean;
+    get isLast(): boolean;
+    private subs;
+    constructor(localization: PivotLocalizationService, renderer: Renderer2, configuratorService: ConfiguratorService, dataService: PivotGridDataService, cdr: ChangeDetectorRef, ngZone: NgZone);
+    ngOnDestroy(): void;
+    messageFor(localizationToken: string): string;
+    move(e: any, target: ChipMenuReorderTarget): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipMenuReorderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipMenuReorderComponent, "kendo-pivot-chipmenu-reorder", never, { "chip": "chip"; }, {}, never, never>;
+}

package/configurator/chip-menu/chip-menu.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnDestroy, ElementRef } from '@angular/core';
+import { OnDestroy, ElementRef, Renderer2 } from '@angular/core';
 import { SinglePopupService } from './single-popup.service';
 import { ChipMenuService } from './chip-menu.service';
 import { PivotLocalizationService } from '../../localization/pivot-localization.service';
@@ -18,20 +18,22 @@ export declare class ChipMenuComponent implements OnDestroy {
     protected popupService: SinglePopupService;
     localization: PivotLocalizationService;
     service: ChipMenuService;
+    private renderer;
     /**
      * The Configurator field instance to control with the menu.
      */
     chip: AxisDescriptor;
     tabIndex: string;
+    isMeasureField: boolean;
     anchor: ElementRef;
     menuItemSVGIcon: SVGIcon;
     private popupRef;
     private closeSubscription;
-    constructor(popupService: SinglePopupService, localization: PivotLocalizationService, service: ChipMenuService);
+    constructor(popupService: SinglePopupService, localization: PivotLocalizationService, service: ChipMenuService, renderer: Renderer2);
     ngOnDestroy(): void;
     toggle(e: any, template: any): void;
     close(): void;
     get chipMenuTitle(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChipMenuComponent, "kendo-pivot-chip-menu", never, { "chip": "chip"; "tabIndex": "tabIndex"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipMenuComponent, "kendo-pivot-chip-menu", never, { "chip": "chip"; "tabIndex": "tabIndex"; "isMeasureField": "isMeasureField"; }, {}, never, never>;
 }

package/configurator/chip-menu/chip-menu.module.d.ts

@@ -13,14 +13,15 @@ import * as i7 from "./filtering/string-filter-menu.component";
 import * as i8 from "./filtering/filter-menu-dropdownlist.directive";
 import * as i9 from "./chip-menu-container.component";
 import * as i10 from "./chip-menu-item.directive";
-import * as i11 from "../../shared.module";
-import * as i12 from "@angular/forms";
+import * as i11 from "./chip-menu-reorder.component";
+import * as i12 from "../../shared.module";
+import * as i13 from "@angular/forms";
 /**
  * @hidden
  */
 export declare class ChipMenuModule {
     static exports(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ChipMenuModule, [typeof i1.ChipMenuItemComponent, typeof i2.ChipMenuSortComponent, typeof i3.ChipMenuComponent, typeof i4.ChipMenuFilterComponent, typeof i5.ChipMenuItemContentTemplateDirective, typeof i6.FilterMenuContainerComponent, typeof i7.StringFilterMenuComponent, typeof i8.FilterMenuDropDownListDirective, typeof i9.ChipMenuContainerComponent, typeof i10.ChipMenuItemDirective], [typeof i11.SharedModule, typeof i12.ReactiveFormsModule, typeof i12.FormsModule], [typeof i1.ChipMenuItemComponent, typeof i2.ChipMenuSortComponent, typeof i3.ChipMenuComponent, typeof i4.ChipMenuFilterComponent, typeof i5.ChipMenuItemContentTemplateDirective, typeof i6.FilterMenuContainerComponent, typeof i7.StringFilterMenuComponent, typeof i8.FilterMenuDropDownListDirective, typeof i9.ChipMenuContainerComponent, typeof i10.ChipMenuItemDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ChipMenuModule, [typeof i1.ChipMenuItemComponent, typeof i2.ChipMenuSortComponent, typeof i3.ChipMenuComponent, typeof i4.ChipMenuFilterComponent, typeof i5.ChipMenuItemContentTemplateDirective, typeof i6.FilterMenuContainerComponent, typeof i7.StringFilterMenuComponent, typeof i8.FilterMenuDropDownListDirective, typeof i9.ChipMenuContainerComponent, typeof i10.ChipMenuItemDirective, typeof i11.ChipMenuReorderComponent], [typeof i12.SharedModule, typeof i13.ReactiveFormsModule, typeof i13.FormsModule], [typeof i1.ChipMenuItemComponent, typeof i2.ChipMenuSortComponent, typeof i3.ChipMenuComponent, typeof i4.ChipMenuFilterComponent, typeof i5.ChipMenuItemContentTemplateDirective, typeof i6.FilterMenuContainerComponent, typeof i7.StringFilterMenuComponent, typeof i8.FilterMenuDropDownListDirective, typeof i9.ChipMenuContainerComponent, typeof i10.ChipMenuItemDirective, typeof i11.ChipMenuReorderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ChipMenuModule>;
 }

package/configurator/chip-menu/chip-menu.service.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { ConfiguratorService } from '../configurator.service';
 import { MenuTabbingService } from './filtering/menu-tabbing.service';
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
@@ -10,13 +11,16 @@ import * as i0 from "@angular/core";
  * Represents the service that is passed to the ChipMenuFilterComponent and ChipMenuSortComponent.
  */
 export declare class ChipMenuService {
+    configuratorService?: ConfiguratorService;
     menuTabbingService: MenuTabbingService;
     closeMenu: EventEmitter<any>;
+    private sub;
     /**
      * Closes the chip menu.
      */
     close(): void;
-    constructor(menuTabbingService?: MenuTabbingService);
+    constructor(menuTabbingService?: MenuTabbingService, configuratorService?: ConfiguratorService);
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChipMenuService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ChipMenuService>;
 }

package/configurator/configurator.service.d.ts

@@ -7,12 +7,14 @@ import { PivotGridConfiguratorState } from '@progress/kendo-pivotgrid-common';
 import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
 import { PivotGridConfiguratorOrientation } from '../models/configurator-orientation';
 import { DropSectionType } from '../models/drop-section';
+import type { PivotGridConfiguratorComponent } from './configurator.component';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export declare class ConfiguratorService {
     private dataService;
+    configuratorInstance: PivotGridConfiguratorComponent;
     state: PivotGridConfiguratorState;
     draggedElement: {
         element: Element;
@@ -22,6 +24,7 @@ export declare class ConfiguratorService {
     cueContainer: Element;
     orientation: PivotGridConfiguratorOrientation;
     configuratorStateChange: EventEmitter<any>;
+    closeMenu: EventEmitter<any>;
     constructor(dataService: PivotGridDataService);
     parseConfiguratorState(action: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfiguratorService, never>;

package/configurator/draggable.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, OnInit, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { ElementRef, OnInit, NgZone, OnDestroy, Renderer2, ChangeDetectorRef } from '@angular/core';
 import { DraggableDirective } from '@progress/kendo-angular-common';
 import { PivotGridAxis } from '@progress/kendo-pivotgrid-common';
 import { ConfiguratorService } from './configurator.service';
@@ -18,16 +18,18 @@ export declare class DraggableChipDirective implements OnInit, OnDestroy {
     private service;
     private cue;
     private renderer;
+    private cdr;
     get pointerEvents(): any;
     touchActions: string;
     item: PivotGridAxis;
     initialX: any;
     initialY: any;
     private drag;
+    private invalidTarget;
     private subs;
-    constructor(draggable: DraggableDirective, element: ElementRef, zone: NgZone, service: ConfiguratorService, cue: DropCueService, renderer: Renderer2);
+    constructor(draggable: DraggableDirective, element: ElementRef, zone: NgZone, service: ConfiguratorService, cue: DropCueService, renderer: Renderer2, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DraggableChipDirective, [{ optional: true; }, null, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DraggableChipDirective, [{ optional: true; }, null, null, null, null, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DraggableChipDirective, "[kendoChipDraggable]", never, { "item": "item"; }, {}, never>;
 }

package/esm2020/configurator/chip-menu/chip-menu-filter.component.mjs

@@ -86,7 +86,7 @@ ChipMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </kendo-pivot-filter-menu-container>
             </ng-template>
         </kendo-pivot-chipmenu-item>
-    `, isInline: true, components: [{ type: i2.ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: ["chip", "isLast", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: i2.ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-pivot-filter-menu-container", inputs: ["chip", "isLast", "isExpanded", "menuTabbingService", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ChipMenuItemContentTemplateDirective, selector: "[kendoPivotChipMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuFilterComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/configurator/chip-menu/chip-menu-item.component.mjs

@@ -55,14 +55,16 @@ export 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"
@@ -130,8 +132,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"
@@ -161,6 +165,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 }]

package/esm2020/configurator/chip-menu/chip-menu-reorder.component.mjs

@@ -0,0 +1,185 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Component, Input, NgZone, Renderer2 } from '@angular/core';
+import { ChipMenuItemBase } from './chip-menu-item-base';
+import { ConfiguratorService } from '../configurator.service';
+import { PivotLocalizationService } from '../../localization/pivot-localization.service';
+import { arrowLeftIcon, arrowRightIcon, columnsIcon, rowsIcon } from '@progress/kendo-svg-icons';
+import { PivotGridDataService } from '../../data-binding/pivotgrid-data.service';
+import { swapItems } from '../../util';
+import * as i0 from "@angular/core";
+import * as i1 from "../../localization/pivot-localization.service";
+import * as i2 from "../configurator.service";
+import * as i3 from "../../data-binding/pivotgrid-data.service";
+import * as i4 from "./chip-menu-item.component";
+import * as i5 from "@angular/common";
+/**
+ * @hidden
+ *
+ * Represents a chip-menu item for reordering PivotGrid fields.
+ */
+export 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 = { ...currentState, rowAxes: newRows, columnAxes: newCols };
+                    this.configuratorService.configuratorInstance.setState(newState);
+                    this.ngZone.runOutsideAngular(() => setTimeout(() => this.configuratorService.configuratorInstance[`${target}List`]?.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 = { ...currentState, rowAxes: newRows, columnAxes: newCols };
+                    this.configuratorService.configuratorInstance.setState(newState);
+                    this.ngZone.runOutsideAngular(() => setTimeout(() => this.configuratorService.configuratorInstance[`${target}List`]?.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 = { ...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 = { ...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: i1.PivotLocalizationService }, { token: i0.Renderer2 }, { token: i2.ConfiguratorService }, { token: i3.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: i4.ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded", "disabled"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i5.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: i1.PivotLocalizationService }, { type: i0.Renderer2 }, { type: i2.ConfiguratorService }, { type: i3.PivotGridDataService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { chip: [{
+                type: Input
+            }] } });

package/esm2020/configurator/chip-menu/chip-menu-sort.component.mjs

@@ -71,7 +71,7 @@ ChipMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-pivot-chipmenu-item>
-    `, isInline: true, components: [{ type: i3.ChipMenuItemComponent, selector: "kendo-pivot-chipmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, components: [{ type: i3.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: [{

package/esm2020/configurator/chip-menu/chip-menu.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MenuTabbingService } from './filtering/menu-tabbing.service';
-import { Component, Input, ElementRef, ViewChild } from '@angular/core';
+import { Component, Input, ElementRef, ViewChild, Renderer2 } from '@angular/core';
 import { SinglePopupService } from './single-popup.service';
 import { ChipMenuService } from './chip-menu.service';
 import { PivotLocalizationService } from '../../localization/pivot-localization.service';
@@ -18,7 +18,9 @@ import * as i4 from "@progress/kendo-angular-icons";
 import * as i5 from "./chip-menu-container.component";
 import * as i6 from "./chip-menu-sort.component";
 import * as i7 from "./chip-menu-filter.component";
-import * as i8 from "./chip-menu-item.directive";
+import * as i8 from "./chip-menu-reorder.component";
+import * as i9 from "@angular/common";
+import * as i10 from "./chip-menu-item.directive";
 const POPUP_CLASS = 'k-column-menu';
 /**
  * @hidden
@@ -26,11 +28,13 @@ const POPUP_CLASS = 'k-column-menu';
  * Represents the field chip menu component.
  */
 export 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));
     }
@@ -45,6 +49,7 @@ export 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();
         }
@@ -60,8 +65,8 @@ export 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: i1.SinglePopupService }, { token: i2.PivotLocalizationService }, { token: i3.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: i1.SinglePopupService }, { token: i2.PivotLocalizationService }, { token: i3.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: `
@@ -78,23 +83,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: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i5.ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { type: i6.ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { type: i7.ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i8.ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i5.ChipMenuContainerComponent, selector: "kendo-pivot-chipmenu-container" }, { type: i6.ChipMenuSortComponent, selector: "kendo-pivot-chipmenu-sort", inputs: ["chip"] }, { type: i7.ChipMenuFilterComponent, selector: "kendo-pivot-chipmenu-filter", inputs: ["chip", "expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i8.ChipMenuReorderComponent, selector: "kendo-pivot-chipmenu-reorder", inputs: ["chip"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.ChipMenuItemDirective, selector: "[kendoPivotChipMenuItem]", inputs: ["kendoPivotChipMenuItem"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChipMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -117,28 +130,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: i1.SinglePopupService }, { type: i2.PivotLocalizationService }, { type: i3.ChipMenuService }]; }, propDecorators: { chip: [{
+        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.PivotLocalizationService }, { type: i3.ChipMenuService }, { type: i0.Renderer2 }]; }, propDecorators: { chip: [{
                 type: Input
             }], tabIndex: [{
                 type: Input
+            }], isMeasureField: [{
+                type: Input
             }], anchor: [{
                 type: ViewChild,
                 args: ['anchor', { static: true, read: ElementRef }]