@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.
- package/README.md +27 -16
- package/drag-and-drop/dragtarget-container.directive.d.ts +1 -1
- package/drag-and-drop/dragtarget.directive.d.ts +1 -1
- package/drag-and-drop/droptarget-container.directive.d.ts +1 -1
- package/drag-and-drop/hint.component.d.ts +1 -1
- package/drag-and-drop/models/drag-axis.d.ts +1 -1
- package/drag-and-drop/models/drag-mode.d.ts +1 -1
- package/drag-and-drop/models/functions.d.ts +2 -2
- package/{esm2020 → esm2022}/drag-and-drop/drag-state.service.mjs +28 -24
- package/{esm2020 → esm2022}/drag-and-drop/draghandle.directive.mjs +5 -4
- package/{esm2020 → esm2022}/drag-and-drop/dragtarget-container.directive.mjs +90 -76
- package/{esm2020 → esm2022}/drag-and-drop/dragtarget.directive.mjs +92 -76
- package/{esm2020 → esm2022}/drag-and-drop/droptarget-container.directive.mjs +34 -30
- package/{esm2020 → esm2022}/drag-and-drop/droptarget.directive.mjs +23 -19
- package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/drag-event.mjs +25 -5
- package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/dragready-event.mjs +16 -0
- package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/end-event.mjs +20 -4
- package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/press-event.mjs +20 -4
- package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/release-event.mjs +20 -4
- package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/start-event.mjs +21 -5
- package/{esm2020 → esm2022}/drag-and-drop/events/drop-target-event.mjs +28 -4
- package/{esm2020 → esm2022}/drag-and-drop/hint.component.mjs +10 -5
- package/{esm2020 → esm2022}/drag-and-drop.module.mjs +4 -4
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/utils.module.mjs +4 -4
- package/{fesm2020 → fesm2022}/progress-kendo-angular-utils.mjs +443 -271
- package/package.json +11 -17
- package/fesm2015/progress-kendo-angular-utils.mjs +0 -2034
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/events/drag-target/index.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/events/index.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/models/autoscroll-options.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/models/coordinates.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/models/drag-axis.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/models/drag-mode.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/models/functions.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/models/hint-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/models/index.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/models/scroll-direction.mjs +0 -0
- /package/{esm2020 → esm2022}/drag-and-drop/util.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /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
|
-
|