@progress/kendo-angular-utils 13.0.0-develop.2 → 13.0.0-develop.21
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/drag-and-drop/draghandle.directive.d.ts +1 -1
- package/drag-and-drop/dragtarget-container.directive.d.ts +10 -10
- package/drag-and-drop/dragtarget.directive.d.ts +7 -7
- package/drag-and-drop/droptarget-container.directive.d.ts +5 -5
- package/drag-and-drop/droptarget.directive.d.ts +6 -6
- package/drag-and-drop/models/functions.d.ts +32 -2
- package/esm2020/drag-and-drop/draghandle.directive.mjs +4 -4
- package/esm2020/drag-and-drop/dragtarget-container.directive.mjs +41 -36
- package/esm2020/drag-and-drop/dragtarget.directive.mjs +32 -30
- package/esm2020/drag-and-drop/droptarget-container.directive.mjs +14 -14
- package/esm2020/drag-and-drop/droptarget.directive.mjs +17 -23
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-utils.mjs +112 -111
- package/fesm2020/progress-kendo-angular-utils.mjs +110 -109
- package/package.json +3 -3
|
@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
|
|
|
11
11
|
export declare class DragHandleDirective {
|
|
12
12
|
element: ElementRef;
|
|
13
13
|
constructor(element: ElementRef);
|
|
14
|
-
|
|
14
|
+
cursorStyle: string;
|
|
15
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<DragHandleDirective, never>;
|
|
16
16
|
static ɵdir: i0.ɵɵDirectiveDeclaration<DragHandleDirective, "[kendoDragHandle]", ["kendoDragHandle"], {}, {}, never>;
|
|
17
17
|
}
|
|
@@ -27,7 +27,7 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
|
|
|
27
27
|
private viewContainer;
|
|
28
28
|
private cdr;
|
|
29
29
|
/**
|
|
30
|
-
* Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. ([see example]({% slug
|
|
30
|
+
* 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 %})).
|
|
31
31
|
*
|
|
32
32
|
* @default false
|
|
33
33
|
*/
|
|
@@ -40,11 +40,11 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
|
|
|
40
40
|
set dragTargetFilter(value: string);
|
|
41
41
|
get dragTargetFilter(): string;
|
|
42
42
|
/**
|
|
43
|
-
* Specifies a selector for elements within each DragTarget which will be configured as drag handles
|
|
43
|
+
* Specifies a selector for elements within each DragTarget which will be configured as drag handles.
|
|
44
44
|
*/
|
|
45
45
|
dragHandle: string;
|
|
46
46
|
/**
|
|
47
|
-
* Defines the delay in milliseconds after which the drag will begin ([see example](
|
|
47
|
+
* Defines the delay in milliseconds after which the drag will begin ([see example](slug drag_target_container#toc-events)).
|
|
48
48
|
*
|
|
49
49
|
* @default 0
|
|
50
50
|
*/
|
|
@@ -83,27 +83,27 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
|
|
|
83
83
|
/**
|
|
84
84
|
* Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
|
|
85
85
|
*/
|
|
86
|
-
|
|
86
|
+
onDragReady: EventEmitter<DragTargetDragReadyEvent>;
|
|
87
87
|
/**
|
|
88
88
|
* Fires when the user presses a DragTarget element.
|
|
89
89
|
*/
|
|
90
|
-
|
|
90
|
+
onPress: EventEmitter<DragTargetPressEvent>;
|
|
91
91
|
/**
|
|
92
92
|
* Fires when the dragging of a DragTarget element begins.
|
|
93
93
|
*/
|
|
94
|
-
|
|
94
|
+
onDragStart: EventEmitter<DragTargetDragStartEvent>;
|
|
95
95
|
/**
|
|
96
96
|
* Fires while the user drags a DragTarget element.
|
|
97
97
|
*/
|
|
98
|
-
|
|
98
|
+
onDrag: EventEmitter<DragTargetDragEvent>;
|
|
99
99
|
/**
|
|
100
100
|
* Fires when the user releases a DragTarget element after being pressed.
|
|
101
101
|
*/
|
|
102
|
-
|
|
102
|
+
onRelease: EventEmitter<DragTargetReleaseEvent>;
|
|
103
103
|
/**
|
|
104
104
|
* Fires when the dragging of a DragTarget ends and the element is released.
|
|
105
105
|
*/
|
|
106
|
-
|
|
106
|
+
onDragEnd: EventEmitter<DragTargetDragEndEvent>;
|
|
107
107
|
/**
|
|
108
108
|
* Used for notifying the DragTargetContainer that its content has changed.
|
|
109
109
|
*/
|
|
@@ -161,5 +161,5 @@ export declare class DragTargetContainerDirective implements AfterViewInit {
|
|
|
161
161
|
private calculatePosition;
|
|
162
162
|
private getStylesPerElement;
|
|
163
163
|
static ɵfac: i0.ɵɵFactoryDeclaration<DragTargetContainerDirective, never>;
|
|
164
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetContainerDirective, "[kendoDragTargetContainer]", ["kendoDragTargetContainer"], { "hint": "hint"; "dragTargetFilter": "dragTargetFilter"; "dragHandle": "dragHandle"; "dragDelay": "dragDelay"; "threshold": "threshold"; "dragTargetId": "dragTargetId"; "dragData": "dragData"; "dragDisabled": "dragDisabled"; "mode": "mode"; }, { "
|
|
164
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetContainerDirective, "[kendoDragTargetContainer]", ["kendoDragTargetContainer"], { "hint": "hint"; "dragTargetFilter": "dragTargetFilter"; "dragHandle": "dragHandle"; "dragDelay": "dragDelay"; "threshold": "threshold"; "dragTargetId": "dragTargetId"; "dragData": "dragData"; "dragDisabled": "dragDisabled"; "mode": "mode"; }, { "onDragReady": "onDragReady"; "onPress": "onPress"; "onDragStart": "onDragStart"; "onDrag": "onDrag"; "onRelease": "onRelease"; "onDragEnd": "onDragEnd"; }, never>;
|
|
165
165
|
}
|
|
@@ -68,27 +68,27 @@ export declare class DragTargetDirective implements OnInit, AfterContentInit, On
|
|
|
68
68
|
/**
|
|
69
69
|
* Fires when the user presses the DragTarget element.
|
|
70
70
|
*/
|
|
71
|
-
|
|
71
|
+
onPress: EventEmitter<DragTargetPressEvent>;
|
|
72
72
|
/**
|
|
73
73
|
* Fires when the dragging of the DragTarget element begins.
|
|
74
74
|
*/
|
|
75
|
-
|
|
75
|
+
onDragStart: EventEmitter<DragTargetDragStartEvent>;
|
|
76
76
|
/**
|
|
77
77
|
* Fires while the user drags the DragTarget element.
|
|
78
78
|
*/
|
|
79
|
-
|
|
79
|
+
onDrag: EventEmitter<DragTargetDragEvent>;
|
|
80
80
|
/**
|
|
81
81
|
* Fires when the DragTarget's `dragDelay` has passed and the user is able to drag the element.
|
|
82
82
|
*/
|
|
83
|
-
|
|
83
|
+
onDragReady: EventEmitter<DragTargetDragReadyEvent>;
|
|
84
84
|
/**
|
|
85
85
|
* Fires when the user releases the DragTarget element after being pressed.
|
|
86
86
|
*/
|
|
87
|
-
|
|
87
|
+
onRelease: EventEmitter<DragTargetReleaseEvent>;
|
|
88
88
|
/**
|
|
89
89
|
* Fires when the dragging of the DragTarget ends and the element is released.
|
|
90
90
|
*/
|
|
91
|
-
|
|
91
|
+
onDragEnd: EventEmitter<DragTargetDragEndEvent>;
|
|
92
92
|
private dragTarget;
|
|
93
93
|
private domSubscriptions;
|
|
94
94
|
private hintComponent;
|
|
@@ -130,5 +130,5 @@ export declare class DragTargetDirective implements OnInit, AfterContentInit, On
|
|
|
130
130
|
private calculatePosition;
|
|
131
131
|
private getStylesPerElement;
|
|
132
132
|
static ɵfac: i0.ɵɵFactoryDeclaration<DragTargetDirective, never>;
|
|
133
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetDirective, "[kendoDragTarget]", ["kendoDragTarget"], { "hint": "hint"; "threshold": "threshold"; "autoScroll": "autoScroll"; "dragTargetId": "dragTargetId"; "dragDelay": "dragDelay"; "restrictByAxis": "restrictByAxis"; "mode": "mode"; "dragData": "dragData"; }, { "
|
|
133
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<DragTargetDirective, "[kendoDragTarget]", ["kendoDragTarget"], { "hint": "hint"; "threshold": "threshold"; "autoScroll": "autoScroll"; "dragTargetId": "dragTargetId"; "dragDelay": "dragDelay"; "restrictByAxis": "restrictByAxis"; "mode": "mode"; "dragData": "dragData"; }, { "onPress": "onPress"; "onDragStart": "onDragStart"; "onDrag": "onDrag"; "onDragReady": "onDragReady"; "onRelease": "onRelease"; "onDragEnd": "onDragEnd"; }, ["dragHandles"]>;
|
|
134
134
|
}
|
|
@@ -38,19 +38,19 @@ export declare class DropTargetContainerDirective implements AfterViewInit {
|
|
|
38
38
|
/**
|
|
39
39
|
* Fires when a DragTarget element enters the DropTarget.
|
|
40
40
|
*/
|
|
41
|
-
|
|
41
|
+
onDragEnter: EventEmitter<DropTargetEvent>;
|
|
42
42
|
/**
|
|
43
43
|
* Fires when a DragTarget element is being dragged over the DropTarget.
|
|
44
44
|
*/
|
|
45
|
-
|
|
45
|
+
onDragOver: EventEmitter<DropTargetEvent>;
|
|
46
46
|
/**
|
|
47
47
|
* Fires when a DragTarget element leaves the DropTarget.
|
|
48
48
|
*/
|
|
49
|
-
|
|
49
|
+
onDragLeave: EventEmitter<DropTargetEvent>;
|
|
50
50
|
/**
|
|
51
51
|
* Fires when a DragTarget element is dropped over the DropTarget.
|
|
52
52
|
*/
|
|
53
|
-
|
|
53
|
+
onDrop: EventEmitter<DropTargetEvent>;
|
|
54
54
|
/**
|
|
55
55
|
* Used for notifying the DropTargetContainer that its content has changed.
|
|
56
56
|
*/
|
|
@@ -85,5 +85,5 @@ export declare class DropTargetContainerDirective implements AfterViewInit {
|
|
|
85
85
|
private getDropIndex;
|
|
86
86
|
private clearPreviousTargets;
|
|
87
87
|
static ɵfac: i0.ɵɵFactoryDeclaration<DropTargetContainerDirective, never>;
|
|
88
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetContainerDirective, "[kendoDropTargetContainer]", ["kendoDropTargetContainer"], { "dropTargetFilter": "dropTargetFilter"; "dropDisabled": "dropDisabled"; }, { "
|
|
88
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetContainerDirective, "[kendoDropTargetContainer]", ["kendoDropTargetContainer"], { "dropTargetFilter": "dropTargetFilter"; "dropDisabled": "dropDisabled"; }, { "onDragEnter": "onDragEnter"; "onDragOver": "onDragOver"; "onDragLeave": "onDragLeave"; "onDrop": "onDrop"; }, never>;
|
|
89
89
|
}
|
|
@@ -17,19 +17,19 @@ export declare class DropTargetDirective implements OnInit {
|
|
|
17
17
|
/**
|
|
18
18
|
* Fires when a DragTarget element enters the DropTarget.
|
|
19
19
|
*/
|
|
20
|
-
|
|
20
|
+
onDragEnter: EventEmitter<DropTargetEvent>;
|
|
21
21
|
/**
|
|
22
22
|
* Fires when a DragTarget element is being dragged over the DropTarget.
|
|
23
23
|
*/
|
|
24
|
-
|
|
24
|
+
onDragOver: EventEmitter<DropTargetEvent>;
|
|
25
25
|
/**
|
|
26
26
|
* Fires when a DragTarget element leaves the DropTarget.
|
|
27
27
|
*/
|
|
28
|
-
|
|
28
|
+
onDragLeave: EventEmitter<DropTargetEvent>;
|
|
29
29
|
/**
|
|
30
30
|
* Fires when a DragTarget element is dropped over the DropTarget.
|
|
31
31
|
*/
|
|
32
|
-
|
|
32
|
+
onDrop: EventEmitter<DropTargetEvent>;
|
|
33
33
|
constructor(service: DragStateService, element: ElementRef, ngZone: NgZone);
|
|
34
34
|
private dropTarget;
|
|
35
35
|
ngOnInit(): void;
|
|
@@ -50,7 +50,7 @@ export declare class DropTargetDirective implements OnInit {
|
|
|
50
50
|
*/
|
|
51
51
|
handleDrop(event: NormalizedDragEvent): void;
|
|
52
52
|
private initializeDropTarget;
|
|
53
|
-
private
|
|
53
|
+
private emitZoneAwareEvent;
|
|
54
54
|
static ɵfac: i0.ɵɵFactoryDeclaration<DropTargetDirective, never>;
|
|
55
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetDirective, "[kendoDropTarget]", ["kendoDropTarget"], {}, { "
|
|
55
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<DropTargetDirective, "[kendoDropTarget]", ["kendoDropTarget"], {}, { "onDragEnter": "onDragEnter"; "onDragOver": "onDragOver"; "onDragLeave": "onDragLeave"; "onDrop": "onDrop"; }, never>;
|
|
56
56
|
}
|
|
@@ -8,10 +8,40 @@
|
|
|
8
8
|
* It returns the custom data that will be available in the events of the respective [`DropTarget`]({% slug api_utils_droptargetdirective %}) or [`DropTargetContainer`]({% slug api_utils_droptargetcontainerdirective %}) directives upon interaction.
|
|
9
9
|
*
|
|
10
10
|
*/
|
|
11
|
-
export declare type DragTargetDataFn = (
|
|
11
|
+
export declare type DragTargetDataFn = (args: DragTargetDataArgs) => any;
|
|
12
12
|
/**
|
|
13
13
|
* Represents the callback that is used by the `dragTargetId` property of the [`DragTargetContainer`]({% slug api_utils_dragtargetcontainerdirective %}) directive.
|
|
14
14
|
*
|
|
15
15
|
* It returns a custom identifier that will be available in the events of the respective directive upon its interaction with a valid DropTarget.
|
|
16
16
|
*/
|
|
17
|
-
export declare type DragTargetIdFn = (
|
|
17
|
+
export declare type DragTargetIdFn = (args: DragTargetIdArgs) => any;
|
|
18
|
+
/**
|
|
19
|
+
* Represents the callback arguments used by the `dragData` property.
|
|
20
|
+
*/
|
|
21
|
+
export interface DragTargetDataArgs {
|
|
22
|
+
/**
|
|
23
|
+
* The drag target HTML element.
|
|
24
|
+
*/
|
|
25
|
+
dragTarget: HTMLElement;
|
|
26
|
+
/**
|
|
27
|
+
* The drag target unique identifier, result from executing the callback used by the `dragTargetId` property. Applicable for the `DragTargetContainerDirective`.
|
|
28
|
+
*/
|
|
29
|
+
dragTargetId: any;
|
|
30
|
+
/**
|
|
31
|
+
* The index of the current drag target in the collection of drag targets. Applicable for the `DragTargetContainerDirective`.
|
|
32
|
+
*/
|
|
33
|
+
dragTargetIndex: number;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Represents the callback arguments used by the `dragTargetId` property.
|
|
37
|
+
*/
|
|
38
|
+
export interface DragTargetIdArgs {
|
|
39
|
+
/**
|
|
40
|
+
* The drag target HTML element.
|
|
41
|
+
*/
|
|
42
|
+
dragTarget: HTMLElement;
|
|
43
|
+
/**
|
|
44
|
+
* The index of the current drag target in the collection of drag targets. Applicable for the `DragTargetContainerDirective`.
|
|
45
|
+
*/
|
|
46
|
+
dragTargetIndex: number;
|
|
47
|
+
}
|
|
@@ -11,18 +11,18 @@ import * as i0 from "@angular/core";
|
|
|
11
11
|
export class DragHandleDirective {
|
|
12
12
|
constructor(element) {
|
|
13
13
|
this.element = element;
|
|
14
|
-
this.
|
|
14
|
+
this.cursorStyle = 'move';
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
DragHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragHandleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18
|
-
DragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragHandleDirective, selector: "[kendoDragHandle]", host: { properties: { "
|
|
18
|
+
DragHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragHandleDirective, selector: "[kendoDragHandle]", host: { properties: { "style.cursor": "this.cursorStyle" } }, exportAs: ["kendoDragHandle"], ngImport: i0 });
|
|
19
19
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragHandleDirective, decorators: [{
|
|
20
20
|
type: Directive,
|
|
21
21
|
args: [{
|
|
22
22
|
selector: '[kendoDragHandle]',
|
|
23
23
|
exportAs: 'kendoDragHandle'
|
|
24
24
|
}]
|
|
25
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: {
|
|
25
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { cursorStyle: [{
|
|
26
26
|
type: HostBinding,
|
|
27
|
-
args: ['
|
|
27
|
+
args: ['style.cursor']
|
|
28
28
|
}] } });
|
|
@@ -37,13 +37,13 @@ export class DragTargetContainerDirective {
|
|
|
37
37
|
this.viewContainer = viewContainer;
|
|
38
38
|
this.cdr = cdr;
|
|
39
39
|
/**
|
|
40
|
-
* Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target. ([see example]({% slug
|
|
40
|
+
* 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 %})).
|
|
41
41
|
*
|
|
42
42
|
* @default false
|
|
43
43
|
*/
|
|
44
44
|
this.hint = false;
|
|
45
45
|
/**
|
|
46
|
-
* Defines the delay in milliseconds after which the drag will begin ([see example](
|
|
46
|
+
* Defines the delay in milliseconds after which the drag will begin ([see example](slug drag_target_container#toc-events)).
|
|
47
47
|
*
|
|
48
48
|
* @default 0
|
|
49
49
|
*/
|
|
@@ -63,27 +63,27 @@ export class DragTargetContainerDirective {
|
|
|
63
63
|
/**
|
|
64
64
|
* Fires when a DragTarget's `dragDelay` has passed and the user is able to drag the element.
|
|
65
65
|
*/
|
|
66
|
-
this.
|
|
66
|
+
this.onDragReady = new EventEmitter();
|
|
67
67
|
/**
|
|
68
68
|
* Fires when the user presses a DragTarget element.
|
|
69
69
|
*/
|
|
70
|
-
this.
|
|
70
|
+
this.onPress = new EventEmitter();
|
|
71
71
|
/**
|
|
72
72
|
* Fires when the dragging of a DragTarget element begins.
|
|
73
73
|
*/
|
|
74
|
-
this.
|
|
74
|
+
this.onDragStart = new EventEmitter();
|
|
75
75
|
/**
|
|
76
76
|
* Fires while the user drags a DragTarget element.
|
|
77
77
|
*/
|
|
78
|
-
this.
|
|
78
|
+
this.onDrag = new EventEmitter();
|
|
79
79
|
/**
|
|
80
80
|
* Fires when the user releases a DragTarget element after being pressed.
|
|
81
81
|
*/
|
|
82
|
-
this.
|
|
82
|
+
this.onRelease = new EventEmitter();
|
|
83
83
|
/**
|
|
84
84
|
* Fires when the dragging of a DragTarget ends and the element is released.
|
|
85
85
|
*/
|
|
86
|
-
this.
|
|
86
|
+
this.onDragEnd = new EventEmitter();
|
|
87
87
|
this.currentDragTarget = null;
|
|
88
88
|
this.dragTimeout = null;
|
|
89
89
|
this.pressed = false;
|
|
@@ -214,7 +214,7 @@ export class DragTargetContainerDirective {
|
|
|
214
214
|
if (this.dragDelay > 0) {
|
|
215
215
|
this.dragTimeout = window.setTimeout(() => {
|
|
216
216
|
this.pressed = true;
|
|
217
|
-
this.emitZoneAwareEvent('
|
|
217
|
+
this.emitZoneAwareEvent('onDragReady', event);
|
|
218
218
|
}, this.dragDelay);
|
|
219
219
|
}
|
|
220
220
|
else {
|
|
@@ -225,7 +225,7 @@ export class DragTargetContainerDirective {
|
|
|
225
225
|
this.currentDragTarget.element = this.currentDragTargetElement;
|
|
226
226
|
this.service.dragIndex = this.getDragIndex();
|
|
227
227
|
this.scrollableParent = this.hintTemplate ? document.body : this.currentDragTargetElement ? getScrollableParent(this.currentDragTargetElement) : null;
|
|
228
|
-
this.emitZoneAwareEvent('
|
|
228
|
+
this.emitZoneAwareEvent('onPress', event);
|
|
229
229
|
}
|
|
230
230
|
handleDragStart(event) {
|
|
231
231
|
if (!this.pressed) {
|
|
@@ -235,7 +235,7 @@ export class DragTargetContainerDirective {
|
|
|
235
235
|
}
|
|
236
236
|
return;
|
|
237
237
|
}
|
|
238
|
-
isDragStartPrevented = this.emitZoneAwareEvent('
|
|
238
|
+
isDragStartPrevented = this.emitZoneAwareEvent('onDragStart', event).isDefaultPrevented();
|
|
239
239
|
if (isDragStartPrevented) {
|
|
240
240
|
return;
|
|
241
241
|
}
|
|
@@ -251,14 +251,16 @@ export class DragTargetContainerDirective {
|
|
|
251
251
|
}
|
|
252
252
|
this.dragStarted = this.threshold === 0;
|
|
253
253
|
this.service.dragTarget = this.currentDragTarget;
|
|
254
|
-
|
|
255
|
-
this.service.
|
|
254
|
+
const targetIdArgs = { dragTarget: this.currentDragTargetElement, dragTargetIndex: this.service.dragIndex };
|
|
255
|
+
this.service.dragTargetId = this.dragTargetId(targetIdArgs);
|
|
256
|
+
const targetDataArgs = Object.assign({ dragTargetId: this.service.dragTargetId }, targetIdArgs);
|
|
257
|
+
this.service.dragData = this.dragData(targetDataArgs);
|
|
256
258
|
}
|
|
257
259
|
handleDrag(event) {
|
|
258
260
|
if (!this.pressed || isDragStartPrevented) {
|
|
259
261
|
return;
|
|
260
262
|
}
|
|
261
|
-
isDragPrevented = this.emitZoneAwareEvent('
|
|
263
|
+
isDragPrevented = this.emitZoneAwareEvent('onDrag', event).isDefaultPrevented();
|
|
262
264
|
if (isDragPrevented) {
|
|
263
265
|
return;
|
|
264
266
|
}
|
|
@@ -268,7 +270,6 @@ export class DragTargetContainerDirective {
|
|
|
268
270
|
else {
|
|
269
271
|
this.dragStarted = true;
|
|
270
272
|
}
|
|
271
|
-
this.dragStarted && this.emitZoneAwareEvent('drag', event);
|
|
272
273
|
}
|
|
273
274
|
handleRelease(event) {
|
|
274
275
|
if (this.dragStarted) {
|
|
@@ -279,7 +280,7 @@ export class DragTargetContainerDirective {
|
|
|
279
280
|
this.dragTimeout = null;
|
|
280
281
|
this.pressed = false;
|
|
281
282
|
}
|
|
282
|
-
this.emitZoneAwareEvent('
|
|
283
|
+
this.emitZoneAwareEvent('onRelease', event);
|
|
283
284
|
}
|
|
284
285
|
handleDragEnd(event) {
|
|
285
286
|
if (!this.dragStarted) {
|
|
@@ -305,7 +306,7 @@ export class DragTargetContainerDirective {
|
|
|
305
306
|
this.service.dragTarget = null;
|
|
306
307
|
this.service.dragIndex = null;
|
|
307
308
|
this.currentDragTarget.element = null;
|
|
308
|
-
this.emitZoneAwareEvent('
|
|
309
|
+
this.emitZoneAwareEvent('onDragEnd', event);
|
|
309
310
|
if (isDragStartPrevented || isDragPrevented) {
|
|
310
311
|
return;
|
|
311
312
|
}
|
|
@@ -365,33 +366,34 @@ export class DragTargetContainerDirective {
|
|
|
365
366
|
});
|
|
366
367
|
}
|
|
367
368
|
emitZoneAwareEvent(event, normalizedEvent) {
|
|
369
|
+
const targetIdArgs = { dragTarget: this.currentDragTargetElement, dragTargetIndex: this.service.dragIndex };
|
|
368
370
|
const eventProps = {
|
|
369
371
|
dragTarget: this.currentDragTargetElement,
|
|
370
372
|
dragEvent: normalizedEvent,
|
|
371
373
|
dragTargetIndex: this.service.dragIndex,
|
|
372
|
-
dragTargetId: this.dragTargetId(
|
|
374
|
+
dragTargetId: this.dragTargetId(targetIdArgs)
|
|
373
375
|
};
|
|
374
376
|
if (this.hint && isPresent(this.hintElem)) {
|
|
375
377
|
eventProps.hintElement = this.hintElem;
|
|
376
378
|
}
|
|
377
379
|
let eventArgs;
|
|
378
380
|
switch (event) {
|
|
379
|
-
case '
|
|
381
|
+
case 'onDragReady':
|
|
380
382
|
eventArgs = new DragTargetDragReadyEvent(eventProps);
|
|
381
383
|
break;
|
|
382
|
-
case '
|
|
384
|
+
case 'onPress':
|
|
383
385
|
eventArgs = new DragTargetPressEvent(eventProps);
|
|
384
386
|
break;
|
|
385
|
-
case '
|
|
387
|
+
case 'onDragStart':
|
|
386
388
|
eventArgs = new DragTargetDragStartEvent(eventProps);
|
|
387
389
|
break;
|
|
388
|
-
case '
|
|
390
|
+
case 'onDrag':
|
|
389
391
|
eventArgs = new DragTargetDragEvent(eventProps);
|
|
390
392
|
break;
|
|
391
|
-
case '
|
|
393
|
+
case 'onRelease':
|
|
392
394
|
eventArgs = new DragTargetReleaseEvent(eventProps);
|
|
393
395
|
break;
|
|
394
|
-
case '
|
|
396
|
+
case 'onDragEnd':
|
|
395
397
|
eventArgs = new DragTargetDragEndEvent(eventProps);
|
|
396
398
|
break;
|
|
397
399
|
default:
|
|
@@ -444,7 +446,8 @@ export class DragTargetContainerDirective {
|
|
|
444
446
|
this.hintComponent.instance.template = this.hintTemplate;
|
|
445
447
|
this.hintComponent.instance.directive = this;
|
|
446
448
|
this.hintComponent.instance.targetIndex = this.service.dragIndex;
|
|
447
|
-
|
|
449
|
+
const targetDataArgs = { dragTarget: this.currentDragTargetElement, dragTargetId: this.service.dragTargetId, dragTargetIndex: this.service.dragIndex };
|
|
450
|
+
this.hintComponent.instance.contextData = this.dragData(targetDataArgs);
|
|
448
451
|
this.hintComponent.changeDetectorRef.detectChanges();
|
|
449
452
|
}
|
|
450
453
|
destroyHint() {
|
|
@@ -516,12 +519,12 @@ export class DragTargetContainerDirective {
|
|
|
516
519
|
}
|
|
517
520
|
if (isPresent(this.dragHandles) && this.dragHandles.length > 0) {
|
|
518
521
|
this.dragHandles.forEach(handle => {
|
|
519
|
-
this.renderer.
|
|
522
|
+
this.renderer.setStyle(handle, 'cursor', 'move');
|
|
520
523
|
});
|
|
521
524
|
}
|
|
522
525
|
else {
|
|
523
526
|
this.allDragTargets.forEach(target => {
|
|
524
|
-
this.renderer.
|
|
527
|
+
this.renderer.setStyle(target, 'cursor', 'move');
|
|
525
528
|
});
|
|
526
529
|
}
|
|
527
530
|
}
|
|
@@ -549,8 +552,10 @@ export class DragTargetContainerDirective {
|
|
|
549
552
|
if (!this.dragStarted && this.threshold > 0) {
|
|
550
553
|
this.dragStarted = true;
|
|
551
554
|
}
|
|
552
|
-
|
|
553
|
-
|
|
555
|
+
if (elem) {
|
|
556
|
+
const styles = this.getStylesPerElement(elem);
|
|
557
|
+
setElementStyles(this.renderer, elem, styles);
|
|
558
|
+
}
|
|
554
559
|
}
|
|
555
560
|
calculatePosition(element, event) {
|
|
556
561
|
let position = null;
|
|
@@ -583,7 +588,7 @@ export class DragTargetContainerDirective {
|
|
|
583
588
|
}
|
|
584
589
|
}
|
|
585
590
|
DragTargetContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetContainerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.DragStateService }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
586
|
-
DragTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: { hint: "hint", dragTargetFilter: "dragTargetFilter", dragHandle: "dragHandle", dragDelay: "dragDelay", threshold: "threshold", dragTargetId: "dragTargetId", dragData: "dragData", dragDisabled: "dragDisabled", mode: "mode" }, outputs: {
|
|
591
|
+
DragTargetContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DragTargetContainerDirective, 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 });
|
|
587
592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DragTargetContainerDirective, decorators: [{
|
|
588
593
|
type: Directive,
|
|
589
594
|
args: [{
|
|
@@ -608,16 +613,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
608
613
|
type: Input
|
|
609
614
|
}], mode: [{
|
|
610
615
|
type: Input
|
|
611
|
-
}],
|
|
616
|
+
}], onDragReady: [{
|
|
612
617
|
type: Output
|
|
613
|
-
}],
|
|
618
|
+
}], onPress: [{
|
|
614
619
|
type: Output
|
|
615
|
-
}],
|
|
620
|
+
}], onDragStart: [{
|
|
616
621
|
type: Output
|
|
617
|
-
}],
|
|
622
|
+
}], onDrag: [{
|
|
618
623
|
type: Output
|
|
619
|
-
}],
|
|
624
|
+
}], onRelease: [{
|
|
620
625
|
type: Output
|
|
621
|
-
}],
|
|
626
|
+
}], onDragEnd: [{
|
|
622
627
|
type: Output
|
|
623
628
|
}] } });
|