@progress/kendo-angular-utils 17.0.0-develop.4 → 17.0.0-develop.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +27 -16
  2. package/drag-and-drop/dragtarget-container.directive.d.ts +1 -1
  3. package/drag-and-drop/dragtarget.directive.d.ts +1 -1
  4. package/drag-and-drop/droptarget-container.directive.d.ts +1 -1
  5. package/drag-and-drop/hint.component.d.ts +1 -1
  6. package/drag-and-drop/models/drag-axis.d.ts +1 -1
  7. package/drag-and-drop/models/drag-mode.d.ts +1 -1
  8. package/drag-and-drop/models/functions.d.ts +2 -2
  9. package/{esm2020 → esm2022}/drag-and-drop/drag-state.service.mjs +28 -24
  10. package/{esm2020 → esm2022}/drag-and-drop/draghandle.directive.mjs +5 -4
  11. package/{esm2020 → esm2022}/drag-and-drop/dragtarget-container.directive.mjs +90 -76
  12. package/{esm2020 → esm2022}/drag-and-drop/dragtarget.directive.mjs +92 -76
  13. package/{esm2020 → esm2022}/drag-and-drop/droptarget-container.directive.mjs +34 -30
  14. package/{esm2020 → esm2022}/drag-and-drop/droptarget.directive.mjs +23 -19
  15. package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/drag-event.mjs +25 -5
  16. package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/dragready-event.mjs +16 -0
  17. package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/end-event.mjs +20 -4
  18. package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/press-event.mjs +20 -4
  19. package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/release-event.mjs +20 -4
  20. package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/start-event.mjs +21 -5
  21. package/{esm2020 → esm2022}/drag-and-drop/events/drop-target-event.mjs +28 -4
  22. package/{esm2020 → esm2022}/drag-and-drop/hint.component.mjs +10 -5
  23. package/{esm2020 → esm2022}/drag-and-drop.module.mjs +4 -4
  24. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  25. package/{esm2020 → esm2022}/utils.module.mjs +4 -4
  26. package/{fesm2020 → fesm2022}/progress-kendo-angular-utils.mjs +443 -271
  27. package/package.json +11 -17
  28. package/fesm2015/progress-kendo-angular-utils.mjs +0 -2034
  29. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  30. /package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/index.mjs +0 -0
  31. /package/{esm2020 → esm2022}/drag-and-drop/events/index.mjs +0 -0
  32. /package/{esm2020 → esm2022}/drag-and-drop/models/autoscroll-options.mjs +0 -0
  33. /package/{esm2020 → esm2022}/drag-and-drop/models/coordinates.mjs +0 -0
  34. /package/{esm2020 → esm2022}/drag-and-drop/models/drag-axis.mjs +0 -0
  35. /package/{esm2020 → esm2022}/drag-and-drop/models/drag-mode.mjs +0 -0
  36. /package/{esm2020 → esm2022}/drag-and-drop/models/functions.mjs +0 -0
  37. /package/{esm2020 → esm2022}/drag-and-drop/models/hint-settings.mjs +0 -0
  38. /package/{esm2020 → esm2022}/drag-and-drop/models/index.mjs +0 -0
  39. /package/{esm2020 → esm2022}/drag-and-drop/models/scroll-direction.mjs +0 -0
  40. /package/{esm2020 → esm2022}/drag-and-drop/util.mjs +0 -0
  41. /package/{esm2020 → esm2022}/index.mjs +0 -0
  42. /package/{esm2020 → esm2022}/progress-kendo-angular-utils.mjs +0 -0
