@progress/kendo-angular-utils 0.1.1-dev.202208160834 → 0.1.1

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

@@ -7,7 +7,7 @@ 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";
@@ -46,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';
@@ -77,6 +78,7 @@ export class DragTargetDirective {
         this.dragStarted = false;
         this.pressed = false;
         this.dragTimeout = null;
+        this.position = { x: 0, y: 0 };
         validatePackage(packageMetadata);
     }
     /**
@@ -151,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({ normalizedEvent: event, hostElement: this.nativeElement });
+            const eventArgs = new DragTargetPressEvent({ normalizedEvent: event, hostElement: this.nativeElement });
             this.press.emit(eventArgs);
         });
     }
@@ -172,12 +177,12 @@ export class DragTargetDirective {
             }
             return;
         }
-        if (isDragStartPrevented) {
-            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)) {
@@ -187,13 +192,10 @@ 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.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;
@@ -204,32 +206,28 @@ export class DragTargetDirective {
         if (isDragPrevented) {
             return;
         }
-        let coordinates = { x: 0, y: 0 };
         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;
         }
         if (!this.dragStarted && this.threshold > 0) {
             this.dragStarted = true;
         }
-        const transform = `translate(${coordinates.x}px, ${coordinates.y}px)`;
+        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);
@@ -239,35 +237,40 @@ export class DragTargetDirective {
         this.service.dragTarget = null;
         this.service.dragTargetDirective = null;
         this.ngZone.run(() => {
-            const eventArgs = new ReleaseEvent({ normalizedEvent: event, hostElement: 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({ normalizedEvent: event, hostElement: 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,
@@ -279,9 +282,6 @@ export class DragTargetDirective {
             onDragEnd: this.handleDragEnd.bind(this)
         };
     }
-    /**
-     * @hidden
-     */
     attachDomHandlers() {
         if (this.domSubscriptions.length > 0) {
             this.domSubscriptions.forEach(subscription => subscription());
@@ -321,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);
@@ -347,26 +338,20 @@ 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;
     }
-    /**
-     * @hidden
-     */
     emitEvent(event, args) {
         let eventArgs;
         switch (event) {
             case 'dragStart':
-                eventArgs = new DragStartEvent(args);
+                eventArgs = new DragTargetDragStartEvent(args);
                 break;
             case 'drag':
-                eventArgs = new DragEvent(args);
+                eventArgs = new DragTargetDragEvent(args);
                 break;
             default:
                 break;
@@ -376,7 +361,7 @@ export class DragTargetDirective {
     }
 }
 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: [{
@@ -401,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

@@ -5,7 +5,7 @@
 /**
  * Arguments for the dragEnd event of the DragTarget.
  */
-export class DragEndEvent {
+export class DragTargetDragEndEvent {
     /**
      * @hidden
      */

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

@@ -5,7 +5,7 @@
 /**
  * Arguments for the drop event of the DropTarget.
  */
-export class DropEvent {
+export class DropTargetDropEvent {
     /**
      * @hidden
      */

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

@@ -5,7 +5,7 @@
 /**
  * Arguments for the dragEnter event of the DropTarget.
  */
-export class DragEnterEvent {
+export class DropTargetDragEnterEvent {
     /**
      * @hidden
      */

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

@@ -5,7 +5,7 @@
 /**
  * Arguments for the dragLeave event of the DropTarget.
  */
-export class DragLeaveEvent {
+export class DropTargetDragLeaveEvent {
     /**
      * @hidden
      */

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

@@ -5,7 +5,7 @@
 /**
  * Arguments for the dragOver event of the DropTarget.
  */
-export class DragOverEvent {
+export class DropTargetDragOverEvent {
     /**
      * @hidden
      */

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: 1660638843,
+    publishDate: 1663073506,
     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'
 };