@progress/kendo-angular-pivotgrid 0.2.1-dev.202209131242 → 1.0.0-dev.202209131611

package/fesm2015/kendo-angular-pivotgrid.js

@@ -38,7 +38,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1663072930,
+    publishDate: 1663085465,
     version: '',
     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'
 };
@@ -491,20 +491,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class PivotGridState {
+    constructor(columnAxes, rowAxes, measureAxes, sort, filter) {
+        this.columnAxes = columnAxes;
+        this.rowAxes = rowAxes;
+        this.measureAxes = measureAxes;
+        this.sort = sort;
+        this.filter = filter;
+    }
+}
+
 /**
  * @hidden
  */
 class ConfiguratorService {
-    constructor() {
+    constructor(dataService) {
+        this.dataService = dataService;
         this.configuratorStateChange = new EventEmitter();
     }
     parseConfiguratorState(action) {
         const newState = configuratorReducer({
-            filter: this.state.filter,
-            sort: this.state.sort,
-            rowAxes: this.state.rowAxes,
-            columnAxes: this.state.columnAxes,
-            measureAxes: this.state.measureAxes,
+            filter: this.dataService.state.filter,
+            sort: this.dataService.state.sort,
+            rowAxes: this.dataService.state.rowAxes,
+            columnAxes: this.dataService.state.columnAxes,
+            measureAxes: this.dataService.state.measureAxes,
             dragItem: this.state.dragItem,
             dropDirection: this.state.dropDirection,
             dropTarget: this.state.dropTarget,
@@ -512,14 +526,15 @@ class ConfiguratorService {
         }, action);
         Object.keys(newState).forEach(key => newState[key] === undefined && delete newState[key]);
         this.state = Object.assign(Object.assign({}, this.state), newState);
+        this.dataService.state = new PivotGridState(this.state.columnAxes, this.state.rowAxes, this.state.measureAxes, this.state.sort, this.state.filter);
         this.configuratorStateChange.emit(this.state);
     }
 }
-ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ConfiguratorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, deps: [{ token: PivotGridDataService }], target: i0.ɵɵFactoryTarget.Injectable });
 ConfiguratorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfiguratorService, decorators: [{
             type: Injectable
-        }], propDecorators: { configuratorStateChange: [{
+        }], ctorParameters: function () { return [{ type: PivotGridDataService }]; }, propDecorators: { configuratorStateChange: [{
                 type: Output
             }] } });
 
@@ -1821,7 +1836,7 @@ class PivotGridConfiguratorComponent {
         this.configuratorService = configuratorService;
         this.cdr = cdr;
         this.hostClass = true;
-        this.horizontal = false;
+        this.orientation = 'vertical';
         this.sort = new Array();
         this.checked = [];
         this.subs = new Subscription();
@@ -1840,6 +1855,9 @@ class PivotGridConfiguratorComponent {
             return of(node.children);
         };
     }