@@ -1,2034 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import * as i0 from '@angular/core';
6
- import { Directive, HostBinding, Component, Input, Injectable, EventEmitter, isDevMode, Output, ContentChildren, NgModule } from '@angular/core';
7
- import { validatePackage } from '@progress/kendo-licensing';
8
- import { fromEvent, merge } from 'rxjs';
9
- import { filter } from 'rxjs/operators';
10
- import { dispatchDragAndDrop, getScrollableParent, autoScroll } from '@progress/kendo-draggable-common';
11
- import { PreventableEvent, contains, isDocumentAvailable, parseCSSClassNames } from '@progress/kendo-angular-common';
12
- import { NgTemplateOutlet } from '@angular/common';
13
-
14
- /**
15
- * Represents the Kendo UI DragHandle directive for Angular.
16
- * It is used to specify a concrete element within a drag target as a handle for dragging, instead the drag target itself.
17
- */
18
- class DragHandleDirective {
19
- constructor(element) {
20
- this.element = element;
21
- this.cursorStyle = 'move';
22
- }
23
- }
24
- DragHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
25
- DragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragHandleDirective, isStandalone: true, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
26
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragHandleDirective, decorators: [{
27
- type: Directive,
28
- args: [{
29
- selector: '[kendoDragHandle]',
30
- exportAs: 'kendoDragHandle',
31
- standalone: true
32
- }]
33
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { cursorStyle: [{
34
- type: HostBinding,
35
- args: ['style.cursor']
36
- }] } });
37
-
38
- /**
39
- * @hidden
40
- */
41
- const packageMetadata = {
42
- name: '@progress/kendo-angular-utils',
43
- productName: 'Kendo UI for Angular',
44
- productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
45
- publishDate: 1728985078,
46
- version: '17.0.0-develop.4',
47
- licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
48
- };
49
-
50
- function isDocumentNode(container) {
51
- return container.nodeType === 9;
52
- }
53
- /**
54
- * @hidden
55
- */
56
- const getAction = (event, draggable) => {
57
- return {
58
- event: event,
59
- payload: draggable
60
- };
61
- };
62
- /**
63
- * @hidden
64
- */
65
- const dragTargetTransition = 'transform .3s ease-in-out';
66
- /**
67
- * @hidden
68
- */
69
- const isPresent = (value) => value !== null && value !== undefined;
70
- /**
71
- * @hidden
72
- */
73
- function closestBySelector(element, selector) {
74
- if (element.closest) {
75
- return element.closest(selector);
76
- }
77
- const matches = Element.prototype.matches ?
78
- (el, sel) => el.matches(sel)
79
- : (el, sel) => el.msMatchesSelector(sel);
80
- let node = element;
81
- while (node && !isDocumentNode(node)) {
82
- if (matches(node, selector)) {
83
- return node;
84
- }
85
- node = node.parentNode;
86
- }
87
- }
88
- /**
89
- * @hidden
90
- */
91
- const intersect = (element, candidates) => {
92
- let max = 0;
93
- let result = null;
94
- candidates.forEach((candidate) => {
95
- if (candidate && element) {
96
- const ration = getRatio(element, candidate);
97
- if (ration > max) {
98
- max = ration;
99
- result = candidate;
100
- }
101
- }
102
- });
103
- return result;
104
- };
105
- const getRatio = (element, target) => {
106
- const elementRect = element.getBoundingClientRect();
107
- const targetRect = target.getBoundingClientRect();
108
- const top = Math.max(targetRect.top, elementRect.top);
109
- const left = Math.max(targetRect.left, elementRect.left);
110
- const right = Math.min(targetRect.left + targetRect.width, elementRect.left + elementRect.width);
111
- const bottom = Math.min(targetRect.top + targetRect.height, elementRect.top + elementRect.height);
112
- const width = right - left;
113
- const height = bottom - top;
114
- if (left < right && top < bottom) {
115
- const targetArea = targetRect.width * targetRect.height;
116
- const entryArea = elementRect.width * elementRect.height;
117
- const intersectionArea = width * height;
118
- const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
119
- return Number(intersectionRatio.toFixed(4));
120
- }
121
- return 0;
122
- };
123
- /**
124
- * @hidden
125
- */
126
- const setElementStyles = (renderer, elem, styles) => {
127
- const props = Object.keys(styles);
128
- props.forEach(p => {
129
- renderer.setStyle(elem, p, styles[p]);
130
- });
131
- };
132
- /**
133
- * @hidden
134
- */
135
- const allPointerDownEvents = ['pointerdown', 'mousedown', 'touchstart'];
136
- /**
137
- * @hidden
138
- */
139
- const allPointerMoveEvents = ['pointermove', 'mousemove', 'touchmove'];
140
- /**
141
- * @hidden
142
- */
143
- const allPointerUpEvents = ['pointerup', 'pointercancel', 'mouseup', 'contextmenu', 'touchend', 'touchcancel'];
144
-
145
- /**
146
- * @hidden
147
- */
148
- class HintComponent {
149
- constructor(element) {
150
- this.element = element;
151
- this.pointerEvents = 'none';
152
- }
153
- }
154
- HintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HintComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
155
- HintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HintComponent, isStandalone: true, selector: "kendo-draghint", inputs: { template: "template", directive: "directive", targetIndex: "targetIndex", contextData: "contextData" }, host: { properties: { "style.pointer-events": "this.pointerEvents" } }, ngImport: i0, template: `
156
- <ng-container *ngTemplateOutlet="template; context: { $implicit: directive, index: targetIndex, data: contextData }">
157
- </ng-container>
158
- `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
159
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HintComponent, decorators: [{
160
- type: Component,
161
- args: [{
162
- selector: 'kendo-draghint',
163
- template: `
164
- <ng-container *ngTemplateOutlet="template; context: { $implicit: directive, index: targetIndex, data: contextData }">
165
- </ng-container>
166
- `,
167
- standalone: true,
168
- imports: [NgTemplateOutlet]
169
- }]
170
- }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { template: [{
171
- type: Input
172
- }], directive: [{
173
- type: Input
174
- }], targetIndex: [{
175
- type: Input
176
- }], contextData: [{
177
- type: Input
178
- }], pointerEvents: [{
179
- type: HostBinding,
180
- args: ['style.pointer-events']
181
- }] } });
182
-
183
- /**
184
- * Arguments for the press event of the DragTarget and DragTargetContainer.
185
- */
186
- class DragTargetPressEvent {
187
- /**
188
- * @hidden
189
- */
190
- constructor(args) {
191
- Object.assign(this, args);
192
- }
193
- /**
194
- * Left for backward compatibility for the DragTarget deprecated events.
195
- * @hidden
196
- */
197
- get normalizedEvent() {
198
- return this.dragEvent;
199
- }
200
- /**
201
- * Left for backward compatibility for the DragTarget deprecated events.
202
- * @hidden
203
- */
204
- get hostElement() {
205
- return this.dragTarget;
206
- }
207
- }
208
-
209
- /**
210
- * Arguments for the dragReady event of the DragTarget and DragTargetContainer.
211
- */
212
- class DragTargetDragReadyEvent {
213
- /**
214
- * @hidden
215
- */
216
- constructor(args) {
217
- Object.assign(this, args);
218
- }
219
- }
220
-
221
- /**
222
- * Arguments for the dragStart event of the DragTarget and DragTargetContainer.
223
- */
224
- class DragTargetDragStartEvent extends PreventableEvent {
225
- /**
226
- * @hidden
227
- */
228
- constructor(args) {
229
- super();
230
- Object.assign(this, args);
231
- }
232
- /**
233
- * Left for backward compatibility for the DragTarget deprecated events.
234
- * @hidden
235
- */
236
- get normalizedEvent() {
237
- return this.dragEvent;
238
- }
239
- /**
240
- * Left for backward compatibility for the DragTarget deprecated events.
241
- * @hidden
242
- */
243
- get hostElement() {
244
- return this.dragTarget;
245
- }
246
- }
247
-
248
- /**
249
- * Arguments for the dragEnd event of the DragTarget and DragTargetContainer.
250
- */
251
- class DragTargetDragEndEvent {
252
- /**
253
- * @hidden
254
- */
255
- constructor(args) {
256
- Object.assign(this, args);
257
- }
258
- /**
259
- * Left for backward compatibility for the DragTarget deprecated events.
260
- * @hidden
261
- */
262
- get normalizedEvent() {
263
- return this.dragEvent;
264
- }
265
- /**
266
- * Left for backward compatibility for the DragTarget deprecated events.
267
- * @hidden
268
- */
269
- get hostElement() {
270
- return this.dragTarget;
271
- }
272
- }
273
-
274
- /**
275
- * Arguments for the drag event of the DragTarget and DragTargetContainer.
276
- */
277
- class DragTargetDragEvent extends PreventableEvent {
278
- /**
279
- * @hidden
280
- */
281
- constructor(args) {
282
- super();
283
- Object.assign(this, args);
284
- }
285
- /**
286
- * Left for backward compatibility for the DragTarget deprecated events.
287
- * @hidden
288
- */
289
- get normalizedEvent() {
290
- return this.dragEvent;
291
- }
292
- /**
293
- * Left for backward compatibility for the DragTarget deprecated events.
294
- * @hidden
295
- */
296
- get hostElement() {
297
- return this.dragTarget;
298
- }
299
- }
300
-
301
- /**
302
- * Arguments for the release event of the DragTarget and DragTargetContainer.
303
- */
304
- class DragTargetReleaseEvent {
305
- /**
306
- * @hidden
307
- */
308
- constructor(args) {
309
- Object.assign(this, args);
310
- }
311
- /**
312
- * Left for backward compatibility for the DragTarget deprecated events.
313
- * @hidden
314
- */
315
- get normalizedEvent() {
316
- return this.dragEvent;
317
- }
318
- /**
319
- * Left for backward compatibility for the DragTarget deprecated events.
320
- * @hidden
321
- */
322
- get hostElement() {
323
- return this.dragTarget;
324
- }
325
- }
326
-
327
- /**
328
- * @hidden
329
- */
330
- class DragStateService {
331
- constructor() {
332
- this.dragTarget = null;
333
- this.dropTarget = null;
334
- this.dragTargets = [];
335
- this.dropTargets = [];
336
- this.pressed = false;
337
- this.ignoreMouse = false;
338
- this.autoScroll = true;
339
- this.isScrolling = false;
340
- this.scrollableParent = null;
341
- this.autoScrollDirection = { horizontal: true, vertical: true };
342
- this.initialClientOffset = { x: 0, y: 0 };
343
- this.clientOffset = { x: 0, y: 0 };
344
- this.initialScrollOffset = { x: 0, y: 0 };
345
- this.scrollOffset = { x: 0, y: 0 };
346
- this.offset = { x: 0, y: 0 };
347
- this.pageOffset = { x: 0, y: 0 };
348
- this.velocity = { x: 0, y: 0 };
349
- this.dragIndex = null;
350
- this.dropIndex = null;
351
- this.callbacks = {};
352
- this.scrollInterval = null;
353
- this.setCallbacks();
354
- }
355
- handleDragAndDrop(action) {
356
- this.updateState();
357
- dispatchDragAndDrop(this.state, action, this.callbacks);
358
- }
359
- setPressed(pressed) {
360
- this.pressed = pressed;
361
- }
362
- setScrolling(isScrolling) {
363
- this.isScrolling = isScrolling;
364
- if (isScrolling) {
365
- const scrollableParent = getScrollableParent(document.elementFromPoint(this.clientOffset.x, this.clientOffset.y));
366
- window.clearInterval(this.scrollInterval);
367
- this.scrollInterval = window.setInterval(() => {
368
- autoScroll(scrollableParent, { x: this.velocity.x, y: this.velocity.y });
369
- }, 50);
370
- }
371
- else {
372
- if (this.scrollInterval) {
373
- window.clearInterval(this.scrollInterval);
374
- this.scrollInterval = null;
375
- }
376
- }
377
- }
378
- setVelocity(velocity) {
379
- this.velocity = velocity;
380
- }
381
- setOffset(offset) {
382
- this.offset = offset;
383
- }
384
- setClientOffset(clientOffset) {
385
- this.clientOffset = clientOffset;
386
- }
387
- setPageOffset(pageOffset) {
388
- this.pageOffset = pageOffset;
389
- }
390
- setInitialClientOffset(initialClientOffset) {
391
- this.initialClientOffset = initialClientOffset;
392
- }
393
- setScrollOffset(scrollOffset) {
394
- this.scrollOffset = scrollOffset;
395
- }
396
- setInitialScrollOffset(initialScrollOffset) {
397
- this.initialScrollOffset = initialScrollOffset;
398
- }
399
- get dragTargetPresent() {
400
- var _a;
401
- return isPresent((_a = this.dragTarget) === null || _a === void 0 ? void 0 : _a.element);
402
- }
403
- get dropTargetPresent() {
404
- var _a;
405
- return isPresent((_a = this.dropTarget) === null || _a === void 0 ? void 0 : _a.element);
406
- }
407
- updateState() {
408
- this.state = {
409
- drag: this.dragTarget,
410
- drop: this.dropTarget,
411
- drags: this.dragTargets,
412
- drops: this.dropTargets,
413
- pressed: this.pressed,
414
- ignoreMouse: this.ignoreMouse,
415
- autoScroll: this.autoScroll,
416
- isScrolling: this.isScrolling,
417
- scrollableParent: this.scrollableParent,
418
- autoScrollDirection: this.autoScrollDirection,
419
- initialClientOffset: this.initialClientOffset,
420
- clientOffset: this.clientOffset,
421
- initialScrollOffset: this.initialScrollOffset,
422
- scrollOffset: this.scrollOffset,
423
- offset: this.offset,
424
- pageOffset: this.pageOffset,
425
- velocity: this.velocity
426
- };
427
- }
428
- setCallbacks() {
429
- this.callbacks = {
430
- onVelocityChange: this.setVelocity.bind(this),
431
- onOffsetChange: this.setOffset.bind(this),
432
- onClientOffsetChange: this.setClientOffset.bind(this),
433
- onPageOffsetChange: this.setPageOffset.bind(this),
434
- onInitialClientOffsetChange: this.setInitialClientOffset.bind(this),
435
- onScrollOffsetChange: this.setScrollOffset.bind(this),
436
- onInitialScrollOffsetChange: this.setInitialScrollOffset.bind(this),
437
- onIsPressedChange: this.setPressed.bind(this),
438
- onIsScrollingChange: this.setScrolling.bind(this)
439
- };
440
- }
441
- ngOnDestroy() {
442
- if (this.scrollInterval) {
443
- window.clearInterval(this.scrollInterval);
444
- this.scrollInterval = null;
445
- }
446
- }
447
- }
448
- DragStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
449
- DragStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragStateService, providedIn: 'root' });
450
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragStateService, decorators: [{
451
- type: Injectable,
452
- args: [{
453
- providedIn: 'root'
454
- }]
455
- }], ctorParameters: function () { return []; } });
456
-
457
- let isDragStartPrevented$1 = false;
458
- let isDragPrevented$1 = false;
459
- /**
460
- * Represents the [Kendo UI DragTargetContainer directive for Angular]({% slug api_utils_dragtargetcontainerdirective %}).
461
- * Used to configure multiple elements as draggable.
462
- *
463
- * @example
464
- * ```ts-no-run
465
- * <ul kendoDragTargetContainer dragTargetFilter=".my-draggable">
466
- * <li class="my-draggable">foo</li>
467
- * </ul>
468
- * ```
469
- */
470
- class DragTargetContainerDirective {
471
- constructor(wrapper, ngZone, renderer, service, viewContainer, cdr) {
472
- this.wrapper = wrapper;
473
- this.ngZone = ngZone;
474
- this.renderer = renderer;
475
- this.service = service;
476
- this.viewContainer = viewContainer;
477
- this.cdr = cdr;
478
- /**
479
- * Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. ([see example]({% slug drag_hint %})).
480
- *
481
- * @default false
482
- */
483
- this.hint = false;
484
- /**
485
- * Defines the delay in milliseconds after which the drag will begin ([see example](slug:drag_target_container#toc-events)).
486
- *
487
- * @default 0
488
- */
489
- this.dragDelay = 0;
490
- /**
491
- * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})).
492
- *
493
- * @default 0
494
- */
495
- this.threshold = 0;
496
- /**
497
- * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
498
- *
499
- * @default 'auto'
500
- */
501
- this.mode = 'auto';
502
- /**
503
- * Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
504
- */
505
- this.onDragReady = new EventEmitter();
506
- /**
507
- * Fires when the user presses a DragTarget element.
508
- */
509
- this.onPress = new EventEmitter();
510
- /**
511
- * Fires when the dragging of a DragTarget element begins.
512
- */
513
- this.onDragStart = new EventEmitter();
514
- /**
515
- * Fires while the user drags a DragTarget element.
516
- */
517
- this.onDrag = new EventEmitter();
518
- /**
519
- * Fires when the user releases a DragTarget element after being pressed.
520
- */
521
- this.onRelease = new EventEmitter();
522
- /**
523
- * Fires when the dragging of a DragTarget ends and the element is released.
524
- */
525
- this.onDragEnd = new EventEmitter();
526
- this.currentDragTarget = null;
527
- this.dragTimeout = null;
528
- this.pressed = false;
529
- this.dragStarted = false;
530
- this.hintComponent = null;
531
- this.defaultHint = null;
532
- this.currentDragTargetElement = null;
533
- this.scrollableParent = null;
534
- this.previousDragTargets = [];
535
- this.initialPosition = { x: 0, y: 0 };
536
- this.position = { x: 0, y: 0 };
537
- this.positionsMap = new Map();
538
- this._dragTargetFilter = null;
539
- this._dragDisabled = false;
540
- this._dragData = () => null;
541
- this._dragTargetId = () => null;
542
- validatePackage(packageMetadata);
543
- }
544
- /**
545
- * Specifies a selector for elements within a container which will be configured as draggable
546
- * ([see example]({% slug drag_target_container %})). The possible values include any
547
- * DOM `selector`.
548
- */
549
- set dragTargetFilter(value) {
550
- this._dragTargetFilter = value;
551
- if (!this.dragDisabled) {
552
- this.initializeDragTargets();
553
- }
554
- }
555
- get dragTargetFilter() {
556
- return this._dragTargetFilter;
557
- }
558
- /**
559
- * Defines a unique identifier for each drag target.
560
- * It exposes the current DragTarget HTML element and its index in the collection of drag targets as arguments.
561
- */
562
- set dragTargetId(fn) {
563
- if (isDevMode && typeof fn !== 'function') {
564
- throw new Error(`dragTargetId must be a function, but received ${JSON.stringify(fn)}.`);
565
- }
566
- this._dragTargetId = fn;
567
- }
568
- get dragTargetId() {
569
- return this._dragTargetId;
570
- }
571
- /**
572
- * Defines a callback function which returns custom data passed to the DropTarget events.
573
- * It exposes the current DragTarget HTML element, its `dragTargetId` and its index in the collection of drag targets as arguments.
574
- */
575
- set dragData(fn) {
576
- if (isDevMode && typeof fn !== 'function') {
577
- throw new Error(`dragData must be a function, but received ${JSON.stringify(fn)}.`);
578
- }
579
- this._dragData = fn;
580
- }
581
- get dragData() {
582
- return this._dragData;
583
- }
584
- /**
585
- * If set to true, the dragging of DragTargets within the container will be disabled.
586
- *
587
- * @default false
588
- */
589
- set dragDisabled(value) {
590
- this._dragDisabled = value;
591
- if (value) {
592
- this.clearPreviousTargets();
593
- this.unsubscribe();
594
- if (isPresent(this.hintElem)) {
595
- this.destroyHint();
596
- }
597
- }
598
- else {
599
- if (isPresent(this.wrapper) || isPresent(this.currentDragTarget)) {
600
- this.subscribe();
601
- }
602
- this.initializeDragTargets();
603
- }
604
- }
605
- get dragDisabled() {
606
- return this._dragDisabled;
607
- }
608
- /**
609
- * Used for notifying the DragTargetContainer that its content has changed.
610
- */
611
- notify() {
612
- this.cdr.detectChanges();
613
- this.initializeDragTargets();
614
- }
615
- get allDragTargets() {
616
- return this.queryHost(this.dragTargetFilter);
617
- }
618
- get dragHandles() {
619
- return this.isHandleSelectorValid ? this.queryHost(this.dragHandle) : null;
620
- }
621
- get hintTemplate() {
622
- return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
623
- }
624
- ngAfterViewInit() {
625
- const isTargetPresent = isPresent(this.wrapper) || isPresent(this.currentDragTarget);
626
- if (!this.dragDisabled && isTargetPresent) {
627
- this.subscribe();
628
- }
629
- !this.dragDisabled && this.initializeDragTargets();
630
- }
631
- onPointerDown(event) {
632
- if (isPresent(this.dragHandles) && !this.isDragHandle(event.target)) {
633
- return;
634
- }
635
- const action = getAction(event, this.currentDragTarget);
636
- this.service.handleDragAndDrop(action);
637
- this.subscribe();
638
- }
639
- onPointerMove(event) {
640
- event.preventDefault();
641
- const action = getAction(event, this.currentDragTarget);
642
- this.service.handleDragAndDrop(action);
643
- }
644
- onPointerUp(event) {
645
- event.preventDefault();
646
- const action = getAction(event, this.currentDragTarget);
647
- this.service.handleDragAndDrop(action);
648
- this.ngZone.runOutsideAngular(() => {
649
- this.subscribe();
650
- });
651
- }
652
- handlePress(event) {
653
- if (this.dragDelay > 0) {
654
- this.dragTimeout = window.setTimeout(() => {
655
- this.pressed = true;
656
- this.emitZoneAwareEvent('onDragReady', event);
657
- }, this.dragDelay);
658
- }
659
- else {
660
- this.pressed = true;
661
- }
662
- event.originalEvent.preventDefault();
663
- const eventTarget = event.originalEvent.target;
664
- this.currentDragTargetElement = closestBySelector(eventTarget, this.dragTargetFilter);
665
- this.currentDragTarget.element = this.currentDragTargetElement;
666
- this.service.dragIndex = this.getDragIndex();
667
- this.scrollableParent = this.hintTemplate ? document.body : this.currentDragTargetElement ? getScrollableParent(this.currentDragTargetElement) : null;
668
- this.emitZoneAwareEvent('onPress', event);
669
- }
670
- handleDragStart(event) {
671
- if (!this.pressed) {
672
- if (this.dragTimeout) {
673
- window.clearTimeout(this.dragTimeout);
674
- this.dragTimeout = null;
675
- }
676
- return;
677
- }
678
- isDragStartPrevented$1 = this.emitZoneAwareEvent('onDragStart', event).isDefaultPrevented();
679
- if (isDragStartPrevented$1) {
680
- return;
681
- }
682
- this.position = this.positionsMap.has(this.currentDragTargetElement) ? this.positionsMap.get(this.currentDragTargetElement) : { x: 0, y: 0 };
683
- if (this.hint) {
684
- this.createHint();
685
- if (this.mode === 'auto') {
686
- this.renderer.setStyle(this.currentDragTargetElement, 'opacity', '0.7');
687
- }
688
- }
689
- else {
690
- this.initialPosition = { x: event.clientX - this.position.x, y: event.clientY - this.position.y };
691
- }
692
- this.dragStarted = this.threshold === 0;
693
- this.service.dragTarget = this.currentDragTarget;
694
- const targetIdArgs = { dragTarget: this.currentDragTargetElement, dragTargetIndex: this.service.dragIndex };
695
- this.service.dragTargetId = this.dragTargetId(targetIdArgs);
696
- const targetDataArgs = Object.assign({ dragTargetId: this.service.dragTargetId }, targetIdArgs);
697
- this.service.dragData = this.dragData(targetDataArgs);
698
- }
699
- handleDrag(event) {
700
- if (!this.pressed || isDragStartPrevented$1) {
701
- return;
702
- }
703
- const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
704
- this.position = this.calculatePosition(elem, event);
705
- const thresholdNotReached = Math.abs(this.position.x) < this.threshold && Math.abs(this.position.y) < this.threshold;
706
- if (!this.dragStarted && thresholdNotReached) {
707
- return;
708
- }
709
- if (!this.dragStarted && this.threshold > 0) {
710
- this.dragStarted = true;
711
- }
712
- isDragPrevented$1 = this.emitZoneAwareEvent('onDrag', event).isDefaultPrevented();
713
- if (isDragPrevented$1) {
714
- return;
715
- }
716
- if (this.mode === 'auto') {
717
- this.performDrag();
718
- }
719
- else {
720
- this.dragStarted = true;
721
- }
722
- }
723
- handleRelease(event) {
724
- if (this.dragStarted) {
725
- this.positionsMap.set(this.currentDragTargetElement, this.position);
726
- }
727
- if (this.dragTimeout) {
728
- clearTimeout(this.dragTimeout);
729
- this.dragTimeout = null;
730
- this.pressed = false;
731
- }
732
- this.emitZoneAwareEvent('onRelease', event);
733
- }
734
- handleDragEnd(event) {
735
- var _a, _b;
736
- if (!this.dragStarted) {
737
- return;
738
- }
739
- if (this.mode === 'auto') {
740
- const isDroppedOverParentTarget = isPresent(this.service.dropTarget) && !contains((_a = this.service.dropTarget) === null || _a === void 0 ? void 0 : _a.element, (_b = this.service.dragTarget) === null || _b === void 0 ? void 0 : _b.element, true);
741
- const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
742
- if (isDroppedOverParentTarget || this.service.dropTargets.length > 0 && isPresent(elem)) {
743
- this.renderer.removeStyle(elem, 'transform');
744
- setElementStyles(this.renderer, elem, {
745
- transition: dragTargetTransition
746
- });
747
- this.positionsMap.delete(this.currentDragTargetElement);
748
- }
749
- }
750
- if (this.hint && isPresent(this.hintElem)) {
751
- this.destroyHint();
752
- if (this.mode === 'auto') {
753
- this.renderer.removeStyle(this.currentDragTargetElement, 'opacity');
754
- }
755
- }
756
- this.service.dragTarget = null;
757
- this.service.dragIndex = null;
758
- this.currentDragTarget.element = null;
759
- this.emitZoneAwareEvent('onDragEnd', event);
760
- if (isDragStartPrevented$1 || isDragPrevented$1) {
761
- return;
762
- }
763
- this.dragStarted = false;
764
- }
765
- get nativeElement() {
766
- return this.wrapper.nativeElement;
767
- }
768
- get hintElem() {
769
- return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
770
- }
771
- unsubscribe() {
772
- if (this.pointerDownSubscription) {
773
- this.pointerDownSubscription.unsubscribe();
774
- }
775
- if (this.pointerMoveSubscription) {
776
- this.pointerMoveSubscription.unsubscribe();
777
- }
778
- if (this.pointerUpSubscription) {
779
- this.pointerUpSubscription.unsubscribe();
780
- }
781
- if (this.scrollSubscription) {
782
- this.scrollSubscription.unsubscribe();
783
- }
784
- }
785
- subscribe() {
786
- this.ngZone.runOutsideAngular(() => {
787
- this.unsubscribe();
788
- if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
789
- return;
790
- }
791
- const element = this.nativeElement;
792
- if (this.service.pressed) {
793
- const pointerMoveStreams = allPointerMoveEvents.map((ev) => fromEvent(document, ev));
794
- const pointerUpStreams = allPointerUpEvents.map((ev) => fromEvent(document, ev));
795
- this.pointerMoveSubscription = merge(...pointerMoveStreams)
796
- .pipe(filter(() => this.dragTargetFilter !== ''))
797
- .subscribe(e => this.onPointerMove(e));
798
- this.pointerUpSubscription = merge(...pointerUpStreams)
799
- .subscribe(e => this.onPointerUp(e));
800
- if (isPresent(this.scrollableParent)) {
801
- this.scrollSubscription = fromEvent(this.scrollableParent, 'scroll')
802
- .subscribe(e => this.onPointerMove(e));
803
- }
804
- }
805
- else {
806
- const pointerDownStreams = allPointerDownEvents.map((ev) => fromEvent(element, ev));
807
- this.pointerDownSubscription = merge(...pointerDownStreams)
808
- .pipe(filter(() => this.dragTargetFilter !== ''))
809
- .subscribe((e) => {
810
- const filterElement = closestBySelector(e.target, this.isHandleSelectorValid ? this.dragHandle : this.dragTargetFilter);
811
- if (filterElement) {
812
- this.onPointerDown(e);
813
- }
814
- });
815
- }
816
- });
817
- }
818
- emitZoneAwareEvent(event, normalizedEvent) {
819
- const targetIdArgs = { dragTarget: this.currentDragTargetElement, dragTargetIndex: this.service.dragIndex };
820
- const eventProps = {
821
- dragTarget: this.currentDragTargetElement,
822
- dragEvent: normalizedEvent,
823
- dragTargetIndex: this.service.dragIndex,
824
- dragTargetId: this.dragTargetId(targetIdArgs)
825
- };
826
- if (this.hint && isPresent(this.hintElem)) {
827
- eventProps.hintElement = this.hintElem;
828
- }
829
- let eventArgs;
830
- switch (event) {
831
- case 'onDragReady':
832
- eventArgs = new DragTargetDragReadyEvent(eventProps);
833
- break;
834
- case 'onPress':
835
- eventArgs = new DragTargetPressEvent(eventProps);
836
- break;
837
- case 'onDragStart':
838
- eventArgs = new DragTargetDragStartEvent(eventProps);
839
- break;
840
- case 'onDrag':
841
- eventArgs = new DragTargetDragEvent(eventProps);
842
- break;
843
- case 'onRelease':
844
- eventArgs = new DragTargetReleaseEvent(eventProps);
845
- break;
846
- case 'onDragEnd':
847
- eventArgs = new DragTargetDragEndEvent(eventProps);
848
- break;
849
- default:
850
- break;
851
- }
852
- this.ngZone.run(() => {
853
- this[event].emit(eventArgs);
854
- });
855
- return eventArgs;
856
- }
857
- createHint() {
858
- if (!(isDocumentAvailable() && isPresent(this.wrapper))) {
859
- return;
860
- }
861
- if (isPresent(this.hint) && typeof this.hint === 'object') {
862
- if (isPresent(this.hint.hintTemplate)) {
863
- this.createCustomHint();
864
- }
865
- else {
866
- this.createDefaultHint();
867
- }
868
- }
869
- else {
870
- this.createDefaultHint();
871
- }
872
- this.currentDragTarget.hint = this.hintElem;
873
- if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
874
- this.hint.appendTo.element.nativeElement.appendChild(this.hintElem);
875
- }
876
- else {
877
- document.body.appendChild(this.hintElem);
878
- }
879
- }
880
- createDefaultHint() {
881
- this.defaultHint = this.currentDragTargetElement.cloneNode(true);
882
- if (typeof this.hint === 'object') {
883
- if (isPresent(this.hint.hintClass)) {
884
- const hintClasses = parseCSSClassNames(this.hint.hintClass);
885
- hintClasses.forEach(className => this.renderer.addClass(this.defaultHint, className));
886
- }
887
- }
888
- }
889
- createCustomHint() {
890
- if (isPresent(this.hint.appendTo)) {
891
- this.hintComponent = this.hint.appendTo.createComponent(HintComponent);
892
- }
893
- else {
894
- this.hintComponent = this.viewContainer.createComponent(HintComponent);
895
- }
896
- this.hintComponent.instance.template = this.hintTemplate;
897
- this.hintComponent.instance.directive = this;
898
- this.hintComponent.instance.targetIndex = this.service.dragIndex;
899
- const targetDataArgs = { dragTarget: this.currentDragTargetElement, dragTargetId: this.service.dragTargetId, dragTargetIndex: this.service.dragIndex };
900
- this.hintComponent.instance.contextData = this.dragData(targetDataArgs);
901
- this.hintComponent.changeDetectorRef.detectChanges();
902
- }
903
- destroyHint() {
904
- if (isPresent(this.hintTemplate)) {
905
- this.hintComponent.destroy();
906
- this.hintComponent.changeDetectorRef.detectChanges();
907
- this.hintComponent = null;
908
- }
909
- else {
910
- document.body.removeChild(this.defaultHint);
911
- this.defaultHint = null;
912
- }
913
- this.currentDragTarget.hint = null;
914
- }
915
- getDragIndex() {
916
- return this.allDragTargets.indexOf(this.currentDragTargetElement);
917
- }
918
- initializeDragTargets() {
919
- if (!isPresent(this.allDragTargets)) {
920
- if (this.previousDragTargets.length > 0) {
921
- this.clearPreviousTargets();
922
- }
923
- return;
924
- }
925
- this.allDragTargets.forEach(dragTargetEl => {
926
- const isDragTargetInitialized = this.service.dragTargets.find(dt => dt.element === dragTargetEl);
927
- if (!isDragTargetInitialized) {
928
- this.service.dragTargets.push({
929
- element: dragTargetEl,
930
- hint: null,
931
- onPress: this.handlePress.bind(this),
932
- onRelease: this.handleRelease.bind(this),
933
- onDragStart: this.handleDragStart.bind(this),
934
- onDrag: this.handleDrag.bind(this),
935
- onDragEnd: this.handleDragEnd.bind(this)
936
- });
937
- }
938
- });
939
- if (this.previousDragTargets.length > 0) {
940
- const dragTargetsToRemove = this.previousDragTargets.filter(dt => !this.allDragTargets.includes(dt));
941
- dragTargetsToRemove.forEach(dragTarget => {
942
- const idx = this.service.dragTargets.findIndex(serviceDragTarget => serviceDragTarget.element === dragTarget);
943
- if (idx > -1) {
944
- this.service.dragTargets.splice(idx, 1);
945
- }
946
- });
947
- }
948
- this.previousDragTargets = this.allDragTargets;
949
- this.currentDragTarget = {
950
- element: null,
951
- hint: null,
952
- onPress: this.handlePress.bind(this),
953
- onRelease: this.handleRelease.bind(this),
954
- onDragStart: this.handleDragStart.bind(this),
955
- onDrag: this.handleDrag.bind(this),
956
- onDragEnd: this.handleDragEnd.bind(this)
957
- };
958
- this.setCursorStyle();
959
- }
960
- isDragHandle(el) {
961
- return this.dragHandles.some(dh => contains(dh, el, true));
962
- }
963
- get isHandleSelectorValid() {
964
- return isPresent(this.dragHandle) && this.dragHandle !== '';
965
- }
966
- setCursorStyle() {
967
- if (!isDocumentAvailable()) {
968
- return;
969
- }
970
- if (isPresent(this.dragHandle) && this.dragHandle !== '') {
971
- if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
972
- this.dragHandles.forEach(handle => {
973
- this.renderer.setStyle(handle, 'cursor', 'move');
974
- });
975
- }
976
- }
977
- else {
978
- this.allDragTargets.forEach(target => {
979
- this.renderer.setStyle(target, 'cursor', 'move');
980
- });
981
- }
982
- }
983
- queryHost(selector) {
984
- if (isPresent(selector) && selector !== "") {
985
- return Array.from(this.nativeElement.querySelectorAll(selector));
986
- }
987
- }
988
- clearPreviousTargets() {
989
- this.previousDragTargets.forEach(dragTarget => {
990
- const idx = this.service.dragTargets.findIndex(serviceDragTarget => serviceDragTarget.element === dragTarget);
991
- if (idx > -1) {
992
- this.service.dragTargets.splice(idx, 1);
993
- }
994
- });
995
- this.previousDragTargets = [];
996
- }
997
- performDrag() {
998
- const elem = this.hint ? this.hintElem : this.currentDragTargetElement;
999
- if (elem) {
1000
- const styles = this.getStylesPerElement(elem);
1001
- setElementStyles(this.renderer, elem, styles);
1002
- }
1003
- }
1004
- calculatePosition(element, event) {
1005
- let position = null;
1006
- if (element === this.hintElem) {
1007
- position = { x: event.clientX, y: event.clientY };
1008
- }
1009
- else {
1010
- position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
1011
- }
1012
- return position;
1013
- }
1014
- getStylesPerElement(element) {
1015
- if (element === this.hintElem) {
1016
- const hintCoordinates = { x: this.position.x - this.initialPosition.x, y: this.position.y - this.initialPosition.y };
1017
- return {
1018
- top: `${hintCoordinates.y}px`,
1019
- left: `${hintCoordinates.x}px`,
1020
- transition: 'none',
1021
- position: 'absolute',
1022
- zIndex: 1999
1023
- };
1024
- }
1025
- else {
1026
- const transform = `translate(${this.position.x}px, ${this.position.y}px)`;
1027
- return {
1028
- transform: transform,
1029
- transition: 'none'
1030
- };
1031
- }
1032
- }
1033
- }
1034
- DragTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: DragStateService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
1035
- DragTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragTargetContainerDirective, isStandalone: true, selector: "[kendoDragTargetContainer]", inputs: { hint: "hint", dragTargetFilter: "dragTargetFilter", dragHandle: "dragHandle", dragDelay: "dragDelay", threshold: "threshold", dragTargetId: "dragTargetId", dragData: "dragData", dragDisabled: "dragDisabled", mode: "mode" }, outputs: { onDragReady: "onDragReady", onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onRelease: "onRelease", onDragEnd: "onDragEnd" }, exportAs: ["kendoDragTargetContainer"], ngImport: i0 });
1036
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetContainerDirective, decorators: [{
1037
- type: Directive,
1038
- args: [{
1039
- selector: '[kendoDragTargetContainer]',
1040
- exportAs: 'kendoDragTargetContainer',
1041
- standalone: true
1042
- }]
1043
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: DragStateService }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hint: [{
1044
- type: Input
1045
- }], dragTargetFilter: [{
1046
- type: Input
1047
- }], dragHandle: [{
1048
- type: Input
1049
- }], dragDelay: [{
1050
- type: Input
1051
- }], threshold: [{
1052
- type: Input
1053
- }], dragTargetId: [{
1054
- type: Input
1055
- }], dragData: [{
1056
- type: Input
1057
- }], dragDisabled: [{
1058
- type: Input
1059
- }], mode: [{
1060
- type: Input
1061
- }], onDragReady: [{
1062
- type: Output
1063
- }], onPress: [{
1064
- type: Output
1065
- }], onDragStart: [{
1066
- type: Output
1067
- }], onDrag: [{
1068
- type: Output
1069
- }], onRelease: [{
1070
- type: Output
1071
- }], onDragEnd: [{
1072
- type: Output
1073
- }] } });
1074
-
1075
- let isDragStartPrevented = false;
1076
- let isDragPrevented = false;
1077
- /**
1078
- * Represents the Kendo UI DragTarget directive for Angular.
1079
- */
1080
- class DragTargetDirective {
1081
- constructor(element, renderer, ngZone, service, viewContainer) {
1082
- this.element = element;
1083
- this.renderer = renderer;
1084
- this.ngZone = ngZone;
1085
- this.service = service;
1086
- this.viewContainer = viewContainer;
1087
- /**
1088
- * Defines whether a hint will be used for dragging. By default, the hint is a copy of the drag target. ([see example]({% slug drag_hint %})).
1089
- *
1090
- * @default false
1091
- */
1092
- this.hint = false;
1093
- /**
1094
- * The number of pixels the pointer moves in any direction before the dragging starts ([see example]({% slug minimum_distance %})). Applicable when `manualDrag` is set to `false`.
1095
- *
1096
- * @default 0
1097
- */
1098
- this.threshold = 0;
1099
- /**
1100
- * Defines the automatic container scrolling behavior when close to the edge ([see example]({% slug auto_scroll %})).
1101
- *
1102
- * @default true
1103
- */
1104
- this.autoScroll = true;
1105
- /**
1106
- * Defines the delay in milliseconds after which the drag will begin ([see example]({% slug drag_delay %})).
1107
- *
1108
- * @default 0
1109
- */
1110
- this.dragDelay = 0;
1111
- /**
1112
- * Specifies whether the default dragging behavior will be performed or the developer will manually handle the drag action.
1113
- *
1114
- * @default 'auto'
1115
- */
1116
- this.mode = 'auto';
1117
- /**
1118
- * Fires when the user presses the DragTarget element.
1119
- */
1120
- this.onPress = new EventEmitter();
1121
- /**
1122
- * Fires when the dragging of the DragTarget element begins.
1123
- */
1124
- this.onDragStart = new EventEmitter();
1125
- /**
1126
- * Fires while the user drags the DragTarget element.
1127
- */
1128
- this.onDrag = new EventEmitter();
1129
- /**
1130
- * Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
1131
- */
1132
- this.onDragReady = new EventEmitter();
1133
- /**
1134
- * Fires when the user releases the DragTarget element after being pressed.
1135
- */
1136
- this.onRelease = new EventEmitter();
1137
- /**
1138
- * Fires when the dragging of the DragTarget ends and the element is released.
1139
- */
1140
- this.onDragEnd = new EventEmitter();
1141
- this.dragTarget = null;
1142
- this.domSubscriptions = [];
1143
- this.hintComponent = null;
1144
- this.dragStarted = false;
1145
- this.pressed = false;
1146
- this.dragTimeout = null;
1147
- this.initialPosition = { x: 0, y: 0 };
1148
- this.position = { x: 0, y: 0 };
1149
- this.scrollableParent = null;
1150
- this.defaultHint = null;
1151
- this._dragData = () => null;
1152
- validatePackage(packageMetadata);
1153
- }
1154
- /**
1155
- * Defines a callback function used for attaching custom data to the dragTarget.
1156
- * The data will be available in the events of the respective [`DropTarget`]({% slug api_utils_droptargetdirective %}) or [`DropTargetContainer`]({% slug api_utils_droptargetcontainerdirective %}) directives.
1157
- * The current DragTarget HTML element and its `dragTargetId` will be available as arguments.
1158
- */
1159
- set dragData(fn) {
1160
- if (isDevMode && typeof fn !== 'function') {
1161
- throw new Error(`dragData must be a function, but received ${JSON.stringify(fn)}.`);
1162
- }
1163
- this._dragData = fn;
1164
- }
1165
- get dragData() {
1166
- return this._dragData;
1167
- }
1168
- get hintTemplate() {
1169
- return isPresent(this.hint) && typeof this.hint === 'object' ? this.hint.hintTemplate : null;
1170
- }
1171
- get nativeElement() {
1172
- return this.element.nativeElement;
1173
- }
1174
- get hintElem() {
1175
- return this.hintTemplate && isPresent(this.hintComponent) ? this.hintComponent.instance.element.nativeElement : this.defaultHint;
1176
- }
1177
- onPointerDown(event) {
1178
- if (this.dragHandles.length && !this.isDragHandle(event.target)) {
1179
- return;
1180
- }
1181
- event.preventDefault();
1182
- const action = getAction(event, this.dragTarget);
1183
- this.service.handleDragAndDrop(action);
1184
- this.service.autoScroll = typeof this.autoScroll === 'object' ? this.autoScroll.enabled !== false : this.autoScroll;
1185
- this.service.scrollableParent = this.getAutoScrollContainer();
1186
- this.service.autoScrollDirection = typeof this.autoScroll === 'object' ? this.autoScroll.direction : { horizontal: true, vertical: true };
1187
- this.attachDomHandlers();
1188
- }
1189
- onPointerMove(event) {
1190
- event.preventDefault();
1191
- const action = getAction(event, this.dragTarget);
1192
- this.service.handleDragAndDrop(action);
1193
- }
1194
- onPointerUp(event) {
1195
- event.preventDefault();
1196
- const action = getAction(event, this.dragTarget);
1197
- this.service.handleDragAndDrop(action);
1198
- this.attachDomHandlers();
1199
- }
1200
- ngOnInit() {
1201
- this.initializeDragTarget();
1202
- }
1203
- ngAfterContentInit() {
1204
- if (isPresent(this.element) || isPresent(this.dragTarget)) {
1205
- this.attachDomHandlers();
1206
- if (!this.dragHandles.length) {
1207
- this.renderer.setStyle(this.nativeElement, 'cursor', 'move');
1208
- }
1209
- }
1210
- this.service.dragTargets.push(this.dragTarget);
1211
- }
1212
- ngOnDestroy() {
1213
- this.domSubscriptions.forEach(subscription => subscription());
1214
- }
1215
- handlePress(event) {
1216
- if (this.dragDelay > 0) {
1217
- this.dragTimeout = window.setTimeout(() => {
1218
- this.pressed = true;
1219
- this.emitZoneAwareEvent('onDragReady', event);
1220
- }, this.dragDelay);
1221
- }
1222
- else {
1223
- this.pressed = true;
1224
- }
1225
- this.scrollableParent = this.dragTarget.element ? getScrollableParent(this.dragTarget.element) : null;
1226
- this.emitZoneAwareEvent('onPress', event);
1227
- }
1228
- handleDragStart(event) {
1229
- if (!this.pressed) {
1230
- if (this.dragTimeout) {
1231
- window.clearTimeout(this.dragTimeout);
1232
- this.dragTimeout = null;
1233
- }
1234
- return;
1235
- }
1236
- isDragStartPrevented = this.emitZoneAwareEvent('onDragStart', event).isDefaultPrevented();
1237
- if (isDragStartPrevented) {
1238
- return;
1239
- }
1240
- if (this.hint) {
1241
- this.createHint();
1242
- if (this.mode === 'auto') {
1243
- this.renderer.setStyle(this.nativeElement, 'opacity', '0.7');
1244
- }
1245
- this.initialPosition = { x: event.offsetX, y: event.offsetY };
1246
- }
1247
- else {
1248
- this.initialPosition = { x: event.clientX - this.position.x, y: event.clientY - this.position.y };
1249
- }
1250
- this.dragStarted = this.threshold === 0;
1251
- this.service.dragTarget = this.dragTarget;
1252
- this.service.dragTargetDirective = this;
1253
- this.service.dragData = this.dragData({ dragTarget: this.dragTarget.element, dragTargetId: this.dragTargetIdResult, dragTargetIndex: null });
1254
- }
1255
- handleDrag(event) {
1256
- if (!this.pressed || isDragStartPrevented) {
1257
- return;
1258
- }
1259
- const elem = this.hint ? this.hintElem : this.nativeElement;
1260
- this.position = this.calculatePosition(elem, event);
1261
- const thresholdNotReached = Math.abs(this.position.x) < this.threshold && Math.abs(this.position.y) < this.threshold;
1262
- if (!this.dragStarted && thresholdNotReached) {
1263
- return;
1264
- }
1265
- if (!this.dragStarted && this.threshold > 0) {
1266
- this.dragStarted = true;
1267
- }
1268
- isDragPrevented = this.emitZoneAwareEvent('onDrag', event).isDefaultPrevented();
1269
- if (isDragPrevented) {
1270
- return;
1271
- }
1272
- if (this.mode === 'auto') {
1273
- this.performDrag();
1274
- }
1275
- else {
1276
- this.dragStarted = true;
1277
- }
1278
- }
1279
- handleRelease(event) {
1280
- if (this.dragTimeout) {
1281
- clearTimeout(this.dragTimeout);
1282
- this.dragTimeout = null;
1283
- this.pressed = false;
1284
- }
1285
- this.emitZoneAwareEvent('onRelease', event);
1286
- }
1287
- handleDragEnd(event) {
1288
- var _a, _b;
1289
- if (this.mode === 'auto') {
1290
- const isDroppedOverParentTarget = isPresent(this.service.dropTarget) && !contains((_a = this.service.dropTarget) === null || _a === void 0 ? void 0 : _a.element, (_b = this.service.dragTarget) === null || _b === void 0 ? void 0 : _b.element, true);
1291
- const elem = this.hint ? this.hintElem : this.nativeElement;
1292
- if (isDroppedOverParentTarget || this.service.dropTargets.length > 0 && isPresent(elem)) {
1293
- this.renderer.removeStyle(elem, 'transform');
1294
- setElementStyles(this.renderer, elem, {
1295
- transition: dragTargetTransition
1296
- });
1297
- this.position = { x: 0, y: 0 };
1298
- }
1299
- }
1300
- if (this.hint && isPresent(this.hintElem)) {
1301
- this.destroyHint();
1302
- if (this.mode === 'auto') {
1303
- this.renderer.removeStyle(this.nativeElement, 'opacity');
1304
- }
1305
- }
1306
- this.service.dragTarget = null;
1307
- this.service.dragTargetDirective = null;
1308
- if (!this.dragStarted || isDragStartPrevented || isDragPrevented) {
1309
- return;
1310
- }
1311
- this.emitZoneAwareEvent('onDragEnd', event);
1312
- this.dragStarted = false;
1313
- }
1314
- initializeDragTarget() {
1315
- this.dragTarget = {
1316
- element: this.nativeElement,
1317
- hint: null,
1318
- onPress: this.handlePress.bind(this),
1319
- onRelease: this.handleRelease.bind(this),
1320
- onDragStart: this.handleDragStart.bind(this),
1321
- onDrag: this.handleDrag.bind(this),
1322
- onDragEnd: this.handleDragEnd.bind(this)
1323
- };
1324
- }
1325
- attachDomHandlers() {
1326
- this.ngZone.runOutsideAngular(() => {
1327
- if (this.domSubscriptions.length > 0) {
1328
- this.domSubscriptions.forEach(subscription => subscription());
1329
- }
1330
- if (!(isDocumentAvailable() && isPresent(this.element))) {
1331
- return;
1332
- }
1333
- if (this.service.pressed) {
1334
- this.onPointerMove = this.onPointerMove.bind(this);
1335
- this.onPointerUp = this.onPointerUp.bind(this);
1336
- this.domSubscriptions = [
1337
- this.renderer.listen(document, 'pointermove', this.onPointerMove),
1338
- this.renderer.listen(document, 'mousemove', this.onPointerMove),
1339
- this.renderer.listen(document, 'touchmove', this.onPointerMove),
1340
- this.renderer.listen(document, 'pointerup', this.onPointerUp),
1341
- this.renderer.listen(document, 'pointercancel', this.onPointerUp),
1342
- this.renderer.listen(document, 'mouseup', this.onPointerUp),
1343
- this.renderer.listen(document, 'contextmenu', this.onPointerUp),
1344
- this.renderer.listen(document, 'touchend', this.onPointerUp),
1345
- this.renderer.listen(document, 'touchcancel', this.onPointerUp)
1346
- ];
1347
- if (isPresent(this.scrollableParent)) {
1348
- if (this.scrollableParent === document.getElementsByTagName('html')[0]) {
1349
- this.scrollableParent = window;
1350
- }
1351
- this.domSubscriptions.push(this.renderer.listen(this.scrollableParent, 'scroll', this.onPointerMove));
1352
- }
1353
- }
1354
- else {
1355
- this.onPointerDown = this.onPointerDown.bind(this);
1356
- const element = this.nativeElement;
1357
- this.domSubscriptions = [
1358
- this.renderer.listen(element, 'pointerdown', this.onPointerDown),
1359
- this.renderer.listen(element, 'mousedown', this.onPointerDown),
1360
- this.renderer.listen(element, 'touchstart', this.onPointerDown)
1361
- ];
1362
- }
1363
- });
1364
- }
1365
- isDragHandle(el) {
1366
- return this.dragHandles.toArray().some(dh => contains(dh.element.nativeElement, el, true));
1367
- }
1368
- getAutoScrollContainer() {
1369
- return typeof this.autoScroll === 'object' &&
1370
- this.autoScroll.boundaryElementRef &&
1371
- this.autoScroll.boundaryElementRef.nativeElement ?
1372
- this.autoScroll.boundaryElementRef.nativeElement : null;
1373
- }
1374
- createHint() {
1375
- if (!(isDocumentAvailable() && isPresent(this.element))) {
1376
- return;
1377
- }
1378
- if (isPresent(this.hint) && typeof this.hint === 'object') {
1379
- if (isPresent(this.hint.hintTemplate)) {
1380
- this.createCustomHint();
1381
- }
1382
- else {
1383
- this.createDefaultHint();
1384
- }
1385
- }
1386
- else {
1387
- this.createDefaultHint();
1388
- }
1389
- this.dragTarget.hint = this.hintElem;
1390
- if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
1391
- this.hint.appendTo.element.nativeElement.appendChild(this.hintElem);
1392
- }
1393
- else {
1394
- document.body.appendChild(this.hintElem);
1395
- }
1396
- }
1397
- createDefaultHint() {
1398
- this.defaultHint = this.nativeElement.cloneNode(true);
1399
- if (typeof this.hint === 'object') {
1400
- if (isPresent(this.hint.hintClass)) {
1401
- const hintClasses = parseCSSClassNames(this.hint.hintClass);
1402
- hintClasses.forEach(className => this.renderer.addClass(this.defaultHint, className));
1403
- }
1404
- }
1405
- }
1406
- createCustomHint() {
1407
- if (isPresent(this.hint.appendTo)) {
1408
- this.hintComponent = this.hint.appendTo.createComponent(HintComponent);
1409
- }
1410
- else {
1411
- this.hintComponent = this.viewContainer.createComponent(HintComponent);
1412
- }
1413
- this.hintComponent.instance.template = this.hintTemplate;
1414
- this.hintComponent.instance.directive = this;
1415
- this.hintComponent.changeDetectorRef.detectChanges();
1416
- }
1417
- destroyHint() {
1418
- if (isPresent(this.hintTemplate)) {
1419
- this.hintComponent.destroy();
1420
- this.hintComponent.changeDetectorRef.detectChanges();
1421
- this.hintComponent = null;
1422
- }
1423
- else {
1424
- if (typeof this.hint === 'object' && isPresent(this.hint.appendTo)) {
1425
- this.hint.appendTo.element.nativeElement.removeChild(this.defaultHint);
1426
- }
1427
- else {
1428
- document.body.removeChild(this.defaultHint);
1429
- }
1430
- this.defaultHint = null;
1431
- }
1432
- this.dragTarget.hint = null;
1433
- }
1434
- emitZoneAwareEvent(event, normalizedEvent) {
1435
- const eventProps = {
1436
- dragTarget: this.nativeElement,
1437
- dragEvent: normalizedEvent
1438
- };
1439
- if (this.hint && isPresent(this.hintElem)) {
1440
- eventProps.hintElement = this.hintElem;
1441
- }
1442
- if (this.dragTargetId && this.dragTargetId !== '') {
1443
- eventProps.dragTargetId = this.dragTargetIdResult;
1444
- }
1445
- let eventArgs;
1446
- switch (event) {
1447
- case 'onDragReady':
1448
- eventArgs = new DragTargetDragReadyEvent(eventProps);
1449
- break;
1450
- case 'onPress':
1451
- eventArgs = new DragTargetPressEvent(eventProps);
1452
- break;
1453
- case 'onDragStart':
1454
- eventArgs = new DragTargetDragStartEvent(eventProps);
1455
- break;
1456
- case 'onDrag':
1457
- eventArgs = new DragTargetDragEvent(eventProps);
1458
- break;
1459
- case 'onRelease':
1460
- eventArgs = new DragTargetReleaseEvent(eventProps);
1461
- break;
1462
- case 'onDragEnd':
1463
- eventArgs = new DragTargetDragEndEvent(eventProps);
1464
- break;
1465
- default:
1466
- break;
1467
- }
1468
- this.ngZone.run(() => {
1469
- this[event].emit(eventArgs);
1470
- });
1471
- return eventArgs;
1472
- }
1473
- get dragTargetIdResult() {
1474
- if (this.dragTargetId && this.dragTargetId !== '') {
1475
- return typeof this.dragTargetId === 'string' ? this.dragTargetId : this.dragTargetId({ dragTarget: this.dragTarget.element, dragTargetIndex: null });
1476
- }
1477
- }
1478
- performDrag() {
1479
- const elem = this.hint ? this.hintElem : this.nativeElement;
1480
- if (elem) {
1481
- const styles = this.getStylesPerElement(elem);
1482
- setElementStyles(this.renderer, elem, styles);
1483
- }
1484
- }
1485
- calculatePosition(element, event) {
1486
- let position = null;
1487
- if (element === this.hintElem) {
1488
- position = { x: event.clientX, y: event.clientY };
1489
- }
1490
- else {
1491
- position = { x: event.clientX - this.initialPosition.x + event.scrollX, y: event.clientY - this.initialPosition.y + event.scrollY };
1492
- }
1493
- if (this.restrictByAxis === 'horizontal') {
1494
- position.y = 0;
1495
- }
1496
- else if (this.restrictByAxis === 'vertical') {
1497
- position.x = 0;
1498
- }
1499
- return position;
1500
- }
1501
- getStylesPerElement(element) {
1502
- if (element === this.hintElem) {
1503
- const hintCoordinates = { x: this.position.x - this.initialPosition.x, y: this.position.y - this.initialPosition.y };
1504
- return {
1505
- top: `${hintCoordinates.y}px`,
1506
- left: `${hintCoordinates.x}px`,
1507
- transition: 'none',
1508
- position: 'absolute',
1509
- zIndex: 1999
1510
- };
1511
- }
1512
- else {
1513
- const transform = `translate(${this.position.x}px, ${this.position.y}px)`;
1514
- return {
1515
- transform: transform,
1516
- transition: 'none'
1517
- };
1518
- }
1519
- }
1520
- }
1521
- DragTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: DragStateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
1522
- DragTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DragTargetDirective, isStandalone: true, selector: "[kendoDragTarget]", inputs: { hint: "hint", threshold: "threshold", autoScroll: "autoScroll", dragTargetId: "dragTargetId", dragDelay: "dragDelay", restrictByAxis: "restrictByAxis", mode: "mode", dragData: "dragData" }, outputs: { onPress: "onPress", onDragStart: "onDragStart", onDrag: "onDrag", onDragReady: "onDragReady", onRelease: "onRelease", onDragEnd: "onDragEnd" }, queries: [{ propertyName: "dragHandles", predicate: DragHandleDirective }], exportAs: ["kendoDragTarget"], ngImport: i0 });
1523
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragTargetDirective, decorators: [{
1524
- type: Directive,
1525
- args: [{
1526
- selector: '[kendoDragTarget]',
1527
- exportAs: 'kendoDragTarget',
1528
- standalone: true
1529
- }]
1530
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: DragStateService }, { type: i0.ViewContainerRef }]; }, propDecorators: { hint: [{
1531
- type: Input
1532
- }], threshold: [{
1533
- type: Input
1534
- }], autoScroll: [{
1535
- type: Input
1536
- }], dragTargetId: [{
1537
- type: Input
1538
- }], dragDelay: [{
1539
- type: Input
1540
- }], restrictByAxis: [{
1541
- type: Input
1542
- }], mode: [{
1543
- type: Input
1544
- }], dragData: [{
1545
- type: Input
1546
- }], onPress: [{
1547
- type: Output
1548
- }], onDragStart: [{
1549
- type: Output
1550
- }], onDrag: [{
1551
- type: Output
1552
- }], onDragReady: [{
1553
- type: Output
1554
- }], onRelease: [{
1555
- type: Output
1556
- }], onDragEnd: [{
1557
- type: Output
1558
- }], dragHandles: [{
1559
- type: ContentChildren,
1560
- args: [DragHandleDirective]
1561
- }] } });
1562
-
1563
- /**
1564
- * Arguments for the drag events of the DropTarget and DropTargetContainer directives.
1565
- */
1566
- class DropTargetEvent {
1567
- /**
1568
- * @hidden
1569
- */
1570
- constructor(args) {
1571
- Object.assign(this, args);
1572
- }
1573
- /**
1574
- * Left for backward compatibility for the DropTarget deprecated events.
1575
- * @hidden
1576
- */
1577
- get normalizedEvent() {
1578
- return this.dragEvent;
1579
- }
1580
- /**
1581
- * Left for backward compatibility for the DropTarget deprecated events.
1582
- * @hidden
1583
- */
1584
- get hostElement() {
1585
- return this.dropTarget;
1586
- }
1587
- }
1588
-
1589
- /**
1590
- * Represents the [Kendo UI DropTargetContainer directive for Angular]({% slug api_utils_droptargetcontainerdirective %}).
1591
- * Used to configure multiple elements as drop targets.
1592
- *
1593
- * @example
1594
- * ```ts-no-run
1595
- * <div kendoDropTargetContainer dropTargetFilter=".my-droptarget">
1596
- * <div class="my-droptarget">foo</div>
1597
- * </div>
1598
- * ```
1599
- */
1600
- class DropTargetContainerDirective {
1601
- constructor(service, element, ngZone, cdr) {
1602
- this.service = service;
1603
- this.element = element;
1604
- this.ngZone = ngZone;
1605
- this.cdr = cdr;
1606
- /**
1607
- * Fires when a DragTarget element enters the DropTarget.
1608
- */
1609
- this.onDragEnter = new EventEmitter();
1610
- /**
1611
- * Fires when a DragTarget element is being dragged over the DropTarget.
1612
- */
1613
- this.onDragOver = new EventEmitter();
1614
- /**
1615
- * Fires when a DragTarget element leaves the DropTarget.
1616
- */
1617
- this.onDragLeave = new EventEmitter();
1618
- /**
1619
- * Fires when a DragTarget element is dropped over the DropTarget.
1620
- */
1621
- this.onDrop = new EventEmitter();
1622
- this.currentDropTargetElement = null;
1623
- this.previousDropTargets = [];
1624
- this._dropTargetFilter = null;
1625
- this._dropDisabled = false;
1626
- validatePackage(packageMetadata);
1627
- }
1628
- /**
1629
- * Specifies a selector for elements within a container which will be configured as drop targets
1630
- * ([see example]({% slug drop_target_container %})). The possible values include any
1631
- * DOM `selector`.
1632
- */
1633
- set dropTargetFilter(value) {
1634
- this._dropTargetFilter = value;
1635
- if (!this.dropDisabled) {
1636
- this.initializeDropTargets();
1637
- }
1638
- }
1639
- get dropTargetFilter() {
1640
- return this._dropTargetFilter;
1641
- }
1642
- /**
1643
- * Specifies whether the Drop Targets within the container will emit the corresponding events upon interaction with a Drag Target.
1644
- */
1645
- set dropDisabled(value) {
1646
- this._dropDisabled = value;
1647
- if (value) {
1648
- this.clearPreviousTargets();
1649
- }
1650
- else {
1651
- this.initializeDropTargets();
1652
- }
1653
- }
1654
- get dropDisabled() {
1655
- return this._dropDisabled;
1656
- }
1657
- /**
1658
- * Used for notifying the DropTargetContainer that its content has changed.
1659
- */
1660
- notify() {
1661
- this.cdr.detectChanges();
1662
- this.initializeDropTargets();
1663
- }
1664
- get nativeElement() {
1665
- return this.element.nativeElement;
1666
- }
1667
- ngAfterViewInit() {
1668
- !this.dropDisabled && this.initializeDropTargets();
1669
- }
1670
- get allDropTargets() {
1671
- if (isPresent(this.dropTargetFilter) && this.dropTargetFilter !== '') {
1672
- return Array.from(this.nativeElement.querySelectorAll(this.dropTargetFilter));
1673
- }
1674
- }
1675
- /**
1676
- * @hidden
1677
- */
1678
- handleDragEnter(event) {
1679
- if (!this.service.dragTargetPresent || this.service.dropTargetPresent) {
1680
- return;
1681
- }
1682
- const eventTarget = event.originalEvent.target;
1683
- const currDropTargetElem = intersect(eventTarget, this.allDropTargets);
1684
- const currDropTarget = this.service.dropTargets.find(dt => dt.element === currDropTargetElem);
1685
- if (!isPresent(currDropTargetElem) || !isPresent(currDropTarget)) {
1686
- return;
1687
- }
1688
- this.currentDropTargetElement = currDropTargetElem;
1689
- this.service.dropTarget = currDropTarget;
1690
- this.service.dropIndex = this.getDropIndex();
1691
- this.emitZoneAwareEvent('onDragEnter', event);
1692
- }
1693
- /**
1694
- * @hidden
1695
- */
1696
- handleDragLeave(event) {
1697
- if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
1698
- return;
1699
- }
1700
- this.emitZoneAwareEvent('onDragLeave', event);
1701
- this.currentDropTargetElement = null;
1702
- this.service.dropTarget = null;
1703
- this.service.dropIndex = null;
1704
- }
1705
- /**
1706
- * @hidden
1707
- */
1708
- handleDragOver(event) {
1709
- if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
1710
- return;
1711
- }
1712
- this.emitZoneAwareEvent('onDragOver', event);
1713
- }
1714
- /**
1715
- * @hidden
1716
- */
1717
- handleDrop(event) {
1718
- if (!this.service.dragTargetPresent || !this.service.dropTargetPresent) {
1719
- return;
1720
- }
1721
- this.emitZoneAwareEvent('onDrop', event);
1722
- this.currentDropTargetElement = null;
1723
- this.service.dropTarget = null;
1724
- this.service.dropIndex = null;
1725
- }
1726
- initializeDropTargets() {
1727
- if (!isPresent(this.allDropTargets)) {
1728
- if (this.previousDropTargets.length > 0) {
1729
- this.clearPreviousTargets();
1730
- }
1731
- return;
1732
- }
1733
- this.allDropTargets.forEach(dropTargetEl => {
1734
- const isDropTargetInitialized = this.service.dropTargets.find(dt => dt.element === dropTargetEl);
1735
- if (!isDropTargetInitialized) {
1736
- this.service.dropTargets.push({
1737
- element: dropTargetEl,
1738
- onDragEnter: this.handleDragEnter.bind(this),
1739
- onDragLeave: this.handleDragLeave.bind(this),
1740
- onDragOver: this.handleDragOver.bind(this),
1741
- onDrop: this.handleDrop.bind(this)
1742
- });
1743
- }
1744
- });
1745
- if (this.previousDropTargets.length > 0) {
1746
- const dropTargetsToRemove = this.previousDropTargets.filter(dt => !this.allDropTargets.includes(dt));
1747
- dropTargetsToRemove.forEach(dropTarget => {
1748
- const idx = this.service.dropTargets.findIndex(serviceDropTarget => serviceDropTarget.element === dropTarget);
1749
- if (idx > -1) {
1750
- this.service.dropTargets.splice(idx, 1);
1751
- }
1752
- });
1753
- }
1754
- this.previousDropTargets = this.allDropTargets;
1755
- }
1756
- emitZoneAwareEvent(event, normalizedEvent) {
1757
- var _a, _b;
1758
- const eventProps = {
1759
- dragTarget: (_a = this.service.dragTarget) === null || _a === void 0 ? void 0 : _a.element,
1760
- dropTarget: this.currentDropTargetElement,
1761
- dragData: this.service.dragData,
1762
- dragEvent: normalizedEvent,
1763
- dropTargetIndex: this.service.dropIndex
1764
- };
1765
- if (isPresent((_b = this.service.dragTarget) === null || _b === void 0 ? void 0 : _b.hint)) {
1766
- eventProps.hintElement = this.service.dragTarget.hint;
1767
- }
1768
- const eventArgs = new DropTargetEvent(eventProps);
1769
- this.ngZone.run(() => {
1770
- this[event].emit(eventArgs);
1771
- });
1772
- }
1773
- getDropIndex() {
1774
- return this.allDropTargets.indexOf(this.currentDropTargetElement);
1775
- }
1776
- clearPreviousTargets() {
1777
- this.previousDropTargets.forEach(dropTarget => {
1778
- const idx = this.service.dropTargets.findIndex(serviceDropTarget => serviceDropTarget.element === dropTarget);
1779
- if (idx > -1) {
1780
- this.service.dropTargets.splice(idx, 1);
1781
- }
1782
- });
1783
- this.previousDropTargets = [];
1784
- }
1785
- }
1786
- DropTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetContainerDirective, deps: [{ token: DragStateService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
1787
- DropTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropTargetContainerDirective, isStandalone: true, selector: "[kendoDropTargetContainer]", inputs: { dropTargetFilter: "dropTargetFilter", dropDisabled: "dropDisabled" }, outputs: { onDragEnter: "onDragEnter", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" }, exportAs: ["kendoDropTargetContainer"], ngImport: i0 });
1788
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetContainerDirective, decorators: [{
1789
- type: Directive,
1790
- args: [{
1791
- selector: '[kendoDropTargetContainer]',
1792
- exportAs: 'kendoDropTargetContainer',
1793
- standalone: true
1794
- }]
1795
- }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropTargetFilter: [{
1796
- type: Input
1797
- }], dropDisabled: [{
1798
- type: Input
1799
- }], onDragEnter: [{
1800
- type: Output
1801
- }], onDragOver: [{
1802
- type: Output
1803
- }], onDragLeave: [{
1804
- type: Output
1805
- }], onDrop: [{
1806
- type: Output
1807
- }] } });
1808
-
1809
- /**
1810
- * Represents the Kendo UI DropTarget directive for Angular.
1811
- */
1812
- class DropTargetDirective {
1813
- constructor(service, element, ngZone) {
1814
- this.service = service;
1815
- this.element = element;
1816
- this.ngZone = ngZone;
1817
- /**
1818
- * Fires when a DragTarget element enters the DropTarget.
1819
- */
1820
- this.onDragEnter = new EventEmitter();
1821
- /**
1822
- * Fires when a DragTarget element is being dragged over the DropTarget.
1823
- */
1824
- this.onDragOver = new EventEmitter();
1825
- /**
1826
- * Fires when a DragTarget element leaves the DropTarget.
1827
- */
1828
- this.onDragLeave = new EventEmitter();
1829
- /**
1830
- * Fires when a DragTarget element is dropped over the DropTarget.
1831
- */
1832
- this.onDrop = new EventEmitter();
1833
- validatePackage(packageMetadata);
1834
- }
1835
- ngOnInit() {
1836
- this.initializeDropTarget();
1837
- this.service.dropTargets.push(this.dropTarget);
1838
- }
1839
- /**
1840
- * @hidden
1841
- */
1842
- handleDragEnter(event) {
1843
- if (!this.service.dragTarget) {
1844
- return;
1845
- }
1846
- this.service.dropTarget = this.dropTarget;
1847
- this.emitZoneAwareEvent('onDragEnter', event);
1848
- }
1849
- /**
1850
- * @hidden
1851
- */
1852
- handleDragLeave(event) {
1853
- this.service.dropTarget = null;
1854
- if (!this.service.dragTarget) {
1855
- return;
1856
- }
1857
- this.emitZoneAwareEvent('onDragLeave', event);
1858
- }
1859
- /**
1860
- * @hidden
1861
- */
1862
- handleDragOver(event) {
1863
- if (!this.service.dragTarget) {
1864
- return;
1865
- }
1866
- this.emitZoneAwareEvent('onDragOver', event);
1867
- }
1868
- /**
1869
- * @hidden
1870
- */
1871
- handleDrop(event) {
1872
- this.emitZoneAwareEvent('onDrop', event);
1873
- this.service.dropTarget = null;
1874
- }
1875
- initializeDropTarget() {
1876
- this.dropTarget = {
1877
- element: this.element.nativeElement,
1878
- onDragEnter: this.handleDragEnter.bind(this),
1879
- onDragLeave: this.handleDragLeave.bind(this),
1880
- onDragOver: this.handleDragOver.bind(this),
1881
- onDrop: this.handleDrop.bind(this)
1882
- };
1883
- }
1884
- emitZoneAwareEvent(event, normalizedEvent) {
1885
- var _a, _b;
1886
- const eventProps = {
1887
- dropTarget: this.element.nativeElement,
1888
- dragTarget: (_a = this.service.dragTarget) === null || _a === void 0 ? void 0 : _a.element,
1889
- dragEvent: normalizedEvent,
1890
- dragData: this.service.dragData
1891
- };
1892
- if (isPresent((_b = this.service.dragTarget) === null || _b === void 0 ? void 0 : _b.hint)) {
1893
- eventProps.hintElement = this.service.dragTarget.element;
1894
- }
1895
- const eventArgs = new DropTargetEvent(eventProps);
1896
- this.ngZone.run(() => {
1897
- this[event].emit(eventArgs);
1898
- });
1899
- }
1900
- }
1901
- DropTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetDirective, deps: [{ token: DragStateService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
1902
- DropTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DropTargetDirective, isStandalone: true, selector: "[kendoDropTarget]", outputs: { onDragEnter: "onDragEnter", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" }, exportAs: ["kendoDropTarget"], ngImport: i0 });
1903
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropTargetDirective, decorators: [{
1904
- type: Directive,
1905
- args: [{
1906
- selector: '[kendoDropTarget]',
1907
- exportAs: 'kendoDropTarget',
1908
- standalone: true
1909
- }]
1910
- }], ctorParameters: function () { return [{ type: DragStateService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { onDragEnter: [{
1911
- type: Output
1912
- }], onDragOver: [{
1913
- type: Output
1914
- }], onDragLeave: [{
1915
- type: Output
1916
- }], onDrop: [{
1917
- type: Output
1918
- }] } });
1919
-
1920
- /**
1921
- * Utility array that contains all `Drag and Drop` related components and directives
1922
- */
1923
- const KENDO_DRAGANDDROP = [
1924
- DragTargetDirective,
1925
- DragHandleDirective,
1926
- DropTargetDirective,
1927
- DragTargetContainerDirective,
1928
- DropTargetContainerDirective,
1929
- HintComponent
1930
- ];
1931
- /**
1932
- * Utility array that contains all `@progress/kendo-angular-utils` related components and directives.
1933
- * > As of now, `KENDO_UTILS` includes only the `KENDO_DRAGANDDROP` utility array and their usage is equivalent.
1934
- */
1935
- const KENDO_UTILS = [
1936
- ...KENDO_DRAGANDDROP
1937
- ];
1938
-
1939
- // IMPORTANT: NgModule export kept for backwards compatibility
1940
- /**
1941
- * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
1942
- * definition for the Utils components.
1943
- *
1944
- * @example
1945
- *
1946
- * ```ts-no-run
1947
- * // Import the Utils module
1948
- * import { UtilsModule } from '@progress/kendo-angular-utils';
1949
- *
1950
- * // The browser platform with a compiler
1951
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
1952
- *
1953
- * import { NgModule } from '@angular/core';
1954
- *
1955
- * // Import the app component
1956
- * import { AppComponent } from './app.component';
1957
- *
1958
- * // Define the app module
1959
- * _@NgModule({
1960
- * declarations: [AppComponent], // declare app component
1961
- * imports: [BrowserModule, UtilsModule], // import Utils module
1962
- * bootstrap: [AppComponent]
1963
- * })
1964
- * export class AppModule {}
1965
- *
1966
- * // Compile and launch the module
1967
- * platformBrowserDynamic().bootstrapModule(AppModule);
1968
- *
1969
- * ```
1970
- */
1971
- class UtilsModule {
1972
- }
1973
- UtilsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1974
- UtilsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, imports: [DragTargetDirective, DragHandleDirective, DropTargetDirective, DragTargetContainerDirective, DropTargetContainerDirective, HintComponent], exports: [DragTargetDirective, DragHandleDirective, DropTargetDirective, DragTargetContainerDirective, DropTargetContainerDirective, HintComponent] });
1975
- UtilsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, imports: [HintComponent] });
1976
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UtilsModule, decorators: [{
1977
- type: NgModule,
1978
- args: [{
1979
- exports: [...KENDO_UTILS],
1980
- imports: [...KENDO_UTILS]
1981
- }]
1982
- }] });
1983
-
1984
- // IMPORTANT: NgModule export kept for backwards compatibility
1985
- /**
1986
- * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
1987
- * definition for the Drag and Drop directives.
1988
- *
1989
- * @example
1990
- *
1991
- * ```ts-no-run
1992
- * // Import the DragAndDrop module
1993
- * import { DragAndDropModule } from '@progress/kendo-angular-utils';
1994
- *
1995
- * // The browser platform with a compiler
1996
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
1997
- *
1998
- * import { NgModule } from '@angular/core';
1999
- *
2000
- * // Import the app component
2001
- * import { AppComponent } from './app.component';
2002
- *
2003
- * // Define the app module
2004
- * _@NgModule({
2005
- * declarations: [AppComponent], // declare app component
2006
- * imports: [BrowserModule, DragAndDropModule], // import DragAndDropModule module
2007
- * bootstrap: [AppComponent]
2008
- * })
2009
- * export class AppModule {}
2010
- *
2011
- * // Compile and launch the module
2012
- * platformBrowserDynamic().bootstrapModule(AppModule);
2013
- *
2014
- * ```
2015
- */
2016
- class DragAndDropModule {
2017
- }
2018
- DragAndDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2019
- DragAndDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, imports: [DragTargetDirective, DragHandleDirective, DropTargetDirective, DragTargetContainerDirective, DropTargetContainerDirective, HintComponent], exports: [DragTargetDirective, DragHandleDirective, DropTargetDirective, DragTargetContainerDirective, DropTargetContainerDirective, HintComponent] });
2020
- DragAndDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, imports: [HintComponent] });
2021
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DragAndDropModule, decorators: [{
2022
- type: NgModule,
2023
- args: [{
2024
- exports: [...KENDO_DRAGANDDROP],
2025
- imports: [...KENDO_DRAGANDDROP]
2026
- }]
2027
- }] });
2028
-
2029
- /**
2030
- * Generated bundle index. Do not edit.
2031
- */
2032
-
2033
- export { DragAndDropModule, DragHandleDirective, DragTargetContainerDirective, DragTargetDirective, DragTargetDragEndEvent, DragTargetDragEvent, DragTargetDragReadyEvent, DragTargetDragStartEvent, DragTargetPressEvent, DragTargetReleaseEvent, DropTargetContainerDirective, DropTargetDirective, DropTargetEvent, HintComponent, KENDO_DRAGANDDROP, KENDO_UTILS, UtilsModule };
2034
-