@progress/kendo-angular-pivotgrid 1.0.1 → 1.0.2

package/configurator/configurator.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { AxisDescriptor, PivotGridField, PivotGridConfiguratorState } from '@progress/kendo-pivotgrid-common';
 import { TreeItem } from '@progress/kendo-angular-treeview';
 import { PivotGridDataService } from '../data-binding/pivotgrid-data.service';
@@ -11,12 +11,13 @@ import { Observable } from 'rxjs';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { FilterDescriptor, SortDescriptor } from '@progress/kendo-data-query';
 import { PivotGridConfiguratorOrientation } from '../models/configurator-orientation';
+import { DropSectionType } from '../models/drop-section';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  * Represents the Kendo UI PivotGrid Configurator component for Angular.
  */
-export declare class PivotGridConfiguratorComponent implements OnInit, OnDestroy {
+export declare class PivotGridConfiguratorComponent implements OnInit, OnChanges, OnDestroy {
     private dataService;
     private localization;
     configuratorService: ConfiguratorService;
@@ -38,6 +39,7 @@ export declare class PivotGridConfiguratorComponent implements OnInit, OnDestroy
     constructor(dataService: PivotGridDataService, localization: LocalizationService, configuratorService: ConfiguratorService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     getName(name: string[]): string;
     setState(state: PivotGridConfiguratorState): void;
     /**
@@ -60,7 +62,7 @@ export declare class PivotGridConfiguratorComponent implements OnInit, OnDestroy
      * Updates the respective axis configuration of the current state
      * when a chip is deleted from the UI
      */
-    onChipRemove(item: AxisDescriptor, section: 'column' | 'row' | 'measure'): void;
+    onChipRemove(item: AxisDescriptor, section: DropSectionType): void;
     /**
      * Constructs an array with all selected fields.
      * @param fields - used for when child nodes are loaded on demand.

package/configurator/configurator.service.d.ts

@@ -5,6 +5,8 @@
 import { EventEmitter } from '@angular/core';
 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 * as i0 from "@angular/core";
 /**
  * @hidden
@@ -12,6 +14,13 @@ import * as i0 from "@angular/core";
 export declare class ConfiguratorService {
     private dataService;
     state: PivotGridConfiguratorState;
+    draggedElement: {
+        element: Element;
+        fromSection: DropSectionType;
+    };
+    dropTargetElement: Element;
+    cueContainer: Element;
+    orientation: PivotGridConfiguratorOrientation;
     configuratorStateChange: EventEmitter<any>;
     constructor(dataService: PivotGridDataService);
     parseConfiguratorState(action: any): void;

package/configurator/draggable.directive.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 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 } from '@angular/core';
+import { ElementRef, OnInit, NgZone, OnDestroy, Renderer2 } from '@angular/core';
 import { DraggableDirective } from '@progress/kendo-angular-common';
 import { PivotGridAxis } from '@progress/kendo-pivotgrid-common';
 import { ConfiguratorService } from './configurator.service';
@@ -17,16 +17,17 @@ export declare class DraggableChipDirective implements OnInit, OnDestroy {
     private zone;
     private service;
     private cue;
+    private renderer;
     get pointerEvents(): any;
     touchActions: string;
-    constructor(draggable: DraggableDirective, element: ElementRef, zone: NgZone, service: ConfiguratorService, cue: DropCueService);
     item: PivotGridAxis;
     initialX: any;
     initialY: any;
     private drag;
     private subs;
+    constructor(draggable: DraggableDirective, element: ElementRef, zone: NgZone, service: ConfiguratorService, cue: DropCueService, renderer: Renderer2);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DraggableChipDirective, [{ optional: true; }, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DraggableChipDirective, [{ optional: true; }, null, null, null, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DraggableChipDirective, "[kendoChipDraggable]", never, { "item": "item"; }, {}, never>;
 }

package/configurator/drop-cue.service.d.ts

@@ -2,21 +2,22 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { PivotGridConfiguratorDropDirection } from '@progress/kendo-pivotgrid-common';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare const append: (element: any) => () => any;
+export declare const append: (element: any, container: any) => () => any;
 /**
  * @hidden
  */
 export declare class DropCueService {
-    private dom;
+    dom: any;
     create(): void;
-    attach(): Function;
-    remove(): void;
+    attach(container: Element): Function;
+    remove(container: Element): void;
     hide(): void;
-    position({ left, top, height }: any): void;
+    show(direction: PivotGridConfiguratorDropDirection, container: Element, target: Element): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropCueService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DropCueService>;
 }

package/configurator/drop-target.directive.d.ts

@@ -19,7 +19,9 @@ export declare class DropTargetDirective implements OnInit, OnDestroy {
     item: PivotGridAxis;
     axes: PivotGridConfiguratorDropZone;
     private elementType;
+    private elementSectionType;
     private targetElement;
+    private nextChipOffset;
     private subs;
     constructor(element: ElementRef, configuratorService: ConfiguratorService, cue: DropCueService, renderer: Renderer2, zone: NgZone);
     ngOnInit(): void;
@@ -27,6 +29,10 @@ export declare class DropTargetDirective implements OnInit, OnDestroy {
     private handleMouseEnter;
     private handleMouseMove;
     private handleMouseLeave;
+    private isDropAllowed;
+    private getElementType;
+    private getCueContainer;
+    private getNextChip;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropTargetDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetDirective, "[kendoDropTarget]", never, { "item": "item"; "axes": "axes"; }, {}, never>;
 }

package/esm2015/configurator/configurator.component.js

@@ -69,7 +69,7 @@ export class PivotGridConfiguratorComponent {
         this.subs.add(this.configuratorService.configuratorStateChange
             .subscribe(res => {
             this.state = res;
-            this.dataService.state = this.dataService.state = {
+            this.dataService.state = {
                 columnAxes: res.columnAxes,
                 rowAxes: res.rowAxes,
                 measureAxes: res.measureAxes,
@@ -82,6 +82,11 @@ export class PivotGridConfiguratorComponent {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes.orientation) {
+            this.configuratorService.orientation = this.orientation;
+        }
+    }
     getName(name) {
         return name.toString();
     }
@@ -229,7 +234,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         ConfiguratorService,
         DropCueService,
         SinglePopupService
-    ], ngImport: i0, template: `
+    ], usesOnChanges: true, ngImport: i0, template: `
         <div 
             class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
             [ngClass]="{
@@ -383,7 +388,7 @@ PivotGridConfiguratorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 <button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
             </div>
         </div>
-   `, 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: i6.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: i8.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i11.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\n        .k-form .k-form-field,\n        .k-form .k-settings-description {\n            padding-top: 1em;\n            margin-top: 0;\n        }\n\n        .k-form.k-form-horizontal .k-form-field,\n        .k-form.k-form-horizontal .k-chip-list {\n            padding-top: 0;\n            padding-left: 16px;\n        }\n\n        .k-form.k-form-horizontal .k-form-field-wrapper {\n            padding-left: 0;\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: i6.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: i8.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { type: i11.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: [{
@@ -552,6 +557,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         .k-form .k-chip-list {
             width: 100%;
         }
+
+        .k-form .k-form-field,
+        .k-form .k-settings-description {
+            padding-top: 1em;
+            margin-top: 0;
+        }
+
+        .k-form.k-form-horizontal .k-form-field,
+        .k-form.k-form-horizontal .k-chip-list {
+            padding-top: 0;
+            padding-left: 16px;
+        }
+
+        .k-form.k-form-horizontal .k-form-field-wrapper {
+            padding-left: 0;
+        }
    `]
                 }]
         }], ctorParameters: function () { return [{ type: i1.PivotGridDataService }, { type: i2.LocalizationService }, { type: i3.ConfiguratorService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{

package/esm2015/configurator/draggable.directive.js

@@ -14,12 +14,13 @@ import * as i3 from "./drop-cue.service";
  * @hidden
  */
 export class DraggableChipDirective {
-    constructor(draggable, element, zone, service, cue) {
+    constructor(draggable, element, zone, service, cue, renderer) {
         this.draggable = draggable;
         this.element = element;
         this.zone = zone;
         this.service = service;
         this.cue = cue;
+        this.renderer = renderer;
         this.touchActions = 'none';
         this.initialX = {};
         this.initialY = {};
@@ -29,52 +30,70 @@ export class DraggableChipDirective {
         return this.drag ? 'none' : undefined;
     }
     ngOnInit() {
-        this.zone.runOutsideAngular(() => this.subs.add(this.draggable.kendoPress
+        this.subs.add(this.draggable.kendoPress
             .subscribe((event) => {
-            if (isDocumentAvailable()) {
-                this.cue.create();
-                this.cue.attach();
-                this.initialX.current = event.clientX;
-                this.initialY.current = event.clientY;
-            }
-        })));
-        this.zone.runOutsideAngular(() => this.subs.add(this.draggable.kendoDrag
-            .subscribe((event) => {
-            if (isDocumentAvailable()) {
-                if (Math.abs(this.initialX.current - event.clientX) < 10 &&
-                    Math.abs(this.initialY.current - event.clientY) < 10) {
-                    return;
+            this.zone.runOutsideAngular(() => {
+                if (isDocumentAvailable()) {
+                    this.initialX.current = event.clientX;
+                    this.initialY.current = event.clientY;
+                    const element = this.element.nativeElement;
+                    this.renderer.setStyle(element, 'z-index', 1);
+                    this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDragItem, payload: this.item });
+                    this.service.draggedElement = {
+                        element,
+                        fromSection: element.closest('.k-chip-list').getAttribute('axes').split('Axes')[0]
+                    };
                 }
-                if (this.element.nativeElement) {
-                    this.element.nativeElement.style.transform = `translate(${event.clientX - this.initialX.current}px, ${event.clientY - this.initialY.current}px)`;
+            });
+        }));
+        this.subs.add(this.draggable.kendoDrag
+            .subscribe((event) => {
+            this.zone.runOutsideAngular(() => {
+                var _a;
+                if (isDocumentAvailable()) {
+                    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]'))) {
+                        return;
+                    }
+                    this.renderer.setStyle(this.element.nativeElement, 'transform', `translate(${event.clientX - this.initialX.current}px, ${event.clientY - this.initialY.current}px)`);
                 }
-            }
-            this.drag = true;
-            this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDragItem, payload: this.item });
-        })));
-        this.zone.runOutsideAngular(() => this.subs.add(this.draggable.kendoRelease
+            });
+        }));
+        this.subs.add(this.draggable.kendoRelease
             .subscribe(() => {
-            this.drag = false;
-            if (this.service.state.dragItem) {
-                if (isDocumentAvailable()) {
-                    if (this.element.nativeElement) {
-                        this.element.nativeElement.style.transform = '';
+            this.zone.runOutsideAngular(() => {
+                this.drag = false;
+                if (this.service.state.dragItem) {
+                    const element = this.element.nativeElement;
+                    if (isDocumentAvailable()) {
+                        this.renderer.removeStyle(element, 'transform');
+                        this.cue.remove(this.service.cueContainer);
+                    }
+                    this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.drop, payload: this.item });
+                    this.service.state.dragItem = null;
+                    this.service.state.dropDirection = null;
+                    this.service.state.dropTarget = null;
+                    this.service.state.dropZone = null;
+                    this.renderer.removeStyle(element, 'z-index');
+                    this.service.draggedElement = null;
+                    if (this.service.dropTargetElement) {
+                        this.renderer.removeStyle(this.service.dropTargetElement, 'cursor');
+                        this.service.dropTargetElement = null;
                     }
-                    this.cue.remove();
                 }
-                this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.drop, payload: this.item });
-                this.service.state.dragItem = null;
-                this.service.state.dropDirection = null;
-                this.service.state.dropTarget = null;
-                this.service.state.dropZone = null;
-            }
-        })));
+            });
+        }));
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
 }
-DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.ConfiguratorService }, { token: i3.DropCueService }], target: i0.ɵɵFactoryTarget.Directive });
+DraggableChipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.ConfiguratorService }, { token: i3.DropCueService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
 DraggableChipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: DraggableChipDirective, decorators: [{
             type: Directive,
@@ -83,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.DraggableDirective, decorators: [{
                     type: Optional
-                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.ConfiguratorService }, { type: i3.DropCueService }]; }, propDecorators: { pointerEvents: [{
+                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.ConfiguratorService }, { type: i3.DropCueService }, { type: i0.Renderer2 }]; }, propDecorators: { pointerEvents: [{
                 type: HostBinding,
                 args: ['style.pointerEvents']
             }], touchActions: [{

package/esm2015/configurator/drop-cue.service.js

@@ -7,11 +7,11 @@ import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export const append = (element) => {
+export const append = (element, container) => {
     let appended = false;
     return () => {
         if (!appended) {
-            document.body.appendChild(element);
+            container.appendChild(element);
             appended = true;
         }
         return element;
@@ -23,7 +23,6 @@ export const append = (element) => {
 export class DropCueService {
     create() {
         this.dom = document.createElement('span');
-        this.dom.style.position = 'absolute';
         const wrapper = document.createElement('div');
         wrapper.classList.add('k-drop-hint', 'k-drop-hint-v');
         const hintStart = document.createElement('div');
@@ -36,25 +35,34 @@ export class DropCueService {
         this.dom.append(wrapper);
         this.hide();
     }
-    attach() {
-        return append(this.dom)();
+    attach(container) {
+        return append(this.dom, container)();
     }
-    remove() {
-        if (this.dom && this.dom.parentElement) {
-            document.body.removeChild(this.dom);
+    remove(container) {
+        if (this.dom && this.dom.parentElement && container.contains(this.dom)) {
+            container.removeChild(this.dom);
             this.dom = null;
         }
     }
     hide() {
-        this.dom.style.display = "none";
+        this.dom.style.display = 'none';
     }
-    position({ left, top, height }) {
-        this.dom.style.display = 'block';
-        this.dom.style.height = height + 'px';
-        this.dom.style.top = top + 'px';
-        this.dom.style.zIndex = '1000';
-        const width = this.dom.offsetWidth / 2;
-        this.dom.style.left = left - width + 'px';
+    show(direction, container, target) {
+        if (!this.dom) {
+            this.create();
+        }
+        if (direction === 'before') {
+            container.insertBefore(this.dom, target);
+        }
+        else {
+            if (target.classList.contains('k-chip') && target.matches(':last-child')) {
+                container.insertBefore(this.dom, target);
+                return;
+            }
+            // eslint-disable-next-line no-unused-expressions
+            target.classList.contains('k-chip') ? target.after(this.dom) : container.appendChild(this.dom);
+        }
+        this.dom.style.display = '';
     }
 }
 DropCueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropCueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });

package/esm2015/configurator/drop-target.directive.js

@@ -5,7 +5,7 @@
 import { Directive, Input } from "@angular/core";
 import { PIVOT_CONFIGURATOR_ACTION } from "@progress/kendo-pivotgrid-common";
 import { Subscription } from "rxjs";
-import { position } from "../util";
+import { isPresent } from "../util";
 import * as i0 from "@angular/core";
 import * as i1 from "./configurator.service";
 import * as i2 from "./drop-cue.service";
@@ -22,49 +22,144 @@ export class DropTargetDirective {
         this.subs = new Subscription();
     }
     ngOnInit() {
+        var _a;
         const element = this.element.nativeElement;
-        this.elementType = element.nodeName === 'KENDO-CHIP' ? 'chip' : 'container';
-        this.zone.runOutsideAngular(() => {
-            this.subs.add(this.renderer.listen(element, 'mouseenter', this.handleMouseEnter.bind(this)));
-            this.subs.add(this.renderer.listen(element, 'mousemove', this.handleMouseMove.bind(this)));
-            this.subs.add(this.renderer.listen(element, 'mouseleave', this.handleMouseLeave.bind(this)));
-        });
+        this.elementType = this.getElementType(element);
+        this.elementSectionType = (_a = element.getAttribute('axes')) === null || _a === void 0 ? void 0 : _a.split('Axes')[0];
+        this.subs.add(this.renderer.listen(element, 'mouseenter', this.handleMouseEnter.bind(this)));
+        this.subs.add(this.renderer.listen(element, 'mousemove', this.handleMouseMove.bind(this)));
+        this.subs.add(this.renderer.listen(element, 'mouseleave', this.handleMouseLeave.bind(this)));
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
     handleMouseEnter(event) {
-        if (this.configuratorService.state.dragItem) {
-            if (this.elementType === 'chip') {
+        this.zone.runOutsideAngular(() => {
+            if (this.configuratorService.state.dragItem) {
+                this.configuratorService.dropTargetElement = this.element.nativeElement;
+                if (this.configuratorService.draggedElement && !this.isDropAllowed(this.configuratorService.draggedElement.fromSection)) {
+                    return;
+                }
                 this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropTarget, payload: this.item });
-                this.targetElement = event.target;
-                this.cue.position(position(event.target, this.configuratorService.state.dropDirection === 'before'));
+                this.targetElement = this.elementType === 'header' ? event.target.nextElementSibling : event.target;
+                // eslint-disable-next-line no-unused-expressions
+                this.cue.dom && this.cue.remove(this.getCueContainer());
+                this.cue.create();
+                this.cue.attach(this.getCueContainer());
+                this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropZone, payload: this.axes });
             }
-            this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropZone, payload: this.axes });
-        }
+        });
     }
-    handleMouseMove($event) {
-        if (this.configuratorService.state.dragItem) {
-            if (this.elementType !== 'chip') {
-                return;
-            }
-            if (this.element.nativeElement) {
-                const rect = this.element.nativeElement.getBoundingClientRect();
-                const x = $event.clientX - rect.left;
-                const direction = x < rect.width / 2 ? 'before' : 'after';
-                if ((direction !== this.configuratorService.state.dropDirection) && this.targetElement) {
-                    this.cue.position(position(this.targetElement, direction === 'before'));
+    handleMouseMove(event) {
+        this.zone.runOutsideAngular(() => {
+            var _a;
+            event.stopImmediatePropagation();
+            if (this.configuratorService.state.dragItem) {
+                if (this.configuratorService.draggedElement && !this.isDropAllowed(this.configuratorService.draggedElement.fromSection)) {
+                    this.renderer.setStyle(this.element.nativeElement, 'cursor', 'not-allowed');
+                    return;
+                }
+                this.renderer.setStyle(this.element.nativeElement, 'cursor', 'pointer');
+                const singleOrNoChip = ((_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.k-chip').length) < 2;
+                const isInOwnContainer = this.elementSectionType === this.configuratorService.draggedElement.fromSection;
+                if (!this.targetElement) {
+                    return;
+                }
+                switch (this.elementType) {
+                    case 'chip':
+                        const rect = this.element.nativeElement.getBoundingClientRect();
+                        const x = event.clientX - rect.left;
+                        const direction = x < rect.width / 2 ? 'before' : 'after';
+                        this.cue.show(direction, this.configuratorService.cueContainer, this.targetElement);
+                        if (direction !== this.configuratorService.state.dropDirection) {
+                            this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: direction });
+                        }
+                        break;
+                    case 'container':
+                    case 'header':
+                        if (singleOrNoChip && isInOwnContainer) {
+                            return;
+                        }
+                        if (isInOwnContainer) {
+                            const draggedElement = this.configuratorService.draggedElement.element;
+                            const nextChip = this.getNextChip(draggedElement);
+                            if (!nextChip) {
+                                this.cue.show('before', this.configuratorService.cueContainer, draggedElement);
+                                if (this.configuratorService.state.dropDirection !== 'before') {
+                                    this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: 'before' });
+                                }
+                                return;
+                            }
+                            const isVertical = this.configuratorService.orientation === 'vertical';
+                            if (!isPresent(this.nextChipOffset)) {
+                                this.nextChipOffset = isVertical ? nextChip.getBoundingClientRect().left : nextChip.getBoundingClientRect().top;
+                            }
+                            const isBefore = isVertical ? event.clientX < this.nextChipOffset : event.clientY < this.nextChipOffset;
+                            if (isBefore) {
+                                this.cue.show('after', this.configuratorService.cueContainer, draggedElement);
+                                return;
+                            }
+                        }
+                        if (this.configuratorService.state.dropDirection !== 'after') {
+                            this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: 'after' });
+                        }
+                        this.cue.show('after', this.configuratorService.cueContainer, this.targetElement);
+                        break;
+                    default:
                 }
-                this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropDirection, payload: direction });
             }
-        }
+        });
     }
-    handleMouseLeave() {
-        if (this.elementType === 'chip') {
+    handleMouseLeave(event) {
+        this.renderer.removeStyle(this.element.nativeElement, 'cursor');
+        if (!this.configuratorService.draggedElement) {
             return;
         }
-        if (this.configuratorService.state.dragItem) {
-            this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropZone, payload: null });
+        this.zone.runOutsideAngular(() => {
+            event.stopImmediatePropagation();
+            this.configuratorService.dropTargetElement = null;
+            this.cue.remove(this.getCueContainer());
+            if (this.elementType === 'chip') {
+                return;
+            }
+            if (this.configuratorService.state.dragItem) {
+                this.configuratorService.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDropZone, payload: null });
+            }
+        });
+    }
+    isDropAllowed(fromSection) {
+        const element = this.element.nativeElement;
+        const fromRowsOrColsToMeasures = (fromSection === 'row' || fromSection === 'column') && element.closest('[axes=measureAxes]');
+        const fromMeasuresToRowsOrCols = fromSection === 'measure' && (element.closest('[axes=rowAxes]') || element.closest('[axes=columnAxes]'));
+        return !(fromRowsOrColsToMeasures || fromMeasuresToRowsOrCols);
+    }
+    getElementType(element) {
+        return {
+            'KENDO-CHIP': 'chip',
+            'KENDO-CHIPLIST': 'container',
+            'DIV': 'header'
+        }[element.tagName];
+    }
+    getCueContainer() {
+        const element = this.element.nativeElement;
+        const cueContainer = {
+            chip: element.parentElement,
+            container: element,
+            header: element.classList.contains('k-settings-description') ? element : element.nextElementSibling
+        }[this.elementType];
+        this.configuratorService.cueContainer = cueContainer;
+        return cueContainer;
+    }
+    getNextChip(draggedElement) {
+        let nextChip = draggedElement.nextElementSibling;
+        if (nextChip && nextChip.matches('.k-chip')) {
+            return nextChip;
+        }
+        while (nextChip) {
+            nextChip = nextChip.nextElementSibling;
+            if (nextChip === null || nextChip.matches('.k-chip')) {
+                return nextChip;
+            }
         }
     }
 }

package/esm2015/models/drop-section.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/models/drop-target.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-pivotgrid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1663138494,
+    publishDate: 1664197863,
     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'
 };

package/esm2015/util.js

@@ -124,8 +124,7 @@ export const position = (target, before) => {
     const { offsetWidth, offsetHeight } = target;
     const left = targetRect.left + (before ? 0 : offsetWidth);
     const top = targetRect.top + offsetHeight / 2;
-    const height = offsetHeight;
-    return { left, top, height };
+    return { left, top };
 };
 /**
  * @hidden