Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ngx-drag-drop
Advanced tools
ngx-drag-drop - npm Package Compare versions
Comparing version 2.0.0-rc.4 to 2.0.0-rc.5
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common'], factory) : | ||
| (factory((global['ngx-drag-drop'] = {}),global.ng.core,global.ng.common)); | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) : | ||
| typeof define === 'function' && define.amd ? define('ngx-drag-drop', ['exports', '@angular/core', '@angular/common'], factory) : | ||
| (factory((global['ngx-drag-drop'] = {}),global.ng.core,global.ng.common)); | ||
| }(this, (function (exports,core,common) { 'use strict'; | ||
| var DROP_EFFECTS = (["move", "copy", "link"]); | ||
| var CUSTOM_MIME_TYPE = "application/x-dnd"; | ||
| var JSON_MIME_TYPE = "application/json"; | ||
| var MSIE_MIME_TYPE = "Text"; | ||
| /** | ||
| * @param {?} mimeType | ||
| * @return {?} | ||
| */ | ||
| function mimeTypeIsCustom(mimeType) { | ||
| return mimeType.substr(0, CUSTOM_MIME_TYPE.length) === CUSTOM_MIME_TYPE; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function getWellKnownMimeType(event) { | ||
| if (event.dataTransfer) { | ||
| var /** @type {?} */ types = event.dataTransfer.types; | ||
| // IE 9 workaround. | ||
| if (!types) { | ||
| return MSIE_MIME_TYPE; | ||
| } | ||
| for (var /** @type {?} */ i = 0; i < types.length; i++) { | ||
| if (types[i] === MSIE_MIME_TYPE | ||
| || types[i] === JSON_MIME_TYPE | ||
| || mimeTypeIsCustom(types[i])) { | ||
| return types[i]; | ||
| } | ||
| } | ||
| } | ||
| return null; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} data | ||
| * @param {?} effectAllowed | ||
| * @return {?} | ||
| */ | ||
| function setDragData(event, data, effectAllowed) { | ||
| // Internet Explorer and Microsoft Edge don't support custom mime types, see design doc: | ||
| // https://github.com/marceljuenemann/angular-drag-and-drop-lists/wiki/Data-Transfer-Design | ||
| var /** @type {?} */ mimeType = CUSTOM_MIME_TYPE + (data.type ? ("-" + data.type) : ""); | ||
| var /** @type {?} */ dataString = JSON.stringify(data); | ||
| try { | ||
| event.dataTransfer.setData(mimeType, dataString); | ||
| } | ||
| catch (e) { | ||
| // Setting a custom MIME type did not work, we are probably in IE or Edge. | ||
| try { | ||
| event.dataTransfer.setData(JSON_MIME_TYPE, dataString); | ||
| } | ||
| catch (e) { | ||
| // We are in Internet Explorer and can only use the Text MIME type. Also note that IE | ||
| // does not allow changing the cursor in the dragover event, therefore we have to choose | ||
| // the one we want to display now by setting effectAllowed. | ||
| var /** @type {?} */ effectsAllowed = filterEffects(DROP_EFFECTS, effectAllowed); | ||
| event.dataTransfer.effectAllowed = effectsAllowed[0]; | ||
| event.dataTransfer.setData(MSIE_MIME_TYPE, dataString); | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} dragIsExternal | ||
| * @return {?} | ||
| */ | ||
| function getDropData(event, dragIsExternal) { | ||
| // check if the mime type is well known | ||
| var /** @type {?} */ mimeType = getWellKnownMimeType(event); | ||
| // drag did not originate from [dndDraggable] | ||
| if (dragIsExternal === true) { | ||
| if (mimeType !== null | ||
| && mimeTypeIsCustom(mimeType)) { | ||
| // the type of content is well known and safe to handle | ||
| return JSON.parse(event.dataTransfer.getData(mimeType)); | ||
| } | ||
| // the contained data is unknown, let user handle it | ||
| return {}; | ||
| } | ||
| // the type of content is well known and safe to handle | ||
| return JSON.parse(event.dataTransfer.getData(mimeType)); | ||
| } | ||
| /** | ||
| * @param {?} effects | ||
| * @param {?} allowed | ||
| * @return {?} | ||
| */ | ||
| function filterEffects(effects, allowed) { | ||
| if (allowed === "all" | ||
| || allowed === "uninitialized") { | ||
| return effects; | ||
| } | ||
| return effects.filter(function (effect) { | ||
| return allowed.toLowerCase().indexOf(effect) !== -1; | ||
| }); | ||
| } | ||
| /** | ||
| * @param {?} parentElement | ||
| * @param {?} childElement | ||
| * @return {?} | ||
| */ | ||
| function getDirectChildElement(parentElement, childElement) { | ||
| var /** @type {?} */ directChild = childElement; | ||
| while (directChild.parentNode !== parentElement) { | ||
| // reached root node without finding given parent | ||
| if (!directChild.parentNode) { | ||
| return null; | ||
| } | ||
| directChild = directChild.parentNode; | ||
| } | ||
| return /** @type {?} */ (directChild); | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} element | ||
| * @param {?} horizontal | ||
| * @return {?} | ||
| */ | ||
| function shouldPositionPlaceholderBeforeElement(event, element, horizontal) { | ||
| var /** @type {?} */ bounds = element.getBoundingClientRect(); | ||
| // If the pointer is in the upper half of the list item element, | ||
| // we position the placeholder before the list item, otherwise after it. | ||
| if (horizontal) { | ||
| return (event.clientX < bounds.left + bounds.width / 2); | ||
| } | ||
| return (event.clientY < bounds.top + bounds.height / 2); | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} dragImage | ||
| * @return {?} | ||
| */ | ||
| function calculateDragImageOffset(event, dragImage) { | ||
| var /** @type {?} */ dragImageComputedStyle = window.getComputedStyle(dragImage); | ||
| var /** @type {?} */ paddingTop = parseFloat(dragImageComputedStyle.paddingTop) || 0; | ||
| var /** @type {?} */ paddingLeft = parseFloat(dragImageComputedStyle.paddingLeft) || 0; | ||
| var /** @type {?} */ borderTop = parseFloat(dragImageComputedStyle.borderTopWidth) || 0; | ||
| var /** @type {?} */ borderLeft = parseFloat(dragImageComputedStyle.borderLeftWidth) || 0; | ||
| return { | ||
| x: event.offsetX + paddingLeft + borderLeft, | ||
| y: event.offsetY + paddingTop + borderTop | ||
| }; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} dragImage | ||
| * @param {?} offsetFunction | ||
| * @return {?} | ||
| */ | ||
| function setDragImage(event, dragImage, offsetFunction) { | ||
| var /** @type {?} */ offset = offsetFunction(event, dragImage) || { x: 0, y: 0 }; | ||
| ((event.dataTransfer)).setDragImage(dragImage, offset.x, offset.y); | ||
| } | ||
| var _dndState = { | ||
| isDragging: false, | ||
| dropEffect: "none", | ||
| effectAllowed: "all", | ||
| type: undefined | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} effectAllowed | ||
| * @param {?} type | ||
| * @return {?} | ||
| */ | ||
| function startDrag(event, effectAllowed, type) { | ||
| _dndState.isDragging = true; | ||
| _dndState.dropEffect = "none"; | ||
| _dndState.effectAllowed = effectAllowed; | ||
| _dndState.type = type; | ||
| event.dataTransfer.effectAllowed = effectAllowed; | ||
| } | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| function endDrag() { | ||
| _dndState.isDragging = false; | ||
| _dndState.dropEffect = undefined; | ||
| _dndState.effectAllowed = undefined; | ||
| _dndState.type = undefined; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} dropEffect | ||
| * @return {?} | ||
| */ | ||
| function setDropEffect(event, dropEffect) { | ||
| if (_dndState.isDragging === true) { | ||
| _dndState.dropEffect = dropEffect; | ||
| } | ||
| event.dataTransfer.dropEffect = dropEffect; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?=} effectAllowed | ||
| * @return {?} | ||
| */ | ||
| function getDropEffect(event, effectAllowed) { | ||
| var /** @type {?} */ dataTransferEffectAllowed = (event.dataTransfer) ? /** @type {?} */ (event.dataTransfer.effectAllowed) : "uninitialized"; | ||
| var /** @type {?} */ effects = filterEffects(DROP_EFFECTS, dataTransferEffectAllowed); | ||
| if (_dndState.isDragging === true) { | ||
| effects = filterEffects(effects, _dndState.effectAllowed); | ||
| } | ||
| if (effectAllowed) { | ||
| effects = filterEffects(effects, effectAllowed); | ||
| } | ||
| // MacOS automatically filters dataTransfer.effectAllowed depending on the modifier keys, | ||
| // therefore the following modifier keys will only affect other operating systems. | ||
| if (effects.length === 0) { | ||
| return "none"; | ||
| } | ||
| if (event.ctrlKey && effects.indexOf("copy") !== -1) { | ||
| return "copy"; | ||
| } | ||
| if (event.altKey && effects.indexOf("link") !== -1) { | ||
| return "link"; | ||
| } | ||
| return /** @type {?} */ (effects[0]); | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function getDndType(event) { | ||
| if (_dndState.isDragging === true) { | ||
| return _dndState.type; | ||
| } | ||
| var /** @type {?} */ mimeType = getWellKnownMimeType(event); | ||
| if (mimeType === null) { | ||
| return undefined; | ||
| } | ||
| if (mimeType === MSIE_MIME_TYPE | ||
| || mimeType === JSON_MIME_TYPE) { | ||
| return undefined; | ||
| } | ||
| return mimeType.substr(CUSTOM_MIME_TYPE.length + 1) || undefined; | ||
| } | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| function isExternalDrag() { | ||
| return _dndState.isDragging === false; | ||
| } | ||
| var dndState = (_dndState); | ||
| var DndDragImageRefDirective = /** @class */ (function () { | ||
| /** | ||
| * @param {?} parent | ||
| * @param {?} elementRef | ||
| * @fileoverview added by tsickle | ||
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc | ||
| */ | ||
| function DndDragImageRefDirective(parent, elementRef) { | ||
| parent.registerDragImage(elementRef); | ||
| /** @type {?} */ | ||
| var DROP_EFFECTS = ( /** @type {?} */(["move", "copy", "link"])); | ||
| /** @type {?} */ | ||
| var CUSTOM_MIME_TYPE = "application/x-dnd"; | ||
| /** @type {?} */ | ||
| var JSON_MIME_TYPE = "application/json"; | ||
| /** @type {?} */ | ||
| var MSIE_MIME_TYPE = "Text"; | ||
| /** | ||
| * @param {?} mimeType | ||
| * @return {?} | ||
| */ | ||
| function mimeTypeIsCustom(mimeType) { | ||
| return mimeType.substr(0, CUSTOM_MIME_TYPE.length) === CUSTOM_MIME_TYPE; | ||
| } | ||
| return DndDragImageRefDirective; | ||
| }()); | ||
| DndDragImageRefDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndDragImageRef]" | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| DndDragImageRefDirective.ctorParameters = function () { return [ | ||
| { type: DndDraggableDirective, }, | ||
| { type: core.ElementRef, }, | ||
| ]; }; | ||
| var DndDraggableDirective = /** @class */ (function () { | ||
| /** | ||
| * @param {?} elementRef | ||
| * @param {?} renderer | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function DndDraggableDirective(elementRef, renderer) { | ||
| this.elementRef = elementRef; | ||
| this.renderer = renderer; | ||
| this.dndEffectAllowed = "copy"; | ||
| this.dndDraggingClass = "dndDragging"; | ||
| this.dndDraggingSourceClass = "dndDraggingSource"; | ||
| this.dndDraggableDisabledClass = "dndDraggableDisabled"; | ||
| this.dndDragImageOffsetFunction = calculateDragImageOffset; | ||
| this.dndStart = new core.EventEmitter(); | ||
| this.dndEnd = new core.EventEmitter(); | ||
| this.dndMoved = new core.EventEmitter(); | ||
| this.dndCopied = new core.EventEmitter(); | ||
| this.dndLinked = new core.EventEmitter(); | ||
| this.dndCanceled = new core.EventEmitter(); | ||
| this.draggable = true; | ||
| } | ||
| Object.defineProperty(DndDraggableDirective.prototype, "dndDisableIf", { | ||
| /** | ||
| * @param {?} value | ||
| * @return {?} | ||
| */ | ||
| set: function (value) { | ||
| this.draggable = !value; | ||
| if (this.draggable) { | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDraggableDisabledClass); | ||
| function getWellKnownMimeType(event) { | ||
| if (event.dataTransfer) { | ||
| /** @type {?} */ | ||
| var types = event.dataTransfer.types; | ||
| // IE 9 workaround. | ||
| if (!types) { | ||
| return MSIE_MIME_TYPE; | ||
| } | ||
| else { | ||
| this.renderer.addClass(this.elementRef.nativeElement, this.dndDraggableDisabledClass); | ||
| for (var i = 0; i < types.length; i++) { | ||
| if (types[i] === MSIE_MIME_TYPE | ||
| || types[i] === JSON_MIME_TYPE | ||
| || mimeTypeIsCustom(types[i])) { | ||
| return types[i]; | ||
| } | ||
| } | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| } | ||
| return null; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} data | ||
| * @param {?} effectAllowed | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.onDragStart = function (event) { | ||
| var _this = this; | ||
| if (this.draggable === false) { | ||
| return false; | ||
| function setDragData(event, data, effectAllowed) { | ||
| // Internet Explorer and Microsoft Edge don't support custom mime types, see design doc: | ||
| // https://github.com/marceljuenemann/angular-drag-and-drop-lists/wiki/Data-Transfer-Design | ||
| /** @type {?} */ | ||
| var mimeType = CUSTOM_MIME_TYPE + (data.type ? ("-" + data.type) : ""); | ||
| /** @type {?} */ | ||
| var dataString = JSON.stringify(data); | ||
| try { | ||
| event.dataTransfer.setData(mimeType, dataString); | ||
| } | ||
| // check if there is dnd handle and if the dnd handle was used to start the drag | ||
| if (typeof this.dndHandle !== "undefined" | ||
| && typeof event._dndUsingHandle === "undefined") { | ||
| return false; | ||
| catch (e) { | ||
| // Setting a custom MIME type did not work, we are probably in IE or Edge. | ||
| try { | ||
| event.dataTransfer.setData(JSON_MIME_TYPE, dataString); | ||
| } | ||
| catch (e) { | ||
| // We are in Internet Explorer and can only use the Text MIME type. Also note that IE | ||
| // does not allow changing the cursor in the dragover event, therefore we have to choose | ||
| // the one we want to display now by setting effectAllowed. | ||
| /** @type {?} */ | ||
| var effectsAllowed = filterEffects(DROP_EFFECTS, effectAllowed); | ||
| event.dataTransfer.effectAllowed = effectsAllowed[0]; | ||
| event.dataTransfer.setData(MSIE_MIME_TYPE, dataString); | ||
| } | ||
| } | ||
| // initialize global state | ||
| startDrag(event, this.dndEffectAllowed, this.dndType); | ||
| setDragData(event, { data: this.dndDraggable, type: this.dndType }, dndState.effectAllowed); | ||
| this.determineDragImage(); | ||
| // set dragging css class prior to setDragImage so styles are applied before | ||
| // TODO breaking change: add class to elementRef rather than drag image which could be another element | ||
| this.renderer.addClass(this.dragImage, this.dndDraggingClass); | ||
| // set custom dragimage if present | ||
| // set dragimage if drag is started from dndHandle | ||
| if (typeof this.dndDragImageElementRef !== "undefined" | ||
| || typeof event._dndUsingHandle !== "undefined") { | ||
| setDragImage(event, this.dragImage, this.dndDragImageOffsetFunction); | ||
| } | ||
| // add dragging source css class on first drag event | ||
| var /** @type {?} */ unregister = this.renderer.listen(this.elementRef.nativeElement, "drag", function () { | ||
| _this.renderer.addClass(_this.elementRef.nativeElement, _this.dndDraggingSourceClass); | ||
| unregister(); | ||
| }); | ||
| this.dndStart.emit(event); | ||
| event.stopPropagation(); | ||
| }; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} dragIsExternal | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.onDragEnd = function (event) { | ||
| var _this = this; | ||
| // get drop effect from custom stored state as its not reliable across browsers | ||
| var /** @type {?} */ dropEffect = dndState.dropEffect; | ||
| var /** @type {?} */ dropEffectEmitter; | ||
| switch (dropEffect) { | ||
| case "copy": | ||
| dropEffectEmitter = this.dndCopied; | ||
| break; | ||
| case "link": | ||
| dropEffectEmitter = this.dndLinked; | ||
| break; | ||
| case "move": | ||
| dropEffectEmitter = this.dndMoved; | ||
| break; | ||
| default: | ||
| dropEffectEmitter = this.dndCanceled; | ||
| break; | ||
| function getDropData(event, dragIsExternal) { | ||
| // check if the mime type is well known | ||
| /** @type {?} */ | ||
| var mimeType = getWellKnownMimeType(event); | ||
| // drag did not originate from [dndDraggable] | ||
| if (dragIsExternal === true) { | ||
| if (mimeType !== null | ||
| && mimeTypeIsCustom(mimeType)) { | ||
| // the type of content is well known and safe to handle | ||
| return JSON.parse(event.dataTransfer.getData(mimeType)); | ||
| } | ||
| // the contained data is unknown, let user handle it | ||
| return {}; | ||
| } | ||
| dropEffectEmitter.emit(event); | ||
| this.dndEnd.emit(event); | ||
| // reset global state | ||
| endDrag(); | ||
| this.renderer.removeClass(this.dragImage, this.dndDraggingClass); | ||
| // IE9 special hammering | ||
| window.setTimeout(function () { | ||
| _this.renderer.removeClass(_this.elementRef.nativeElement, _this.dndDraggingSourceClass); | ||
| }, 0); | ||
| event.stopPropagation(); | ||
| }; | ||
| // the type of content is well known and safe to handle | ||
| return JSON.parse(event.dataTransfer.getData(mimeType)); | ||
| } | ||
| /** | ||
| * @param {?} handle | ||
| * @param {?} effects | ||
| * @param {?} allowed | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.registerDragHandle = function (handle) { | ||
| this.dndHandle = handle; | ||
| }; | ||
| function filterEffects(effects, allowed) { | ||
| if (allowed === "all" | ||
| || allowed === "uninitialized") { | ||
| return effects; | ||
| } | ||
| return effects.filter(( /** | ||
| * @param {?} effect | ||
| * @return {?} | ||
| */function (effect) { | ||
| return allowed.toLowerCase().indexOf(effect) !== -1; | ||
| })); | ||
| } | ||
| /** | ||
| * @param {?} elementRef | ||
| * @param {?} parentElement | ||
| * @param {?} childElement | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.registerDragImage = function (elementRef) { | ||
| this.dndDragImageElementRef = elementRef; | ||
| }; | ||
| function getDirectChildElement(parentElement, childElement) { | ||
| /** @type {?} */ | ||
| var directChild = childElement; | ||
| while (directChild.parentNode !== parentElement) { | ||
| // reached root node without finding given parent | ||
| if (!directChild.parentNode) { | ||
| return null; | ||
| } | ||
| directChild = directChild.parentNode; | ||
| } | ||
| return ( /** @type {?} */(directChild)); | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} element | ||
| * @param {?} horizontal | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.determineDragImage = function () { | ||
| // evaluate custom drag image existence | ||
| if (typeof this.dndDragImageElementRef !== "undefined") { | ||
| this.dragImage = /** @type {?} */ (this.dndDragImageElementRef.nativeElement); | ||
| function shouldPositionPlaceholderBeforeElement(event, element, horizontal) { | ||
| /** @type {?} */ | ||
| var bounds = element.getBoundingClientRect(); | ||
| // If the pointer is in the upper half of the list item element, | ||
| // we position the placeholder before the list item, otherwise after it. | ||
| if (horizontal) { | ||
| return (event.clientX < bounds.left + bounds.width / 2); | ||
| } | ||
| else { | ||
| this.dragImage = this.elementRef.nativeElement; | ||
| } | ||
| }; | ||
| return DndDraggableDirective; | ||
| }()); | ||
| DndDraggableDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndDraggable]" | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| DndDraggableDirective.ctorParameters = function () { return [ | ||
| { type: core.ElementRef, }, | ||
| { type: core.Renderer2, }, | ||
| ]; }; | ||
| DndDraggableDirective.propDecorators = { | ||
| 'dndDraggable': [{ type: core.Input },], | ||
| 'dndEffectAllowed': [{ type: core.Input },], | ||
| 'dndType': [{ type: core.Input },], | ||
| 'dndDraggingClass': [{ type: core.Input },], | ||
| 'dndDraggingSourceClass': [{ type: core.Input },], | ||
| 'dndDraggableDisabledClass': [{ type: core.Input },], | ||
| 'dndDragImageOffsetFunction': [{ type: core.Input },], | ||
| 'dndStart': [{ type: core.Output },], | ||
| 'dndEnd': [{ type: core.Output },], | ||
| 'dndMoved': [{ type: core.Output },], | ||
| 'dndCopied': [{ type: core.Output },], | ||
| 'dndLinked': [{ type: core.Output },], | ||
| 'dndCanceled': [{ type: core.Output },], | ||
| 'draggable': [{ type: core.HostBinding, args: ["attr.draggable",] },], | ||
| 'dndDisableIf': [{ type: core.Input },], | ||
| 'onDragStart': [{ type: core.HostListener, args: ["dragstart", ["$event"],] },], | ||
| 'onDragEnd': [{ type: core.HostListener, args: ["dragend", ["$event"],] },], | ||
| }; | ||
| var DndPlaceholderRefDirective = /** @class */ (function () { | ||
| /** | ||
| * @param {?} elementRef | ||
| */ | ||
| function DndPlaceholderRefDirective(elementRef) { | ||
| this.elementRef = elementRef; | ||
| return (event.clientY < bounds.top + bounds.height / 2); | ||
| } | ||
| return DndPlaceholderRefDirective; | ||
| }()); | ||
| DndPlaceholderRefDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndPlaceholderRef]" | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| DndPlaceholderRefDirective.ctorParameters = function () { return [ | ||
| { type: core.ElementRef, }, | ||
| ]; }; | ||
| var DndDropzoneDirective = /** @class */ (function () { | ||
| /** | ||
| * @param {?} ngZone | ||
| * @param {?} elementRef | ||
| * @param {?} renderer | ||
| * @param {?} event | ||
| * @param {?} dragImage | ||
| * @return {?} | ||
| */ | ||
| function DndDropzoneDirective(ngZone, elementRef, renderer) { | ||
| var _this = this; | ||
| this.ngZone = ngZone; | ||
| this.elementRef = elementRef; | ||
| this.renderer = renderer; | ||
| this.dndAllowExternal = false; | ||
| this.dndHorizontal = false; | ||
| this.dndDragoverClass = "dndDragover"; | ||
| this.dndDropzoneDisabledClass = "dndDropzoneDisabled"; | ||
| this.dndDragover = new core.EventEmitter(); | ||
| this.dndDrop = new core.EventEmitter(); | ||
| this.placeholder = null; | ||
| this.disabled = false; | ||
| this.dragEnterEventHandler = function (event) { return _this.onDragEnter(event); }; | ||
| this.dragOverEventHandler = function (event) { return _this.onDragOver(event); }; | ||
| this.dragLeaveEventHandler = function (event) { return _this.onDragLeave(event); }; | ||
| function calculateDragImageOffset(event, dragImage) { | ||
| /** @type {?} */ | ||
| var dragImageComputedStyle = window.getComputedStyle(dragImage); | ||
| /** @type {?} */ | ||
| var paddingTop = parseFloat(dragImageComputedStyle.paddingTop) || 0; | ||
| /** @type {?} */ | ||
| var paddingLeft = parseFloat(dragImageComputedStyle.paddingLeft) || 0; | ||
| /** @type {?} */ | ||
| var borderTop = parseFloat(dragImageComputedStyle.borderTopWidth) || 0; | ||
| /** @type {?} */ | ||
| var borderLeft = parseFloat(dragImageComputedStyle.borderLeftWidth) || 0; | ||
| return { | ||
| x: event.offsetX + paddingLeft + borderLeft, | ||
| y: event.offsetY + paddingTop + borderTop | ||
| }; | ||
| } | ||
| Object.defineProperty(DndDropzoneDirective.prototype, "dndDisableIf", { | ||
| /** | ||
| * @param {?} value | ||
| * @return {?} | ||
| */ | ||
| set: function (value) { | ||
| this.disabled = !!value; | ||
| if (this.disabled) { | ||
| this.renderer.addClass(this.elementRef.nativeElement, this.dndDropzoneDisabledClass); | ||
| } | ||
| else { | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDropzoneDisabledClass); | ||
| } | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} dragImage | ||
| * @param {?} offsetFunction | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.ngAfterViewInit = function () { | ||
| var _this = this; | ||
| this.placeholder = this.tryGetPlaceholder(); | ||
| this.removePlaceholderFromDOM(); | ||
| this.ngZone.runOutsideAngular(function () { | ||
| _this.elementRef.nativeElement.addEventListener("dragenter", _this.dragEnterEventHandler); | ||
| _this.elementRef.nativeElement.addEventListener("dragover", _this.dragOverEventHandler); | ||
| _this.elementRef.nativeElement.addEventListener("dragleave", _this.dragLeaveEventHandler); | ||
| }); | ||
| }; | ||
| function setDragImage(event, dragImage, offsetFunction) { | ||
| /** @type {?} */ | ||
| var offset = offsetFunction(event, dragImage) || { x: 0, y: 0 }; | ||
| (( /** @type {?} */(event.dataTransfer))).setDragImage(dragImage, offset.x, offset.y); | ||
| } | ||
| /** | ||
| * @return {?} | ||
| * @fileoverview added by tsickle | ||
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc | ||
| */ | ||
| DndDropzoneDirective.prototype.ngOnDestroy = function () { | ||
| this.elementRef.nativeElement.removeEventListener("dragenter", this.dragEnterEventHandler); | ||
| this.elementRef.nativeElement.removeEventListener("dragover", this.dragOverEventHandler); | ||
| this.elementRef.nativeElement.removeEventListener("dragleave", this.dragLeaveEventHandler); | ||
| /** @type {?} */ | ||
| var _dndState = { | ||
| isDragging: false, | ||
| dropEffect: "none", | ||
| effectAllowed: "all", | ||
| type: undefined | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} effectAllowed | ||
| * @param {?} type | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.onDragEnter = function (event) { | ||
| // check if another dropzone is activated | ||
| if (event._dndDropzoneActive === true) { | ||
| this.cleanupDragoverState(); | ||
| return; | ||
| } | ||
| // set as active if the target element is inside this dropzone | ||
| if (typeof event._dndDropzoneActive === "undefined") { | ||
| var /** @type {?} */ newTarget = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (this.elementRef.nativeElement.contains(newTarget)) { | ||
| event._dndDropzoneActive = true; | ||
| } | ||
| } | ||
| // check if this drag event is allowed to drop on this dropzone | ||
| var /** @type {?} */ type = getDndType(event); | ||
| if (this.isDropAllowed(type) === false) { | ||
| return; | ||
| } | ||
| // allow the dragenter | ||
| event.preventDefault(); | ||
| }; | ||
| function startDrag(event, effectAllowed, type) { | ||
| _dndState.isDragging = true; | ||
| _dndState.dropEffect = "none"; | ||
| _dndState.effectAllowed = effectAllowed; | ||
| _dndState.type = type; | ||
| event.dataTransfer.effectAllowed = effectAllowed; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.onDragOver = function (event) { | ||
| // With nested dropzones, we want to ignore this event if a child dropzone | ||
| // has already handled a dragover. Historically, event.stopPropagation() was | ||
| // used to prevent this bubbling, but that prevents any dragovers outside the | ||
| // ngx-drag-drop component, and stops other use cases such as scrolling on drag. | ||
| // Instead, we can check if the event was already prevented by a child and bail early. | ||
| if (event.defaultPrevented) { | ||
| return; | ||
| } | ||
| // check if this drag event is allowed to drop on this dropzone | ||
| var /** @type {?} */ type = getDndType(event); | ||
| if (this.isDropAllowed(type) === false) { | ||
| return; | ||
| } | ||
| this.checkAndUpdatePlaceholderPosition(event); | ||
| var /** @type {?} */ dropEffect = getDropEffect(event, this.dndEffectAllowed); | ||
| if (dropEffect === "none") { | ||
| this.cleanupDragoverState(); | ||
| return; | ||
| } | ||
| // allow the dragover | ||
| event.preventDefault(); | ||
| // set the drop effect | ||
| setDropEffect(event, dropEffect); | ||
| this.dndDragover.emit(event); | ||
| this.renderer.addClass(this.elementRef.nativeElement, this.dndDragoverClass); | ||
| }; | ||
| function endDrag() { | ||
| _dndState.isDragging = false; | ||
| _dndState.dropEffect = undefined; | ||
| _dndState.effectAllowed = undefined; | ||
| _dndState.type = undefined; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} dropEffect | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.onDrop = function (event) { | ||
| try { | ||
| // check if this drag event is allowed to drop on this dropzone | ||
| var /** @type {?} */ type = getDndType(event); | ||
| if (this.isDropAllowed(type) === false) { | ||
| return; | ||
| } | ||
| var /** @type {?} */ data = getDropData(event, isExternalDrag()); | ||
| if (this.isDropAllowed(data.type) === false) { | ||
| return; | ||
| } | ||
| // signal custom drop handling | ||
| event.preventDefault(); | ||
| var /** @type {?} */ dropEffect = getDropEffect(event); | ||
| setDropEffect(event, dropEffect); | ||
| if (dropEffect === "none") { | ||
| return; | ||
| } | ||
| var /** @type {?} */ dropIndex = this.getPlaceholderIndex(); | ||
| this.dndDrop.emit({ | ||
| event: event, | ||
| dropEffect: dropEffect, | ||
| isExternal: isExternalDrag(), | ||
| data: data.data, | ||
| index: dropIndex, | ||
| type: type, | ||
| }); | ||
| event.stopPropagation(); | ||
| function setDropEffect(event, dropEffect) { | ||
| if (_dndState.isDragging === true) { | ||
| _dndState.dropEffect = dropEffect; | ||
| } | ||
| finally { | ||
| this.cleanupDragoverState(); | ||
| } | ||
| }; | ||
| event.dataTransfer.dropEffect = dropEffect; | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?=} effectAllowed | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.onDragLeave = function (event) { | ||
| // check if still inside this dropzone and not yet handled by another dropzone | ||
| if (typeof event._dndDropzoneActive === "undefined") { | ||
| var /** @type {?} */ newTarget = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (this.elementRef.nativeElement.contains(newTarget)) { | ||
| event._dndDropzoneActive = true; | ||
| return; | ||
| } | ||
| function getDropEffect(event, effectAllowed) { | ||
| /** @type {?} */ | ||
| var dataTransferEffectAllowed = (event.dataTransfer) ? ( /** @type {?} */(event.dataTransfer.effectAllowed)) : "uninitialized"; | ||
| /** @type {?} */ | ||
| var effects = filterEffects(DROP_EFFECTS, dataTransferEffectAllowed); | ||
| if (_dndState.isDragging === true) { | ||
| effects = filterEffects(effects, _dndState.effectAllowed); | ||
| } | ||
| this.cleanupDragoverState(); | ||
| // cleanup drop effect when leaving dropzone | ||
| setDropEffect(event, "none"); | ||
| }; | ||
| /** | ||
| * @param {?=} type | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.isDropAllowed = function (type) { | ||
| // dropzone is disabled -> deny it | ||
| if (this.disabled === true) { | ||
| return false; | ||
| if (effectAllowed) { | ||
| effects = filterEffects(effects, effectAllowed); | ||
| } | ||
| // if drag did not start from our directive | ||
| // and external drag sources are not allowed -> deny it | ||
| if (isExternalDrag() === true | ||
| && this.dndAllowExternal === false) { | ||
| return false; | ||
| // MacOS automatically filters dataTransfer.effectAllowed depending on the modifier keys, | ||
| // therefore the following modifier keys will only affect other operating systems. | ||
| if (effects.length === 0) { | ||
| return "none"; | ||
| } | ||
| // no filtering by types -> allow it | ||
| if (!this.dndDropzone) { | ||
| return true; | ||
| if (event.ctrlKey && effects.indexOf("copy") !== -1) { | ||
| return "copy"; | ||
| } | ||
| // no type set -> allow it | ||
| if (!type) { | ||
| return true; | ||
| if (event.altKey && effects.indexOf("link") !== -1) { | ||
| return "link"; | ||
| } | ||
| if (Array.isArray(this.dndDropzone) === false) { | ||
| throw new Error("dndDropzone: bound value to [dndDropzone] must be an array!"); | ||
| } | ||
| // if dropzone contains type -> allow it | ||
| return this.dndDropzone.indexOf(type) !== -1; | ||
| }; | ||
| return ( /** @type {?} */(effects[0])); | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.tryGetPlaceholder = function () { | ||
| if (typeof this.dndPlaceholderRef !== "undefined") { | ||
| return /** @type {?} */ (this.dndPlaceholderRef.elementRef.nativeElement); | ||
| function getDndType(event) { | ||
| if (_dndState.isDragging === true) { | ||
| return _dndState.type; | ||
| } | ||
| // TODO nasty workaround needed because if ng-container / template is used @ContentChild() or DI will fail because | ||
| // of wrong context see angular bug https://github.com/angular/angular/issues/13517 | ||
| return this.elementRef.nativeElement.querySelector("[dndPlaceholderRef]"); | ||
| }; | ||
| /** @type {?} */ | ||
| var mimeType = getWellKnownMimeType(event); | ||
| if (mimeType === null) { | ||
| return undefined; | ||
| } | ||
| if (mimeType === MSIE_MIME_TYPE | ||
| || mimeType === JSON_MIME_TYPE) { | ||
| return undefined; | ||
| } | ||
| return mimeType.substr(CUSTOM_MIME_TYPE.length + 1) || undefined; | ||
| } | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.removePlaceholderFromDOM = function () { | ||
| if (this.placeholder !== null | ||
| && this.placeholder.parentNode !== null) { | ||
| this.placeholder.parentNode.removeChild(this.placeholder); | ||
| } | ||
| }; | ||
| function isExternalDrag() { | ||
| return _dndState.isDragging === false; | ||
| } | ||
| /** @type {?} */ | ||
| var dndState = ( /** @type {?} */(_dndState)); | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| * @fileoverview added by tsickle | ||
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc | ||
| */ | ||
| DndDropzoneDirective.prototype.checkAndUpdatePlaceholderPosition = function (event) { | ||
| if (this.placeholder === null) { | ||
| return; | ||
| var DndDragImageRefDirective = /** @class */ (function () { | ||
| function DndDragImageRefDirective(parent, elementRef) { | ||
| parent.registerDragImage(elementRef); | ||
| } | ||
| // make sure the placeholder is in the DOM | ||
| if (this.placeholder.parentNode !== this.elementRef.nativeElement) { | ||
| this.renderer.appendChild(this.elementRef.nativeElement, this.placeholder); | ||
| DndDragImageRefDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndDragImageRef]" | ||
| },] } | ||
| ]; | ||
| /** @nocollapse */ | ||
| DndDragImageRefDirective.ctorParameters = function () { | ||
| return [ | ||
| { type: DndDraggableDirective }, | ||
| { type: core.ElementRef } | ||
| ]; | ||
| }; | ||
| return DndDragImageRefDirective; | ||
| }()); | ||
| var DndDraggableDirective = /** @class */ (function () { | ||
| function DndDraggableDirective(elementRef, renderer, ngZone) { | ||
| var _this = this; | ||
| this.elementRef = elementRef; | ||
| this.renderer = renderer; | ||
| this.ngZone = ngZone; | ||
| this.dndEffectAllowed = "copy"; | ||
| this.dndDraggingClass = "dndDragging"; | ||
| this.dndDraggingSourceClass = "dndDraggingSource"; | ||
| this.dndDraggableDisabledClass = "dndDraggableDisabled"; | ||
| this.dndDragImageOffsetFunction = calculateDragImageOffset; | ||
| this.dndStart = new core.EventEmitter(); | ||
| this.dndDrag = new core.EventEmitter(); | ||
| this.dndEnd = new core.EventEmitter(); | ||
| this.dndMoved = new core.EventEmitter(); | ||
| this.dndCopied = new core.EventEmitter(); | ||
| this.dndLinked = new core.EventEmitter(); | ||
| this.dndCanceled = new core.EventEmitter(); | ||
| this.draggable = true; | ||
| this.dragEventHandler = ( /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */function (event) { return _this.onDrag(event); }); | ||
| } | ||
| // update the position if the event originates from a child element of the dropzone | ||
| var /** @type {?} */ directChild = getDirectChildElement(this.elementRef.nativeElement, /** @type {?} */ (event.target)); | ||
| // early exit if no direct child or direct child is placeholder | ||
| if (directChild === null | ||
| || directChild === this.placeholder) { | ||
| return; | ||
| Object.defineProperty(DndDraggableDirective.prototype, "dndDisableIf", { | ||
| set: /** | ||
| * @param {?} value | ||
| * @return {?} | ||
| */ function (value) { | ||
| this.draggable = !value; | ||
| if (this.draggable) { | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDraggableDisabledClass); | ||
| } | ||
| else { | ||
| this.renderer.addClass(this.elementRef.nativeElement, this.dndDraggableDisabledClass); | ||
| } | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.ngAfterViewInit = /** | ||
| * @return {?} | ||
| */ | ||
| function () { | ||
| var _this = this; | ||
| this.ngZone.runOutsideAngular(( /** | ||
| * @return {?} | ||
| */function () { | ||
| _this.elementRef.nativeElement.addEventListener("drag", _this.dragEventHandler); | ||
| })); | ||
| }; | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.ngOnDestroy = /** | ||
| * @return {?} | ||
| */ | ||
| function () { | ||
| this.elementRef.nativeElement.removeEventListener("drag", this.dragEventHandler); | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.onDragStart = /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function (event) { | ||
| var _this = this; | ||
| if (this.draggable === false) { | ||
| return false; | ||
| } | ||
| // check if there is dnd handle and if the dnd handle was used to start the drag | ||
| if (typeof this.dndHandle !== "undefined" | ||
| && typeof event._dndUsingHandle === "undefined") { | ||
| return false; | ||
| } | ||
| // initialize global state | ||
| startDrag(event, this.dndEffectAllowed, this.dndType); | ||
| setDragData(event, { data: this.dndDraggable, type: this.dndType }, dndState.effectAllowed); | ||
| this.dragImage = this.determineDragImage(); | ||
| // set dragging css class prior to setDragImage so styles are applied before | ||
| // TODO breaking change: add class to elementRef rather than drag image which could be another element | ||
| this.renderer.addClass(this.dragImage, this.dndDraggingClass); | ||
| // set custom dragimage if present | ||
| // set dragimage if drag is started from dndHandle | ||
| if (typeof this.dndDragImageElementRef !== "undefined" | ||
| || typeof event._dndUsingHandle !== "undefined") { | ||
| setDragImage(event, this.dragImage, this.dndDragImageOffsetFunction); | ||
| } | ||
| // add dragging source css class on first drag event | ||
| /** @type {?} */ | ||
| var unregister = this.renderer.listen(this.elementRef.nativeElement, "drag", ( /** | ||
| * @return {?} | ||
| */function () { | ||
| _this.renderer.addClass(_this.elementRef.nativeElement, _this.dndDraggingSourceClass); | ||
| unregister(); | ||
| })); | ||
| this.dndStart.emit(event); | ||
| event.stopPropagation(); | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.onDrag = /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function (event) { | ||
| this.dndDrag.emit(event); | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.onDragEnd = /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function (event) { | ||
| var _this = this; | ||
| // get drop effect from custom stored state as its not reliable across browsers | ||
| /** @type {?} */ | ||
| var dropEffect = dndState.dropEffect; | ||
| /** @type {?} */ | ||
| var dropEffectEmitter; | ||
| switch (dropEffect) { | ||
| case "copy": | ||
| dropEffectEmitter = this.dndCopied; | ||
| break; | ||
| case "link": | ||
| dropEffectEmitter = this.dndLinked; | ||
| break; | ||
| case "move": | ||
| dropEffectEmitter = this.dndMoved; | ||
| break; | ||
| default: | ||
| dropEffectEmitter = this.dndCanceled; | ||
| break; | ||
| } | ||
| dropEffectEmitter.emit(event); | ||
| this.dndEnd.emit(event); | ||
| // reset global state | ||
| endDrag(); | ||
| this.renderer.removeClass(this.dragImage, this.dndDraggingClass); | ||
| // IE9 special hammering | ||
| window.setTimeout(( /** | ||
| * @return {?} | ||
| */function () { | ||
| _this.renderer.removeClass(_this.elementRef.nativeElement, _this.dndDraggingSourceClass); | ||
| }), 0); | ||
| event.stopPropagation(); | ||
| }; | ||
| /** | ||
| * @param {?} handle | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.registerDragHandle = /** | ||
| * @param {?} handle | ||
| * @return {?} | ||
| */ | ||
| function (handle) { | ||
| this.dndHandle = handle; | ||
| }; | ||
| /** | ||
| * @param {?} elementRef | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.registerDragImage = /** | ||
| * @param {?} elementRef | ||
| * @return {?} | ||
| */ | ||
| function (elementRef) { | ||
| this.dndDragImageElementRef = elementRef; | ||
| }; | ||
| /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.determineDragImage = /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| function () { | ||
| // evaluate custom drag image existence | ||
| if (typeof this.dndDragImageElementRef !== "undefined") { | ||
| return ( /** @type {?} */(this.dndDragImageElementRef.nativeElement)); | ||
| } | ||
| else { | ||
| return this.elementRef.nativeElement; | ||
| } | ||
| }; | ||
| DndDraggableDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndDraggable]" | ||
| },] } | ||
| ]; | ||
| /** @nocollapse */ | ||
| DndDraggableDirective.ctorParameters = function () { | ||
| return [ | ||
| { type: core.ElementRef }, | ||
| { type: core.Renderer2 }, | ||
| { type: core.NgZone } | ||
| ]; | ||
| }; | ||
| DndDraggableDirective.propDecorators = { | ||
| dndDraggable: [{ type: core.Input }], | ||
| dndEffectAllowed: [{ type: core.Input }], | ||
| dndType: [{ type: core.Input }], | ||
| dndDraggingClass: [{ type: core.Input }], | ||
| dndDraggingSourceClass: [{ type: core.Input }], | ||
| dndDraggableDisabledClass: [{ type: core.Input }], | ||
| dndDragImageOffsetFunction: [{ type: core.Input }], | ||
| dndStart: [{ type: core.Output }], | ||
| dndDrag: [{ type: core.Output }], | ||
| dndEnd: [{ type: core.Output }], | ||
| dndMoved: [{ type: core.Output }], | ||
| dndCopied: [{ type: core.Output }], | ||
| dndLinked: [{ type: core.Output }], | ||
| dndCanceled: [{ type: core.Output }], | ||
| draggable: [{ type: core.HostBinding, args: ["attr.draggable",] }], | ||
| dndDisableIf: [{ type: core.Input }], | ||
| onDragStart: [{ type: core.HostListener, args: ["dragstart", ["$event"],] }], | ||
| onDragEnd: [{ type: core.HostListener, args: ["dragend", ["$event"],] }] | ||
| }; | ||
| return DndDraggableDirective; | ||
| }()); | ||
| /** | ||
| * @fileoverview added by tsickle | ||
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc | ||
| */ | ||
| var DndPlaceholderRefDirective = /** @class */ (function () { | ||
| function DndPlaceholderRefDirective(elementRef) { | ||
| this.elementRef = elementRef; | ||
| } | ||
| var /** @type {?} */ positionPlaceholderBeforeDirectChild = shouldPositionPlaceholderBeforeElement(event, directChild, this.dndHorizontal); | ||
| if (positionPlaceholderBeforeDirectChild) { | ||
| // do insert before only if necessary | ||
| if (directChild.previousSibling !== this.placeholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.placeholder, directChild); | ||
| } | ||
| DndPlaceholderRefDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndPlaceholderRef]" | ||
| },] } | ||
| ]; | ||
| /** @nocollapse */ | ||
| DndPlaceholderRefDirective.ctorParameters = function () { | ||
| return [ | ||
| { type: core.ElementRef } | ||
| ]; | ||
| }; | ||
| return DndPlaceholderRefDirective; | ||
| }()); | ||
| var DndDropzoneDirective = /** @class */ (function () { | ||
| function DndDropzoneDirective(ngZone, elementRef, renderer) { | ||
| var _this = this; | ||
| this.ngZone = ngZone; | ||
| this.elementRef = elementRef; | ||
| this.renderer = renderer; | ||
| this.dndAllowExternal = false; | ||
| this.dndHorizontal = false; | ||
| this.dndDragoverClass = "dndDragover"; | ||
| this.dndDropzoneDisabledClass = "dndDropzoneDisabled"; | ||
| this.dndDragover = new core.EventEmitter(); | ||
| this.dndDrop = new core.EventEmitter(); | ||
| this.placeholder = null; | ||
| this.disabled = false; | ||
| this.dragEnterEventHandler = ( /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */function (event) { return _this.onDragEnter(event); }); | ||
| this.dragOverEventHandler = ( /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */function (event) { return _this.onDragOver(event); }); | ||
| this.dragLeaveEventHandler = ( /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */function (event) { return _this.onDragLeave(event); }); | ||
| } | ||
| else { | ||
| // do insert after only if necessary | ||
| if (directChild.nextSibling !== this.placeholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.placeholder, directChild.nextSibling); | ||
| } | ||
| } | ||
| }; | ||
| Object.defineProperty(DndDropzoneDirective.prototype, "dndDisableIf", { | ||
| set: /** | ||
| * @param {?} value | ||
| * @return {?} | ||
| */ function (value) { | ||
| this.disabled = !!value; | ||
| if (this.disabled) { | ||
| this.renderer.addClass(this.elementRef.nativeElement, this.dndDropzoneDisabledClass); | ||
| } | ||
| else { | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDropzoneDisabledClass); | ||
| } | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.ngAfterViewInit = /** | ||
| * @return {?} | ||
| */ | ||
| function () { | ||
| var _this = this; | ||
| this.placeholder = this.tryGetPlaceholder(); | ||
| this.removePlaceholderFromDOM(); | ||
| this.ngZone.runOutsideAngular(( /** | ||
| * @return {?} | ||
| */function () { | ||
| _this.elementRef.nativeElement.addEventListener("dragenter", _this.dragEnterEventHandler); | ||
| _this.elementRef.nativeElement.addEventListener("dragover", _this.dragOverEventHandler); | ||
| _this.elementRef.nativeElement.addEventListener("dragleave", _this.dragLeaveEventHandler); | ||
| })); | ||
| }; | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.ngOnDestroy = /** | ||
| * @return {?} | ||
| */ | ||
| function () { | ||
| this.elementRef.nativeElement.removeEventListener("dragenter", this.dragEnterEventHandler); | ||
| this.elementRef.nativeElement.removeEventListener("dragover", this.dragOverEventHandler); | ||
| this.elementRef.nativeElement.removeEventListener("dragleave", this.dragLeaveEventHandler); | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.onDragEnter = /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function (event) { | ||
| // check if another dropzone is activated | ||
| if (event._dndDropzoneActive === true) { | ||
| this.cleanupDragoverState(); | ||
| return; | ||
| } | ||
| // set as active if the target element is inside this dropzone | ||
| if (typeof event._dndDropzoneActive === "undefined") { | ||
| /** @type {?} */ | ||
| var newTarget = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (this.elementRef.nativeElement.contains(newTarget)) { | ||
| event._dndDropzoneActive = true; | ||
| } | ||
| } | ||
| // check if this drag event is allowed to drop on this dropzone | ||
| /** @type {?} */ | ||
| var type = getDndType(event); | ||
| if (this.isDropAllowed(type) === false) { | ||
| return; | ||
| } | ||
| // allow the dragenter | ||
| event.preventDefault(); | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.onDragOver = /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function (event) { | ||
| // With nested dropzones, we want to ignore this event if a child dropzone | ||
| // has already handled a dragover. Historically, event.stopPropagation() was | ||
| // used to prevent this bubbling, but that prevents any dragovers outside the | ||
| // ngx-drag-drop component, and stops other use cases such as scrolling on drag. | ||
| // Instead, we can check if the event was already prevented by a child and bail early. | ||
| if (event.defaultPrevented) { | ||
| return; | ||
| } | ||
| // check if this drag event is allowed to drop on this dropzone | ||
| /** @type {?} */ | ||
| var type = getDndType(event); | ||
| if (this.isDropAllowed(type) === false) { | ||
| return; | ||
| } | ||
| this.checkAndUpdatePlaceholderPosition(event); | ||
| /** @type {?} */ | ||
| var dropEffect = getDropEffect(event, this.dndEffectAllowed); | ||
| if (dropEffect === "none") { | ||
| this.cleanupDragoverState(); | ||
| return; | ||
| } | ||
| // allow the dragover | ||
| event.preventDefault(); | ||
| // set the drop effect | ||
| setDropEffect(event, dropEffect); | ||
| this.dndDragover.emit(event); | ||
| this.renderer.addClass(this.elementRef.nativeElement, this.dndDragoverClass); | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.onDrop = /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function (event) { | ||
| try { | ||
| // check if this drag event is allowed to drop on this dropzone | ||
| /** @type {?} */ | ||
| var type = getDndType(event); | ||
| if (this.isDropAllowed(type) === false) { | ||
| return; | ||
| } | ||
| /** @type {?} */ | ||
| var data = getDropData(event, isExternalDrag()); | ||
| if (this.isDropAllowed(data.type) === false) { | ||
| return; | ||
| } | ||
| // signal custom drop handling | ||
| event.preventDefault(); | ||
| /** @type {?} */ | ||
| var dropEffect = getDropEffect(event); | ||
| setDropEffect(event, dropEffect); | ||
| if (dropEffect === "none") { | ||
| return; | ||
| } | ||
| /** @type {?} */ | ||
| var dropIndex = this.getPlaceholderIndex(); | ||
| // if for whatever reason the placeholder is not present in the DOM but it should be there | ||
| // we don't allow/emit the drop event since it breaks the contract | ||
| // seems to only happen if drag and drop is executed faster than the DOM updates | ||
| if (dropIndex === -1) { | ||
| return; | ||
| } | ||
| this.dndDrop.emit({ | ||
| event: event, | ||
| dropEffect: dropEffect, | ||
| isExternal: isExternalDrag(), | ||
| data: data.data, | ||
| index: dropIndex, | ||
| type: type, | ||
| }); | ||
| event.stopPropagation(); | ||
| } | ||
| finally { | ||
| this.cleanupDragoverState(); | ||
| } | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.onDragLeave = /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function (event) { | ||
| // check if still inside this dropzone and not yet handled by another dropzone | ||
| if (typeof event._dndDropzoneActive === "undefined") { | ||
| /** @type {?} */ | ||
| var newTarget = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (this.elementRef.nativeElement.contains(newTarget)) { | ||
| event._dndDropzoneActive = true; | ||
| return; | ||
| } | ||
| } | ||
| this.cleanupDragoverState(); | ||
| // cleanup drop effect when leaving dropzone | ||
| setDropEffect(event, "none"); | ||
| }; | ||
| /** | ||
| * @private | ||
| * @param {?=} type | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.isDropAllowed = /** | ||
| * @private | ||
| * @param {?=} type | ||
| * @return {?} | ||
| */ | ||
| function (type) { | ||
| // dropzone is disabled -> deny it | ||
| if (this.disabled === true) { | ||
| return false; | ||
| } | ||
| // if drag did not start from our directive | ||
| // and external drag sources are not allowed -> deny it | ||
| if (isExternalDrag() === true | ||
| && this.dndAllowExternal === false) { | ||
| return false; | ||
| } | ||
| // no filtering by types -> allow it | ||
| if (!this.dndDropzone) { | ||
| return true; | ||
| } | ||
| // no type set -> allow it | ||
| if (!type) { | ||
| return true; | ||
| } | ||
| if (Array.isArray(this.dndDropzone) === false) { | ||
| throw new Error("dndDropzone: bound value to [dndDropzone] must be an array!"); | ||
| } | ||
| // if dropzone contains type -> allow it | ||
| return this.dndDropzone.indexOf(type) !== -1; | ||
| }; | ||
| /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.tryGetPlaceholder = /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| function () { | ||
| if (typeof this.dndPlaceholderRef !== "undefined") { | ||
| return ( /** @type {?} */(this.dndPlaceholderRef.elementRef.nativeElement)); | ||
| } | ||
| // TODO nasty workaround needed because if ng-container / template is used @ContentChild() or DI will fail because | ||
| // of wrong context see angular bug https://github.com/angular/angular/issues/13517 | ||
| return this.elementRef.nativeElement.querySelector("[dndPlaceholderRef]"); | ||
| }; | ||
| /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.removePlaceholderFromDOM = /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| function () { | ||
| if (this.placeholder !== null | ||
| && this.placeholder.parentNode !== null) { | ||
| this.placeholder.parentNode.removeChild(this.placeholder); | ||
| } | ||
| }; | ||
| /** | ||
| * @private | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.checkAndUpdatePlaceholderPosition = /** | ||
| * @private | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function (event) { | ||
| if (this.placeholder === null) { | ||
| return; | ||
| } | ||
| // make sure the placeholder is in the DOM | ||
| if (this.placeholder.parentNode !== this.elementRef.nativeElement) { | ||
| this.renderer.appendChild(this.elementRef.nativeElement, this.placeholder); | ||
| } | ||
| // update the position if the event originates from a child element of the dropzone | ||
| /** @type {?} */ | ||
| var directChild = getDirectChildElement(this.elementRef.nativeElement, ( /** @type {?} */(event.target))); | ||
| // early exit if no direct child or direct child is placeholder | ||
| if (directChild === null | ||
| || directChild === this.placeholder) { | ||
| return; | ||
| } | ||
| /** @type {?} */ | ||
| var positionPlaceholderBeforeDirectChild = shouldPositionPlaceholderBeforeElement(event, directChild, this.dndHorizontal); | ||
| if (positionPlaceholderBeforeDirectChild) { | ||
| // do insert before only if necessary | ||
| if (directChild.previousSibling !== this.placeholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.placeholder, directChild); | ||
| } | ||
| } | ||
| else { | ||
| // do insert after only if necessary | ||
| if (directChild.nextSibling !== this.placeholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.placeholder, directChild.nextSibling); | ||
| } | ||
| } | ||
| }; | ||
| /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.getPlaceholderIndex = /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| function () { | ||
| if (this.placeholder === null) { | ||
| return undefined; | ||
| } | ||
| /** @type {?} */ | ||
| var element = ( /** @type {?} */(this.elementRef.nativeElement)); | ||
| return Array.prototype.indexOf.call(element.children, this.placeholder); | ||
| }; | ||
| /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| DndDropzoneDirective.prototype.cleanupDragoverState = /** | ||
| * @private | ||
| * @return {?} | ||
| */ | ||
| function () { | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDragoverClass); | ||
| this.removePlaceholderFromDOM(); | ||
| }; | ||
| DndDropzoneDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndDropzone]" | ||
| },] } | ||
| ]; | ||
| /** @nocollapse */ | ||
| DndDropzoneDirective.ctorParameters = function () { | ||
| return [ | ||
| { type: core.NgZone }, | ||
| { type: core.ElementRef }, | ||
| { type: core.Renderer2 } | ||
| ]; | ||
| }; | ||
| DndDropzoneDirective.propDecorators = { | ||
| dndDropzone: [{ type: core.Input }], | ||
| dndEffectAllowed: [{ type: core.Input }], | ||
| dndAllowExternal: [{ type: core.Input }], | ||
| dndHorizontal: [{ type: core.Input }], | ||
| dndDragoverClass: [{ type: core.Input }], | ||
| dndDropzoneDisabledClass: [{ type: core.Input }], | ||
| dndDragover: [{ type: core.Output }], | ||
| dndDrop: [{ type: core.Output }], | ||
| dndPlaceholderRef: [{ type: core.ContentChild, args: [DndPlaceholderRefDirective,] }], | ||
| dndDisableIf: [{ type: core.Input }], | ||
| onDrop: [{ type: core.HostListener, args: ["drop", ["$event"],] }] | ||
| }; | ||
| return DndDropzoneDirective; | ||
| }()); | ||
| /** | ||
| * @return {?} | ||
| * @fileoverview added by tsickle | ||
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc | ||
| */ | ||
| DndDropzoneDirective.prototype.getPlaceholderIndex = function () { | ||
| if (this.placeholder === null) { | ||
| return undefined; | ||
| var DndHandleDirective = /** @class */ (function () { | ||
| function DndHandleDirective(parent) { | ||
| this.draggable = true; | ||
| parent.registerDragHandle(this); | ||
| } | ||
| var /** @type {?} */ element = (this.elementRef.nativeElement); | ||
| return Array.prototype.indexOf.call(element.children, this.placeholder); | ||
| }; | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| DndHandleDirective.prototype.onDragEvent = /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| */ | ||
| function (event) { | ||
| event._dndUsingHandle = true; | ||
| }; | ||
| DndHandleDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndHandle]" | ||
| },] } | ||
| ]; | ||
| /** @nocollapse */ | ||
| DndHandleDirective.ctorParameters = function () { | ||
| return [ | ||
| { type: DndDraggableDirective } | ||
| ]; | ||
| }; | ||
| DndHandleDirective.propDecorators = { | ||
| draggable: [{ type: core.HostBinding, args: ["attr.draggable",] }], | ||
| onDragEvent: [{ type: core.HostListener, args: ["dragstart", ["$event"],] }, { type: core.HostListener, args: ["dragend", ["$event"],] }] | ||
| }; | ||
| return DndHandleDirective; | ||
| }()); | ||
| /** | ||
| * @return {?} | ||
| * @fileoverview added by tsickle | ||
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc | ||
| */ | ||
| DndDropzoneDirective.prototype.cleanupDragoverState = function () { | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDragoverClass); | ||
| this.removePlaceholderFromDOM(); | ||
| }; | ||
| return DndDropzoneDirective; | ||
| }()); | ||
| DndDropzoneDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndDropzone]" | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| DndDropzoneDirective.ctorParameters = function () { return [ | ||
| { type: core.NgZone, }, | ||
| { type: core.ElementRef, }, | ||
| { type: core.Renderer2, }, | ||
| ]; }; | ||
| DndDropzoneDirective.propDecorators = { | ||
| 'dndDropzone': [{ type: core.Input },], | ||
| 'dndEffectAllowed': [{ type: core.Input },], | ||
| 'dndAllowExternal': [{ type: core.Input },], | ||
| 'dndHorizontal': [{ type: core.Input },], | ||
| 'dndDragoverClass': [{ type: core.Input },], | ||
| 'dndDropzoneDisabledClass': [{ type: core.Input },], | ||
| 'dndDragover': [{ type: core.Output },], | ||
| 'dndDrop': [{ type: core.Output },], | ||
| 'dndPlaceholderRef': [{ type: core.ContentChild, args: [DndPlaceholderRefDirective,] },], | ||
| 'dndDisableIf': [{ type: core.Input },], | ||
| 'onDrop': [{ type: core.HostListener, args: ["drop", ["$event"],] },], | ||
| }; | ||
| var DndHandleDirective = /** @class */ (function () { | ||
| var DndModule = /** @class */ (function () { | ||
| function DndModule() { | ||
| } | ||
| DndModule.decorators = [ | ||
| { type: core.NgModule, args: [{ | ||
| imports: [ | ||
| common.CommonModule | ||
| ], | ||
| declarations: [ | ||
| DndDraggableDirective, | ||
| DndDropzoneDirective, | ||
| DndHandleDirective, | ||
| DndPlaceholderRefDirective, | ||
| DndDragImageRefDirective | ||
| ], | ||
| exports: [ | ||
| DndDraggableDirective, | ||
| DndDropzoneDirective, | ||
| DndHandleDirective, | ||
| DndPlaceholderRefDirective, | ||
| DndDragImageRefDirective | ||
| ] | ||
| },] } | ||
| ]; | ||
| return DndModule; | ||
| }()); | ||
| /** | ||
| * @param {?} parent | ||
| * @fileoverview added by tsickle | ||
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc | ||
| */ | ||
| function DndHandleDirective(parent) { | ||
| this.draggable = true; | ||
| parent.registerDragHandle(this); | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @return {?} | ||
| * @fileoverview added by tsickle | ||
| * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc | ||
| */ | ||
| DndHandleDirective.prototype.onDragEvent = function (event) { | ||
| event._dndUsingHandle = true; | ||
| }; | ||
| return DndHandleDirective; | ||
| }()); | ||
| DndHandleDirective.decorators = [ | ||
| { type: core.Directive, args: [{ | ||
| selector: "[dndHandle]" | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| DndHandleDirective.ctorParameters = function () { return [ | ||
| { type: DndDraggableDirective, }, | ||
| ]; }; | ||
| DndHandleDirective.propDecorators = { | ||
| 'draggable': [{ type: core.HostBinding, args: ["attr.draggable",] },], | ||
| 'onDragEvent': [{ type: core.HostListener, args: ["dragstart", ["$event"],] }, { type: core.HostListener, args: ["dragend", ["$event"],] },], | ||
| }; | ||
| var DndModule = /** @class */ (function () { | ||
| function DndModule() { | ||
| } | ||
| return DndModule; | ||
| }()); | ||
| DndModule.decorators = [ | ||
| { type: core.NgModule, args: [{ | ||
| imports: [ | ||
| common.CommonModule | ||
| ], | ||
| declarations: [ | ||
| DndDraggableDirective, | ||
| DndDropzoneDirective, | ||
| DndHandleDirective, | ||
| DndPlaceholderRefDirective, | ||
| DndDragImageRefDirective | ||
| ], | ||
| exports: [ | ||
| DndDraggableDirective, | ||
| DndDropzoneDirective, | ||
| DndHandleDirective, | ||
| DndPlaceholderRefDirective, | ||
| DndDragImageRefDirective | ||
| ] | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| DndModule.ctorParameters = function () { return []; }; | ||
| exports.DndDragImageRefDirective = DndDragImageRefDirective; | ||
| exports.DndDraggableDirective = DndDraggableDirective; | ||
| exports.DndPlaceholderRefDirective = DndPlaceholderRefDirective; | ||
| exports.DndDropzoneDirective = DndDropzoneDirective; | ||
| exports.DndHandleDirective = DndHandleDirective; | ||
| exports.DndModule = DndModule; | ||
| exports.DndDragImageRefDirective = DndDragImageRefDirective; | ||
| exports.DndDraggableDirective = DndDraggableDirective; | ||
| exports.DndPlaceholderRefDirective = DndPlaceholderRefDirective; | ||
| exports.DndDropzoneDirective = DndDropzoneDirective; | ||
| exports.DndHandleDirective = DndHandleDirective; | ||
| exports.DndModule = DndModule; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| }))); | ||
| //# sourceMappingURL=ngx-drag-drop.umd.js.map | ||
| //# sourceMappingURL=ngx-drag-drop.umd.js.map |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common"],t):t(e["ngx-drag-drop"]={},e.ng.core,e.ng.common)}(this,function(e,t,n){"use strict";function r(e){return e.substr(0,y.length)===y}function d(e){if(e.dataTransfer){var t=e.dataTransfer.types;if(!t)return b;for(var n=0;n<t.length;n++)if(t[n]===b||t[n]===E||r(t[n]))return t[n]}return null}function a(e,t,n){var r=y+(t.type?"-"+t.type:""),d=JSON.stringify(t);try{e.dataTransfer.setData(r,d)}catch(i){try{e.dataTransfer.setData(E,d)}catch(i){var a=o(D,n);e.dataTransfer.effectAllowed=a[0],e.dataTransfer.setData(b,d)}}}function i(e,t){var n=d(e);return!0===t?null!==n&&r(n)?JSON.parse(e.dataTransfer.getData(n)):{}:JSON.parse(e.dataTransfer.getData(n))}function o(e,t){return"all"===t||"uninitialized"===t?e:e.filter(function(e){return-1!==t.toLowerCase().indexOf(e)})}function s(e,t){for(var n=t;n.parentNode!==e;){if(!n.parentNode)return null;n=n.parentNode}return n}function l(e,t,n){var r=t.getBoundingClientRect();return n?e.clientX<r.left+r.width/2:e.clientY<r.top+r.height/2}function f(e,t){var n=window.getComputedStyle(t),r=parseFloat(n.paddingTop)||0,d=parseFloat(n.paddingLeft)||0,a=parseFloat(n.borderTopWidth)||0,i=parseFloat(n.borderLeftWidth)||0;return{x:e.offsetX+d+i,y:e.offsetY+r+a}}function p(e,t,n){var r=n(e,t)||{x:0,y:0};e.dataTransfer.setDragImage(t,r.x,r.y)}function g(e,t,n){R.isDragging=!0,R.dropEffect="none",R.effectAllowed=t,R.type=n,e.dataTransfer.effectAllowed=t}function u(){R.isDragging=!1,R.dropEffect=undefined,R.effectAllowed=undefined,R.type=undefined}function c(e,t){!0===R.isDragging&&(R.dropEffect=t),e.dataTransfer.dropEffect=t}function h(e,t){var n=e.dataTransfer?e.dataTransfer.effectAllowed:"uninitialized",r=o(D,n);return!0===R.isDragging&&(r=o(r,R.effectAllowed)),t&&(r=o(r,t)),0===r.length?"none":e.ctrlKey&&-1!==r.indexOf("copy")?"copy":e.altKey&&-1!==r.indexOf("link")?"link":r[0]}function v(e){if(!0===R.isDragging)return R.type;var t=d(e);return null===t?undefined:t===b||t===E?undefined:t.substr(y.length+1)||undefined}function m(){return!1===R.isDragging}var D=["move","copy","link"],y="application/x-dnd",E="application/json",b="Text",R={isDragging:!1,dropEffect:"none",effectAllowed:"all",type:undefined},C=R,I=function(){function e(e,t){e.registerDragImage(t)}return e}();I.decorators=[{type:t.Directive,args:[{selector:"[dndDragImageRef]"}]}],I.ctorParameters=function(){return[{type:w},{type:t.ElementRef}]};var w=function(){function e(e,n){this.elementRef=e,this.renderer=n,this.dndEffectAllowed="copy",this.dndDraggingClass="dndDragging",this.dndDraggingSourceClass="dndDraggingSource",this.dndDraggableDisabledClass="dndDraggableDisabled",this.dndDragImageOffsetFunction=f,this.dndStart=new t.EventEmitter,this.dndEnd=new t.EventEmitter,this.dndMoved=new t.EventEmitter,this.dndCopied=new t.EventEmitter,this.dndLinked=new t.EventEmitter,this.dndCanceled=new t.EventEmitter,this.draggable=!0}return Object.defineProperty(e.prototype,"dndDisableIf",{set:function(e){this.draggable=!e,this.draggable?this.renderer.removeClass(this.elementRef.nativeElement,this.dndDraggableDisabledClass):this.renderer.addClass(this.elementRef.nativeElement,this.dndDraggableDisabledClass)},enumerable:!0,configurable:!0}),e.prototype.onDragStart=function(e){var t=this;if(!1===this.draggable)return!1;if("undefined"!=typeof this.dndHandle&&"undefined"==typeof e._dndUsingHandle)return!1;g(e,this.dndEffectAllowed,this.dndType),a(e,{data:this.dndDraggable,type:this.dndType},C.effectAllowed),this.determineDragImage(),this.renderer.addClass(this.dragImage,this.dndDraggingClass),"undefined"==typeof this.dndDragImageElementRef&&"undefined"==typeof e._dndUsingHandle||p(e,this.dragImage,this.dndDragImageOffsetFunction);var n=this.renderer.listen(this.elementRef.nativeElement,"drag",function(){t.renderer.addClass(t.elementRef.nativeElement,t.dndDraggingSourceClass),n()});this.dndStart.emit(e),e.stopPropagation()},e.prototype.onDragEnd=function(e){var t,n=this;switch(C.dropEffect){case"copy":t=this.dndCopied;break;case"link":t=this.dndLinked;break;case"move":t=this.dndMoved;break;default:t=this.dndCanceled}t.emit(e),this.dndEnd.emit(e),u(),this.renderer.removeClass(this.dragImage,this.dndDraggingClass),window.setTimeout(function(){n.renderer.removeClass(n.elementRef.nativeElement,n.dndDraggingSourceClass)},0),e.stopPropagation()},e.prototype.registerDragHandle=function(e){this.dndHandle=e},e.prototype.registerDragImage=function(e){this.dndDragImageElementRef=e},e.prototype.determineDragImage=function(){"undefined"!=typeof this.dndDragImageElementRef?this.dragImage=this.dndDragImageElementRef.nativeElement:this.dragImage=this.elementRef.nativeElement},e}();w.decorators=[{type:t.Directive,args:[{selector:"[dndDraggable]"}]}],w.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},w.propDecorators={dndDraggable:[{type:t.Input}],dndEffectAllowed:[{type:t.Input}],dndType:[{type:t.Input}],dndDraggingClass:[{type:t.Input}],dndDraggingSourceClass:[{type:t.Input}],dndDraggableDisabledClass:[{type:t.Input}],dndDragImageOffsetFunction:[{type:t.Input}],dndStart:[{type:t.Output}],dndEnd:[{type:t.Output}],dndMoved:[{type:t.Output}],dndCopied:[{type:t.Output}],dndLinked:[{type:t.Output}],dndCanceled:[{type:t.Output}],draggable:[{type:t.HostBinding,args:["attr.draggable"]}],dndDisableIf:[{type:t.Input}],onDragStart:[{type:t.HostListener,args:["dragstart",["$event"]]}],onDragEnd:[{type:t.HostListener,args:["dragend",["$event"]]}]};var A=function(){function e(e){this.elementRef=e}return e}();A.decorators=[{type:t.Directive,args:[{selector:"[dndPlaceholderRef]"}]}],A.ctorParameters=function(){return[{type:t.ElementRef}]};var O=function(){function e(e,n,r){var d=this;this.ngZone=e,this.elementRef=n,this.renderer=r,this.dndAllowExternal=!1,this.dndHorizontal=!1,this.dndDragoverClass="dndDragover",this.dndDropzoneDisabledClass="dndDropzoneDisabled",this.dndDragover=new t.EventEmitter,this.dndDrop=new t.EventEmitter,this.placeholder=null,this.disabled=!1,this.dragEnterEventHandler=function(e){return d.onDragEnter(e)},this.dragOverEventHandler=function(e){return d.onDragOver(e)},this.dragLeaveEventHandler=function(e){return d.onDragLeave(e)}}return Object.defineProperty(e.prototype,"dndDisableIf",{set:function(e){this.disabled=!!e,this.disabled?this.renderer.addClass(this.elementRef.nativeElement,this.dndDropzoneDisabledClass):this.renderer.removeClass(this.elementRef.nativeElement,this.dndDropzoneDisabledClass)},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){var e=this;this.placeholder=this.tryGetPlaceholder(),this.removePlaceholderFromDOM(),this.ngZone.runOutsideAngular(function(){e.elementRef.nativeElement.addEventListener("dragenter",e.dragEnterEventHandler),e.elementRef.nativeElement.addEventListener("dragover",e.dragOverEventHandler),e.elementRef.nativeElement.addEventListener("dragleave",e.dragLeaveEventHandler)})},e.prototype.ngOnDestroy=function(){this.elementRef.nativeElement.removeEventListener("dragenter",this.dragEnterEventHandler),this.elementRef.nativeElement.removeEventListener("dragover",this.dragOverEventHandler),this.elementRef.nativeElement.removeEventListener("dragleave",this.dragLeaveEventHandler)},e.prototype.onDragEnter=function(e){if(!0!==e._dndDropzoneActive){if("undefined"==typeof e._dndDropzoneActive){var t=document.elementFromPoint(e.clientX,e.clientY);this.elementRef.nativeElement.contains(t)&&(e._dndDropzoneActive=!0)}var n=v(e);!1!==this.isDropAllowed(n)&&e.preventDefault()}else this.cleanupDragoverState()},e.prototype.onDragOver=function(e){if(!e.defaultPrevented){var t=v(e);if(!1!==this.isDropAllowed(t)){this.checkAndUpdatePlaceholderPosition(e);var n=h(e,this.dndEffectAllowed);"none"!==n?(e.preventDefault(),c(e,n),this.dndDragover.emit(e),this.renderer.addClass(this.elementRef.nativeElement,this.dndDragoverClass)):this.cleanupDragoverState()}}},e.prototype.onDrop=function(e){try{var t=v(e);if(!1===this.isDropAllowed(t))return;var n=i(e,m());if(!1===this.isDropAllowed(n.type))return;e.preventDefault();var r=h(e);if(c(e,r),"none"===r)return;var d=this.getPlaceholderIndex();this.dndDrop.emit({event:e,dropEffect:r,isExternal:m(),data:n.data,index:d,type:t}),e.stopPropagation()}finally{this.cleanupDragoverState()}},e.prototype.onDragLeave=function(e){if("undefined"==typeof e._dndDropzoneActive){var t=document.elementFromPoint(e.clientX,e.clientY);if(this.elementRef.nativeElement.contains(t))return void(e._dndDropzoneActive=!0)}this.cleanupDragoverState(),c(e,"none")},e.prototype.isDropAllowed=function(e){if(!0===this.disabled)return!1;if(!0===m()&&!1===this.dndAllowExternal)return!1;if(!this.dndDropzone)return!0;if(!e)return!0;if(!1===Array.isArray(this.dndDropzone))throw new Error("dndDropzone: bound value to [dndDropzone] must be an array!");return-1!==this.dndDropzone.indexOf(e)},e.prototype.tryGetPlaceholder=function(){return"undefined"!=typeof this.dndPlaceholderRef?this.dndPlaceholderRef.elementRef.nativeElement:this.elementRef.nativeElement.querySelector("[dndPlaceholderRef]")},e.prototype.removePlaceholderFromDOM=function(){null!==this.placeholder&&null!==this.placeholder.parentNode&&this.placeholder.parentNode.removeChild(this.placeholder)},e.prototype.checkAndUpdatePlaceholderPosition=function(e){if(null!==this.placeholder){this.placeholder.parentNode!==this.elementRef.nativeElement&&this.renderer.appendChild(this.elementRef.nativeElement,this.placeholder);var t=s(this.elementRef.nativeElement,e.target);null!==t&&t!==this.placeholder&&(l(e,t,this.dndHorizontal)?t.previousSibling!==this.placeholder&&this.renderer.insertBefore(this.elementRef.nativeElement,this.placeholder,t):t.nextSibling!==this.placeholder&&this.renderer.insertBefore(this.elementRef.nativeElement,this.placeholder,t.nextSibling))}},e.prototype.getPlaceholderIndex=function(){if(null===this.placeholder)return undefined;var e=this.elementRef.nativeElement;return Array.prototype.indexOf.call(e.children,this.placeholder)},e.prototype.cleanupDragoverState=function(){this.renderer.removeClass(this.elementRef.nativeElement,this.dndDragoverClass),this.removePlaceholderFromDOM()},e}();O.decorators=[{type:t.Directive,args:[{selector:"[dndDropzone]"}]}],O.ctorParameters=function(){return[{type:t.NgZone},{type:t.ElementRef},{type:t.Renderer2}]},O.propDecorators={dndDropzone:[{type:t.Input}],dndEffectAllowed:[{type:t.Input}],dndAllowExternal:[{type:t.Input}],dndHorizontal:[{type:t.Input}],dndDragoverClass:[{type:t.Input}],dndDropzoneDisabledClass:[{type:t.Input}],dndDragover:[{type:t.Output}],dndDrop:[{type:t.Output}],dndPlaceholderRef:[{type:t.ContentChild,args:[A]}],dndDisableIf:[{type:t.Input}],onDrop:[{type:t.HostListener,args:["drop",["$event"]]}]};var P=function(){function e(e){this.draggable=!0,e.registerDragHandle(this)}return e.prototype.onDragEvent=function(e){e._dndUsingHandle=!0},e}();P.decorators=[{type:t.Directive,args:[{selector:"[dndHandle]"}]}],P.ctorParameters=function(){return[{type:w}]},P.propDecorators={draggable:[{type:t.HostBinding,args:["attr.draggable"]}],onDragEvent:[{type:t.HostListener,args:["dragstart",["$event"]]},{type:t.HostListener,args:["dragend",["$event"]]}]};var H=function(){function e(){}return e}();H.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],declarations:[w,O,P,A,I],exports:[w,O,P,A,I]}]}],H.ctorParameters=function(){return[]},e.DndDragImageRefDirective=I,e.DndDraggableDirective=w,e.DndPlaceholderRefDirective=A,e.DndDropzoneDirective=O,e.DndHandleDirective=P,e.DndModule=H,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| //# sourceMappingURL=ngx-drag-drop.umd.min.js.map | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-drag-drop",["exports","@angular/core","@angular/common"],t):t(e["ngx-drag-drop"]={},e.ng.core,e.ng.common)}(this,function(e,d,t){"use strict";var s=["move","copy","link"],l="application/x-dnd",f="application/json",p="Text";function i(e){return e.substr(0,l.length)===l}function o(e){if(e.dataTransfer){var t=e.dataTransfer.types;if(!t)return p;for(var n=0;n<t.length;n++)if(t[n]===p||t[n]===f||i(t[n]))return t[n]}return null}function g(e,t){return"all"===t||"uninitialized"===t?e:e.filter(function(e){return-1!==t.toLowerCase().indexOf(e)})}function a(e,t){var n=window.getComputedStyle(t),r=parseFloat(n.paddingTop)||0,d=parseFloat(n.paddingLeft)||0,a=parseFloat(n.borderTopWidth)||0,i=parseFloat(n.borderLeftWidth)||0;return{x:e.offsetX+d+i,y:e.offsetY+r+a}}var u={isDragging:!1,dropEffect:"none",effectAllowed:"all",type:undefined};function c(e,t){!0===u.isDragging&&(u.dropEffect=t),e.dataTransfer.dropEffect=t}function h(e,t){var n=e.dataTransfer?e.dataTransfer.effectAllowed:"uninitialized",r=g(s,n);return!0===u.isDragging&&(r=g(r,u.effectAllowed)),t&&(r=g(r,t)),0===r.length?"none":e.ctrlKey&&-1!==r.indexOf("copy")?"copy":e.altKey&&-1!==r.indexOf("link")?"link":r[0]}function v(e){if(!0===u.isDragging)return u.type;var t=o(e);return null===t?undefined:t===p||t===f?undefined:t.substr(l.length+1)||undefined}function m(){return!1===u.isDragging}var D=u,n=function(){function e(e,t){e.registerDragImage(t)}return e.decorators=[{type:d.Directive,args:[{selector:"[dndDragImageRef]"}]}],e.ctorParameters=function(){return[{type:r},{type:d.ElementRef}]},e}(),r=function(){function e(e,t,n){var r=this;this.elementRef=e,this.renderer=t,this.ngZone=n,this.dndEffectAllowed="copy",this.dndDraggingClass="dndDragging",this.dndDraggingSourceClass="dndDraggingSource",this.dndDraggableDisabledClass="dndDraggableDisabled",this.dndDragImageOffsetFunction=a,this.dndStart=new d.EventEmitter,this.dndDrag=new d.EventEmitter,this.dndEnd=new d.EventEmitter,this.dndMoved=new d.EventEmitter,this.dndCopied=new d.EventEmitter,this.dndLinked=new d.EventEmitter,this.dndCanceled=new d.EventEmitter,this.draggable=!0,this.dragEventHandler=function(e){return r.onDrag(e)}}return Object.defineProperty(e.prototype,"dndDisableIf",{set:function(e){this.draggable=!e,this.draggable?this.renderer.removeClass(this.elementRef.nativeElement,this.dndDraggableDisabledClass):this.renderer.addClass(this.elementRef.nativeElement,this.dndDraggableDisabledClass)},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){var e=this;this.ngZone.runOutsideAngular(function(){e.elementRef.nativeElement.addEventListener("drag",e.dragEventHandler)})},e.prototype.ngOnDestroy=function(){this.elementRef.nativeElement.removeEventListener("drag",this.dragEventHandler)},e.prototype.onDragStart=function(e){var t=this;if(!1===this.draggable)return!1;if("undefined"!=typeof this.dndHandle&&"undefined"==typeof e._dndUsingHandle)return!1;!function r(e,t,n){u.isDragging=!0,u.dropEffect="none",u.effectAllowed=t,u.type=n,e.dataTransfer.effectAllowed=t}(e,this.dndEffectAllowed,this.dndType),function o(e,t,n){var r=l+(t.type?"-"+t.type:""),d=JSON.stringify(t);try{e.dataTransfer.setData(r,d)}catch(i){try{e.dataTransfer.setData(f,d)}catch(i){var a=g(s,n);e.dataTransfer.effectAllowed=a[0],e.dataTransfer.setData(p,d)}}}(e,{data:this.dndDraggable,type:this.dndType},D.effectAllowed),this.dragImage=this.determineDragImage(),this.renderer.addClass(this.dragImage,this.dndDraggingClass),"undefined"==typeof this.dndDragImageElementRef&&"undefined"==typeof e._dndUsingHandle||function d(e,t,n){var r=n(e,t)||{x:0,y:0};e.dataTransfer.setDragImage(t,r.x,r.y)}(e,this.dragImage,this.dndDragImageOffsetFunction);var n=this.renderer.listen(this.elementRef.nativeElement,"drag",function(){t.renderer.addClass(t.elementRef.nativeElement,t.dndDraggingSourceClass),n()});this.dndStart.emit(e),e.stopPropagation()},e.prototype.onDrag=function(e){this.dndDrag.emit(e)},e.prototype.onDragEnd=function(e){var t,n=this;switch(D.dropEffect){case"copy":t=this.dndCopied;break;case"link":t=this.dndLinked;break;case"move":t=this.dndMoved;break;default:t=this.dndCanceled}t.emit(e),this.dndEnd.emit(e),function r(){u.isDragging=!1,u.dropEffect=undefined,u.effectAllowed=undefined,u.type=undefined}(),this.renderer.removeClass(this.dragImage,this.dndDraggingClass),window.setTimeout(function(){n.renderer.removeClass(n.elementRef.nativeElement,n.dndDraggingSourceClass)},0),e.stopPropagation()},e.prototype.registerDragHandle=function(e){this.dndHandle=e},e.prototype.registerDragImage=function(e){this.dndDragImageElementRef=e},e.prototype.determineDragImage=function(){return"undefined"!=typeof this.dndDragImageElementRef?this.dndDragImageElementRef.nativeElement:this.elementRef.nativeElement},e.decorators=[{type:d.Directive,args:[{selector:"[dndDraggable]"}]}],e.ctorParameters=function(){return[{type:d.ElementRef},{type:d.Renderer2},{type:d.NgZone}]},e.propDecorators={dndDraggable:[{type:d.Input}],dndEffectAllowed:[{type:d.Input}],dndType:[{type:d.Input}],dndDraggingClass:[{type:d.Input}],dndDraggingSourceClass:[{type:d.Input}],dndDraggableDisabledClass:[{type:d.Input}],dndDragImageOffsetFunction:[{type:d.Input}],dndStart:[{type:d.Output}],dndDrag:[{type:d.Output}],dndEnd:[{type:d.Output}],dndMoved:[{type:d.Output}],dndCopied:[{type:d.Output}],dndLinked:[{type:d.Output}],dndCanceled:[{type:d.Output}],draggable:[{type:d.HostBinding,args:["attr.draggable"]}],dndDisableIf:[{type:d.Input}],onDragStart:[{type:d.HostListener,args:["dragstart",["$event"]]}],onDragEnd:[{type:d.HostListener,args:["dragend",["$event"]]}]},e}(),y=function(){function e(e){this.elementRef=e}return e.decorators=[{type:d.Directive,args:[{selector:"[dndPlaceholderRef]"}]}],e.ctorParameters=function(){return[{type:d.ElementRef}]},e}(),E=function(){function e(e,t,n){var r=this;this.ngZone=e,this.elementRef=t,this.renderer=n,this.dndAllowExternal=!1,this.dndHorizontal=!1,this.dndDragoverClass="dndDragover",this.dndDropzoneDisabledClass="dndDropzoneDisabled",this.dndDragover=new d.EventEmitter,this.dndDrop=new d.EventEmitter,this.placeholder=null,this.disabled=!1,this.dragEnterEventHandler=function(e){return r.onDragEnter(e)},this.dragOverEventHandler=function(e){return r.onDragOver(e)},this.dragLeaveEventHandler=function(e){return r.onDragLeave(e)}}return Object.defineProperty(e.prototype,"dndDisableIf",{set:function(e){this.disabled=!!e,this.disabled?this.renderer.addClass(this.elementRef.nativeElement,this.dndDropzoneDisabledClass):this.renderer.removeClass(this.elementRef.nativeElement,this.dndDropzoneDisabledClass)},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){var e=this;this.placeholder=this.tryGetPlaceholder(),this.removePlaceholderFromDOM(),this.ngZone.runOutsideAngular(function(){e.elementRef.nativeElement.addEventListener("dragenter",e.dragEnterEventHandler),e.elementRef.nativeElement.addEventListener("dragover",e.dragOverEventHandler),e.elementRef.nativeElement.addEventListener("dragleave",e.dragLeaveEventHandler)})},e.prototype.ngOnDestroy=function(){this.elementRef.nativeElement.removeEventListener("dragenter",this.dragEnterEventHandler),this.elementRef.nativeElement.removeEventListener("dragover",this.dragOverEventHandler),this.elementRef.nativeElement.removeEventListener("dragleave",this.dragLeaveEventHandler)},e.prototype.onDragEnter=function(e){if(!0!==e._dndDropzoneActive){if("undefined"==typeof e._dndDropzoneActive){var t=document.elementFromPoint(e.clientX,e.clientY);this.elementRef.nativeElement.contains(t)&&(e._dndDropzoneActive=!0)}var n=v(e);!1!==this.isDropAllowed(n)&&e.preventDefault()}else this.cleanupDragoverState()},e.prototype.onDragOver=function(e){if(!e.defaultPrevented){var t=v(e);if(!1!==this.isDropAllowed(t)){this.checkAndUpdatePlaceholderPosition(e);var n=h(e,this.dndEffectAllowed);"none"!==n?(e.preventDefault(),c(e,n),this.dndDragover.emit(e),this.renderer.addClass(this.elementRef.nativeElement,this.dndDragoverClass)):this.cleanupDragoverState()}}},e.prototype.onDrop=function(e){try{var t=v(e);if(!1===this.isDropAllowed(t))return;var n=function a(e,t){var n=o(e);return!0===t?null!==n&&i(n)?JSON.parse(e.dataTransfer.getData(n)):{}:JSON.parse(e.dataTransfer.getData(n))}(e,m());if(!1===this.isDropAllowed(n.type))return;e.preventDefault();var r=h(e);if(c(e,r),"none"===r)return;var d=this.getPlaceholderIndex();if(-1===d)return;this.dndDrop.emit({event:e,dropEffect:r,isExternal:m(),data:n.data,index:d,type:t}),e.stopPropagation()}finally{this.cleanupDragoverState()}},e.prototype.onDragLeave=function(e){if("undefined"==typeof e._dndDropzoneActive){var t=document.elementFromPoint(e.clientX,e.clientY);if(this.elementRef.nativeElement.contains(t))return void(e._dndDropzoneActive=!0)}this.cleanupDragoverState(),c(e,"none")},e.prototype.isDropAllowed=function(e){if(!0===this.disabled)return!1;if(!0===m()&&!1===this.dndAllowExternal)return!1;if(!this.dndDropzone)return!0;if(!e)return!0;if(!1===Array.isArray(this.dndDropzone))throw new Error("dndDropzone: bound value to [dndDropzone] must be an array!");return-1!==this.dndDropzone.indexOf(e)},e.prototype.tryGetPlaceholder=function(){return"undefined"!=typeof this.dndPlaceholderRef?this.dndPlaceholderRef.elementRef.nativeElement:this.elementRef.nativeElement.querySelector("[dndPlaceholderRef]")},e.prototype.removePlaceholderFromDOM=function(){null!==this.placeholder&&null!==this.placeholder.parentNode&&this.placeholder.parentNode.removeChild(this.placeholder)},e.prototype.checkAndUpdatePlaceholderPosition=function(e){if(null!==this.placeholder){this.placeholder.parentNode!==this.elementRef.nativeElement&&this.renderer.appendChild(this.elementRef.nativeElement,this.placeholder);var t=function r(e,t){for(var n=t;n.parentNode!==e;){if(!n.parentNode)return null;n=n.parentNode}return n}(this.elementRef.nativeElement,e.target);if(null!==t&&t!==this.placeholder)(function d(e,t,n){var r=t.getBoundingClientRect();return n?e.clientX<r.left+r.width/2:e.clientY<r.top+r.height/2})(e,t,this.dndHorizontal)?t.previousSibling!==this.placeholder&&this.renderer.insertBefore(this.elementRef.nativeElement,this.placeholder,t):t.nextSibling!==this.placeholder&&this.renderer.insertBefore(this.elementRef.nativeElement,this.placeholder,t.nextSibling)}},e.prototype.getPlaceholderIndex=function(){if(null===this.placeholder)return undefined;var e=this.elementRef.nativeElement;return Array.prototype.indexOf.call(e.children,this.placeholder)},e.prototype.cleanupDragoverState=function(){this.renderer.removeClass(this.elementRef.nativeElement,this.dndDragoverClass),this.removePlaceholderFromDOM()},e.decorators=[{type:d.Directive,args:[{selector:"[dndDropzone]"}]}],e.ctorParameters=function(){return[{type:d.NgZone},{type:d.ElementRef},{type:d.Renderer2}]},e.propDecorators={dndDropzone:[{type:d.Input}],dndEffectAllowed:[{type:d.Input}],dndAllowExternal:[{type:d.Input}],dndHorizontal:[{type:d.Input}],dndDragoverClass:[{type:d.Input}],dndDropzoneDisabledClass:[{type:d.Input}],dndDragover:[{type:d.Output}],dndDrop:[{type:d.Output}],dndPlaceholderRef:[{type:d.ContentChild,args:[y]}],dndDisableIf:[{type:d.Input}],onDrop:[{type:d.HostListener,args:["drop",["$event"]]}]},e}(),b=function(){function e(e){this.draggable=!0,e.registerDragHandle(this)}return e.prototype.onDragEvent=function(e){e._dndUsingHandle=!0},e.decorators=[{type:d.Directive,args:[{selector:"[dndHandle]"}]}],e.ctorParameters=function(){return[{type:r}]},e.propDecorators={draggable:[{type:d.HostBinding,args:["attr.draggable"]}],onDragEvent:[{type:d.HostListener,args:["dragstart",["$event"]]},{type:d.HostListener,args:["dragend",["$event"]]}]},e}(),R=function(){function e(){}return e.decorators=[{type:d.NgModule,args:[{imports:[t.CommonModule],declarations:[r,E,b,y,n],exports:[r,E,b,y,n]}]}],e}();e.DndDragImageRefDirective=n,e.DndDraggableDirective=r,e.DndPlaceholderRefDirective=y,e.DndDropzoneDirective=E,e.DndHandleDirective=b,e.DndModule=R,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| //# sourceMappingURL=ngx-drag-drop.umd.min.js.map |
@@ -1,2 +0,2 @@ | ||
| import { ElementRef, EventEmitter, Renderer2 } from "@angular/core"; | ||
| import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from "@angular/core"; | ||
| import { DndDragImageOffsetFunction, DndEvent } from "./dnd-utils"; | ||
@@ -8,5 +8,6 @@ import { DndHandleDirective } from "./dnd-handle.directive"; | ||
| } | ||
| export declare class DndDraggableDirective { | ||
| export declare class DndDraggableDirective implements AfterViewInit, OnDestroy { | ||
| private elementRef; | ||
| private renderer; | ||
| private ngZone; | ||
| dndDraggable: any; | ||
@@ -20,2 +21,3 @@ dndEffectAllowed: EffectAllowed; | ||
| readonly dndStart: EventEmitter<DragEvent>; | ||
| readonly dndDrag: EventEmitter<DragEvent>; | ||
| readonly dndEnd: EventEmitter<DragEvent>; | ||
@@ -30,9 +32,13 @@ readonly dndMoved: EventEmitter<DragEvent>; | ||
| private dragImage; | ||
| private readonly dragEventHandler; | ||
| dndDisableIf: boolean; | ||
| constructor(elementRef: ElementRef, renderer: Renderer2); | ||
| constructor(elementRef: ElementRef, renderer: Renderer2, ngZone: NgZone); | ||
| ngAfterViewInit(): void; | ||
| ngOnDestroy(): void; | ||
| onDragStart(event: DndEvent): boolean; | ||
| onDrag(event: DragEvent): void; | ||
| onDragEnd(event: DragEvent): void; | ||
| registerDragHandle(handle: DndHandleDirective | undefined): void; | ||
| registerDragImage(elementRef: ElementRef | undefined): void; | ||
| private determineDragImage(); | ||
| private determineDragImage; | ||
| } |
@@ -42,8 +42,8 @@ import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from "@angular/core"; | ||
| onDragLeave(event: DndEvent): void; | ||
| private isDropAllowed(type?); | ||
| private tryGetPlaceholder(); | ||
| private removePlaceholderFromDOM(); | ||
| private checkAndUpdatePlaceholderPosition(event); | ||
| private getPlaceholderIndex(); | ||
| private cleanupDragoverState(); | ||
| private isDropAllowed; | ||
| private tryGetPlaceholder; | ||
| private removePlaceholderFromDOM; | ||
| private checkAndUpdatePlaceholderPosition; | ||
| private getPlaceholderIndex; | ||
| private cleanupDragoverState; | ||
| } |
@@ -1,1 +0,1 @@ | ||
| {"__symbolic":"module","version":3,"metadata":{"DndDragImageRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDragImageRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggableDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragImageOffsetFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}],"registerDragHandle":[{"__symbolic":"method"}],"registerDragImage":[{"__symbolic":"method"}],"determineDragImage":[{"__symbolic":"method"}]}},"DndDropEvent":{"__symbolic":"interface"},"DndPlaceholderRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndPlaceholderRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}]}},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDropzoneDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndPlaceholderRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","name":"DndPlaceholderRefDirective"}]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"tryGetPlaceholder":[{"__symbolic":"method"}],"removePlaceholderFromDOM":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}]}},"DndHandleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndHandle]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DndDraggableDirective"}]}],"onDragEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}},"DropEffect":{"__symbolic":"interface"},"EffectAllowed":{"__symbolic":"interface"},"DndDragImageOffsetFunction":{"__symbolic":"interface"},"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}],"exports":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}]}]}],"members":{}}},"origins":{"DndDragImageRefDirective":"./dnd-draggable.directive","DndDraggableDirective":"./dnd-draggable.directive","DndDropEvent":"./dnd-dropzone.directive","DndPlaceholderRefDirective":"./dnd-dropzone.directive","DndDropzoneDirective":"./dnd-dropzone.directive","DndHandleDirective":"./dnd-handle.directive","DropEffect":"./dnd-types","EffectAllowed":"./dnd-types","DndDragImageOffsetFunction":"./dnd-utils","DndModule":"./dnd.module"},"importAs":"ngx-drag-drop"} | ||
| {"__symbolic":"module","version":4,"metadata":{"DndDragImageRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":16,"character":1},"arguments":[{"selector":"[dndDragImageRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":22,"character":26}]}]}},"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":28,"character":1},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"dndDraggableDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3}}]}],"dndDragImageOffsetFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"dndDrag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":3}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":63,"character":3}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":66,"character":3}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":69,"character":3}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":72,"character":3}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":75,"character":3},"arguments":["attr.draggable"]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":22,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":102,"character":32},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":103,"character":30}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":117,"character":3},"arguments":["dragstart",["$event"]]}]}],"onDrag":[{"__symbolic":"method"}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":168,"character":3},"arguments":["dragend",["$event"]]}]}],"registerDragHandle":[{"__symbolic":"method"}],"registerDragImage":[{"__symbolic":"method"}],"determineDragImage":[{"__symbolic":"method"}]}},"DndDropEvent":{"__symbolic":"interface"},"DndPlaceholderRefDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":32,"character":1},"arguments":[{"selector":"[dndPlaceholderRef]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":42}]}]}},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":41,"character":1},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":3}}]}],"dndDropzoneDisabledClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":64,"character":3}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":3}}]}],"dndPlaceholderRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":70,"character":3},"arguments":[{"__symbolic":"reference","name":"DndPlaceholderRefDirective"}]}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":96,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":37,"character":42},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":98,"character":32}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":190,"character":3},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"tryGetPlaceholder":[{"__symbolic":"method"}],"removePlaceholderFromDOM":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}]}},"DndHandleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":4,"character":1},"arguments":[{"selector":"[dndHandle]"}]}],"members":{"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":9,"character":3},"arguments":["attr.draggable"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DndDraggableDirective"}]}],"onDragEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":17,"character":3},"arguments":["dragstart",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":18,"character":3},"arguments":["dragend",["$event"]]}]}]}},"DropEffect":{"__symbolic":"interface"},"EffectAllowed":{"__symbolic":"interface"},"DndDragImageOffsetFunction":{"__symbolic":"interface"},"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4}],"declarations":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}],"exports":[{"__symbolic":"reference","name":"DndDraggableDirective"},{"__symbolic":"reference","name":"DndDropzoneDirective"},{"__symbolic":"reference","name":"DndHandleDirective"},{"__symbolic":"reference","name":"DndPlaceholderRefDirective"},{"__symbolic":"reference","name":"DndDragImageRefDirective"}]}]}],"members":{}}},"origins":{"DndDragImageRefDirective":"./dnd-draggable.directive","DndDraggableDirective":"./dnd-draggable.directive","DndDropEvent":"./dnd-dropzone.directive","DndPlaceholderRefDirective":"./dnd-dropzone.directive","DndDropzoneDirective":"./dnd-dropzone.directive","DndHandleDirective":"./dnd-handle.directive","DropEffect":"./dnd-types","EffectAllowed":"./dnd-types","DndDragImageOffsetFunction":"./dnd-utils","DndModule":"./dnd.module"},"importAs":"ngx-drag-drop"} |
@@ -1,1 +0,83 @@ | ||
| {"name":"ngx-drag-drop","version":"2.0.0-rc.4","description":"Angular directives using the native HTML Drag And Drop API","repository":{"type":"git","url":"https://github.com/reppners/ngx-drag-drop.git"},"homepage":"https://reppners.github.io/ngx-drag-drop/","author":{"name":"Stefan Steinhart","email":"stefanreppner@googlemail.com"},"license":"MIT","keywords":["angular","html","drag","drop","dragdrop","dragndrop","dnd","directive","touch"],"main":"bundles/ngx-drag-drop.umd.js","scripts":{"ng":"ng","start":"npm run build:lib && ng serve --disable-host-check --host 0.0.0.0","workaround":"rm -rf node_modules/ngx-drag-drop && cp -R dist node_modules/ngx-drag-drop","build:docs":"ng build --prod","build:lib":"ng-packagr -p ng-package.json && npm run workaround","publish:stable":"npm publish dist","publish:next":"npm publish dist --tag next","test":"ng test","lint":"ng lint","e2e":"ng e2e"},"devDependencies":{"@angular/animations":"^5.2.0","@angular/cdk":"^5.0.4","@angular/cli":"^1.6.4","@angular/common":"^5.2.0","@angular/compiler":"^5.2.0","@angular/compiler-cli":"^5.2.0","@angular/core":"^5.2.0","@angular/flex-layout":"5.0.0-beta.15","@angular/forms":"^5.2.0","@angular/http":"^5.2.0","@angular/material":"^5.0.4","@angular/platform-browser":"^5.2.0","@angular/platform-browser-dynamic":"^5.2.0","@angular/router":"^5.2.0","@types/jasmine":"2.5.38","@types/node":"~6.0.60","codelyzer":"^4.0.2","core-js":"^2.5.3","hammerjs":"^2.0.8","jasmine-core":"~2.5.2","jasmine-spec-reporter":"~3.2.0","karma":"~1.4.1","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^0.2.0","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","mobile-drag-drop":"^2.1.0","ng-packagr":"^1.6.0","protractor":"~5.1.0","run-sequence":"^1.2.2","rxjs":"^5.5.6","ts-node":"~2.0.0","tslint":"^5.9.1","typescript":"^2.6.2","zone.js":"^0.8.20"},"peerDependencies":{"@angular/core":"^4.0.0 || ^5.0.0 || ^6.0.0"},"engines":{"node":">=8.9.0"},"module":"ngx-drag-drop.es5.js","es2015":"ngx-drag-drop.js","typings":"ngx-drag-drop.d.ts","metadata":"ngx-drag-drop.metadata.json"} | ||
| { | ||
| "name": "ngx-drag-drop", | ||
| "version": "2.0.0-rc.5", | ||
| "description": "Angular directives using the native HTML Drag And Drop API", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/reppners/ngx-drag-drop.git" | ||
| }, | ||
| "homepage": "https://reppners.github.io/ngx-drag-drop/", | ||
| "author": { | ||
| "name": "Stefan Steinhart", | ||
| "email": "stefanreppner@googlemail.com" | ||
| }, | ||
| "license": "BSD-3-Clause", | ||
| "keywords": [ | ||
| "angular", | ||
| "html", | ||
| "drag", | ||
| "drop", | ||
| "dragdrop", | ||
| "dragndrop", | ||
| "dnd", | ||
| "directive", | ||
| "touch" | ||
| ], | ||
| "main": "bundles/ngx-drag-drop.umd.js", | ||
| "devDependencies": { | ||
| "@angular-devkit/build-angular": "~0.13.0", | ||
| "@angular/animations": "^7.2.7", | ||
| "@angular/cdk": "^7.3.3", | ||
| "@angular/cli": "^7.3.4", | ||
| "@angular/common": "^7.2.7", | ||
| "@angular/compiler": "^7.2.7", | ||
| "@angular/compiler-cli": "^7.2.7", | ||
| "@angular/core": "^7.2.7", | ||
| "@angular/flex-layout": "7.0.0-beta.23", | ||
| "@angular/forms": "^7.2.7", | ||
| "@angular/http": "^7.2.7", | ||
| "@angular/material": "^7.3.3", | ||
| "@angular/platform-browser": "^7.2.7", | ||
| "@angular/platform-browser-dynamic": "^7.2.7", | ||
| "@angular/router": "^7.2.7", | ||
| "@types/jasmine": "2.5.38", | ||
| "@types/node": "~6.0.60", | ||
| "codelyzer": "^4.5.0", | ||
| "core-js": "^2.5.3", | ||
| "hammerjs": "^2.0.8", | ||
| "jasmine-core": "~2.5.2", | ||
| "jasmine-spec-reporter": "~3.2.0", | ||
| "karma": "~1.4.1", | ||
| "karma-chrome-launcher": "~2.1.1", | ||
| "karma-cli": "~1.0.1", | ||
| "karma-coverage-istanbul-reporter": "^0.2.0", | ||
| "karma-jasmine": "~1.1.0", | ||
| "karma-jasmine-html-reporter": "^0.2.2", | ||
| "mobile-drag-drop": "^2.3.0-rc.1", | ||
| "ng-packagr": "^4.7.1", | ||
| "protractor": "~5.1.0", | ||
| "run-sequence": "^1.2.2", | ||
| "rxjs": "^6.4.0", | ||
| "ts-node": "~8.0.2", | ||
| "tsickle": "^0.34.3", | ||
| "tslint": "^5.13.1", | ||
| "typescript": "3.2.4", | ||
| "zone.js": "^0.8.29" | ||
| }, | ||
| "peerDependencies": {}, | ||
| "engines": { | ||
| "node": ">=8.9.0" | ||
| }, | ||
| "dependencies": { | ||
| "tslib": "^1.9.0" | ||
| }, | ||
| "module": "fesm5/ngx-drag-drop.js", | ||
| "es2015": "fesm2015/ngx-drag-drop.js", | ||
| "esm5": "esm5/ngx-drag-drop.js", | ||
| "esm2015": "esm2015/ngx-drag-drop.js", | ||
| "fesm5": "fesm5/ngx-drag-drop.js", | ||
| "fesm2015": "fesm2015/ngx-drag-drop.js", | ||
| "typings": "ngx-drag-drop.d.ts", | ||
| "metadata": "ngx-drag-drop.metadata.json", | ||
| "sideEffects": false | ||
| } |
| [](https://www.npmjs.com/package/ngx-drag-drop) | ||
| [](https://www.npmjs.com/package/ngx-drag-drop) | ||
| [](https://www.npmjs.com/package/ngx-drag-drop) | ||
| [](https://github.com/reppners/ngx-drag-drop/issues) | ||
@@ -213,2 +215,5 @@ [](https://twitter.com/intent/tweet?text=Angular%20drag%20and%20drop%20with%20ease:&url=https://github.com/reppners/ngx-drag-drop) | ||
| // emits on drag | ||
| readonly dndDrag: EventEmitter<DragEvent>; | ||
| // emits on drag end | ||
@@ -243,3 +248,4 @@ readonly dndEnd: EventEmitter<DragEvent>; | ||
| // the data set on the draggable | ||
| // the data set on the [dndDraggable] that started the drag | ||
| // for external drags use the event property which contains the original drop event as this will be undefined | ||
| data?: any; | ||
@@ -319,4 +325,13 @@ | ||
| ### Why? | ||
| ## Known issues | ||
| ### Firefox | ||
| * Beware that Firefox does not support dragging on `<button>` elements. | ||
| * `<button [dndDraggable]>` and `<button [dndHandler]>` won't work. | ||
| * See https://bugzilla.mozilla.org/show_bug.cgi?id=568313 | ||
| ## Why? | ||
| HTML Drag-And-Drop API implementations are not behaving the same way across browsers. | ||
@@ -328,3 +343,3 @@ | ||
| ### Maintenance | ||
| ## Maintenance | ||
@@ -350,1 +365,12 @@ This project was generated with [Angular CLI](https://github.com/angular/angular-cli). | ||
| * commit and push changes in `docs` to `master` | ||
| --- | ||
| <p align="center"> | ||
| Made with :heart: & | ||
| <a href="https://www.jetbrains.com/?from=ngx-drag-drop"> | ||
| <img align="center" alt="jetbrains" src="jetbrains.svg" width="120px" /> | ||
| </a> | ||
| & :coffee: | ||
| </p> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by52.85%
521056
- Number of package files
- increased by85.71%
39
- Lines of code
- increased by108.67%
5513
- Number of lines in readme file
- increased by7.51%
372
Worsened metrics
- Dev dependency count
- increased by5.56%
38
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedtslib@^1.9.0
- Removed@angular/core@6.1.10(transitive)
- Removedrxjs@6.6.7(transitive)
- Removedzone.js@0.8.29(transitive)