@progress/kendo-angular-utils 0.1.0 → 0.1.1-dev.202209131028

package/esm2015/drag-and-drop/dragtarget.directive.js

@@ -7,12 +7,14 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { DragHandleDirective } from "./draghandle.directive";
 import { getScrollableParent } from "@progress/kendo-draggable-common";
-import { DragStartEvent, DragEndEvent, PressEvent, ReleaseEvent, DragEvent } from "./events/drag-target";
+import { DragTargetDragStartEvent, DragTargetDragEndEvent, DragTargetPressEvent, DragTargetDragEvent } from "./events/drag-target";
 import { getAction, isPresent, setElementStyles, dragTargetTransition } from './util';
 import { contains, isDocumentAvailable } from "@progress/kendo-angular-common";
 import { HintComponent } from "./hint.component";
 import * as i0 from "@angular/core";
 import * as i1 from "./drag-state.service";
+let isDragStartPrevented = false;
+let isDragPrevented = false;
 /**
  * Represents the Kendo UI DragTarget directive for Angular.
  */
@@ -44,27 +46,28 @@ export class DragTargetDirective {
         this.dragDelay = 0;
         /**
          * Fires when the user presses the DragTarget element.
-         * This event is preventable. Preventing it allows full logic customization.
          */
         this.press = new EventEmitter();
         /**
          * Fires when the dragging of the DragTarget element begins.
-         * This event is preventable. Preventing it allows full logic customization.
+         * This event is preventable.
          */
         this.dragStart = new EventEmitter();
         /**
          * Fires while the user drags the DragTarget element.
-         * This event is preventable. Preventing it allows full logic customization.
+         * This event is preventable.
          */
         this.drag = new EventEmitter();
         /**
-         * Fires when the user releases the DragTarget element.
-         * This event is preventable. Preventing it allows full logic customization.
+         * Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
+         */
+        this.dragReady = new EventEmitter();
+        /**
+         * Fires when the user releases the DragTarget element after being pressed.
          */
         this.release = new EventEmitter();
         /**
-         * Fires when the dragging of the DragTarget element ends.
-         * This event is preventable. Preventing it allows full logic customization.
+         * Fires when the dragging of the DragTarget ends and the element is released.
          */
         this.dragEnd = new EventEmitter();
         this.touchAction = 'none';
@@ -75,6 +78,7 @@ export class DragTargetDirective {
         this.dragStarted = false;
         this.pressed = false;
         this.dragTimeout = null;
+        this.position = { x: 0, y: 0 };
         validatePackage(packageMetadata);
     }
     /**
@@ -149,13 +153,16 @@ export class DragTargetDirective {
         if (this.dragDelay > 0) {
             this.dragTimeout = setTimeout(() => {
                 this.pressed = true;
+                this.ngZone.run(() => {
+                    this.dragReady.emit();
+                });
             }, this.dragDelay);
         }
         else {
             this.pressed = true;
         }
         this.ngZone.run(() => {
-            const eventArgs = new PressEvent({ event, element: this.nativeElement });
+            const eventArgs = new DragTargetPressEvent({ normalizedEvent: event, hostElement: this.nativeElement });
             this.press.emit(eventArgs);
         });
     }
@@ -170,6 +177,12 @@ export class DragTargetDirective {
             }
             return;
         }
+        this.ngZone.run(() => {
+            isDragStartPrevented = this.emitEvent('dragStart', { normalizedEvent: event, hostElement: this.nativeElement }).isDefaultPrevented();
+        });
+        if (isDragStartPrevented) {
+            return;
+        }
         if (isPresent(this.hintTemplate)) {
             this.createHint();
             if (isPresent(this.hint)) {
@@ -179,50 +192,42 @@ export class DragTargetDirective {
         this.dragStarted = this.threshold === 0;
         this.service.dragTarget = this.dragTarget;
         this.service.dragTargetDirective = this;
-        this.initialPosition = { x: event.clientX, y: event.clientY };
-        this.ngZone.run(() => {
-            const eventArgs = new DragStartEvent({ event, element: this.nativeElement });
-            this.dragStart.emit(eventArgs);
-        });
+        this.initialPosition = { x: event.clientX - this.position.x, y: event.clientY - this.position.y };
     }
-    /**
-     * @hidden
-     */
     handleDrag(event) {
-        if (!this.pressed) {
+        if (!this.pressed || isDragStartPrevented) {
             return;
         }
         const elem = this.hint ? this.hintElem : this.nativeElement;
-        let coordinates = { x: 0, y: 0 };
+        const eventArgsProps = elem === this.nativeElement ? { normalizedEvent: event, hostElement: this.nativeElement } : { normalizedEvent: event, hostElement: this.nativeElement, hintElement: elem };
+        this.ngZone.run(() => {
+            isDragPrevented = this.emitEvent('drag', eventArgsProps).isDefaultPrevented();
+        });
+        if (isDragPrevented) {
+            return;
+        }
         if (this.restrictByAxis === 'horizontal') {
-            coordinates = { x: event.clientX - this.initialPosition.x + event.scrollX, y: 0 };
+            this.position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: 0 };
         }
         else if (this.restrictByAxis === 'vertical') {
-            coordinates = { x: 0, y: event.clientY - this.initialPosition.y + event.scrollY };
+            this.position = { x: 0, y: event.clientY - this.initialPosition.y + event.scrollY };
         }
         else {
-            coordinates = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
+            this.position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
         }
-        const thresholdNotReached = Math.abs(coordinates.x) < this.threshold && Math.abs(coordinates.y) < this.threshold;
+        const thresholdNotReached = Math.abs(this.position.x) < this.threshold && Math.abs(this.position.y) < this.threshold;
         if (!this.dragStarted && thresholdNotReached) {
             return;
         }
-        const transform = `translate(${coordinates.x}px, ${coordinates.y}px)`;
-        setElementStyles(this.renderer, elem, {
-            transform: transform,
-            transition: 'none'
-        });
         if (!this.dragStarted && this.threshold > 0) {
             this.dragStarted = true;
         }
-        this.ngZone.run(() => {
-            const eventArgs = new DragEvent({ event, element: this.nativeElement });
-            this.drag.emit(eventArgs);
+        const transform = `translate(${this.position.x}px, ${this.position.y}px)`;
+        setElementStyles(this.renderer, elem, {
+            transform: transform,
+            transition: 'none'
         });
     }
-    /**
-     * @hidden
-     */
     handleRelease(event) {
         if (this.dragTimeout) {
             clearTimeout(this.dragTimeout);
@@ -232,35 +237,40 @@ export class DragTargetDirective {
         this.service.dragTarget = null;
         this.service.dragTargetDirective = null;
         this.ngZone.run(() => {
-            const eventArgs = new ReleaseEvent({ event, element: this.nativeElement });
+            const eventArgs = new DragTargetPressEvent({ normalizedEvent: event, hostElement: this.nativeElement });
             this.release.emit(eventArgs);
         });
     }
-    /**
-     * @hidden
-     */
     handleDragEnd(event) {
-        if (!this.dragStarted) {
-            return;
+        if (this.dragTimeout) {
+            clearTimeout(this.dragTimeout);
+            this.dragTimeout = null;
+            this.pressed = false;
         }
-        this.dragStarted = false;
+        const isDroppedOverParentTarget = isPresent(this.service.dropTarget) && !contains(this.service.dropTarget, this.service.dragTarget, true);
         const elem = this.hint ? this.hintElem : this.nativeElement;
+        if (isDroppedOverParentTarget || this.service.dropTargets.length > 0) {
+            this.renderer.removeStyle(elem, 'transform');
+            setElementStyles(this.renderer, elem, {
+                transition: dragTargetTransition
+            });
+            this.position = { x: 0, y: 0 };
+        }
         if (isPresent(this.hint)) {
             this.renderer.removeStyle(this.nativeElement, 'opacity');
             this.destroyHint();
         }
-        this.renderer.removeStyle(elem, 'transform');
-        setElementStyles(this.renderer, elem, {
-            transition: dragTargetTransition
-        });
+        this.service.dragTarget = null;
+        this.service.dragTargetDirective = null;
+        if (!this.dragStarted || isDragStartPrevented || isDragPrevented) {
+            return;
+        }
         this.ngZone.run(() => {
-            const eventArgs = new DragEndEvent({ event, element: this.nativeElement });
+            const eventArgs = new DragTargetDragEndEvent({ normalizedEvent: event, hostElement: this.nativeElement });
             this.dragEnd.emit(eventArgs);
         });
+        this.dragStarted = false;
     }
-    /**
-     * @hidden
-     */
     initializeDraggable() {
         this.dragTarget = {
             element: this.nativeElement,
@@ -272,9 +282,6 @@ export class DragTargetDirective {
             onDragEnd: this.handleDragEnd.bind(this)
         };
     }
-    /**
-     * @hidden
-     */
     attachDomHandlers() {
         if (this.domSubscriptions.length > 0) {
             this.domSubscriptions.forEach(subscription => subscription());
@@ -314,24 +321,15 @@ export class DragTargetDirective {
             ];
         }
     }
-    /**
-     * @hidden
-     */
     isDragHandle(el) {
         return this.dragHandles.toArray().some(dh => contains(dh.element.nativeElement, el, true));
     }
-    /**
-     * @hidden
-     */
     getAutoScrollContainer() {
         return typeof this.autoScroll === 'object' &&
             this.autoScroll.boundaryElementRef &&
             this.autoScroll.boundaryElementRef.nativeElement ?
             this.autoScroll.boundaryElementRef.nativeElement : null;
     }
-    /**
-     * @hidden
-     */
     createHint() {
         const hintComponent = this.resolver.resolveComponentFactory(HintComponent);
         this.hint = this.viewContainer.createComponent(hintComponent);
@@ -340,18 +338,30 @@ export class DragTargetDirective {
         this.hint.changeDetectorRef.detectChanges();
         this.dragTarget.hint = this.hint.instance.element.nativeElement;
     }
-    /**
-     * @hidden
-     */
     destroyHint() {
         this.hint.destroy();
         this.hint.changeDetectorRef.detectChanges();
         this.hint = null;
         this.dragTarget.hint = null;
     }
+    emitEvent(event, args) {
+        let eventArgs;
+        switch (event) {
+            case 'dragStart':
+                eventArgs = new DragTargetDragStartEvent(args);
+                break;
+            case 'drag':
+                eventArgs = new DragTargetDragEvent(args);
+                break;
+            default:
+                break;
+        }
+        this[event].emit(eventArgs);
+        return eventArgs;
+    }
 }
 DragTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.DragStateService }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DragTargetDirective, selector: "[kendoDragTarget]", inputs: { hintTemplate: "hintTemplate", threshold: "threshold", autoScroll: "autoScroll", link: "link", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis" }, outputs: { press: "press", dragStart: "dragStart", drag: "drag", release: "release", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "this.touchAction" } }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
+DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DragTargetDirective, selector: "[kendoDragTarget]", inputs: { hintTemplate: "hintTemplate", threshold: "threshold", autoScroll: "autoScroll", link: "link", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis" }, outputs: { press: "press", dragStart: "dragStart", drag: "drag", dragReady: "dragReady", release: "release", dragEnd: "dragEnd" }, host: { properties: { "style.touch-action": "this.touchAction" } }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragTargetDirective, decorators: [{
             type: Directive,
             args: [{
@@ -376,6 +386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], drag: [{
                 type: Output
+            }], dragReady: [{
+                type: Output
             }], release: [{
                 type: Output
             }], dragEnd: [{

package/esm2015/drag-and-drop/droptarget.directive.js

@@ -5,7 +5,7 @@
 import { Directive, EventEmitter, Input, Output } from "@angular/core";
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { DragEnterEvent, DragOverEvent, DragLeaveEvent, DropEvent } from './events/drop-target';
+import { DropTargetDragEnterEvent, DropTargetDragOverEvent, DropTargetDragLeaveEvent, DropTargetDropEvent } from './events/drop-target';
 import { isPresent } from './util';
 import * as i0 from "@angular/core";
 import * as i1 from "./drag-state.service";
@@ -47,6 +47,9 @@ export class DropTargetDirective {
      * @hidden
      */
     handleDragEnter(event) {
+        if (!this.service.dragTarget) {
+            return;
+        }
         let allowed = true;
         if (isPresent(this.allowedDragTargets)) {
             switch (typeof this.allowedDragTargets) {
@@ -66,7 +69,7 @@ export class DropTargetDirective {
         if (allowed) {
             this.service.dropTarget = this.dropTarget;
             this.ngZone.run(() => {
-                const eventArgs = new DragEnterEvent({ event, element: this.element.nativeElement });
+                const eventArgs = new DropTargetDragEnterEvent({ normalizedEvent: event, hostElement: this.element.nativeElement });
                 this.dragEnter.emit(eventArgs);
             });
         }
@@ -76,8 +79,11 @@ export class DropTargetDirective {
      */
     handleDragLeave(event) {
         this.service.dropTarget = null;
+        if (!this.service.dragTarget) {
+            return;
+        }
         this.ngZone.run(() => {
-            const eventArgs = new DragLeaveEvent({ event, element: this.element.nativeElement });
+            const eventArgs = new DropTargetDragLeaveEvent({ normalizedEvent: event, hostElement: this.element.nativeElement });
             this.dragLeave.emit(eventArgs);
         });
     }
@@ -85,8 +91,11 @@ export class DropTargetDirective {
      * @hidden
      */
     handleDragOver(event) {
+        if (!this.service.dragTarget) {
+            return;
+        }
         this.ngZone.run(() => {
-            const eventArgs = new DragOverEvent({ event, element: this.element.nativeElement });
+            const eventArgs = new DropTargetDragOverEvent({ normalizedEvent: event, hostElement: this.element.nativeElement });
             this.dragOver.emit(eventArgs);
         });
     }
@@ -95,10 +104,9 @@ export class DropTargetDirective {
      */
     handleDrop(event) {
         this.ngZone.run(() => {
-            const eventArgs = new DropEvent({ event, element: this.element.nativeElement });
+            const eventArgs = new DropTargetDropEvent({ normalizedEvent: event, hostElement: this.element.nativeElement });
             this.drop.emit(eventArgs);
         });
-        this.service.setScrollOffset({ x: 0, y: 0 });
     }
     /**
      * @hidden

package/esm2015/drag-and-drop/events/drag-target/drag-event.js

@@ -6,7 +6,7 @@ import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
  * Arguments for the drag event of the DragTarget.
  */
-export class DragEvent extends PreventableEvent {
+export class DragTargetDragEvent extends PreventableEvent {
     /**
      * @hidden
      */

package/esm2015/drag-and-drop/events/drag-target/end-event.js

@@ -2,16 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
  * Arguments for the dragEnd event of the DragTarget.
  */
-export class DragEndEvent extends PreventableEvent {
+export class DragTargetDragEndEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }

package/esm2015/drag-and-drop/events/drag-target/index.js

@@ -2,8 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export { PressEvent } from './press-event';
-export { DragStartEvent } from './start-event';
-export { ReleaseEvent } from './release-event';
-export { DragEndEvent } from './end-event';
-export { DragEvent } from './drag-event';
+export { DragTargetPressEvent } from './press-event';
+export { DragTargetDragStartEvent } from './start-event';
+export { DragTargetDragEndEvent } from './end-event';
+export { DragTargetDragEvent } from './drag-event';

package/esm2015/drag-and-drop/events/drag-target/press-event.js

@@ -5,7 +5,7 @@
 /**
  * Arguments for the press event of the DragTarget.
  */
-export class PressEvent {
+export class DragTargetPressEvent {
     /**
      * @hidden
      */

package/esm2015/drag-and-drop/events/drag-target/start-event.js

@@ -6,7 +6,7 @@ import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
  * Arguments for the dragStart event of the DragTarget.
  */
-export class DragStartEvent extends PreventableEvent {
+export class DragTargetDragStartEvent extends PreventableEvent {
     /**
      * @hidden
      */

package/esm2015/drag-and-drop/events/drop-target/drop-event.js

@@ -2,16 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
  * Arguments for the drop event of the DropTarget.
  */
-export class DropEvent extends PreventableEvent {
+export class DropTargetDropEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }

package/esm2015/drag-and-drop/events/drop-target/enter-event.js

@@ -2,16 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
  * Arguments for the dragEnter event of the DropTarget.
  */
-export class DragEnterEvent extends PreventableEvent {
+export class DropTargetDragEnterEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }

package/esm2015/drag-and-drop/events/drop-target/index.js

@@ -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
 *-------------------------------------------------------------------------------------------*/
-export { DragEnterEvent } from './enter-event';
-export { DragOverEvent } from './over-event';
-export { DragLeaveEvent } from './leave-event';
-export { DropEvent } from './drop-event';
+export { DropTargetDragEnterEvent } from './enter-event';
+export { DropTargetDragOverEvent } from './over-event';
+export { DropTargetDragLeaveEvent } from './leave-event';
+export { DropTargetDropEvent } from './drop-event';

package/esm2015/drag-and-drop/events/drop-target/leave-event.js

@@ -2,16 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
  * Arguments for the dragLeave event of the DropTarget.
  */
-export class DragLeaveEvent extends PreventableEvent {
+export class DropTargetDragLeaveEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }

package/esm2015/drag-and-drop/events/drop-target/over-event.js

@@ -2,16 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { PreventableEvent } from '@progress/kendo-angular-common';
 /**
  * Arguments for the dragOver event of the DropTarget.
  */
-export class DragOverEvent extends PreventableEvent {
+export class DropTargetDragOverEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }

package/esm2015/drag-and-drop/models/coordinates.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/drag-and-drop.module.js

@@ -15,6 +15,37 @@ const EXPORTS = [
     DropTargetDirective,
     HintComponent
 ];
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
+ * definition for the Drag and Drop directives.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the DragAndDrop module
+ * import { DragAndDropModule } from '@progress/kendo-angular-utils';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, DragAndDropModule], // import DragAndDropModule module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
 export class DragAndDropModule {
 }
 DragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -31,6 +62,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             args: [{
                     declarations: [...EXPORTS],
                     exports: [...EXPORTS],
-                    imports: [CommonModule]
+                    imports: [CommonModule],
+                    entryComponents: [HintComponent]
                 }]
         }] });

package/esm2015/package-metadata.js

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