@progress/kendo-angular-utils 12.0.0-develop.8 → 12.0.0-develop.9

package/esm2020/drag-and-drop/dragtarget-container.directive.mjs

@@ -0,0 +1,621 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectorRef, Directive, ElementRef, EventEmitter, Input, isDevMode, NgZone, Output, Renderer2, ViewContainerRef } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import { fromEvent, merge } from 'rxjs';
+import { packageMetadata } from '../package-metadata';
+import { filter } from 'rxjs/operators';
+import { closestBySelector, allPointerDownEvents, allPointerMoveEvents, allPointerUpEvents, getAction, isPresent, setElementStyles, dragTargetTransition } from './util';
+import { getScrollableParent } from '@progress/kendo-draggable-common';
+import { DragStateService } from './drag-state.service';
+import { contains, isDocumentAvailable, parseCSSClassNames } from '@progress/kendo-angular-common';
+import { HintComponent } from './hint.component';
+import { DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragReadyEvent, DragTargetDragStartEvent, DragTargetPressEvent, DragTargetReleaseEvent } from './events/drag-target';
+import * as i0 from "@angular/core";
+import * as i1 from "./drag-state.service";
+let isDragStartPrevented = false;
+let isDragPrevented = false;
+/**
+ * Represents the [Kendo UI DragTargetContainer directive for Angular]({% slug api_utils_dragtargetcontainerdirective %}).
+ * Used to configure multiple elements as draggable.
+ *
+ * @example
+ * ```ts-no-run
+ * <ul kendoDragTargetContainer dragTargetFilter=".my-draggable">
+ *    <li class="my-draggable">foo</li>
+ * </ul>
+ * ```
+ */
+export class DragTargetContainerDirective {
+    constructor(wrapper, ngZone, renderer, service, viewContainer, cdr) {
+        this.wrapper = wrapper;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.service = service;
+        this.viewContainer = viewContainer;
+        this.cdr = cdr;
+        /**
+         * Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. ([see example]({% slug drag_target_container_hint %})).
+         *
+         * @default false
+         */
+        this.hint = false;
+        /**
+         * Defines the delay in milliseconds after which the drag will begin ([see example]({% slug drag_target_container_delay %})).
+         *
+         * @default 0
+         */
+        this.dragDelay = 0;
+        /**
+         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug drag_target_container_minimum_distance %})).
+         *
+         * @default 0
+         */
+        this.threshold = 0;
+        /**
+         * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
+         *
+         * @default 'auto'
+         */
+        this.mode = 'auto';
+        /**
+         * Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
+         */
+        this.dragReady = new EventEmitter();
+        /**
+         * Fires when the user presses a DragTarget element.
+         */
+        this.press = new EventEmitter();
+        /**
+         * Fires when the dragging of a DragTarget element begins.
+        */
+        this.dragStart = new EventEmitter();
+        /**
+         * Fires while the user drags a DragTarget element.
+         */
+        this.drag = new EventEmitter();
+        /**
+         * Fires when the user releases a DragTarget element after being pressed.
+         */
+        this.release = new EventEmitter();
+        /**
+         * Fires when the dragging of a DragTarget ends and the element is released.
+         */
+        this.dragEnd = new EventEmitter();
+        this.currentDragTarget = null;
+        this.dragTimeout = null;
+        this.pressed = false;
+        this.dragStarted = false;
+        this.hintComponent = null;
+        this.defaultHint = null;
+        this.currentDragTargetElement = null;
+        this.scrollableParent = null;
+        this.previousDragTargets = [];
+        this.initialPosition = { x: 0, y: 0 };
+        this.position = { x: 0, y: 0 };
+        this.positionsMap = new Map();
+        this._dragTargetFilter = null;
+        this._dragDisabled = false;
+        this._dragData = () => null;
+        this._dragTargetId = () => null;
+        validatePackage(packageMetadata);
+    }
+    /**
+     * Specifies a selector for elements within a container which will be configured as draggable
+     * ([see example]({% slug drag_target_container %})). The possible values include any
+     * DOM `selector`.
+     */
+    set dragTargetFilter(value) {
+        this._dragTargetFilter = value;
+        if (!this.dragDisabled) {
+            this.initializeDragTargets();
+        }
+    }
+    get dragTargetFilter() {
+        return this._dragTargetFilter;
+    }
+    /**
+     * Defines a unique identifier for each drag target.
+     * It exposes the current DragTarget HTML element and its index in the collection of drag targets as arguments.
+     */
+    set dragTargetId(fn) {
+        if (isDevMode && typeof fn !== 'function') {
+            throw new Error(`dragTargetId must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._dragTargetId = fn;
+    }
+    get dragTargetId() {
+        return this._dragTargetId;
+    }
+    /**
+     * Defines a callback function which returns custom data passed to the DropTarget events.
+     * It exposes the current DragTarget HTML element, its `dragTargetId` and its index in the collection of drag targets as arguments.
+     */
+    set dragData(fn) {
+        if (isDevMode && typeof fn !== 'function') {
+            throw new Error(`dragData must be a function, but received ${JSON.stringify(fn)}.`);
+        }
+        this._dragData = fn;
+    }
+    get dragData() {
+        return this._dragData;
+    }
+    /**
+     * If set to true, the dragging of DragTargets within the container will be disabled.
+     *
+     * @default false
+     */
+    set dragDisabled(value) {
+        this._dragDisabled = value;
+        if (value) {
+            this.clearPreviousTargets();
+            this.unsubscribe();
+            if (isPresent(this.hintElem)) {
+                this.destroyHint();
+            }
+        }
+        else {
+            if (isPresent(this.wrapper) || isPresent(this.currentDragTarget)) {
+                this.subscribe();
+            }
+            this.initializeDragTargets();
+        }
+    }
+    get dragDisabled() {
+        return this._dragDisabled;
+    }
+    /**
+     * Used for notifying the DragTargetContainer that its content has changed.
+     */
+    notify() {
+        this.cdr.detectChanges();
+        this.initializeDragTargets();
+    }
+    get allDragTargets() {
+        return this.queryHost(this.dragTargetFilter);
+    }
+    get dragHandles() {
+        return this.queryHost(this.dragHandle);
+    }
+    get hintTemplate() {
+        return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
+    }
+    ngAfterViewInit() {
+        const isTargetPresent = isPresent(this.wrapper) || isPresent(this.currentDragTarget);
+        if (!this.dragDisabled && isTargetPresent) {
+            this.subscribe();
+        }
+        !this.dragDisabled && this.initializeDragTargets();
+    }
+    onPointerDown(event) {
+        if (isPresent(this.dragHandles) && this.dragHandles.length && !this.isDragHandle(event.target)) {
+            return;
+        }
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+        this.subscribe();
+    }
+    onPointerMove(event) {
+        event.preventDefault();
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+    }
+    onPointerUp(event) {
+        event.preventDefault();
+        const action = getAction(event, this.currentDragTarget);
+        this.service.handleDragAndDrop(action);
+        this.ngZone.runOutsideAngular(() => {
+            this.subscribe();
+        });
+    }
+    handlePress(event) {
+        if (this.dragDelay > 0) {
+            this.dragTimeout = window.setTimeout(() => {
+                this.pressed = true;
+                this.emitZoneAwareEvent('dragReady', event);
+            }, this.dragDelay);
+        }
+        else {
+            this.pressed = true;
+        }
+        const eventTarget = event.originalEvent.target;
+        this.currentDragTargetElement = closestBySelector(eventTarget, this.dragTargetFilter);
+        this.currentDragTarget.element = this.currentDragTargetElement;
+        this.service.dragIndex = this.getDragIndex();
+        this.scrollableParent = this.hintTemplate ? document.body : this.currentDragTargetElement ? getScrollableParent(this.currentDragTargetElement) : null;
+        this.emitZoneAwareEvent('press', event);
+    }
+    handleDragStart(event) {
+        if (!this.pressed) {
+            if (this.dragTimeout) {
+                window.clearTimeout(this.dragTimeout);
+                this.dragTimeout = null;
+            }
+            return;
+        }
+        isDragStartPrevented = this.emitZoneAwareEvent('dragStart', event).isDefaultPrevented();
+        if (isDragStartPrevented) {
+            return;
+        }
+        this.position = this.positionsMap.has(this.currentDragTargetElement) ? this.positionsMap.get(this.currentDragTargetElement) : { x: 0, y: 0 };
+        if (this.hint) {
+            this.createHint();
+            if (this.mode === 'auto') {
+                this.renderer.setStyle(this.currentDragTargetElement, 'opacity', '0.7');
+            }
+        }
+        else {
+            this.initialPosition = { x: event.clientX - this.position.x, y: event.clientY - this.position.y };
+        }
+        this.emitZoneAwareEvent('dragStart', event);
+        this.dragStarted = this.threshold === 0;
+        this.service.dragTarget = this.currentDragTarget;
+        this.service.dragTargetId = this.dragTargetId(this.currentDragTargetElement, this.service.dragIndex);
+        this.service.dragData = this.dragData(this.currentDragTargetElement, this.service.dragTargetId, this.service.dragIndex);
+    }
+    handleDrag(event) {
+        if (!this.pressed || isDragStartPrevented) {
+            return;
+        }
+        isDragPrevented = this.emitZoneAwareEvent('drag', event).isDefaultPrevented();
+        if (isDragPrevented) {
+            return;
+        }
+        if (this.mode === 'auto') {
+            this.performDrag(event);
+        }
+        else {
+            this.dragStarted = true;
+        }
+        this.dragStarted && this.emitZoneAwareEvent('drag', event);
+    }
+    handleRelease(event) {
+        if (this.dragStarted) {
+            this.positionsMap.set(this.currentDragTargetElement, this.position);
+        }
+        if (this.dragTimeout) {
+            clearTimeout(this.dragTimeout);
+            this.dragTimeout = null;
+            this.pressed = false;
+        }
+        this.emitZoneAwareEvent('release', event);
+    }
+    handleDragEnd(event) {
+        if (!this.dragStarted) {
+            return;
+        }
+        if (this.mode === 'auto') {
+            const isDroppedOverParentTarget = isPresent(this.service.dropTarget) && !contains(this.service.dropTarget?.element, this.service.dragTarget?.element, true);
+            const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
+            if (isDroppedOverParentTarget || this.service.dropTargets.length > 0 && isPresent(elem)) {
+                this.renderer.removeStyle(elem, 'transform');
+                setElementStyles(this.renderer, elem, {
+                    transition: dragTargetTransition
+                });
+                this.positionsMap.delete(this.currentDragTargetElement);
+            }
+        }
+        if (this.hint && isPresent(this.hintElem)) {
+            this.destroyHint();
+            if (this.mode === 'auto') {
+                this.renderer.removeStyle(this.currentDragTargetElement, 'opacity');
+            }
+        }
+        this.service.dragTarget = null;
+        this.service.dragIndex = null;
+        this.currentDragTarget.element = null;
+        this.emitZoneAwareEvent('dragEnd', event);
+        if (isDragStartPrevented || isDragPrevented) {
+            return;
+        }
+        this.dragStarted = false;
+    }
+    get nativeElement() {
+        return this.wrapper.nativeElement;
+    }
+    get hintElem() {
+        return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
+    }
+    unsubscribe() {
+        if (this.pointerDownSubscription) {
+            this.pointerDownSubscription.unsubscribe();
+        }
+        if (this.pointerMoveSubscription) {
+            this.pointerMoveSubscription.unsubscribe();
+        }
+        if (this.pointerUpSubscription) {
+            this.pointerUpSubscription.unsubscribe();
+        }
+        if (this.scrollSubscription) {
+            this.scrollSubscription.unsubscribe();
+        }
+    }
+    subscribe() {
+        this.ngZone.runOutsideAngular(() => {
+            this.unsubscribe();
+            if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
+                return;
+            }
+            const element = this.nativeElement;
+            if (this.service.pressed) {
+                const pointerMoveStreams = allPointerMoveEvents.map((ev) => fromEvent(document, ev));
+                const pointerUpStreams = allPointerUpEvents.map((ev) => fromEvent(document, ev));
+                this.pointerMoveSubscription = merge(...pointerMoveStreams)
+                    .pipe(filter(() => this.dragTargetFilter !== ''))
+                    .subscribe(e => this.onPointerMove(e));
+                this.pointerUpSubscription = merge(...pointerUpStreams)
+                    .subscribe(e => this.onPointerUp(e));
+                if (isPresent(this.scrollableParent)) {
+                    this.scrollSubscription = fromEvent(this.scrollableParent, 'scroll')
+                        .subscribe(e => this.onPointerMove(e));
+                }
+            }
+            else {
+                const pointerDownStreams = allPointerDownEvents.map((ev) => fromEvent(element, ev));
+                this.pointerDownSubscription = merge(...pointerDownStreams)
+                    .pipe(filter(() => this.dragTargetFilter !== ''))
+                    .subscribe((e) => {
+                    const filterElement = closestBySelector(e.target, this.dragTargetFilter);
+                    if (filterElement) {
+                        this.onPointerDown(e);
+                    }
+                });
+            }
+        });
+    }
+    emitZoneAwareEvent(event, normalizedEvent) {
+        const eventProps = {
+            dragTarget: this.currentDragTargetElement,
+            dragEvent: normalizedEvent,
+            dragTargetIndex: this.service.dragIndex,
+            dragTargetId: this.dragTargetId(this.currentDragTargetElement, this.service.dragIndex)
+        };
+        if (this.hint && isPresent(this.hintElem)) {
+            eventProps.hintElement = this.hintElem;
+        }
+        let eventArgs;
+        switch (event) {
+            case 'dragReady':
+                eventArgs = new DragTargetDragReadyEvent(eventProps);
+                break;
+            case 'press':
+                eventArgs = new DragTargetPressEvent(eventProps);
+                break;
+            case 'dragStart':
+                eventArgs = new DragTargetDragStartEvent(eventProps);
+                break;
+            case 'drag':
+                eventArgs = new DragTargetDragEvent(eventProps);
+                break;
+            case 'release':
+                eventArgs = new DragTargetReleaseEvent(eventProps);
+                break;
+            case 'dragEnd':
+                eventArgs = new DragTargetDragEndEvent(eventProps);
+                break;
+            default:
+                break;
+        }
+        this.ngZone.run(() => {
+            this[event].emit(eventArgs);
+        });
+        return eventArgs;
+    }
+    createHint() {
+        if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
+            return;
+        }
+        if (isPresent(this.hint) && typeof this.hint === 'object') {
+            if (isPresent(this.hint.hintTemplate)) {
+                this.createCustomHint();
+            }
+            else {
+                this.createDefaultHint();
+            }
+        }
+        else {
+            this.createDefaultHint();
+        }
+        this.currentDragTarget.hint = this.hintElem;
+        if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
+            this.hint.appendTo.element.nativeElement.appendChild(this.hintElem);
+        }
+        else {
+            document.body.appendChild(this.hintElem);
+        }
+    }
+    createDefaultHint() {
+        this.defaultHint = this.currentDragTargetElement.cloneNode(true);
+        if (typeof this.hint === 'object') {
+            if (isPresent(this.hint.hintClass)) {
+                const hintClasses = parseCSSClassNames(this.hint.hintClass);
+                hintClasses.forEach(className => this.renderer.addClass(this.defaultHint, className));
+            }
+        }
+    }
+    createCustomHint() {
+        if (isPresent(this.hint.appendTo)) {
+            this.hintComponent = this.hint.appendTo.createComponent(HintComponent);
+        }
+        else {
+            this.hintComponent = this.viewContainer.createComponent(HintComponent);
+        }
+        this.hintComponent.instance.template = this.hintTemplate;
+        this.hintComponent.instance.directive = this;
+        this.hintComponent.instance.targetIndex = this.service.dragIndex;
+        this.hintComponent.instance.contextData = this.dragData(this.currentDragTargetElement, this.service.dragIndex);
+        this.hintComponent.changeDetectorRef.detectChanges();
+    }
+    destroyHint() {
+        if (isPresent(this.hintTemplate)) {
+            this.hintComponent.destroy();
+            this.hintComponent.changeDetectorRef.detectChanges();
+            this.hintComponent = null;
+        }
+        else {
+            document.body.removeChild(this.defaultHint);
+            this.defaultHint = null;
+        }
+        this.currentDragTarget.hint = null;
+    }
+    getDragIndex() {
+        return this.allDragTargets.indexOf(this.currentDragTargetElement);
+    }
+    initializeDragTargets() {
+        if (!isPresent(this.allDragTargets)) {
+            if (this.previousDragTargets.length > 0) {
+                this.clearPreviousTargets();
+            }
+            return;
+        }
+        this.allDragTargets.forEach(dragTargetEl => {
+            const isDragTargetInitialized = this.service.dragTargets.find(dt => dt.element === dragTargetEl);
+            if (!isDragTargetInitialized) {
+                this.service.dragTargets.push({
+                    element: dragTargetEl,
+                    hint: null,
+                    onPress: this.handlePress.bind(this),
+                    onRelease: this.handleRelease.bind(this),
+                    onDragStart: this.handleDragStart.bind(this),
+                    onDrag: this.handleDrag.bind(this),
+                    onDragEnd: this.handleDragEnd.bind(this)
+                });
+            }
+        });
+        if (this.previousDragTargets.length > 0) {
+            const dragTargetsToRemove = this.previousDragTargets.filter(dt => !this.allDragTargets.includes(dt));
+            dragTargetsToRemove.forEach(dragTarget => {
+                const idx = this.service.dragTargets.findIndex(serviceDragTarget => serviceDragTarget.element === dragTarget);
+                if (idx > -1) {
+                    this.service.dragTargets.splice(idx, 1);
+                }
+            });
+        }
+        this.previousDragTargets = this.allDragTargets;
+        this.currentDragTarget = {
+            element: null,
+            hint: null,
+            onPress: this.handlePress.bind(this),
+            onRelease: this.handleRelease.bind(this),
+            onDragStart: this.handleDragStart.bind(this),
+            onDrag: this.handleDrag.bind(this),
+            onDragEnd: this.handleDragEnd.bind(this)
+        };
+        this.setCursorStyle();
+    }
+    isDragHandle(el) {
+        return this.dragHandles.some(dh => contains(dh, el, true));
+    }
+    setCursorStyle() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
+            this.dragHandles.forEach(handle => {
+                this.renderer.addClass(handle, 'k-cursor-pointer');
+            });
+        }
+        else {
+            this.allDragTargets.forEach(target => {
+                this.renderer.addClass(target, 'k-cursor-pointer');
+            });
+        }
+    }
+    queryHost(selector) {
+        if (isPresent(selector) && selector !== "") {
+            return Array.from(this.nativeElement.querySelectorAll(selector));
+        }
+    }
+    clearPreviousTargets() {
+        this.previousDragTargets.forEach(dragTarget => {
+            const idx = this.service.dragTargets.findIndex(serviceDragTarget => serviceDragTarget.element === dragTarget);
+            if (idx > -1) {
+                this.service.dragTargets.splice(idx, 1);
+            }
+        });
+        this.previousDragTargets = [];
+    }
+    performDrag(event) {
+        const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
+        this.position = this.calculatePosition(elem, event);
+        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 styles = this.getStylesPerElement(elem);
+        setElementStyles(this.renderer, elem, styles);
+    }
+    calculatePosition(element, event) {
+        let position = null;
+        if (element === this.hintElem) {
+            position = { x: event.clientX, y: event.clientY };
+        }
+        else {
+            position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
+        }
+        return position;
+    }
+    getStylesPerElement(element) {
+        if (element === this.hintElem) {
+            const hintCoordinates = { x: this.position.x - this.initialPosition.x, y: this.position.y - this.initialPosition.y };
+            return {
+                top: `${hintCoordinates.y}px`,
+                left: `${hintCoordinates.x}px`,
+                transition: 'none',
+                position: 'absolute',
+                zIndex: 1999
+            };
+        }
+        else {
+            const transform = `translate(${this.position.x}px, ${this.position.y}px)`;
+            return {
+                transform: transform,
+                transition: 'none'
+            };
+        }
+    }
+}
+DragTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.DragStateService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: { hint: "hint", dragTargetFilter: "dragTargetFilter", dragHandle: "dragHandle", dragDelay: "dragDelay", threshold: "threshold", dragTargetId: "dragTargetId", dragData: "dragData", dragDisabled: "dragDisabled", mode: "mode" }, outputs: { dragReady: "dragReady", press: "press", dragStart: "dragStart", drag: "drag", release: "release", dragEnd: "dragEnd" }, exportAs: ["kendoDragTargetContainer"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDragTargetContainer]',
+                    exportAs: 'kendoDragTargetContainer'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.DragStateService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hint: [{
+                type: Input
+            }], dragTargetFilter: [{
+                type: Input
+            }], dragHandle: [{
+                type: Input
+            }], dragDelay: [{
+                type: Input
+            }], threshold: [{
+                type: Input
+            }], dragTargetId: [{
+                type: Input
+            }], dragData: [{
+                type: Input
+            }], dragDisabled: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], dragReady: [{
+                type: Output
+            }], press: [{
+                type: Output
+            }], dragStart: [{
+                type: Output
+            }], drag: [{
+                type: Output
+            }], release: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }] } });