@progress/kendo-angular-utils 0.1.0

package/fesm2015/kendo-angular-utils.js

@@ -0,0 +1,925 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from '@angular/core';
+import { Directive, HostBinding, Component, Input, Injectable, EventEmitter, Output, ContentChildren, NgModule } from '@angular/core';
+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';
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-utils',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1658922268,
+    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'
+};
+
+/**
+ * Represents the Kendo UI DragHandle directive for Angular.
+ */
+class DragHandleDirective {
+    constructor(element) {
+        this.element = element;
+        this.hostClass = true;
+    }
+}
+DragHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DragHandleDirective, selector: "[kendoDragHandle]", host: { properties: { "class.k-cursor-pointer": "this.hostClass" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragHandleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDragHandle]',
+                    exportAs: 'kendoDragHandle'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-cursor-pointer']
+            }] } });
+
+/**
+ * Arguments for the press event of the DragTarget.
+ */
+class PressEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * Arguments for the dragStart event of the DragTarget.
+ */
+class DragStartEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * 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 {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * Arguments for the drag event of the DragTarget.
+ */
+class DragEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * @hidden
+ */
+const dragTargetTransition = 'transform .3s ease-in-out';
+/**
+ * @hidden
+ */
+const getAction = (event, draggable) => {
+    return {
+        event: event,
+        payload: draggable
+    };
+};
+/**
+ * @hidden
+ */
+const setElementStyles = (renderer, elem, styles) => {
+    const props = Object.keys(styles);
+    props.forEach(p => {
+        renderer.setStyle(elem, p, styles[p]);
+    });
+};
+/**
+ * @hidden
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+
+const DEFAULT_ZINDEX = 10;
+/**
+ * @hidden
+ */
+class HintComponent {
+    constructor(element) {
+        this.element = element;
+        this.hostClasses = true;
+        this.zIndex = DEFAULT_ZINDEX;
+        this.touchAction = 'none';
+    }
+}
+HintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HintComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+HintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HintComponent, selector: "ng-component", inputs: { template: "template", directive: "directive" }, host: { properties: { "class.k-pos-absolute": "this.hostClasses", "class.k-cursor-grab": "this.hostClasses", "style.zIndex": "this.zIndex", "style.touch-action": "this.touchAction" } }, ngImport: i0, template: `
+        <ng-container *ngTemplateOutlet="template; context: { $implicit: directive }">
+        </ng-container>
+    `, isInline: true, directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <ng-container *ngTemplateOutlet="template; context: { $implicit: directive }">
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { template: [{
+                type: Input
+            }], directive: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-pos-absolute']
+            }, {
+                type: HostBinding,
+                args: ['class.k-cursor-grab']
+            }], zIndex: [{
+                type: HostBinding,
+                args: ['style.zIndex']
+            }], touchAction: [{
+                type: HostBinding,
+                args: ['style.touch-action']
+            }] } });
+
+/**
+ * @hidden
+ */
+class DragStateService {
+    constructor() {
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.dragTargets = [];
+        this.dropTargets = [];
+        this.pressed = false;
+        this.ignoreMouse = false;
+        this.autoScroll = true;
+        this.isScrolling = false;
+        this.scrollableParent = null;
+        this.autoScrollDirection = { horizontal: true, vertical: true };
+        this.initialClientOffset = { x: 0, y: 0 };
+        this.clientOffset = { x: 0, y: 0 };
+        this.initialScrollOffset = { x: 0, y: 0 };
+        this.scrollOffset = { x: 0, y: 0 };
+        this.offset = { x: 0, y: 0 };
+        this.pageOffset = { x: 0, y: 0 };
+        this.velocity = { x: 0, y: 0 };
+        this.callbacks = {};
+        this.scrollInterval = null;
+        this.setCallbacks();
+    }
+    handleDragAndDrop(action) {
+        this.updateState();
+        dispatchDragAndDrop(this.state, action, this.callbacks);
+    }
+    setPressed(pressed) {
+        this.pressed = pressed;
+    }
+    setScrolling(isScrolling) {
+        this.isScrolling = isScrolling;
+        if (isScrolling) {
+            const scrollableParent = getScrollableParent(document.elementFromPoint(this.clientOffset.x, this.clientOffset.y));
+            window.clearInterval(this.scrollInterval);
+            this.scrollInterval = window.setInterval(() => {
+                autoScroll(scrollableParent, { x: this.velocity.x, y: this.velocity.y });
+            }, 50);
+        }
+        else {
+            if (this.scrollInterval) {
+                window.clearInterval(this.scrollInterval);
+                this.scrollInterval = null;
+            }
+        }
+    }
+    setVelocity(velocity) {
+        this.velocity = velocity;
+    }
+    setOffset(offset) {
+        this.offset = offset;
+    }
+    setClientOffset(clientOffset) {
+        this.clientOffset = clientOffset;
+    }
+    setPageOffset(pageOffset) {
+        this.pageOffset = pageOffset;
+    }
+    setInitialClientOffset(initialClientOffset) {
+        this.initialClientOffset = initialClientOffset;
+    }
+    setScrollOffset(scrollOffset) {
+        this.scrollOffset = scrollOffset;
+    }
+    setInitialScrollOffset(initialScrollOffset) {
+        this.initialScrollOffset = initialScrollOffset;
+    }
+    updateState() {
+        this.state = {
+            drag: this.dragTarget,
+            drop: this.dropTarget,
+            drags: this.dragTargets,
+            drops: this.dropTargets,
+            pressed: this.pressed,
+            ignoreMouse: this.ignoreMouse,
+            autoScroll: this.autoScroll,
+            isScrolling: this.isScrolling,
+            scrollableParent: this.scrollableParent,
+            autoScrollDirection: this.autoScrollDirection,
+            initialClientOffset: this.initialClientOffset,
+            clientOffset: this.clientOffset,
+            initialScrollOffset: this.initialScrollOffset,
+            scrollOffset: this.scrollOffset,
+            offset: this.offset,
+            pageOffset: this.pageOffset,
+            velocity: this.velocity
+        };
+    }
+    setCallbacks() {
+        this.callbacks = {
+            onVelocityChange: this.setVelocity.bind(this),
+            onOffsetChange: this.setOffset.bind(this),
+            onClientOffsetChange: this.setClientOffset.bind(this),
+            onPageOffsetChange: this.setPageOffset.bind(this),
+            onInitialClientOffsetChange: this.setInitialClientOffset.bind(this),
+            onScrollOffsetChange: this.setScrollOffset.bind(this),
+            onInitialScrollOffsetChange: this.setInitialScrollOffset.bind(this),
+            onIsPressedChange: this.setPressed.bind(this),
+            onIsScrollingChange: this.setScrolling.bind(this)
+        };
+    }
+    ngOnDestroy() {
+        if (this.scrollInterval) {
+            window.clearInterval(this.scrollInterval);
+            this.scrollInterval = null;
+        }
+    }
+}
+DragStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DragStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragStateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * Represents the Kendo UI DragTarget directive for Angular.
+ */
+class DragTargetDirective {
+    constructor(element, renderer, ngZone, service, viewContainer, resolver) {
+        this.element = element;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.service = service;
+        this.viewContainer = viewContainer;
+        this.resolver = resolver;
+        /**
+         * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})).
+         *
+         * @default 0
+         */
+        this.threshold = 0;
+        /**
+         * Defines the automatic container scrolling behavior when close to the edge ([see example]({% slug auto_scroll %})).
+         *
+         * @default true
+         */
+        this.autoScroll = true;
+        /**
+         * Defines the delay in milliseconds after which the drag will begin ([see example]({% slug drag_delay %})).
+         *
+         * @default 0
+         */
+        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.dragStart = new EventEmitter();
+        /**
+         * Fires while the user drags the DragTarget element.
+         * This event is preventable. Preventing it allows full logic customization.
+         */
+        this.drag = new EventEmitter();
+        /**
+         * Fires when the user releases the DragTarget element.
+         * This event is preventable. Preventing it allows full logic customization.
+         */
+        this.release = new EventEmitter();
+        /**
+         * Fires when the dragging of the DragTarget element ends.
+         * This event is preventable. Preventing it allows full logic customization.
+         */
+        this.dragEnd = new EventEmitter();
+        this.touchAction = 'none';
+        this.dragTarget = null;
+        this.domSubscriptions = [];
+        this.hint = null;
+        this.initialPosition = { x: 0, y: 0 };
+        this.dragStarted = false;
+        this.pressed = false;
+        this.dragTimeout = null;
+        validatePackage(packageMetadata);
+    }
+    /**
+     * @hidden
+     */
+    get nativeElement() {
+        return this.element.nativeElement;
+    }
+    /**
+     * @hidden
+     */
+    get hintElem() {
+        return this.hint.instance.element.nativeElement;
+    }
+    /**
+     * @hidden
+     */
+    onPointerDown(event) {
+        if (this.dragHandles.length && !this.isDragHandle(event.target)) {
+            return;
+        }
+        event.preventDefault();
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+        this.service.autoScroll = typeof this.autoScroll === 'object' ? this.autoScroll.enabled !== false : this.autoScroll;
+        this.service.scrollableParent = this.getAutoScrollContainer();
+        this.service.autoScrollDirection = typeof this.autoScroll === 'object' ? this.autoScroll.direction : { horizontal: true, vertical: true };
+        this.ngZone.runOutsideAngular(() => {
+            this.attachDomHandlers();
+        });
+    }
+    /**
+     * @hidden
+     */
+    onPointerMove(event) {
+        event.preventDefault();
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+    }
+    /**
+     * @hidden
+     */
+    onPointerUp(event) {
+        event.preventDefault();
+        const action = getAction(event, this.dragTarget);
+        this.service.handleDragAndDrop(action);
+        this.ngZone.runOutsideAngular(() => {
+            this.attachDomHandlers();
+        });
+    }
+    ngOnInit() {
+        this.initializeDraggable();
+    }
+    ngAfterContentInit() {
+        if (isPresent(this.element) || isPresent(this.dragTarget)) {
+            this.ngZone.runOutsideAngular(() => {
+                this.attachDomHandlers();
+                if (!this.dragHandles.length) {
+                    this.renderer.addClass(this.nativeElement, 'k-cursor-pointer');
+                }
+            });
+        }
+        this.service.dragTargets.push(this.dragTarget);
+    }
+    ngOnDestroy() {
+        this.domSubscriptions.forEach(subscription => subscription());
+    }
+    /**
+     * @hidden
+     */
+    handlePress(event) {
+        if (this.dragDelay > 0) {
+            this.dragTimeout = setTimeout(() => {
+                this.pressed = true;
+            }, this.dragDelay);
+        }
+        else {
+            this.pressed = true;
+        }
+        this.ngZone.run(() => {
+            const eventArgs = new PressEvent({ event, element: this.nativeElement });
+            this.press.emit(eventArgs);
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleDragStart(event) {
+        if (!this.pressed) {
+            if (this.dragTimeout) {
+                clearTimeout(this.dragTimeout);
+                this.dragTimeout = null;
+            }
+            return;
+        }
+        if (isPresent(this.hintTemplate)) {
+            this.createHint();
+            if (isPresent(this.hint)) {
+                this.renderer.setStyle(this.nativeElement, 'opacity', '0.7');
+            }
+        }
+        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);
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleDrag(event) {
+        if (!this.pressed) {
+            return;
+        }
+        const elem = this.hint ? this.hintElem : this.nativeElement;
+        let coordinates = { x: 0, y: 0 };
+        if (this.restrictByAxis === 'horizontal') {
+            coordinates = { 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 };
+        }
+        else {
+            coordinates = { 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;
+        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);
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleRelease(event) {
+        if (this.dragTimeout) {
+            clearTimeout(this.dragTimeout);
+            this.dragTimeout = null;
+            this.pressed = false;
+        }
+        this.service.dragTarget = null;
+        this.service.dragTargetDirective = null;
+        this.ngZone.run(() => {
+            const eventArgs = new ReleaseEvent({ event, element: this.nativeElement });
+            this.release.emit(eventArgs);
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleDragEnd(event) {
+        if (!this.dragStarted) {
+            return;
+        }
+        this.dragStarted = false;
+        const elem = this.hint ? this.hintElem : this.nativeElement;
+        if (isPresent(this.hint)) {
+            this.renderer.removeStyle(this.nativeElement, 'opacity');
+            this.destroyHint();
+        }
+        this.renderer.removeStyle(elem, 'transform');
+        setElementStyles(this.renderer, elem, {
+            transition: dragTargetTransition
+        });
+        this.ngZone.run(() => {
+            const eventArgs = new DragEndEvent({ event, element: this.nativeElement });
+            this.dragEnd.emit(eventArgs);
+        });
+    }
+    /**
+     * @hidden
+     */
+    initializeDraggable() {
+        this.dragTarget = {
+            element: this.nativeElement,
+            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)
+        };
+    }
+    /**
+     * @hidden
+     */
+    attachDomHandlers() {
+        if (this.domSubscriptions.length > 0) {
+            this.domSubscriptions.forEach(subscription => subscription());
+        }
+        if (!(isDocumentAvailable() && isPresent(this.element))) {
+            return;
+        }
+        if (this.service.pressed) {
+            this.onPointerMove = this.onPointerMove.bind(this);
+            this.onPointerUp = this.onPointerUp.bind(this);
+            let scrollable = getScrollableParent(this.nativeElement);
+            this.domSubscriptions = [
+                this.renderer.listen(document, 'pointermove', this.onPointerMove),
+                this.renderer.listen(document, 'mousemove', this.onPointerMove),
+                this.renderer.listen(document, 'touchmove', this.onPointerMove),
+                this.renderer.listen(document, 'pointerup', this.onPointerUp),
+                this.renderer.listen(document, 'pointercancel', this.onPointerUp),
+                this.renderer.listen(document, 'mouseup', this.onPointerUp),
+                this.renderer.listen(document, 'contextmenu', this.onPointerUp),
+                this.renderer.listen(document, 'touchend', this.onPointerUp),
+                this.renderer.listen(document, 'touchcancel', this.onPointerUp)
+            ];
+            if (scrollable) {
+                if (scrollable === document.getElementsByTagName('html')[0]) {
+                    scrollable = document;
+                }
+                this.domSubscriptions.push(this.renderer.listen(scrollable, 'scroll', this.onPointerMove));
+            }
+        }
+        else {
+            this.onPointerDown = this.onPointerDown.bind(this);
+            const element = this.nativeElement;
+            this.domSubscriptions = [
+                this.renderer.listen(element, 'pointerdown', this.onPointerDown),
+                this.renderer.listen(element, 'mousedown', this.onPointerDown),
+                this.renderer.listen(element, 'touchstart', this.onPointerDown)
+            ];
+        }
+    }
+    /**
+     * @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);
+        this.hint.instance.template = this.hintTemplate;
+        this.hint.instance.directive = this;
+        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;
+    }
+}
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDragTarget]',
+                    exportAs: 'kendoDragTarget'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: DragStateService }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { hintTemplate: [{
+                type: Input
+            }], threshold: [{
+                type: Input
+            }], autoScroll: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }], dragDelay: [{
+                type: Input
+            }], restrictByAxis: [{
+                type: Input
+            }], press: [{
+                type: Output
+            }], dragStart: [{
+                type: Output
+            }], drag: [{
+                type: Output
+            }], release: [{
+                type: Output
+            }], dragEnd: [{
+                type: Output
+            }], touchAction: [{
+                type: HostBinding,
+                args: ['style.touch-action']
+            }], dragHandles: [{
+                type: ContentChildren,
+                args: [DragHandleDirective]
+            }] } });
+
+/**
+ * Arguments for the dragEnter event of the DropTarget.
+ */
+class DragEnterEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * Arguments for the dragOver event of the DropTarget.
+ */
+class DragOverEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * Arguments for the dragLeave event of the DropTarget.
+ */
+class DragLeaveEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * Arguments for the drop event of the DropTarget.
+ */
+class DropEvent extends PreventableEvent {
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        super();
+        Object.assign(this, args);
+    }
+}
+
+/**
+ * Represents the Kendo UI DropTarget directive for Angular.
+ */
+class DropTargetDirective {
+    constructor(service, element, ngZone) {
+        this.service = service;
+        this.element = element;
+        this.ngZone = ngZone;
+        /**
+         * Fires when a DragTarget element enters the DropTarget.
+         * This event is preventable. Preventing it allows full logic customization.
+         */
+        this.dragEnter = new EventEmitter();
+        /**
+         * Fires when a DragTarget element is being dragged over the DropTarget.
+         * This event is preventable. Preventing it allows full logic customization.
+         */
+        this.dragOver = new EventEmitter();
+        /**
+         * Fires when a DragTarget element leaves the DropTarget.
+         * This event is preventable. Preventing it allows full logic customization.
+         */
+        this.dragLeave = new EventEmitter();
+        /**
+         * Fires when a DragTarget element is dropped over the DropTarget.
+         * This event is preventable. Preventing it allows full logic customization.
+         */
+        this.drop = new EventEmitter();
+        validatePackage(packageMetadata);
+    }
+    ngOnInit() {
+        this.initializeDropTarget();
+        this.service.dropTargets.push(this.dropTarget);
+    }
+    /**
+     * @hidden
+     */
+    handleDragEnter(event) {
+        let allowed = true;
+        if (isPresent(this.allowedDragTargets)) {
+            switch (typeof this.allowedDragTargets) {
+                case 'function': {
+                    allowed = this.allowedDragTargets(this.service.dragTargetDirective);
+                    break;
+                }
+                case 'string': {
+                    allowed = this.service.dragTargetDirective.link === this.allowedDragTargets;
+                    break;
+                }
+                default: {
+                    allowed = this.allowedDragTargets.some(dt => dt === this.service.dragTargetDirective.link);
+                }
+            }
+        }
+        if (allowed) {
+            this.service.dropTarget = this.dropTarget;
+            this.ngZone.run(() => {
+                const eventArgs = new DragEnterEvent({ event, element: this.element.nativeElement });
+                this.dragEnter.emit(eventArgs);
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleDragLeave(event) {
+        this.service.dropTarget = null;
+        this.ngZone.run(() => {
+            const eventArgs = new DragLeaveEvent({ event, element: this.element.nativeElement });
+            this.dragLeave.emit(eventArgs);
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleDragOver(event) {
+        this.ngZone.run(() => {
+            const eventArgs = new DragOverEvent({ event, element: this.element.nativeElement });
+            this.dragOver.emit(eventArgs);
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleDrop(event) {
+        this.ngZone.run(() => {
+            const eventArgs = new DropEvent({ event, element: this.element.nativeElement });
+            this.drop.emit(eventArgs);
+        });
+        this.service.setScrollOffset({ x: 0, y: 0 });
+    }
+    /**
+     * @hidden
+     */
+    initializeDropTarget() {
+        this.dropTarget = {
+            element: this.element.nativeElement,
+            onDragEnter: this.handleDragEnter.bind(this),
+            onDragLeave: this.handleDragLeave.bind(this),
+            onDragOver: this.handleDragOver.bind(this),
+            onDrop: this.handleDrop.bind(this)
+        };
+    }
+}
+DropTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropTargetDirective, deps: [{ token: DragStateService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+DropTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: { allowedDragTargets: "allowedDragTargets" }, outputs: { dragEnter: "dragEnter", dragOver: "dragOver", dragLeave: "dragLeave", drop: "drop" }, exportAs: ["kendoDropTarget"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDropTarget]',
+                    exportAs: 'kendoDropTarget'
+                }]
+        }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { allowedDragTargets: [{
+                type: Input
+            }], dragEnter: [{
+                type: Output
+            }], dragOver: [{
+                type: Output
+            }], dragLeave: [{
+                type: Output
+            }], drop: [{
+                type: Output
+            }] } });
+
+const EXPORTS = [
+    DragTargetDirective,
+    DragHandleDirective,
+    DropTargetDirective,
+    HintComponent
+];
+class DragAndDropModule {
+}
+DragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragAndDropModule, declarations: [DragTargetDirective,
+        DragHandleDirective,
+        DropTargetDirective,
+        HintComponent], imports: [CommonModule], exports: [DragTargetDirective,
+        DragHandleDirective,
+        DropTargetDirective,
+        HintComponent] });
+DragAndDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragAndDropModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DragAndDropModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...EXPORTS],
+                    exports: [...EXPORTS],
+                    imports: [CommonModule]
+                }]
+        }] });
+
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmodules'] }})
+ * definition for the Utils components.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Utils module
+ * import { UtilsModule } 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, UtilsModule], // import Utils module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class UtilsModule {
+}
+UtilsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UtilsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UtilsModule, exports: [DragAndDropModule] });
+UtilsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UtilsModule, imports: [DragAndDropModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UtilsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [DragAndDropModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DragAndDropModule, DragEndEvent, DragEnterEvent, DragEvent, DragHandleDirective, DragLeaveEvent, DragOverEvent, DragStartEvent, DragTargetDirective, DropEvent, DropTargetDirective, HintComponent, PressEvent, ReleaseEvent, UtilsModule };
+