UNPKG

81.5 kBJavaScriptView Raw
1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('rxjs'), require('@angular/common'), require('@angular/core'), require('rxjs/operators')) :
3 typeof define === 'function' && define.amd ? define(['rxjs', '@angular/common', '@angular/core', 'rxjs/operators'], factory) :
4 (global = global || self, global['angular-draggable-droppable'] = factory(global.rxjs, global.ng.common, global.ng.core, global.rxjs.operators));
5}(this, (function (rxjs, common, core, operators) { 'use strict';
6
7 rxjs = rxjs && Object.prototype.hasOwnProperty.call(rxjs, 'default') ? rxjs['default'] : rxjs;
8 common = common && Object.prototype.hasOwnProperty.call(common, 'default') ? common['default'] : common;
9 core = core && Object.prototype.hasOwnProperty.call(core, 'default') ? core['default'] : core;
10 operators = operators && Object.prototype.hasOwnProperty.call(operators, 'default') ? operators['default'] : operators;
11
12 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
13
14 function unwrapExports (x) {
15 return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
16 }
17
18 function createCommonjsModule(fn, module) {
19 return module = { exports: {} }, fn(module, module.exports), module.exports;
20 }
21
22 function getDef(f, d) {
23 if (typeof f === 'undefined') {
24 return typeof d === 'undefined' ? f : d;
25 }
26
27 return f;
28 }
29 function boolean(func, def) {
30
31 func = getDef(func, def);
32
33 if (typeof func === 'function') {
34 return function f() {
35 var arguments$1 = arguments;
36
37 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
38 args[_key] = arguments$1[_key];
39 }
40
41 return !!func.apply(this, args);
42 };
43 }
44
45 return !!func ? function () {
46 return true;
47 } : function () {
48 return false;
49 };
50 }
51
52 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
53
54 /**
55 * Returns `true` if provided input is Element.
56 * @name isElement
57 * @param {*} [input]
58 * @returns {boolean}
59 */
60 var isElement$1 = function (input) {
61 return input != null && (typeof input === 'undefined' ? 'undefined' : _typeof(input)) === 'object' && input.nodeType === 1 && _typeof(input.style) === 'object' && _typeof(input.ownerDocument) === 'object';
62 };
63
64 function indexOfElement(elements, element){
65 element = resolveElement(element, true);
66 if(!isElement$1(element)) { return -1; }
67 for(var i=0; i<elements.length; i++){
68 if(elements[i] === element){
69 return i;
70 }
71 }
72 return -1;
73 }
74
75 function hasElement(elements, element){
76 return -1 !== indexOfElement(elements, element);
77 }
78
79 function pushElements(elements, toAdd){
80
81 for(var i=0; i<toAdd.length; i++){
82 if(!hasElement(elements, toAdd[i]))
83 { elements.push(toAdd[i]); }
84 }
85
86 return toAdd;
87 }
88
89 function addElements(elements){
90 var arguments$1 = arguments;
91
92 var toAdd = [], len = arguments.length - 1;
93 while ( len-- > 0 ) { toAdd[ len ] = arguments$1[ len + 1 ]; }
94
95 toAdd = toAdd.map(resolveElement);
96 return pushElements(elements, toAdd);
97 }
98
99 function removeElements(elements){
100 var arguments$1 = arguments;
101
102 var toRemove = [], len = arguments.length - 1;
103 while ( len-- > 0 ) { toRemove[ len ] = arguments$1[ len + 1 ]; }
104
105 return toRemove.map(resolveElement).reduce(function (last, e){
106
107 var index = indexOfElement(elements, e);
108
109 if(index !== -1)
110 { return last.concat(elements.splice(index, 1)); }
111 return last;
112 }, []);
113 }
114
115 function resolveElement(element, noThrow){
116 if(typeof element === 'string'){
117 try{
118 return document.querySelector(element);
119 }catch(e){
120 throw e;
121 }
122
123 }
124
125 if(!isElement$1(element) && !noThrow){
126 throw new TypeError((element + " is not a DOM element."));
127 }
128 return element;
129 }
130
131 function createPointCB(object, options) {
132
133 // A persistent object (as opposed to returned object) is used to save memory
134 // This is good to prevent layout thrashing, or for games, and such
135
136 // NOTE
137 // This uses IE fixes which should be OK to remove some day. :)
138 // Some speed will be gained by removal of these.
139
140 // pointCB should be saved in a variable on return
141 // This allows the usage of element.removeEventListener
142
143 options = options || {};
144
145 var allowUpdate = boolean(options.allowUpdate, true);
146
147 /*if(typeof options.allowUpdate === 'function'){
148 allowUpdate = options.allowUpdate;
149 }else{
150 allowUpdate = function(){return true;};
151 }*/
152
153 return function pointCB(event) {
154
155 event = event || window.event; // IE-ism
156 object.target = event.target || event.srcElement || event.originalTarget;
157 object.element = this;
158 object.type = event.type;
159
160 if (!allowUpdate(event)) {
161 return;
162 }
163
164 // Support touch
165 // http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644
166
167 if (event.targetTouches) {
168 object.x = event.targetTouches[0].clientX;
169 object.y = event.targetTouches[0].clientY;
170 object.pageX = event.targetTouches[0].pageX;
171 object.pageY = event.targetTouches[0].pageY;
172 object.screenX = event.targetTouches[0].screenX;
173 object.screenY = event.targetTouches[0].screenY;
174 } else {
175
176 // If pageX/Y aren't available and clientX/Y are,
177 // calculate pageX/Y - logic taken from jQuery.
178 // (This is to support old IE)
179 // NOTE Hopefully this can be removed soon.
180
181 if (event.pageX === null && event.clientX !== null) {
182 var eventDoc = event.target && event.target.ownerDocument || document;
183 var doc = eventDoc.documentElement;
184 var body = eventDoc.body;
185
186 object.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
187 object.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
188 } else {
189 object.pageX = event.pageX;
190 object.pageY = event.pageY;
191 }
192
193 // pageX, and pageY change with page scroll
194 // so we're not going to use those for x, and y.
195 // NOTE Most browsers also alias clientX/Y with x/y
196 // so that's something to consider down the road.
197
198 object.x = event.clientX;
199 object.y = event.clientY;
200
201 object.screenX = event.screenX;
202 object.screenY = event.screenY;
203 }
204
205 object.clientX = object.x;
206 object.clientY = object.y;
207 };
208
209 //NOTE Remember accessibility, Aria roles, and labels.
210 }
211
212 function createWindowRect() {
213 var props = {
214 top: { value: 0, enumerable: true },
215 left: { value: 0, enumerable: true },
216 right: { value: window.innerWidth, enumerable: true },
217 bottom: { value: window.innerHeight, enumerable: true },
218 width: { value: window.innerWidth, enumerable: true },
219 height: { value: window.innerHeight, enumerable: true },
220 x: { value: 0, enumerable: true },
221 y: { value: 0, enumerable: true }
222 };
223
224 if (Object.create) {
225 return Object.create({}, props);
226 } else {
227 var rect = {};
228 Object.defineProperties(rect, props);
229 return rect;
230 }
231 }
232
233 function getClientRect(el) {
234 if (el === window) {
235 return createWindowRect();
236 } else {
237 try {
238 var rect = el.getBoundingClientRect();
239 if (rect.x === undefined) {
240 rect.x = rect.left;
241 rect.y = rect.top;
242 }
243 return rect;
244 } catch (e) {
245 throw new TypeError("Can't call getBoundingClientRect on " + el);
246 }
247 }
248 }
249
250 function pointInside(point, el) {
251 var rect = getClientRect(el);
252 return point.y > rect.top && point.y < rect.bottom && point.x > rect.left && point.x < rect.right;
253 }
254
255 var objectCreate = void 0;
256 if (typeof Object.create != 'function') {
257 objectCreate = function (undefined$1) {
258 var Temp = function Temp() {};
259 return function (prototype, propertiesObject) {
260 if (prototype !== Object(prototype) && prototype !== null) {
261 throw TypeError('Argument must be an object, or null');
262 }
263 Temp.prototype = prototype || {};
264 var result = new Temp();
265 Temp.prototype = null;
266 if (propertiesObject !== undefined$1) {
267 Object.defineProperties(result, propertiesObject);
268 }
269
270 // to imitate the case of Object.create(null)
271 if (prototype === null) {
272 result.__proto__ = null;
273 }
274 return result;
275 };
276 }();
277 } else {
278 objectCreate = Object.create;
279 }
280
281 var objectCreate$1 = objectCreate;
282
283 var mouseEventProps = ['altKey', 'button', 'buttons', 'clientX', 'clientY', 'ctrlKey', 'metaKey', 'movementX', 'movementY', 'offsetX', 'offsetY', 'pageX', 'pageY', 'region', 'relatedTarget', 'screenX', 'screenY', 'shiftKey', 'which', 'x', 'y'];
284
285 function createDispatcher(element) {
286
287 var defaultSettings = {
288 screenX: 0,
289 screenY: 0,
290 clientX: 0,
291 clientY: 0,
292 ctrlKey: false,
293 shiftKey: false,
294 altKey: false,
295 metaKey: false,
296 button: 0,
297 buttons: 1,
298 relatedTarget: null,
299 region: null
300 };
301
302 if (element !== undefined) {
303 element.addEventListener('mousemove', onMove);
304 }
305
306 function onMove(e) {
307 for (var i = 0; i < mouseEventProps.length; i++) {
308 defaultSettings[mouseEventProps[i]] = e[mouseEventProps[i]];
309 }
310 }
311
312 var dispatch = function () {
313 if (MouseEvent) {
314 return function m1(element, initMove, data) {
315 var evt = new MouseEvent('mousemove', createMoveInit(defaultSettings, initMove));
316
317 //evt.dispatched = 'mousemove';
318 setSpecial(evt, data);
319
320 return element.dispatchEvent(evt);
321 };
322 } else if (typeof document.createEvent === 'function') {
323 return function m2(element, initMove, data) {
324 var settings = createMoveInit(defaultSettings, initMove);
325 var evt = document.createEvent('MouseEvents');
326
327 evt.initMouseEvent("mousemove", true, //can bubble
328 true, //cancelable
329 window, //view
330 0, //detail
331 settings.screenX, //0, //screenX
332 settings.screenY, //0, //screenY
333 settings.clientX, //80, //clientX
334 settings.clientY, //20, //clientY
335 settings.ctrlKey, //false, //ctrlKey
336 settings.altKey, //false, //altKey
337 settings.shiftKey, //false, //shiftKey
338 settings.metaKey, //false, //metaKey
339 settings.button, //0, //button
340 settings.relatedTarget //null //relatedTarget
341 );
342
343 //evt.dispatched = 'mousemove';
344 setSpecial(evt, data);
345
346 return element.dispatchEvent(evt);
347 };
348 } else if (typeof document.createEventObject === 'function') {
349 return function m3(element, initMove, data) {
350 var evt = document.createEventObject();
351 var settings = createMoveInit(defaultSettings, initMove);
352 for (var name in settings) {
353 evt[name] = settings[name];
354 }
355
356 //evt.dispatched = 'mousemove';
357 setSpecial(evt, data);
358
359 return element.dispatchEvent(evt);
360 };
361 }
362 }();
363
364 function destroy() {
365 if (element) { element.removeEventListener('mousemove', onMove, false); }
366 defaultSettings = null;
367 }
368
369 return {
370 destroy: destroy,
371 dispatch: dispatch
372 };
373 }
374
375 function createMoveInit(defaultSettings, initMove) {
376 initMove = initMove || {};
377 var settings = objectCreate$1(defaultSettings);
378 for (var i = 0; i < mouseEventProps.length; i++) {
379 if (initMove[mouseEventProps[i]] !== undefined) { settings[mouseEventProps[i]] = initMove[mouseEventProps[i]]; }
380 }
381
382 return settings;
383 }
384
385 function setSpecial(e, data) {
386 console.log('data ', data);
387 e.data = data || {};
388 e.dispatched = 'mousemove';
389 }
390
391 var prefix = [ 'webkit', 'moz', 'ms', 'o' ];
392
393 var requestFrame = (function () {
394
395 if (typeof window === "undefined") {
396 return function () {};
397 }
398
399 for ( var i = 0, limit = prefix.length ; i < limit && ! window.requestAnimationFrame ; ++i ) {
400 window.requestAnimationFrame = window[ prefix[ i ] + 'RequestAnimationFrame' ];
401 }
402
403 if ( ! window.requestAnimationFrame ) {
404 var lastTime = 0;
405
406 window.requestAnimationFrame = function (callback) {
407 var now = new Date().getTime();
408 var ttc = Math.max( 0, 16 - now - lastTime );
409 var timer = window.setTimeout( function () { return callback( now + ttc ); }, ttc );
410
411 lastTime = now + ttc;
412
413 return timer;
414 };
415 }
416
417 return window.requestAnimationFrame.bind( window );
418 })();
419
420 var cancelFrame = (function () {
421
422 if (typeof window === "undefined") {
423 return function () {};
424 }
425
426 for ( var i = 0, limit = prefix.length ; i < limit && ! window.cancelAnimationFrame ; ++i ) {
427 window.cancelAnimationFrame = window[ prefix[ i ] + 'CancelAnimationFrame' ] || window[ prefix[ i ] + 'CancelRequestAnimationFrame' ];
428 }
429
430 if ( ! window.cancelAnimationFrame ) {
431 window.cancelAnimationFrame = function (timer) {
432 window.clearTimeout( timer );
433 };
434 }
435
436 return window.cancelAnimationFrame.bind( window );
437 })();
438
439 function AutoScroller(elements, options){
440 if ( options === void 0 ) options = {};
441
442 var self = this;
443 var maxSpeed = 4, scrolling = false;
444
445 if (typeof options.margin !== 'object') {
446 var margin = options.margin || -1;
447
448 this.margin = {
449 left: margin,
450 right: margin,
451 top: margin,
452 bottom: margin
453 };
454 } else {
455 this.margin = options.margin;
456 }
457
458 //this.scrolling = false;
459 this.scrollWhenOutside = options.scrollWhenOutside || false;
460
461 var point = {},
462 pointCB = createPointCB(point),
463 dispatcher = createDispatcher(),
464 down = false;
465
466 window.addEventListener('mousemove', pointCB, false);
467 window.addEventListener('touchmove', pointCB, false);
468
469 if(!isNaN(options.maxSpeed)){
470 maxSpeed = options.maxSpeed;
471 }
472
473 if (typeof maxSpeed !== 'object') {
474 maxSpeed = {
475 left: maxSpeed,
476 right: maxSpeed,
477 top: maxSpeed,
478 bottom: maxSpeed
479 };
480 }
481
482 this.autoScroll = boolean(options.autoScroll);
483 this.syncMove = boolean(options.syncMove, false);
484
485 this.destroy = function(forceCleanAnimation) {
486 window.removeEventListener('mousemove', pointCB, false);
487 window.removeEventListener('touchmove', pointCB, false);
488 window.removeEventListener('mousedown', onDown, false);
489 window.removeEventListener('touchstart', onDown, false);
490 window.removeEventListener('mouseup', onUp, false);
491 window.removeEventListener('touchend', onUp, false);
492 window.removeEventListener('pointerup', onUp, false);
493 window.removeEventListener('mouseleave', onMouseOut, false);
494
495 window.removeEventListener('mousemove', onMove, false);
496 window.removeEventListener('touchmove', onMove, false);
497
498 window.removeEventListener('scroll', setScroll, true);
499 elements = [];
500 if(forceCleanAnimation){
501 cleanAnimation();
502 }
503 };
504
505 this.add = function(){
506 var element = [], len = arguments.length;
507 while ( len-- ) element[ len ] = arguments[ len ];
508
509 addElements.apply(void 0, [ elements ].concat( element ));
510 return this;
511 };
512
513 this.remove = function(){
514 var element = [], len = arguments.length;
515 while ( len-- ) element[ len ] = arguments[ len ];
516
517 return removeElements.apply(void 0, [ elements ].concat( element ));
518 };
519
520 var hasWindow = null, windowAnimationFrame;
521
522 if(Object.prototype.toString.call(elements) !== '[object Array]'){
523 elements = [elements];
524 }
525
526 (function(temp){
527 elements = [];
528 temp.forEach(function(element){
529 if(element === window){
530 hasWindow = window;
531 }else {
532 self.add(element);
533 }
534 });
535 }(elements));
536
537 Object.defineProperties(this, {
538 down: {
539 get: function(){ return down; }
540 },
541 maxSpeed: {
542 get: function(){ return maxSpeed; }
543 },
544 point: {
545 get: function(){ return point; }
546 },
547 scrolling: {
548 get: function(){ return scrolling; }
549 }
550 });
551
552 var current = null, animationFrame;
553
554 window.addEventListener('mousedown', onDown, false);
555 window.addEventListener('touchstart', onDown, false);
556 window.addEventListener('mouseup', onUp, false);
557 window.addEventListener('touchend', onUp, false);
558
559 /*
560 IE does not trigger mouseup event when scrolling.
561 It is a known issue that Microsoft won't fix.
562 https://connect.microsoft.com/IE/feedback/details/783058/scrollbar-trigger-mousedown-but-not-mouseup
563 IE supports pointer events instead
564 */
565 window.addEventListener('pointerup', onUp, false);
566
567 window.addEventListener('mousemove', onMove, false);
568 window.addEventListener('touchmove', onMove, false);
569
570 window.addEventListener('mouseleave', onMouseOut, false);
571
572 window.addEventListener('scroll', setScroll, true);
573
574 function setScroll(e){
575
576 for(var i=0; i<elements.length; i++){
577 if(elements[i] === e.target){
578 scrolling = true;
579 break;
580 }
581 }
582
583 if(scrolling){
584 requestFrame(function (){ return scrolling = false; });
585 }
586 }
587
588 function onDown(){
589 down = true;
590 }
591
592 function onUp(){
593 down = false;
594 cleanAnimation();
595 }
596 function cleanAnimation(){
597 cancelFrame(animationFrame);
598 cancelFrame(windowAnimationFrame);
599 }
600 function onMouseOut(){
601 down = false;
602 }
603
604 function getTarget(target){
605 if(!target){
606 return null;
607 }
608
609 if(current === target){
610 return target;
611 }
612
613 if(hasElement(elements, target)){
614 return target;
615 }
616
617 while(target = target.parentNode){
618 if(hasElement(elements, target)){
619 return target;
620 }
621 }
622
623 return null;
624 }
625
626 function getElementUnderPoint(){
627 var underPoint = null;
628
629 for(var i=0; i<elements.length; i++){
630 if(inside(point, elements[i])){
631 underPoint = elements[i];
632 }
633 }
634
635 return underPoint;
636 }
637
638
639 function onMove(event){
640
641 if(!self.autoScroll()) { return; }
642
643 if(event['dispatched']){ return; }
644
645 var target = event.target, body = document.body;
646
647 if(current && !inside(point, current)){
648 if(!self.scrollWhenOutside){
649 current = null;
650 }
651 }
652
653 if(target && target.parentNode === body){
654 //The special condition to improve speed.
655 target = getElementUnderPoint();
656 }else {
657 target = getTarget(target);
658
659 if(!target){
660 target = getElementUnderPoint();
661 }
662 }
663
664
665 if(target && target !== current){
666 current = target;
667 }
668
669 if(hasWindow){
670 cancelFrame(windowAnimationFrame);
671 windowAnimationFrame = requestFrame(scrollWindow);
672 }
673
674
675 if(!current){
676 return;
677 }
678
679 cancelFrame(animationFrame);
680 animationFrame = requestFrame(scrollTick);
681 }
682
683 function scrollWindow(){
684 autoScroll(hasWindow);
685
686 cancelFrame(windowAnimationFrame);
687 windowAnimationFrame = requestFrame(scrollWindow);
688 }
689
690 function scrollTick(){
691
692 if(!current){
693 return;
694 }
695
696 autoScroll(current);
697
698 cancelFrame(animationFrame);
699 animationFrame = requestFrame(scrollTick);
700
701 }
702
703
704 function autoScroll(el){
705 var rect = getClientRect(el), scrollx, scrolly;
706
707 if(point.x < rect.left + self.margin.left){
708 scrollx = Math.floor(
709 Math.max(-1, (point.x - rect.left) / self.margin.left - 1) * self.maxSpeed.left
710 );
711 }else if(point.x > rect.right - self.margin.right){
712 scrollx = Math.ceil(
713 Math.min(1, (point.x - rect.right) / self.margin.right + 1) * self.maxSpeed.right
714 );
715 }else {
716 scrollx = 0;
717 }
718
719 if(point.y < rect.top + self.margin.top){
720 scrolly = Math.floor(
721 Math.max(-1, (point.y - rect.top) / self.margin.top - 1) * self.maxSpeed.top
722 );
723 }else if(point.y > rect.bottom - self.margin.bottom){
724 scrolly = Math.ceil(
725 Math.min(1, (point.y - rect.bottom) / self.margin.bottom + 1) * self.maxSpeed.bottom
726 );
727 }else {
728 scrolly = 0;
729 }
730
731 if(self.syncMove()){
732 /*
733 Notes about mousemove event dispatch.
734 screen(X/Y) should need to be updated.
735 Some other properties might need to be set.
736 Keep the syncMove option default false until all inconsistencies are taken care of.
737 */
738 dispatcher.dispatch(el, {
739 pageX: point.pageX + scrollx,
740 pageY: point.pageY + scrolly,
741 clientX: point.x + scrollx,
742 clientY: point.y + scrolly
743 });
744 }
745
746 setTimeout(function (){
747
748 if(scrolly){
749 scrollY(el, scrolly);
750 }
751
752 if(scrollx){
753 scrollX(el, scrollx);
754 }
755
756 });
757 }
758
759 function scrollY(el, amount){
760 if(el === window){
761 window.scrollTo(el.pageXOffset, el.pageYOffset + amount);
762 }else {
763 el.scrollTop += amount;
764 }
765 }
766
767 function scrollX(el, amount){
768 if(el === window){
769 window.scrollTo(el.pageXOffset + amount, el.pageYOffset);
770 }else {
771 el.scrollLeft += amount;
772 }
773 }
774
775 }
776
777 function AutoScrollerFactory(element, options){
778 return new AutoScroller(element, options);
779 }
780
781 function inside(point, el, rect){
782 if(!rect){
783 return pointInside(point, el);
784 }else {
785 return (point.y > rect.top && point.y < rect.bottom &&
786 point.x > rect.left && point.x < rect.right);
787 }
788 }
789
790 var angularDraggableDroppable_umd = createCommonjsModule(function (module, exports) {
791 (function (global, factory) {
792 factory(exports, rxjs, common, AutoScrollerFactory, core, operators) ;
793 }(commonjsGlobal, (function (exports,rxjs,common,autoScroll,i0,operators) {
794 autoScroll = autoScroll && autoScroll.hasOwnProperty('default') ? autoScroll['default'] : autoScroll;
795
796 /*! *****************************************************************************
797 Copyright (c) Microsoft Corporation. All rights reserved.
798 Licensed under the Apache License, Version 2.0 (the "License"); you may not use
799 this file except in compliance with the License. You may obtain a copy of the
800 License at http://www.apache.org/licenses/LICENSE-2.0
801
802 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
803 KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
804 WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
805 MERCHANTABLITY OR NON-INFRINGEMENT.
806
807 See the Apache Version 2.0 License for specific language governing permissions
808 and limitations under the License.
809 ***************************************************************************** */
810 var __assign = function () {
811 __assign = Object.assign || function __assign(t) {
812 for (var s, i = 1, n = arguments.length; i < n; i++) {
813 s = arguments[i];
814 for (var p in s)
815 if (Object.prototype.hasOwnProperty.call(s, p))
816 t[p] = s[p];
817 }
818 return t;
819 };
820 return __assign.apply(this, arguments);
821 };
822 function __read(o, n) {
823 var m = typeof Symbol === "function" && o[Symbol.iterator];
824 if (!m)
825 return o;
826 var i = m.call(o), r, ar = [], e;
827 try {
828 while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
829 ar.push(r.value);
830 }
831 catch (error) {
832 e = { error: error };
833 }
834 finally {
835 try {
836 if (r && !r.done && (m = i["return"]))
837 m.call(i);
838 }
839 finally {
840 if (e)
841 throw e.error;
842 }
843 }
844 return ar;
845 }
846
847 /**
848 * @fileoverview added by tsickle
849 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
850 */
851 var DraggableHelper = /** @class */ (function () {
852 function DraggableHelper() {
853 this.currentDrag = new rxjs.Subject();
854 }
855 DraggableHelper.decorators = [
856 { type: i0.Injectable, args: [{
857 providedIn: 'root',
858 },] }
859 ];
860 /** @nocollapse */ DraggableHelper.ngInjectableDef = i0.defineInjectable({ factory: function DraggableHelper_Factory() { return new DraggableHelper(); }, token: DraggableHelper, providedIn: "root" });
861 return DraggableHelper;
862 }());
863
864 /**
865 * @fileoverview added by tsickle
866 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
867 */
868 /**
869 * If the window isn't scrollable, then place this on the scrollable container that draggable elements are inside. e.g.
870 * ```html
871 * <div style="overflow: scroll" mwlDraggableScrollContainer>
872 * <div mwlDraggable>Drag me!</div>
873 * </div>
874 * ```
875 */
876 var DraggableScrollContainerDirective = /** @class */ (function () {
877 /**
878 * @hidden
879 */
880 function DraggableScrollContainerDirective(elementRef) {
881 this.elementRef = elementRef;
882 /**
883 * Trigger the DragStart after a long touch in scrollable container when true
884 * @deprecated will be removed in v5 (use [touchStartLongPress]="{delay: 300, delta: 30}" on the mwlDraggable element instead)
885 */
886 this.activeLongPressDrag = false;
887 /**
888 * Configuration of a long touch
889 * Duration in ms of a long touch before activating DragStart
890 * Delta of the
891 * @deprecated will be removed in v5 (use [touchStartLongPress]="{delay: 300, delta: 30}" on the mwlDraggable element instead)
892 */
893 this.longPressConfig = { duration: 300, delta: 30 };
894 }
895 DraggableScrollContainerDirective.decorators = [
896 { type: i0.Directive, args: [{
897 selector: '[mwlDraggableScrollContainer]',
898 },] }
899 ];
900 /** @nocollapse */
901 DraggableScrollContainerDirective.ctorParameters = function () {
902 return [
903 { type: i0.ElementRef }
904 ];
905 };
906 DraggableScrollContainerDirective.propDecorators = {
907 activeLongPressDrag: [{ type: i0.Input }],
908 longPressConfig: [{ type: i0.Input }]
909 };
910 return DraggableScrollContainerDirective;
911 }());
912
913 /**
914 * @fileoverview added by tsickle
915 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
916 */
917 /**
918 * @param {?} renderer
919 * @param {?} element
920 * @param {?} classToAdd
921 * @return {?}
922 */
923 function addClass(renderer, element, classToAdd) {
924 if (classToAdd) {
925 classToAdd
926 .split(' ')
927 .forEach(( /**
928 * @param {?} className
929 * @return {?}
930 */function (className) {
931 return renderer.addClass(element.nativeElement, className);
932 }));
933 }
934 }
935 /**
936 * @param {?} renderer
937 * @param {?} element
938 * @param {?} classToRemove
939 * @return {?}
940 */
941 function removeClass(renderer, element, classToRemove) {
942 if (classToRemove) {
943 classToRemove
944 .split(' ')
945 .forEach(( /**
946 * @param {?} className
947 * @return {?}
948 */function (className) {
949 return renderer.removeClass(element.nativeElement, className);
950 }));
951 }
952 }
953
954 /**
955 * @fileoverview added by tsickle
956 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
957 */
958 var DraggableDirective = /** @class */ (function () {
959 /**
960 * @hidden
961 */
962 function DraggableDirective(element, renderer, draggableHelper, zone, vcr, scrollContainer, document) {
963 this.element = element;
964 this.renderer = renderer;
965 this.draggableHelper = draggableHelper;
966 this.zone = zone;
967 this.vcr = vcr;
968 this.scrollContainer = scrollContainer;
969 this.document = document;
970 /**
971 * The axis along which the element is draggable
972 */
973 this.dragAxis = { x: true, y: true };
974 /**
975 * Snap all drags to an x / y grid
976 */
977 this.dragSnapGrid = {};
978 /**
979 * Show a ghost element that shows the drag when dragging
980 */
981 this.ghostDragEnabled = true;
982 /**
983 * Show the original element when ghostDragEnabled is true
984 */
985 this.showOriginalElementWhileDragging = false;
986 /**
987 * The cursor to use when hovering over a draggable element
988 */
989 this.dragCursor = '';
990 /*
991 * Options used to control the behaviour of auto scrolling: https://www.npmjs.com/package/dom-autoscroller
992 */
993 this.autoScroll = {
994 margin: 20,
995 };
996 /**
997 * Called when the element can be dragged along one axis and has the mouse or pointer device pressed on it
998 */
999 this.dragPointerDown = new i0.EventEmitter();
1000 /**
1001 * Called when the element has started to be dragged.
1002 * Only called after at least one mouse or touch move event.
1003 * If you call $event.cancelDrag$.emit() it will cancel the current drag
1004 */
1005 this.dragStart = new i0.EventEmitter();
1006 /**
1007 * Called after the ghost element has been created
1008 */
1009 this.ghostElementCreated = new i0.EventEmitter();
1010 /**
1011 * Called when the element is being dragged
1012 */
1013 this.dragging = new i0.EventEmitter();
1014 /**
1015 * Called after the element is dragged
1016 */
1017 this.dragEnd = new i0.EventEmitter();
1018 /**
1019 * @hidden
1020 */
1021 this.pointerDown$ = new rxjs.Subject();
1022 /**
1023 * @hidden
1024 */
1025 this.pointerMove$ = new rxjs.Subject();
1026 /**
1027 * @hidden
1028 */
1029 this.pointerUp$ = new rxjs.Subject();
1030 this.eventListenerSubscriptions = {};
1031 this.destroy$ = new rxjs.Subject();
1032 this.timeLongPress = { timerBegin: 0, timerEnd: 0 };
1033 }
1034 /**
1035 * @return {?}
1036 */
1037 DraggableDirective.prototype.ngOnInit = /**
1038 * @return {?}
1039 */
1040 function () {
1041 var _this = this;
1042 this.checkEventListeners();
1043 /** @type {?} */
1044 var pointerDragged$ = this.pointerDown$.pipe(operators.filter(( /**
1045 * @return {?}
1046 */function () { return _this.canDrag(); })), operators.mergeMap(( /**
1047 * @param {?} pointerDownEvent
1048 * @return {?}
1049 */function (pointerDownEvent) {
1050 // fix for https://github.com/mattlewis92/angular-draggable-droppable/issues/61
1051 // stop mouse events propagating up the chain
1052 if (pointerDownEvent.event.stopPropagation && !_this.scrollContainer) {
1053 pointerDownEvent.event.stopPropagation();
1054 }
1055 // hack to prevent text getting selected in safari while dragging
1056 /** @type {?} */
1057 var globalDragStyle = _this.renderer.createElement('style');
1058 _this.renderer.setAttribute(globalDragStyle, 'type', 'text/css');
1059 _this.renderer.appendChild(globalDragStyle, _this.renderer.createText("\n body * {\n -moz-user-select: none;\n -ms-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n }\n "));
1060 requestAnimationFrame(( /**
1061 * @return {?}
1062 */function () {
1063 _this.document.head.appendChild(globalDragStyle);
1064 }));
1065 /** @type {?} */
1066 var startScrollPosition = _this.getScrollPosition();
1067 /** @type {?} */
1068 var scrollContainerScroll$ = new rxjs.Observable(( /**
1069 * @param {?} observer
1070 * @return {?}
1071 */function (observer) {
1072 /** @type {?} */
1073 var scrollContainer = _this.scrollContainer
1074 ? _this.scrollContainer.elementRef.nativeElement
1075 : 'window';
1076 return _this.renderer.listen(scrollContainer, 'scroll', ( /**
1077 * @param {?} e
1078 * @return {?}
1079 */function (e) {
1080 return observer.next(e);
1081 }));
1082 })).pipe(operators.startWith(startScrollPosition), operators.map(( /**
1083 * @return {?}
1084 */function () { return _this.getScrollPosition(); })));
1085 /** @type {?} */
1086 var currentDrag$ = new rxjs.Subject();
1087 /** @type {?} */
1088 var cancelDrag$ = new rxjs.ReplaySubject();
1089 _this.zone.run(( /**
1090 * @return {?}
1091 */function () {
1092 _this.dragPointerDown.next({ x: 0, y: 0 });
1093 }));
1094 /** @type {?} */
1095 var dragComplete$ = rxjs.merge(_this.pointerUp$, _this.pointerDown$, cancelDrag$, _this.destroy$).pipe(operators.share());
1096 /** @type {?} */
1097 var pointerMove = rxjs.combineLatest([
1098 _this.pointerMove$,
1099 scrollContainerScroll$,
1100 ]).pipe(operators.map(( /**
1101 * @param {?} __0
1102 * @return {?}
1103 */function (_a) {
1104 var _b = __read(_a, 2), pointerMoveEvent = _b[0], scroll = _b[1];
1105 return {
1106 currentDrag$: currentDrag$,
1107 transformX: pointerMoveEvent.clientX - pointerDownEvent.clientX,
1108 transformY: pointerMoveEvent.clientY - pointerDownEvent.clientY,
1109 clientX: pointerMoveEvent.clientX,
1110 clientY: pointerMoveEvent.clientY,
1111 scrollLeft: scroll.left,
1112 scrollTop: scroll.top,
1113 target: pointerMoveEvent.event.target,
1114 };
1115 })), operators.map(( /**
1116 * @param {?} moveData
1117 * @return {?}
1118 */function (moveData) {
1119 if (_this.dragSnapGrid.x) {
1120 moveData.transformX =
1121 Math.round(moveData.transformX / _this.dragSnapGrid.x) *
1122 _this.dragSnapGrid.x;
1123 }
1124 if (_this.dragSnapGrid.y) {
1125 moveData.transformY =
1126 Math.round(moveData.transformY / _this.dragSnapGrid.y) *
1127 _this.dragSnapGrid.y;
1128 }
1129 return moveData;
1130 })), operators.map(( /**
1131 * @param {?} moveData
1132 * @return {?}
1133 */function (moveData) {
1134 if (!_this.dragAxis.x) {
1135 moveData.transformX = 0;
1136 }
1137 if (!_this.dragAxis.y) {
1138 moveData.transformY = 0;
1139 }
1140 return moveData;
1141 })), operators.map(( /**
1142 * @param {?} moveData
1143 * @return {?}
1144 */function (moveData) {
1145 /** @type {?} */
1146 var scrollX = moveData.scrollLeft - startScrollPosition.left;
1147 /** @type {?} */
1148 var scrollY = moveData.scrollTop - startScrollPosition.top;
1149 return __assign({}, moveData, { x: moveData.transformX + scrollX, y: moveData.transformY + scrollY });
1150 })), operators.filter(( /**
1151 * @param {?} __0
1152 * @return {?}
1153 */function (_a) {
1154 var x = _a.x, y = _a.y, transformX = _a.transformX, transformY = _a.transformY;
1155 return !_this.validateDrag ||
1156 _this.validateDrag({
1157 x: x,
1158 y: y,
1159 transform: { x: transformX, y: transformY },
1160 });
1161 })), operators.takeUntil(dragComplete$), operators.share());
1162 /** @type {?} */
1163 var dragStarted$ = pointerMove.pipe(operators.take(1), operators.share());
1164 /** @type {?} */
1165 var dragEnded$ = pointerMove.pipe(operators.takeLast(1), operators.share());
1166 dragStarted$.subscribe(( /**
1167 * @param {?} __0
1168 * @return {?}
1169 */function (_a) {
1170 var clientX = _a.clientX, clientY = _a.clientY, x = _a.x, y = _a.y;
1171 _this.zone.run(( /**
1172 * @return {?}
1173 */function () {
1174 _this.dragStart.next({ cancelDrag$: cancelDrag$ });
1175 }));
1176 _this.scroller = autoScroll([
1177 _this.scrollContainer
1178 ? _this.scrollContainer.elementRef.nativeElement
1179 : _this.document.defaultView,
1180 ], __assign({}, _this.autoScroll, { autoScroll: /**
1181 * @return {?}
1182 */ function () {
1183 return true;
1184 } }));
1185 addClass(_this.renderer, _this.element, _this.dragActiveClass);
1186 if (_this.ghostDragEnabled) {
1187 /** @type {?} */
1188 var rect = _this.element.nativeElement.getBoundingClientRect();
1189 /** @type {?} */
1190 var clone_1 = ( /** @type {?} */(_this.element.nativeElement.cloneNode(true)));
1191 if (!_this.showOriginalElementWhileDragging) {
1192 _this.renderer.setStyle(_this.element.nativeElement, 'visibility', 'hidden');
1193 }
1194 if (_this.ghostElementAppendTo) {
1195 _this.ghostElementAppendTo.appendChild(clone_1);
1196 }
1197 else {
1198 ( /** @type {?} */(_this.element.nativeElement.parentNode)).insertBefore(clone_1, _this.element.nativeElement.nextSibling);
1199 }
1200 _this.ghostElement = clone_1;
1201 _this.document.body.style.cursor = _this.dragCursor;
1202 _this.setElementStyles(clone_1, {
1203 position: 'fixed',
1204 top: rect.top + "px",
1205 left: rect.left + "px",
1206 width: rect.width + "px",
1207 height: rect.height + "px",
1208 cursor: _this.dragCursor,
1209 margin: '0',
1210 willChange: 'transform',
1211 pointerEvents: 'none',
1212 });
1213 if (_this.ghostElementTemplate) {
1214 /** @type {?} */
1215 var viewRef_1 = _this.vcr.createEmbeddedView(_this.ghostElementTemplate);
1216 clone_1.innerHTML = '';
1217 viewRef_1.rootNodes
1218 .filter(( /**
1219 * @param {?} node
1220 * @return {?}
1221 */function (node) { return node instanceof Node; }))
1222 .forEach(( /**
1223 * @param {?} node
1224 * @return {?}
1225 */function (node) {
1226 clone_1.appendChild(node);
1227 }));
1228 dragEnded$.subscribe(( /**
1229 * @return {?}
1230 */function () {
1231 _this.vcr.remove(_this.vcr.indexOf(viewRef_1));
1232 }));
1233 }
1234 _this.zone.run(( /**
1235 * @return {?}
1236 */function () {
1237 _this.ghostElementCreated.emit({
1238 clientX: clientX - x,
1239 clientY: clientY - y,
1240 element: clone_1,
1241 });
1242 }));
1243 dragEnded$.subscribe(( /**
1244 * @return {?}
1245 */function () {
1246 ( /** @type {?} */(clone_1.parentElement)).removeChild(clone_1);
1247 _this.ghostElement = null;
1248 _this.renderer.setStyle(_this.element.nativeElement, 'visibility', '');
1249 }));
1250 }
1251 _this.draggableHelper.currentDrag.next(currentDrag$);
1252 }));
1253 dragEnded$
1254 .pipe(operators.mergeMap(( /**
1255 * @param {?} dragEndData
1256 * @return {?}
1257 */function (dragEndData) {
1258 /** @type {?} */
1259 var dragEndData$ = cancelDrag$.pipe(operators.count(), operators.take(1), operators.map(( /**
1260 * @param {?} calledCount
1261 * @return {?}
1262 */function (calledCount) { return (__assign({}, dragEndData, { dragCancelled: calledCount > 0 })); })));
1263 cancelDrag$.complete();
1264 return dragEndData$;
1265 })))
1266 .subscribe(( /**
1267 * @param {?} __0
1268 * @return {?}
1269 */function (_a) {
1270 var x = _a.x, y = _a.y, dragCancelled = _a.dragCancelled;
1271 _this.scroller.destroy();
1272 _this.zone.run(( /**
1273 * @return {?}
1274 */function () {
1275 _this.dragEnd.next({ x: x, y: y, dragCancelled: dragCancelled });
1276 }));
1277 removeClass(_this.renderer, _this.element, _this.dragActiveClass);
1278 currentDrag$.complete();
1279 }));
1280 rxjs.merge(dragComplete$, dragEnded$)
1281 .pipe(operators.take(1))
1282 .subscribe(( /**
1283 * @return {?}
1284 */function () {
1285 requestAnimationFrame(( /**
1286 * @return {?}
1287 */function () {
1288 _this.document.head.removeChild(globalDragStyle);
1289 }));
1290 }));
1291 return pointerMove;
1292 })), operators.share());
1293 rxjs.merge(pointerDragged$.pipe(operators.take(1), operators.map(( /**
1294 * @param {?} value
1295 * @return {?}
1296 */function (value) { return [, value]; }))), pointerDragged$.pipe(operators.pairwise()))
1297 .pipe(operators.filter(( /**
1298 * @param {?} __0
1299 * @return {?}
1300 */function (_a) {
1301 var _b = __read(_a, 2), previous = _b[0], next = _b[1];
1302 if (!previous) {
1303 return true;
1304 }
1305 return previous.x !== next.x || previous.y !== next.y;
1306 })), operators.map(( /**
1307 * @param {?} __0
1308 * @return {?}
1309 */function (_a) {
1310 var _b = __read(_a, 2), previous = _b[0], next = _b[1];
1311 return next;
1312 })))
1313 .subscribe(( /**
1314 * @param {?} __0
1315 * @return {?}
1316 */function (_a) {
1317 var x = _a.x, y = _a.y, currentDrag$ = _a.currentDrag$, clientX = _a.clientX, clientY = _a.clientY, transformX = _a.transformX, transformY = _a.transformY, target = _a.target;
1318 _this.zone.run(( /**
1319 * @return {?}
1320 */function () {
1321 _this.dragging.next({ x: x, y: y });
1322 }));
1323 requestAnimationFrame(( /**
1324 * @return {?}
1325 */function () {
1326 if (_this.ghostElement) {
1327 /** @type {?} */
1328 var transform = "translate3d(" + transformX + "px, " + transformY + "px, 0px)";
1329 _this.setElementStyles(_this.ghostElement, {
1330 transform: transform,
1331 '-webkit-transform': transform,
1332 '-ms-transform': transform,
1333 '-moz-transform': transform,
1334 '-o-transform': transform,
1335 });
1336 }
1337 }));
1338 currentDrag$.next({
1339 clientX: clientX,
1340 clientY: clientY,
1341 dropData: _this.dropData,
1342 target: target,
1343 });
1344 }));
1345 };
1346 /**
1347 * @param {?} changes
1348 * @return {?}
1349 */
1350 DraggableDirective.prototype.ngOnChanges = /**
1351 * @param {?} changes
1352 * @return {?}
1353 */
1354 function (changes) {
1355 if (changes.dragAxis) {
1356 this.checkEventListeners();
1357 }
1358 };
1359 /**
1360 * @return {?}
1361 */
1362 DraggableDirective.prototype.ngOnDestroy = /**
1363 * @return {?}
1364 */
1365 function () {
1366 this.unsubscribeEventListeners();
1367 this.pointerDown$.complete();
1368 this.pointerMove$.complete();
1369 this.pointerUp$.complete();
1370 this.destroy$.next();
1371 };
1372 /**
1373 * @private
1374 * @return {?}
1375 */
1376 DraggableDirective.prototype.checkEventListeners = /**
1377 * @private
1378 * @return {?}
1379 */
1380 function () {
1381 var _this = this;
1382 /** @type {?} */
1383 var canDrag = this.canDrag();
1384 /** @type {?} */
1385 var hasEventListeners = Object.keys(this.eventListenerSubscriptions).length > 0;
1386 if (canDrag && !hasEventListeners) {
1387 this.zone.runOutsideAngular(( /**
1388 * @return {?}
1389 */function () {
1390 _this.eventListenerSubscriptions.mousedown = _this.renderer.listen(_this.element.nativeElement, 'mousedown', ( /**
1391 * @param {?} event
1392 * @return {?}
1393 */function (event) {
1394 _this.onMouseDown(event);
1395 }));
1396 _this.eventListenerSubscriptions.mouseup = _this.renderer.listen('document', 'mouseup', ( /**
1397 * @param {?} event
1398 * @return {?}
1399 */function (event) {
1400 _this.onMouseUp(event);
1401 }));
1402 _this.eventListenerSubscriptions.touchstart = _this.renderer.listen(_this.element.nativeElement, 'touchstart', ( /**
1403 * @param {?} event
1404 * @return {?}
1405 */function (event) {
1406 _this.onTouchStart(event);
1407 }));
1408 _this.eventListenerSubscriptions.touchend = _this.renderer.listen('document', 'touchend', ( /**
1409 * @param {?} event
1410 * @return {?}
1411 */function (event) {
1412 _this.onTouchEnd(event);
1413 }));
1414 _this.eventListenerSubscriptions.touchcancel = _this.renderer.listen('document', 'touchcancel', ( /**
1415 * @param {?} event
1416 * @return {?}
1417 */function (event) {
1418 _this.onTouchEnd(event);
1419 }));
1420 _this.eventListenerSubscriptions.mouseenter = _this.renderer.listen(_this.element.nativeElement, 'mouseenter', ( /**
1421 * @return {?}
1422 */function () {
1423 _this.onMouseEnter();
1424 }));
1425 _this.eventListenerSubscriptions.mouseleave = _this.renderer.listen(_this.element.nativeElement, 'mouseleave', ( /**
1426 * @return {?}
1427 */function () {
1428 _this.onMouseLeave();
1429 }));
1430 }));
1431 }
1432 else if (!canDrag && hasEventListeners) {
1433 this.unsubscribeEventListeners();
1434 }
1435 };
1436 /**
1437 * @private
1438 * @param {?} event
1439 * @return {?}
1440 */
1441 DraggableDirective.prototype.onMouseDown = /**
1442 * @private
1443 * @param {?} event
1444 * @return {?}
1445 */
1446 function (event) {
1447 var _this = this;
1448 if (event.button === 0) {
1449 if (!this.eventListenerSubscriptions.mousemove) {
1450 this.eventListenerSubscriptions.mousemove = this.renderer.listen('document', 'mousemove', ( /**
1451 * @param {?} mouseMoveEvent
1452 * @return {?}
1453 */function (mouseMoveEvent) {
1454 _this.pointerMove$.next({
1455 event: mouseMoveEvent,
1456 clientX: mouseMoveEvent.clientX,
1457 clientY: mouseMoveEvent.clientY,
1458 });
1459 }));
1460 }
1461 this.pointerDown$.next({
1462 event: event,
1463 clientX: event.clientX,
1464 clientY: event.clientY,
1465 });
1466 }
1467 };
1468 /**
1469 * @private
1470 * @param {?} event
1471 * @return {?}
1472 */
1473 DraggableDirective.prototype.onMouseUp = /**
1474 * @private
1475 * @param {?} event
1476 * @return {?}
1477 */
1478 function (event) {
1479 if (event.button === 0) {
1480 if (this.eventListenerSubscriptions.mousemove) {
1481 this.eventListenerSubscriptions.mousemove();
1482 delete this.eventListenerSubscriptions.mousemove;
1483 }
1484 this.pointerUp$.next({
1485 event: event,
1486 clientX: event.clientX,
1487 clientY: event.clientY,
1488 });
1489 }
1490 };
1491 /**
1492 * @private
1493 * @param {?} event
1494 * @return {?}
1495 */
1496 DraggableDirective.prototype.onTouchStart = /**
1497 * @private
1498 * @param {?} event
1499 * @return {?}
1500 */
1501 function (event) {
1502 var _this = this;
1503 /** @type {?} */
1504 var startScrollPosition;
1505 /** @type {?} */
1506 var isDragActivated;
1507 /** @type {?} */
1508 var hasContainerScrollbar;
1509 if ((this.scrollContainer && this.scrollContainer.activeLongPressDrag) ||
1510 this.touchStartLongPress) {
1511 this.timeLongPress.timerBegin = Date.now();
1512 isDragActivated = false;
1513 hasContainerScrollbar = this.hasScrollbar();
1514 startScrollPosition = this.getScrollPosition();
1515 }
1516 if (!this.eventListenerSubscriptions.touchmove) {
1517 /** @type {?} */
1518 var contextMenuListener_1 = rxjs.fromEvent(this.document, 'contextmenu').subscribe(( /**
1519 * @param {?} e
1520 * @return {?}
1521 */function (e) {
1522 e.preventDefault();
1523 }));
1524 /** @type {?} */
1525 var touchMoveListener_1 = rxjs.fromEvent(this.document, 'touchmove', {
1526 passive: false,
1527 }).subscribe(( /**
1528 * @param {?} touchMoveEvent
1529 * @return {?}
1530 */function (touchMoveEvent) {
1531 if (((_this.scrollContainer && _this.scrollContainer.activeLongPressDrag) ||
1532 _this.touchStartLongPress) &&
1533 !isDragActivated &&
1534 hasContainerScrollbar) {
1535 isDragActivated = _this.shouldBeginDrag(event, touchMoveEvent, startScrollPosition);
1536 }
1537 if (((!_this.scrollContainer ||
1538 !_this.scrollContainer.activeLongPressDrag) &&
1539 !_this.touchStartLongPress) ||
1540 !hasContainerScrollbar ||
1541 isDragActivated) {
1542 touchMoveEvent.preventDefault();
1543 _this.pointerMove$.next({
1544 event: touchMoveEvent,
1545 clientX: touchMoveEvent.targetTouches[0].clientX,
1546 clientY: touchMoveEvent.targetTouches[0].clientY,
1547 });
1548 }
1549 }));
1550 this.eventListenerSubscriptions.touchmove = ( /**
1551 * @return {?}
1552 */function () {
1553 contextMenuListener_1.unsubscribe();
1554 touchMoveListener_1.unsubscribe();
1555 });
1556 }
1557 this.pointerDown$.next({
1558 event: event,
1559 clientX: event.touches[0].clientX,
1560 clientY: event.touches[0].clientY,
1561 });
1562 };
1563 /**
1564 * @private
1565 * @param {?} event
1566 * @return {?}
1567 */
1568 DraggableDirective.prototype.onTouchEnd = /**
1569 * @private
1570 * @param {?} event
1571 * @return {?}
1572 */
1573 function (event) {
1574 if (this.eventListenerSubscriptions.touchmove) {
1575 this.eventListenerSubscriptions.touchmove();
1576 delete this.eventListenerSubscriptions.touchmove;
1577 if ((this.scrollContainer && this.scrollContainer.activeLongPressDrag) ||
1578 this.touchStartLongPress) {
1579 this.enableScroll();
1580 }
1581 }
1582 this.pointerUp$.next({
1583 event: event,
1584 clientX: event.changedTouches[0].clientX,
1585 clientY: event.changedTouches[0].clientY,
1586 });
1587 };
1588 /**
1589 * @private
1590 * @return {?}
1591 */
1592 DraggableDirective.prototype.onMouseEnter = /**
1593 * @private
1594 * @return {?}
1595 */
1596 function () {
1597 this.setCursor(this.dragCursor);
1598 };
1599 /**
1600 * @private
1601 * @return {?}
1602 */
1603 DraggableDirective.prototype.onMouseLeave = /**
1604 * @private
1605 * @return {?}
1606 */
1607 function () {
1608 this.setCursor('');
1609 };
1610 /**
1611 * @private
1612 * @return {?}
1613 */
1614 DraggableDirective.prototype.canDrag = /**
1615 * @private
1616 * @return {?}
1617 */
1618 function () {
1619 return this.dragAxis.x || this.dragAxis.y;
1620 };
1621 /**
1622 * @private
1623 * @param {?} value
1624 * @return {?}
1625 */
1626 DraggableDirective.prototype.setCursor = /**
1627 * @private
1628 * @param {?} value
1629 * @return {?}
1630 */
1631 function (value) {
1632 if (!this.eventListenerSubscriptions.mousemove) {
1633 this.renderer.setStyle(this.element.nativeElement, 'cursor', value);
1634 }
1635 };
1636 /**
1637 * @private
1638 * @return {?}
1639 */
1640 DraggableDirective.prototype.unsubscribeEventListeners = /**
1641 * @private
1642 * @return {?}
1643 */
1644 function () {
1645 var _this = this;
1646 Object.keys(this.eventListenerSubscriptions).forEach(( /**
1647 * @param {?} type
1648 * @return {?}
1649 */function (type) {
1650 (( /** @type {?} */(_this))).eventListenerSubscriptions[type]();
1651 delete (( /** @type {?} */(_this))).eventListenerSubscriptions[type];
1652 }));
1653 };
1654 /**
1655 * @private
1656 * @param {?} element
1657 * @param {?} styles
1658 * @return {?}
1659 */
1660 DraggableDirective.prototype.setElementStyles = /**
1661 * @private
1662 * @param {?} element
1663 * @param {?} styles
1664 * @return {?}
1665 */
1666 function (element, styles) {
1667 var _this = this;
1668 Object.keys(styles).forEach(( /**
1669 * @param {?} key
1670 * @return {?}
1671 */function (key) {
1672 _this.renderer.setStyle(element, key, styles[key]);
1673 }));
1674 };
1675 /**
1676 * @private
1677 * @return {?}
1678 */
1679 DraggableDirective.prototype.getScrollElement = /**
1680 * @private
1681 * @return {?}
1682 */
1683 function () {
1684 if (this.scrollContainer) {
1685 return this.scrollContainer.elementRef.nativeElement;
1686 }
1687 else {
1688 return this.document.body;
1689 }
1690 };
1691 /**
1692 * @private
1693 * @return {?}
1694 */
1695 DraggableDirective.prototype.getScrollPosition = /**
1696 * @private
1697 * @return {?}
1698 */
1699 function () {
1700 if (this.scrollContainer) {
1701 return {
1702 top: this.scrollContainer.elementRef.nativeElement.scrollTop,
1703 left: this.scrollContainer.elementRef.nativeElement.scrollLeft,
1704 };
1705 }
1706 else {
1707 return {
1708 top: window.pageYOffset || this.document.documentElement.scrollTop,
1709 left: window.pageXOffset || this.document.documentElement.scrollLeft,
1710 };
1711 }
1712 };
1713 /**
1714 * @private
1715 * @param {?} event
1716 * @param {?} touchMoveEvent
1717 * @param {?} startScrollPosition
1718 * @return {?}
1719 */
1720 DraggableDirective.prototype.shouldBeginDrag = /**
1721 * @private
1722 * @param {?} event
1723 * @param {?} touchMoveEvent
1724 * @param {?} startScrollPosition
1725 * @return {?}
1726 */
1727 function (event, touchMoveEvent, startScrollPosition) {
1728 /** @type {?} */
1729 var moveScrollPosition = this.getScrollPosition();
1730 /** @type {?} */
1731 var deltaScroll = {
1732 top: Math.abs(moveScrollPosition.top - startScrollPosition.top),
1733 left: Math.abs(moveScrollPosition.left - startScrollPosition.left),
1734 };
1735 /** @type {?} */
1736 var deltaX = Math.abs(touchMoveEvent.targetTouches[0].clientX - event.touches[0].clientX) - deltaScroll.left;
1737 /** @type {?} */
1738 var deltaY = Math.abs(touchMoveEvent.targetTouches[0].clientY - event.touches[0].clientY) - deltaScroll.top;
1739 /** @type {?} */
1740 var deltaTotal = deltaX + deltaY;
1741 /** @type {?} */
1742 var longPressConfig = this.touchStartLongPress
1743 ? this.touchStartLongPress
1744 : /* istanbul ignore next */
1745 {
1746 delta: this.scrollContainer.longPressConfig.delta,
1747 delay: this.scrollContainer.longPressConfig.duration,
1748 };
1749 if (deltaTotal > longPressConfig.delta ||
1750 deltaScroll.top > 0 ||
1751 deltaScroll.left > 0) {
1752 this.timeLongPress.timerBegin = Date.now();
1753 }
1754 this.timeLongPress.timerEnd = Date.now();
1755 /** @type {?} */
1756 var duration = this.timeLongPress.timerEnd - this.timeLongPress.timerBegin;
1757 if (duration >= longPressConfig.delay) {
1758 this.disableScroll();
1759 return true;
1760 }
1761 return false;
1762 };
1763 /**
1764 * @private
1765 * @return {?}
1766 */
1767 DraggableDirective.prototype.enableScroll = /**
1768 * @private
1769 * @return {?}
1770 */
1771 function () {
1772 if (this.scrollContainer) {
1773 this.renderer.setStyle(this.scrollContainer.elementRef.nativeElement, 'overflow', '');
1774 }
1775 this.renderer.setStyle(this.document.body, 'overflow', '');
1776 };
1777 /**
1778 * @private
1779 * @return {?}
1780 */
1781 DraggableDirective.prototype.disableScroll = /**
1782 * @private
1783 * @return {?}
1784 */
1785 function () {
1786 /* istanbul ignore next */
1787 if (this.scrollContainer) {
1788 this.renderer.setStyle(this.scrollContainer.elementRef.nativeElement, 'overflow', 'hidden');
1789 }
1790 this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
1791 };
1792 /**
1793 * @private
1794 * @return {?}
1795 */
1796 DraggableDirective.prototype.hasScrollbar = /**
1797 * @private
1798 * @return {?}
1799 */
1800 function () {
1801 /** @type {?} */
1802 var scrollContainer = this.getScrollElement();
1803 /** @type {?} */
1804 var containerHasHorizontalScroll = scrollContainer.scrollWidth > scrollContainer.clientWidth;
1805 /** @type {?} */
1806 var containerHasVerticalScroll = scrollContainer.scrollHeight > scrollContainer.clientHeight;
1807 return containerHasHorizontalScroll || containerHasVerticalScroll;
1808 };
1809 DraggableDirective.decorators = [
1810 { type: i0.Directive, args: [{
1811 selector: '[mwlDraggable]',
1812 },] }
1813 ];
1814 /** @nocollapse */
1815 DraggableDirective.ctorParameters = function () {
1816 return [
1817 { type: i0.ElementRef },
1818 { type: i0.Renderer2 },
1819 { type: DraggableHelper },
1820 { type: i0.NgZone },
1821 { type: i0.ViewContainerRef },
1822 { type: DraggableScrollContainerDirective, decorators: [{ type: i0.Optional }] },
1823 { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
1824 ];
1825 };
1826 DraggableDirective.propDecorators = {
1827 dropData: [{ type: i0.Input }],
1828 dragAxis: [{ type: i0.Input }],
1829 dragSnapGrid: [{ type: i0.Input }],
1830 ghostDragEnabled: [{ type: i0.Input }],
1831 showOriginalElementWhileDragging: [{ type: i0.Input }],
1832 validateDrag: [{ type: i0.Input }],
1833 dragCursor: [{ type: i0.Input }],
1834 dragActiveClass: [{ type: i0.Input }],
1835 ghostElementAppendTo: [{ type: i0.Input }],
1836 ghostElementTemplate: [{ type: i0.Input }],
1837 touchStartLongPress: [{ type: i0.Input }],
1838 autoScroll: [{ type: i0.Input }],
1839 dragPointerDown: [{ type: i0.Output }],
1840 dragStart: [{ type: i0.Output }],
1841 ghostElementCreated: [{ type: i0.Output }],
1842 dragging: [{ type: i0.Output }],
1843 dragEnd: [{ type: i0.Output }]
1844 };
1845 return DraggableDirective;
1846 }());
1847
1848 /**
1849 * @fileoverview added by tsickle
1850 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1851 */
1852 /**
1853 * @param {?} clientX
1854 * @param {?} clientY
1855 * @param {?} rect
1856 * @return {?}
1857 */
1858 function isCoordinateWithinRectangle(clientX, clientY, rect) {
1859 return (clientX >= rect.left &&
1860 clientX <= rect.right &&
1861 clientY >= rect.top &&
1862 clientY <= rect.bottom);
1863 }
1864 var DroppableDirective = /** @class */ (function () {
1865 function DroppableDirective(element, draggableHelper, zone, renderer, scrollContainer) {
1866 this.element = element;
1867 this.draggableHelper = draggableHelper;
1868 this.zone = zone;
1869 this.renderer = renderer;
1870 this.scrollContainer = scrollContainer;
1871 /**
1872 * Called when a draggable element starts overlapping the element
1873 */
1874 this.dragEnter = new i0.EventEmitter();
1875 /**
1876 * Called when a draggable element stops overlapping the element
1877 */
1878 this.dragLeave = new i0.EventEmitter();
1879 /**
1880 * Called when a draggable element is moved over the element
1881 */
1882 this.dragOver = new i0.EventEmitter();
1883 /**
1884 * Called when a draggable element is dropped on this element
1885 */
1886 this.drop = new i0.EventEmitter(); // tslint:disable-line no-output-named-after-standard-event
1887 }
1888 /**
1889 * @return {?}
1890 */
1891 DroppableDirective.prototype.ngOnInit = /**
1892 * @return {?}
1893 */
1894 function () {
1895 var _this = this;
1896 this.currentDragSubscription = this.draggableHelper.currentDrag.subscribe(( /**
1897 * @param {?} drag$
1898 * @return {?}
1899 */function (drag$) {
1900 addClass(_this.renderer, _this.element, _this.dragActiveClass);
1901 /** @type {?} */
1902 var droppableElement = {
1903 updateCache: true,
1904 };
1905 /** @type {?} */
1906 var deregisterScrollListener = _this.renderer.listen(_this.scrollContainer
1907 ? _this.scrollContainer.elementRef.nativeElement
1908 : 'window', 'scroll', ( /**
1909 * @return {?}
1910 */function () {
1911 droppableElement.updateCache = true;
1912 }));
1913 /** @type {?} */
1914 var currentDragDropData;
1915 /** @type {?} */
1916 var overlaps$ = drag$.pipe(operators.map(( /**
1917 * @param {?} __0
1918 * @return {?}
1919 */function (_a) {
1920 var clientX = _a.clientX, clientY = _a.clientY, dropData = _a.dropData, target = _a.target;
1921 currentDragDropData = dropData;
1922 if (droppableElement.updateCache) {
1923 droppableElement.rect = _this.element.nativeElement.getBoundingClientRect();
1924 if (_this.scrollContainer) {
1925 droppableElement.scrollContainerRect = _this.scrollContainer.elementRef.nativeElement.getBoundingClientRect();
1926 }
1927 droppableElement.updateCache = false;
1928 }
1929 /** @type {?} */
1930 var isWithinElement = isCoordinateWithinRectangle(clientX, clientY, ( /** @type {?} */(droppableElement.rect)));
1931 /** @type {?} */
1932 var isDropAllowed = !_this.validateDrop ||
1933 _this.validateDrop({ clientX: clientX, clientY: clientY, target: target });
1934 if (droppableElement.scrollContainerRect) {
1935 return (isWithinElement &&
1936 isDropAllowed &&
1937 isCoordinateWithinRectangle(clientX, clientY, ( /** @type {?} */(droppableElement.scrollContainerRect))));
1938 }
1939 else {
1940 return isWithinElement && isDropAllowed;
1941 }
1942 })));
1943 /** @type {?} */
1944 var overlapsChanged$ = overlaps$.pipe(operators.distinctUntilChanged());
1945 /** @type {?} */
1946 var dragOverActive;
1947 overlapsChanged$
1948 .pipe(operators.filter(( /**
1949 * @param {?} overlapsNow
1950 * @return {?}
1951 */function (overlapsNow) { return overlapsNow; })))
1952 .subscribe(( /**
1953 * @return {?}
1954 */function () {
1955 dragOverActive = true;
1956 addClass(_this.renderer, _this.element, _this.dragOverClass);
1957 _this.zone.run(( /**
1958 * @return {?}
1959 */function () {
1960 _this.dragEnter.next({
1961 dropData: currentDragDropData,
1962 });
1963 }));
1964 }));
1965 overlaps$.pipe(operators.filter(( /**
1966 * @param {?} overlapsNow
1967 * @return {?}
1968 */function (overlapsNow) { return overlapsNow; }))).subscribe(( /**
1969 * @return {?}
1970 */function () {
1971 _this.zone.run(( /**
1972 * @return {?}
1973 */function () {
1974 _this.dragOver.next({
1975 dropData: currentDragDropData,
1976 });
1977 }));
1978 }));
1979 overlapsChanged$
1980 .pipe(operators.pairwise(), operators.filter(( /**
1981 * @param {?} __0
1982 * @return {?}
1983 */function (_a) {
1984 var _b = __read(_a, 2), didOverlap = _b[0], overlapsNow = _b[1];
1985 return didOverlap && !overlapsNow;
1986 })))
1987 .subscribe(( /**
1988 * @return {?}
1989 */function () {
1990 dragOverActive = false;
1991 removeClass(_this.renderer, _this.element, _this.dragOverClass);
1992 _this.zone.run(( /**
1993 * @return {?}
1994 */function () {
1995 _this.dragLeave.next({
1996 dropData: currentDragDropData,
1997 });
1998 }));
1999 }));
2000 drag$.subscribe({
2001 complete: ( /**
2002 * @return {?}
2003 */function () {
2004 deregisterScrollListener();
2005 removeClass(_this.renderer, _this.element, _this.dragActiveClass);
2006 if (dragOverActive) {
2007 removeClass(_this.renderer, _this.element, _this.dragOverClass);
2008 _this.zone.run(( /**
2009 * @return {?}
2010 */function () {
2011 _this.drop.next({
2012 dropData: currentDragDropData,
2013 });
2014 }));
2015 }
2016 }),
2017 });
2018 }));
2019 };
2020 /**
2021 * @return {?}
2022 */
2023 DroppableDirective.prototype.ngOnDestroy = /**
2024 * @return {?}
2025 */
2026 function () {
2027 if (this.currentDragSubscription) {
2028 this.currentDragSubscription.unsubscribe();
2029 }
2030 };
2031 DroppableDirective.decorators = [
2032 { type: i0.Directive, args: [{
2033 selector: '[mwlDroppable]',
2034 },] }
2035 ];
2036 /** @nocollapse */
2037 DroppableDirective.ctorParameters = function () {
2038 return [
2039 { type: i0.ElementRef },
2040 { type: DraggableHelper },
2041 { type: i0.NgZone },
2042 { type: i0.Renderer2 },
2043 { type: DraggableScrollContainerDirective, decorators: [{ type: i0.Optional }] }
2044 ];
2045 };
2046 DroppableDirective.propDecorators = {
2047 dragOverClass: [{ type: i0.Input }],
2048 dragActiveClass: [{ type: i0.Input }],
2049 validateDrop: [{ type: i0.Input }],
2050 dragEnter: [{ type: i0.Output }],
2051 dragLeave: [{ type: i0.Output }],
2052 dragOver: [{ type: i0.Output }],
2053 drop: [{ type: i0.Output }]
2054 };
2055 return DroppableDirective;
2056 }());
2057
2058 /**
2059 * @fileoverview added by tsickle
2060 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
2061 */
2062 var DragAndDropModule = /** @class */ (function () {
2063 function DragAndDropModule() {
2064 }
2065 DragAndDropModule.decorators = [
2066 { type: i0.NgModule, args: [{
2067 declarations: [
2068 DraggableDirective,
2069 DroppableDirective,
2070 DraggableScrollContainerDirective,
2071 ],
2072 exports: [
2073 DraggableDirective,
2074 DroppableDirective,
2075 DraggableScrollContainerDirective,
2076 ],
2077 },] }
2078 ];
2079 return DragAndDropModule;
2080 }());
2081
2082 /**
2083 * @fileoverview added by tsickle
2084 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
2085 */
2086
2087 /**
2088 * @fileoverview added by tsickle
2089 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
2090 */
2091
2092 exports.DragAndDropModule = DragAndDropModule;
2093 exports.ɵc = DraggableHelper;
2094 exports.ɵd = DraggableScrollContainerDirective;
2095 exports.ɵb = DraggableDirective;
2096 exports.ɵa = DroppableDirective;
2097
2098 Object.defineProperty(exports, '__esModule', { value: true });
2099
2100 })));
2101
2102
2103 });
2104
2105 var angularDraggableDroppable_umd$1 = unwrapExports(angularDraggableDroppable_umd);
2106
2107 return angularDraggableDroppable_umd$1;
2108
2109})));
2110//# sourceMappingURL=angular-draggable-droppable.umd.js.map