@progress/kendo-angular-utils
Version:
Kendo UI Angular utils component
130 lines (129 loc) • 4.96 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, ElementRef, EventEmitter, NgZone, Output } from "@angular/core";
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { DragStateService } from "./drag-state.service";
import { DropTargetEvent } from './events/drop-target-event';
import { isPresent } from "./util";
import * as i0 from "@angular/core";
import * as i1 from "./drag-state.service";
/**
* Represents the Kendo UI DropTarget directive for Angular.
*/
export class DropTargetDirective {
service;
element;
ngZone;
/**
* Fires when a DragTarget element enters the DropTarget.
*/
onDragEnter = new EventEmitter();
/**
* Fires when a DragTarget element is being dragged over the DropTarget.
*/
onDragOver = new EventEmitter();
/**
* Fires when a DragTarget element leaves the DropTarget.
*/
onDragLeave = new EventEmitter();
/**
* Fires when a DragTarget element is dropped over the DropTarget.
*/
onDrop = new EventEmitter();
constructor(service, element, ngZone) {
this.service = service;
this.element = element;
this.ngZone = ngZone;
validatePackage(packageMetadata);
}
dropTarget;
ngOnInit() {
this.initializeDropTarget();
this.service.dropTargets.push(this.dropTarget);
}
ngOnDestroy() {
const currentDropTargetIndex = this.service.dropTargets.indexOf(this.dropTarget);
this.service.dropTargets.splice(currentDropTargetIndex, 1);
}
/**
* @hidden
*/
handleDragEnter(event) {
if (!this.service.dragTarget) {
return;
}
this.service.dropTarget = this.dropTarget;
this.emitZoneAwareEvent('onDragEnter', event);
}
/**
* @hidden
*/
handleDragLeave(event) {
this.service.dropTarget = null;
if (!this.service.dragTarget) {
return;
}
this.emitZoneAwareEvent('onDragLeave', event);
}
/**
* @hidden
*/
handleDragOver(event) {
if (!this.service.dragTarget) {
return;
}
this.emitZoneAwareEvent('onDragOver', event);
}
/**
* @hidden
*/
handleDrop(event) {
this.emitZoneAwareEvent('onDrop', event);
this.service.dropTarget = null;
}
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)
};
}
emitZoneAwareEvent(event, normalizedEvent) {
const eventProps = {
dropTarget: this.element.nativeElement,
dragTarget: this.service.dragTarget?.element,
dragEvent: normalizedEvent,
dragData: this.service.dragData
};
if (isPresent(this.service.dragTarget?.hint)) {
eventProps.hintElement = this.service.dragTarget.element;
}
const eventArgs = new DropTargetEvent(eventProps);
this.ngZone.run(() => {
this[event].emit(eventArgs);
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropTargetDirective, deps: [{ token: i1.DragStateService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropTargetDirective, isStandalone: true, selector: "[kendoDropTarget]", outputs: { onDragEnter: "onDragEnter", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" }, exportAs: ["kendoDropTarget"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropTargetDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoDropTarget]',
exportAs: 'kendoDropTarget',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { onDragEnter: [{
type: Output
}], onDragOver: [{
type: Output
}], onDragLeave: [{
type: Output
}], onDrop: [{
type: Output
}] } });