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

package/fesm2015/kendo-angular-utils.js

@@ -8,7 +8,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { dispatchDragAndDrop, getScrollableParent, autoScroll } from '@progress/kendo-draggable-common';
-import { PreventableEvent, isDocumentAvailable, contains } from '@progress/kendo-angular-common';
+import { PreventableEvent, contains, isDocumentAvailable } from '@progress/kendo-angular-common';
 
 /**
  * @hidden
@@ -17,7 +17,7 @@ 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'
 };
@@ -47,7 +47,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 /**
  * Arguments for the press event of the DragTarget.
  */
-class PressEvent {
+class DragTargetPressEvent {
     /**
      * @hidden
      */
@@ -59,7 +59,7 @@ class PressEvent {
 /**
  * Arguments for the dragStart event of the DragTarget.
  */
-class DragStartEvent extends PreventableEvent {
+class DragTargetDragStartEvent extends PreventableEvent {
     /**
      * @hidden
      */
@@ -69,27 +69,14 @@ class DragStartEvent extends PreventableEvent {
     }
 }
 
-/**
- * Arguments for the release event of the DragTarget.
- */
-class ReleaseEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        Object.assign(this, args);
-    }
-}
-
 /**
  * Arguments for the dragEnd event of the DragTarget.
  */
-class DragEndEvent extends PreventableEvent {
+class DragTargetDragEndEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }
@@ -97,7 +84,7 @@ class DragEndEvent extends PreventableEvent {
 /**
  * Arguments for the drag event of the DragTarget.
  */
-class DragEvent extends PreventableEvent {
+class DragTargetDragEvent extends PreventableEvent {
     /**
      * @hidden
      */
@@ -297,6 +284,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+let isDragStartPrevented = false;
+let isDragPrevented = false;
 /**
  * Represents the Kendo UI DragTarget directive for Angular.
  */
@@ -328,27 +317,28 @@ 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';
@@ -359,6 +349,7 @@ class DragTargetDirective {
         this.dragStarted = false;
         this.pressed = false;
         this.dragTimeout = null;
+        this.position = { x: 0, y: 0 };
         validatePackage(packageMetadata);
     }
     /**
@@ -433,13 +424,16 @@ 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);
         });
     }
@@ -454,6 +448,12 @@ 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)) {
@@ -463,50 +463,42 @@ 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);
@@ -516,35 +508,40 @@ 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,
@@ -556,9 +553,6 @@ class DragTargetDirective {
             onDragEnd: this.handleDragEnd.bind(this)
         };
     }
-    /**
-     * @hidden
-     */
     attachDomHandlers() {
         if (this.domSubscriptions.length > 0) {
             this.domSubscriptions.forEach(subscription => subscription());
@@ -598,24 +592,15 @@ 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);
@@ -624,18 +609,30 @@ 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: 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: [{
@@ -660,6 +657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], drag: [{
                 type: Output
+            }], dragReady: [{
+                type: Output
             }], release: [{
                 type: Output
             }], dragEnd: [{
@@ -675,12 +674,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 /**
  * Arguments for the dragEnter event of the DropTarget.
  */
-class DragEnterEvent extends PreventableEvent {
+class DropTargetDragEnterEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }
@@ -688,12 +686,11 @@ class DragEnterEvent extends PreventableEvent {
 /**
  * Arguments for the dragOver event of the DropTarget.
  */
-class DragOverEvent extends PreventableEvent {
+class DropTargetDragOverEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }
@@ -701,12 +698,11 @@ class DragOverEvent extends PreventableEvent {
 /**
  * Arguments for the dragLeave event of the DropTarget.
  */
-class DragLeaveEvent extends PreventableEvent {
+class DropTargetDragLeaveEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }
@@ -714,12 +710,11 @@ class DragLeaveEvent extends PreventableEvent {
 /**
  * Arguments for the drop event of the DropTarget.
  */
-class DropEvent extends PreventableEvent {
+class DropTargetDropEvent {
     /**
      * @hidden
      */
     constructor(args) {
-        super();
         Object.assign(this, args);
     }
 }
@@ -762,6 +757,9 @@ class DropTargetDirective {
      * @hidden
      */
     handleDragEnter(event) {
+        if (!this.service.dragTarget) {
+            return;
+        }
         let allowed = true;
         if (isPresent(this.allowedDragTargets)) {
             switch (typeof this.allowedDragTargets) {
@@ -781,7 +779,7 @@ 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);
             });
         }
@@ -791,8 +789,11 @@ 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);
         });
     }
@@ -800,8 +801,11 @@ 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);
         });
     }
@@ -810,10 +814,9 @@ 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
@@ -854,6 +857,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);
+ *
+ * ```
+ */
 class DragAndDropModule {
 }
 DragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -870,7 +904,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             args: [{
                     declarations: [...EXPORTS],
                     exports: [...EXPORTS],
-                    imports: [CommonModule]
+                    imports: [CommonModule],
+                    entryComponents: [HintComponent]
                 }]
         }] });
 
@@ -921,5 +956,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DragAndDropModule, DragEndEvent, DragEnterEvent, DragEvent, DragHandleDirective, DragLeaveEvent, DragOverEvent, DragStartEvent, DragTargetDirective, DropEvent, DropTargetDirective, HintComponent, PressEvent, ReleaseEvent, UtilsModule };
+export { DragAndDropModule, DragHandleDirective, DragTargetDirective, DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragStartEvent, DragTargetPressEvent, DropTargetDirective, DropTargetDragEnterEvent, DropTargetDragLeaveEvent, DropTargetDragOverEvent, DropTargetDropEvent, HintComponent, UtilsModule };
 

package/main.d.ts

@@ -8,6 +8,7 @@ export { DragTargetDirective } from './drag-and-drop/dragtarget.directive';
 export { DragHandleDirective } from './drag-and-drop/draghandle.directive';
 export { DropTargetDirective } from './drag-and-drop/droptarget.directive';
 export { HintComponent } from './drag-and-drop/hint.component';
-export { DragAxis, AutoScrollOptions, AllowedTargetFn, ScrollDirection } from './drag-and-drop/models/index';
+export { DragAxis, AutoScrollOptions, AllowedTargetFn, ScrollDirection, Coordinates } from './drag-and-drop/models/index';
 export * from './drag-and-drop/events/drag-target';
 export * from './drag-and-drop/events/drop-target';
+export { NormalizedDragEvent } from '@progress/kendo-draggable-common';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-utils",
-  "version": "0.1.0",
+  "version": "0.1.1-dev.202209131028",
   "description": "Kendo UI Angular Utilities package",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@progress/kendo-schematics": "^3.0.0",
-    "@progress/kendo-draggable-common": "dev",
+    "@progress/kendo-draggable-common": "0.2.3",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {

package/drag-and-drop/events/drag-target/release-event.d.ts

@@ -1,22 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { NormalizedDragEvent } from '@progress/kendo-draggable-common';
-/**
- * Arguments for the release event of the DragTarget.
- */
-export declare class ReleaseEvent {
-    /**
-     * The normalized event.
-     */
-    event: NormalizedDragEvent;
-    /**
-     * The DOM element that is released.
-     */
-    element: HTMLElement;
-    /**
-     * @hidden
-     */
-    constructor(args?: any);
-}