+    get isHorizontal() {
+        return this.orientation === 'horizontal';
+    }
     ngOnInit() {
         this.subs.add(this.dataService.fields
             .subscribe(res => {
@@ -1847,13 +1865,21 @@ class PivotGridConfiguratorComponent {
         }));
         this.subs.add(this.dataService.configuredFields
             .subscribe(res => {
-            this.originalState = clone(res);
-            this.setState(clone(res));
+            const normalizedState = clone(Object.assign(Object.assign({}, this.dataService.state), { dragItem: res.dragItem, dropTarget: res.dropTarget, dropZone: res.dropZone, dropDirection: res.dropDirection }));
+            this.originalState = normalizedState;
+            this.setState(normalizedState);
             this.setChecked();
         }));
         this.subs.add(this.configuratorService.configuratorStateChange
             .subscribe(res => {
             this.state = res;
+            this.dataService.state = this.dataService.state = {
+                columnAxes: res.columnAxes,
+                rowAxes: res.rowAxes,
+                measureAxes: res.measureAxes,
+                sort: res.sort,
+                filter: res.filter
+            };
             this.cdr.detectChanges();
         }));
     }
@@ -1864,8 +1890,14 @@ class PivotGridConfiguratorComponent {
         return name.toString();
     }
     setState(state) {
-        this.state = state;
-        this.configuratorService.state = state;
+        this.dataService.state = {
+            columnAxes: state.columnAxes,
+            rowAxes: state.rowAxes,
+            measureAxes: state.measureAxes,
+            sort: state.sort,
+            filter: state.filter
+        };
+        this.state = this.configuratorService.state = state;
     }
     /**
      * Returns the localized message for a given token
@@ -1877,23 +1909,34 @@ class PivotGridConfiguratorComponent {
      * Retrieves the 'Columns' section item names
      */
     get columnHierarchies() {
-        return this.extractDefaultFields(this.state.columnAxes);
+        return this.extractDefaultFields(this.dataService.state.columnAxes);
     }
     ;
     /**
      * Retrieves the 'Rows' section item names
      */
     get rowHierarchies() {
-        return this.extractDefaultFields(this.state.rowAxes);
+        return this.extractDefaultFields(this.dataService.state.rowAxes);
     }
     ;
     /**
      * Retrieves the 'Value' section item names
      */
     get measureHierarchies() {
-        return this.extractDefaultFields(this.state.measureAxes);
+        return this.extractDefaultFields(this.dataService.state.measureAxes);
     }
     ;
+    /**
+     * Updates the respective axis configuration of the current state
+     * when a chip is deleted from the UI
+     */
+    onChipRemove(item, section) {
+        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]);
+        this.setState(newState);
+    }
     /**
      * Constructs an array with all selected fields.
      * @param fields - used for when child nodes are loaded on demand.
@@ -1954,7 +1997,7 @@ class PivotGridConfiguratorComponent {
         this.configuratorService.parseConfiguratorState(action);
     }
     handleSubmit() {
-        this.dataService.configuratorFieldChange.emit(this.state);
+        this.dataService.configuratorFieldChange.emit(this.dataService.state);
     }
     /**
      * Reset the configurator to the last saved state
@@ -1986,7 +2029,7 @@ class PivotGridConfiguratorComponent {
     ;
 }
 PivotGridConfiguratorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: PivotGridDataService }, { token: i1.LocalizationService }, { token: ConfiguratorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { horizontal: "horizontal", sort: "sort", filter: "filter" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass" } }, providers: [
+PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass" } }, providers: [
         ConfiguratorService,
         DropCueService,
         SinglePopupService
@@ -1994,8 +2037,8 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         <div 
             class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
             [ngClass]="{
-                'k-pivotgrid-configurator-horizontal': horizontal,
-                'k-pivotgrid-configurator-vertical': !horizontal
+                'k-pivotgrid-configurator-horizontal': isHorizontal,
+                'k-pivotgrid-configurator-vertical': !isHorizontal
             }"
         >
             <div class="k-pivotgrid-configurator-header">
@@ -2003,7 +2046,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </div>
 
             <div class="k-pivotgrid-configurator-content">
-                <div class="k-form" [class.k-form-horizontal]="horizontal">
+                <div class="k-form" [class.k-form-horizontal]="isHorizontal">
                     <div class="k-form-field-wrapper">
                         <div class="k-form-field">
                             <span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -2034,7 +2077,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         </div>
                     </div>
 
-                    <div *ngIf="horizontal; else verticalTemplate" class="k-form-field-wrapper">
+                    <div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper">
                         <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
                     </div>
 
@@ -2048,21 +2091,22 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             kendoDropTarget
                             axes="columnAxes"
                         >
-                            <kendo-chip *ngFor="let item of state.columnAxes"
-                                kendoChipDraggable
-                                kendoDraggable
-                                kendoDropTarget
-                                [item]="item"
-                                axes="columnAxes"
-                                rounded="full"
-                                [removable]="true"
-                            >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
-                            </kendo-chip>
+                            <ng-container *ngFor="let item of state.columnAxes">
+                                <kendo-chip *ngIf="item.name.length === 1"
+                                    kendoChipDraggable
+                                    kendoDraggable
+                                    kendoDropTarget
+                                    [item]="item"
+                                    axes="columnAxes"
+                                    rounded="full"
+                                    [removable]="true"
+                                    (remove)="onChipRemove(item, 'column')"
+                                >{{ getName(item.name) }}
+                                    <kendo-pivot-chip-menu
+                                        [chip]="item">
+                                    </kendo-pivot-chip-menu>
+                                </kendo-chip>
+                            </ng-container>
                         </kendo-chiplist>
 
                         <ng-template #noColumnAxes>
@@ -2078,21 +2122,24 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                             kendoDropTarget
                             axes="rowAxes"
                         >
-                            <kendo-chip *ngFor="let item of state.rowAxes"
-                                kendoChipDraggable
-                                kendoDraggable
-                                kendoDropTarget
-                                [item]="item"
-                                axes="rowAxes"
-                                rounded="full"
-                                [removable]="true"
-                            >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
-                            </kendo-chip>
+                            <ng-container *ngFor="let item of state.rowAxes">
+                                <kendo-chip *ngIf="item.name.length === 1"
+                                    kendoChipDraggable
+                                    kendoDraggable
+                                    kendoDropTarget
+                                    [item]="item"
+                                    axes="rowAxes"
+                                    rounded="full"
+                                    [removable]="true"
+                                    (remove)="onChipRemove(item, 'row')"
+                                >
+                                    {{ getName(item.name) }}
+    
+                                    <kendo-pivot-chip-menu
+                                        [chip]="item">
+                                    </kendo-pivot-chip-menu>
+                                </kendo-chip>
+                            </ng-container>
                         </kendo-chiplist>
 
                         <ng-template #noRowAxes>
@@ -2100,11 +2147,11 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                         </ng-template>
                     </ng-template>
 
-                    <div *ngIf="horizontal; else elseTpl2" class="k-form-field-wrapper">
-                        <ng-container *ngTemplateOutlet="elseTpl2"></ng-container>
+                    <div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper">
+                        <ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
                     </div>
 
-                    <ng-template #elseTpl2>
+                    <ng-template #verticalMeasuresTemplate>
                         <div class="k-form-field" kendoDropTarget axes="measureAxes">
                             <span class="k-label">{{messageFor('configuratorValuesText')}}</span>
                         </div>
@@ -2122,6 +2169,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                                 axes="measureAxes"
                                 rounded="full"
                                 [removable]="true"
+                                (remove)="onChipRemove(item, 'measure')"
                                 >
                                 {{ getName(item.name) }}
                             </kendo-chip>
@@ -2139,7 +2187,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", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+   `, isInline: true, styles: ["\n        .k-form .k-chip-list {\n            width: 100%;\n        }\n   "], components: [{ type: i4.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i5.ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["selection", "size"], outputs: ["selectedChange", "remove"] }, { type: i5.ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "iconClass", "avatarClass", "selected", "removable", "removeIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "contentClick"] }, { type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i5.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
@@ -2153,8 +2201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <div 
             class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
             [ngClass]="{
-                'k-pivotgrid-configurator-horizontal': horizontal,
-                'k-pivotgrid-configurator-vertical': !horizontal
+                'k-pivotgrid-configurator-horizontal': isHorizontal,
+                'k-pivotgrid-configurator-vertical': !isHorizontal
             }"
         >
             <div class="k-pivotgrid-configurator-header">
@@ -2162,7 +2210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </div>
 
             <div class="k-pivotgrid-configurator-content">
-                <div class="k-form" [class.k-form-horizontal]="horizontal">
+                <div class="k-form" [class.k-form-horizontal]="isHorizontal">
                     <div class="k-form-field-wrapper">
                         <div class="k-form-field">
                             <span class="k-label">{{messageFor('configuratorFieldsText')}}</span>
@@ -2193,7 +2241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         </div>
                     </div>
 
-                    <div *ngIf="horizontal; else verticalTemplate" class="k-form-field-wrapper">
+                    <div *ngIf="isHorizontal; else verticalTemplate" class="k-form-field-wrapper">
                         <ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
                     </div>
 
@@ -2207,21 +2255,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             kendoDropTarget
                             axes="columnAxes"
                         >
-                            <kendo-chip *ngFor="let item of state.columnAxes"
-                                kendoChipDraggable
-                                kendoDraggable
-                                kendoDropTarget
-                                [item]="item"
-                                axes="columnAxes"
-                                rounded="full"
-                                [removable]="true"
-                            >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
-                            </kendo-chip>
+                            <ng-container *ngFor="let item of state.columnAxes">
+                                <kendo-chip *ngIf="item.name.length === 1"
+                                    kendoChipDraggable
+                                    kendoDraggable
+                                    kendoDropTarget
+                                    [item]="item"
+                                    axes="columnAxes"
+                                    rounded="full"
+                                    [removable]="true"
+                                    (remove)="onChipRemove(item, 'column')"
+                                >{{ getName(item.name) }}
+                                    <kendo-pivot-chip-menu
+                                        [chip]="item">
+                                    </kendo-pivot-chip-menu>
+                                </kendo-chip>
+                            </ng-container>
                         </kendo-chiplist>
 
                         <ng-template #noColumnAxes>
@@ -2237,21 +2286,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             kendoDropTarget
                             axes="rowAxes"
                         >
-                            <kendo-chip *ngFor="let item of state.rowAxes"
-                                kendoChipDraggable
-                                kendoDraggable
-                                kendoDropTarget
-                                [item]="item"
-                                axes="rowAxes"
-                                rounded="full"
-                                [removable]="true"
-                            >
-                                {{ getName(item.name) }}
-
-                                <kendo-pivot-chip-menu
-                                    [chip]="item">
-                                </kendo-pivot-chip-menu>
-                            </kendo-chip>
+                            <ng-container *ngFor="let item of state.rowAxes">
+                                <kendo-chip *ngIf="item.name.length === 1"
+                                    kendoChipDraggable
+                                    kendoDraggable
+                                    kendoDropTarget
+                                    [item]="item"
+                                    axes="rowAxes"
+                                    rounded="full"
+                                    [removable]="true"
+                                    (remove)="onChipRemove(item, 'row')"
+                                >
+                                    {{ getName(item.name) }}
+    
+                                    <kendo-pivot-chip-menu
+                                        [chip]="item">
+                                    </kendo-pivot-chip-menu>
+                                </kendo-chip>
+                            </ng-container>
                         </kendo-chiplist>
 
                         <ng-template #noRowAxes>
@@ -2259,11 +2311,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         </ng-template>
                     </ng-template>
 
-                    <div *ngIf="horizontal; else elseTpl2" class="k-form-field-wrapper">
-                        <ng-container *ngTemplateOutlet="elseTpl2"></ng-container>
+                    <div *ngIf="isHorizontal; else verticalMeasuresTemplate" class="k-form-field-wrapper">
+                        <ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
                     </div>
 
-                    <ng-template #elseTpl2>
+                    <ng-template #verticalMeasuresTemplate>
                         <div class="k-form-field" kendoDropTarget axes="measureAxes">
                             <span class="k-label">{{messageFor('configuratorValuesText')}}</span>
                         </div>
@@ -2281,6 +2333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                                 axes="measureAxes"
                                 rounded="full"
                                 [removable]="true"
+                                (remove)="onChipRemove(item, 'measure')"
                                 >
                                 {{ getName(item.name) }}
                             </kendo-chip>
@@ -2298,12 +2351,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `
+   `,
+                    styles: [`
+        .k-form .k-chip-list {
+            width: 100%;
+        }
+   `]
                 }]
         }], ctorParameters: function () { return [{ type: PivotGridDataService }, { type: i1.LocalizationService }, { type: ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-pivotgrid-configurator']
-            }], horizontal: [{
+            }], orientation: [{
                 type: Input
             }], sort: [{
                 type: Input
@@ -2420,7 +2478,7 @@ const DEFAULT_LOADER_SETTINGS = {
 };
 const DEFAULT_CONFIGURATOR_SETTINGS = {
     position: 'right',
-    horizontal: false
+    orientation: 'vertical'
 };
 /**
  * Represents the Kendo UI PivotGrid component for Angular.
@@ -2577,9 +2635,12 @@ class PivotGridComponent {
         if (firstCell) {
             firstCell.setAttribute('tabindex', '0');
         }
-        this.subs.add(this.dataService.directive.expandChange.pipe(merge(this.dataService.directive.configurationChange)).subscribe(() => this.zone.runOutsideAngular(() => {
-            setTimeout(() => this.navigation.update());
-        })));
+        if (!this.navigationSubs) {
+            this.navigationSubs = this.dataService.directive.expandChange.pipe(merge(this.dataService.directive.configurationChange)).subscribe(() => this.zone.runOutsideAngular(() => {
+                setTimeout(() => this.navigation.update());
+            }));
+            this.subs.add(this.navigationSubs);
+        }
     }
     stopNavigation() {
         if (this.navigation) {
@@ -2727,7 +2788,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
 
         <kendo-pivotgrid-configurator
             *ngIf="showConfigurator"
-            [horizontal]="configuratorSettings.horizontal">
+            [orientation]="configuratorSettings.orientation">
         </kendo-pivotgrid-configurator>
 
         <div *ngIf="configurator"
@@ -2736,7 +2797,7 @@ PivotGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <span>{{messageFor('configuratorButtonText')}}<span class="k-icon k-i-gear k-color-inherit"></span>
             </span>
         </div>
-   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["horizontal", "sort", "filter"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+   `, isInline: true, styles: ["\n        /** TODO: Remove if added to themes */\n        div.k-loader {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n        }\n   "], components: [{ type: PivotGridTableComponent, selector: "kendo-pivotgrid-table", inputs: ["tableType", "colWidth"] }, { type: i5$1.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { type: PivotGridConfiguratorComponent, selector: "kendo-pivotgrid-configurator", inputs: ["orientation", "sort", "filter"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoPivotGridLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PivotGridComponent, decorators: [{
             type: Component,
             args: [{
@@ -2877,7 +2938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
         <kendo-pivotgrid-configurator
             *ngIf="showConfigurator"
-            [horizontal]="configuratorSettings.horizontal">
+            [orientation]="configuratorSettings.orientation">
         </kendo-pivotgrid-configurator>
 
         <div *ngIf="configurator"
@@ -2943,19 +3004,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-/**
- * @hidden
- */
-class PivotGridState {
-    constructor(columnAxes, rowAxes, measureAxes, sort, filter) {
-        this.columnAxes = columnAxes;
-        this.rowAxes = rowAxes;
-        this.measureAxes = measureAxes;
-        this.sort = sort;
-        this.filter = filter;
-    }
-}
-
 /**
  * The event data for the ExpandChangeEvent
  */
@@ -3025,14 +3073,9 @@ class PivotBaseBindingDirective {
         this.dataLoaded = new EventEmitter();
         this.subs = new Subscription();
     }
-    /**
-     * @hidden
-     */
-    get state() {
-        return new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes, this.sort, this.filter);
-    }
     ngOnInit() {
-        this.loadData(this.state);
+        this.dataService.state = new PivotGridState(this.columnAxes, this.rowAxes, this.measureAxes, this.sort, this.filter);
+        this.loadData(this.dataService.state);
         this.loadFields();
         this.subs.add(this.dataService.expandedStateChange.subscribe((state) => {
             this.zone.run(() => {
@@ -3052,14 +3095,9 @@ class PivotBaseBindingDirective {
                         return;
                     }
                 }
-                this.dataService.configuredFields.next({
-                    columnAxes: state.columnAxes,
-                    rowAxes: state.rowAxes,
-                    measureAxes: state.measureAxes,
-                    sort: state.sort,
-                    filter: state.filter
-                });
+                this.dataService.configuredFields.next(this.dataService.state);
                 this.loadData(state);
+                this.dataService.state = state;
             });
         }));
         this.subs.add(this.dataService.valuesRows.subscribe((data) => {
@@ -3080,13 +3118,7 @@ class PivotBaseBindingDirective {
     }
     updateConfiguratorFields() {
         this.dataService.fields.next(this.configuratorFields);
-        this.dataService.configuredFields.next({
-            columnAxes: this.columnAxes,
-            rowAxes: this.rowAxes,
-            measureAxes: this.measureAxes,
-            sort: this.sort,
-            filter: this.filter
-        });
+        this.dataService.configuredFields.next(this.dataService.state);
     }
     updateHeaders(axes, tree, path) {
         // Action to determine expand/collapse state
@@ -3098,16 +3130,18 @@ class PivotBaseBindingDirective {
         // the expanded state based on the toggle action (expand/collapse)
         // Update axes and reload data
         const newHeaders = headersReducer(this[axes].slice(), Object.assign(Object.assign({}, action), { tree }));
+        const newState = Object.assign(Object.assign({}, this.dataService.state), { [axes]: newHeaders });
+        this.dataService.state = newState;
         if (hasObservers(this.expandChange)) {
-            const newState = Object.assign(Object.assign({}, this.state), { [axes]: newHeaders });
             const event = new ExpandChangeEvent(newState);
             this.expandChange.emit(event);
             if (event.isDefaultPrevented()) {
                 return;
             }
         }
+        this.dataService.configuredFields.next(this.dataService.state);
         this[axes] = newHeaders;
-        this.loadData(this.state);
+        this.loadData(this.dataService.state);
     }
     ;
 }
@@ -3151,7 +3185,7 @@ class PivotLocalBindingDirective extends PivotBaseBindingDirective {
     }
     ngOnChanges(changes) {
         if (anyChanged(['data', 'dimensions', 'columnAxes', 'rowAxes', 'measureAxes', 'measures'], changes)) {
-            this.loadData(this.state);
+            this.loadData(this.dataService.state);
         }
     }
     /**
@@ -3215,7 +3249,7 @@ class PivotOLAPBindingDirective extends PivotBaseBindingDirective {
     }
     ngOnChanges(changes) {
         if (anyChanged(['url', 'cube', 'catalog', 'columnAxes', 'rowAxes', 'measureAxes'], changes)) {
-            this.loadData(this.state);
+            this.loadData(this.dataService.state);
             this.loadFields();
         }
     }

package/models/configurator-orientation.d.ts

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Defines the layout orientation of the Configurator.
+ *
+ * @default 'vertical'
+ */
+export declare type PivotGridConfiguratorOrientation = 'horizontal' | 'vertical';