@progress/kendo-angular-utils 19.1.2-develop.4 → 19.1.2-develop.6
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/adaptive-breakpoints/adaptive-settings.d.ts +4 -4
- package/adaptive-breakpoints/adaptive-settings.service.d.ts +2 -2
- package/adaptive-breakpoints/adaptive.service.d.ts +6 -10
- package/adaptive-breakpoints/models/adaptive-settings.d.ts +6 -3
- package/directives.d.ts +20 -3
- package/drag-and-drop/draghandle.directive.d.ts +10 -2
- package/drag-and-drop/dragtarget-container.directive.d.ts +26 -25
- package/drag-and-drop/dragtarget.directive.d.ts +16 -15
- package/drag-and-drop/droptarget-container.directive.d.ts +12 -12
- package/drag-and-drop/droptarget.directive.d.ts +12 -4
- package/drag-and-drop/events/drag-target/drag-event.d.ts +6 -5
- package/drag-and-drop/events/drag-target/dragready-event.d.ts +5 -4
- package/drag-and-drop/events/drag-target/end-event.d.ts +5 -4
- package/drag-and-drop/events/drag-target/press-event.d.ts +5 -4
- package/drag-and-drop/events/drag-target/release-event.d.ts +5 -4
- package/drag-and-drop/events/drag-target/start-event.d.ts +5 -4
- package/drag-and-drop/events/drop-target-event.d.ts +3 -3
- package/drag-and-drop/models/autoscroll-options.d.ts +4 -4
- package/drag-and-drop/models/functions.d.ts +7 -9
- package/drag-and-drop/models/hint-settings.d.ts +3 -3
- package/drag-and-drop/models/scroll-direction.d.ts +3 -0
- package/drag-and-drop.module.d.ts +5 -17
- package/esm2022/adaptive-breakpoints/adaptive-settings.mjs +4 -4
- package/esm2022/adaptive-breakpoints/adaptive-settings.service.mjs +2 -2
- package/esm2022/adaptive-breakpoints/adaptive.service.mjs +6 -10
- package/esm2022/directives.mjs +20 -3
- package/esm2022/drag-and-drop/draghandle.directive.mjs +10 -2
- package/esm2022/drag-and-drop/dragtarget-container.directive.mjs +26 -25
- package/esm2022/drag-and-drop/dragtarget.directive.mjs +16 -15
- package/esm2022/drag-and-drop/droptarget-container.directive.mjs +12 -12
- package/esm2022/drag-and-drop/droptarget.directive.mjs +12 -4
- package/esm2022/drag-and-drop/events/drag-target/drag-event.mjs +6 -5
- package/esm2022/drag-and-drop/events/drag-target/dragready-event.mjs +5 -4
- package/esm2022/drag-and-drop/events/drag-target/end-event.mjs +5 -4
- package/esm2022/drag-and-drop/events/drag-target/press-event.mjs +5 -4
- package/esm2022/drag-and-drop/events/drag-target/release-event.mjs +5 -4
- package/esm2022/drag-and-drop/events/drag-target/start-event.mjs +5 -4
- package/esm2022/drag-and-drop/events/drop-target-event.mjs +3 -3
- package/esm2022/drag-and-drop.module.mjs +5 -17
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/utils.module.mjs +5 -17
- package/fesm2022/progress-kendo-angular-utils.mjs +154 -141
- package/package.json +4 -4
- package/utils.module.d.ts +5 -17
|
@@ -13,13 +13,21 @@ import { map, tap, filter } from 'rxjs/operators';
|
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* Represents the Kendo UI DragHandle directive for Angular.
|
|
16
|
-
*
|
|
16
|
+
* Use this directive to specify an element inside a drag target as a handle for dragging instead of the drag target itself.
|
|
17
|
+
*
|
|
18
|
+
* ```html
|
|
19
|
+
* <div kendoDragTarget>
|
|
20
|
+
* <button kendoDragHandle kendoButton>
|
|
21
|
+
* Drag me
|
|
22
|
+
* </button>
|
|
23
|
+
* </div>
|
|
24
|
+
* ```
|
|
17
25
|
*/
|
|
18
26
|
class DragHandleDirective {
|
|
19
27
|
element;
|
|
20
28
|
touchActionStyle = 'none';
|
|
21
29
|
/**
|
|
22
|
-
*
|
|
30
|
+
* Sets the cursor style of the drag handle. Accepts same values as the [CSS `cursor` property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#values).
|
|
23
31
|
*
|
|
24
32
|
* @default 'move'
|
|
25
33
|
*/
|
|
@@ -55,8 +63,8 @@ const packageMetadata = {
|
|
|
55
63
|
productName: 'Kendo UI for Angular',
|
|
56
64
|
productCode: 'KENDOUIANGULAR',
|
|
57
65
|
productCodes: ['KENDOUIANGULAR'],
|
|
58
|
-
publishDate:
|
|
59
|
-
version: '19.1.2-develop.
|
|
66
|
+
publishDate: 1750433583,
|
|
67
|
+
version: '19.1.2-develop.6',
|
|
60
68
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
61
69
|
};
|
|
62
70
|
|
|
@@ -330,15 +338,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
330
338
|
}] } });
|
|
331
339
|
|
|
332
340
|
/**
|
|
333
|
-
* Arguments for the press event of the DragTarget and DragTargetContainer
|
|
341
|
+
* Arguments for the press event of the `DragTarget` and `DragTargetContainer`.
|
|
334
342
|
*/
|
|
335
343
|
class DragTargetPressEvent {
|
|
336
344
|
/**
|
|
337
|
-
* The
|
|
345
|
+
* The information related to the current drag event.
|
|
346
|
+
* This is the normalized drag event that contains details about the drag operation.
|
|
338
347
|
*/
|
|
339
348
|
dragEvent;
|
|
340
349
|
/**
|
|
341
|
-
* The DOM element
|
|
350
|
+
* The DOM element being dragged.
|
|
342
351
|
*/
|
|
343
352
|
dragTarget;
|
|
344
353
|
/**
|
|
@@ -346,7 +355,7 @@ class DragTargetPressEvent {
|
|
|
346
355
|
*/
|
|
347
356
|
dragTargetId;
|
|
348
357
|
/**
|
|
349
|
-
* The index of the current drag target in the collection of drag targets
|
|
358
|
+
* The index of the current drag target in the collection of drag targets. Applies to `DragTargetContainer` directive.
|
|
350
359
|
*/
|
|
351
360
|
dragTargetIndex;
|
|
352
361
|
/**
|
|
@@ -372,15 +381,16 @@ class DragTargetPressEvent {
|
|
|
372
381
|
}
|
|
373
382
|
|
|
374
383
|
/**
|
|
375
|
-
* Arguments for the dragReady event of the DragTarget and DragTargetContainer
|
|
384
|
+
* Arguments for the dragReady event of the `DragTarget` and `DragTargetContainer`.
|
|
376
385
|
*/
|
|
377
386
|
class DragTargetDragReadyEvent {
|
|
378
387
|
/**
|
|
379
|
-
* The
|
|
388
|
+
* The information related to the current drag event.
|
|
389
|
+
* This is the normalized drag event that contains details about the drag operation.
|
|
380
390
|
*/
|
|
381
391
|
dragEvent;
|
|
382
392
|
/**
|
|
383
|
-
* The DOM element
|
|
393
|
+
* The DOM element being dragged.
|
|
384
394
|
*/
|
|
385
395
|
dragTarget;
|
|
386
396
|
/**
|
|
@@ -388,7 +398,7 @@ class DragTargetDragReadyEvent {
|
|
|
388
398
|
*/
|
|
389
399
|
dragTargetId;
|
|
390
400
|
/**
|
|
391
|
-
* The index of the current drag target in the collection of drag targets
|
|
401
|
+
* The index of the current drag target in the collection of drag targets. Applies to `DragTargetContainer` directive.
|
|
392
402
|
*/
|
|
393
403
|
dragTargetIndex;
|
|
394
404
|
/**
|
|
@@ -400,15 +410,16 @@ class DragTargetDragReadyEvent {
|
|
|
400
410
|
}
|
|
401
411
|
|
|
402
412
|
/**
|
|
403
|
-
* Arguments for the dragStart event of the DragTarget and DragTargetContainer
|
|
413
|
+
* Arguments for the `dragStart` event of the `DragTarget` and `DragTargetContainer`.
|
|
404
414
|
*/
|
|
405
415
|
class DragTargetDragStartEvent extends PreventableEvent {
|
|
406
416
|
/**
|
|
407
|
-
* The
|
|
417
|
+
* The information related to the current drag event.
|
|
418
|
+
* This is the normalized drag event that contains details about the drag operation.
|
|
408
419
|
*/
|
|
409
420
|
dragEvent;
|
|
410
421
|
/**
|
|
411
|
-
* The DOM element
|
|
422
|
+
* The DOM element being dragged.
|
|
412
423
|
*/
|
|
413
424
|
dragTarget;
|
|
414
425
|
/**
|
|
@@ -416,7 +427,7 @@ class DragTargetDragStartEvent extends PreventableEvent {
|
|
|
416
427
|
*/
|
|
417
428
|
dragTargetId;
|
|
418
429
|
/**
|
|
419
|
-
* The index of the current drag target in the collection of drag targets
|
|
430
|
+
* The index of the current drag target in the collection of drag targets. Applies to `DragTargetContainer` directive.
|
|
420
431
|
*/
|
|
421
432
|
dragTargetIndex;
|
|
422
433
|
/**
|
|
@@ -443,15 +454,16 @@ class DragTargetDragStartEvent extends PreventableEvent {
|
|
|
443
454
|
}
|
|
444
455
|
|
|
445
456
|
/**
|
|
446
|
-
* Arguments for the dragEnd event of the DragTarget and DragTargetContainer
|
|
457
|
+
* Arguments for the dragEnd event of the `DragTarget` and `DragTargetContainer`.
|
|
447
458
|
*/
|
|
448
459
|
class DragTargetDragEndEvent {
|
|
449
460
|
/**
|
|
450
|
-
* The
|
|
461
|
+
* The information related to the current drag event.
|
|
462
|
+
* This is the normalized drag event that contains details about the drag operation.
|
|
451
463
|
*/
|
|
452
464
|
dragEvent;
|
|
453
465
|
/**
|
|
454
|
-
* The DOM element
|
|
466
|
+
* The DOM element being dragged.
|
|
455
467
|
*/
|
|
456
468
|
dragTarget;
|
|
457
469
|
/**
|
|
@@ -459,7 +471,7 @@ class DragTargetDragEndEvent {
|
|
|
459
471
|
*/
|
|
460
472
|
dragTargetId;
|
|
461
473
|
/**
|
|
462
|
-
* The index of the current drag target in the collection of drag targets
|
|
474
|
+
* The index of the current drag target in the collection of drag targets. Applies to `DragTargetContainer` directive.
|
|
463
475
|
*/
|
|
464
476
|
dragTargetIndex;
|
|
465
477
|
/**
|
|
@@ -485,19 +497,20 @@ class DragTargetDragEndEvent {
|
|
|
485
497
|
}
|
|
486
498
|
|
|
487
499
|
/**
|
|
488
|
-
* Arguments for the drag event of the DragTarget and DragTargetContainer
|
|
500
|
+
* Arguments for the drag event of the `DragTarget` and `DragTargetContainer`.
|
|
489
501
|
*/
|
|
490
502
|
class DragTargetDragEvent extends PreventableEvent {
|
|
491
503
|
/**
|
|
492
|
-
* The
|
|
504
|
+
* The information related to the current drag event.
|
|
505
|
+
* This is the normalized drag event that contains details about the drag operation.
|
|
493
506
|
*/
|
|
494
507
|
dragEvent;
|
|
495
508
|
/**
|
|
496
|
-
* The DOM element
|
|
509
|
+
* The DOM element being dragged.
|
|
497
510
|
*/
|
|
498
511
|
dragTarget;
|
|
499
512
|
/**
|
|
500
|
-
* The hint of the DragTarget
|
|
513
|
+
* The hint element of the `DragTarget`.
|
|
501
514
|
*/
|
|
502
515
|
hintElement;
|
|
503
516
|
/**
|
|
@@ -505,7 +518,7 @@ class DragTargetDragEvent extends PreventableEvent {
|
|
|
505
518
|
*/
|
|
506
519
|
dragTargetId;
|
|
507
520
|
/**
|
|
508
|
-
* The index of the current drag target in the collection of drag targets
|
|
521
|
+
* The index of the current drag target in the collection of drag targets. Applies to `DragTargetContainer` directive.
|
|
509
522
|
*/
|
|
510
523
|
dragTargetIndex;
|
|
511
524
|
/**
|
|
@@ -532,15 +545,16 @@ class DragTargetDragEvent extends PreventableEvent {
|
|
|
532
545
|
}
|
|
533
546
|
|
|
534
547
|
/**
|
|
535
|
-
* Arguments for the release event of the DragTarget and DragTargetContainer
|
|
548
|
+
* Arguments for the release event of the `DragTarget` and `DragTargetContainer`.
|
|
536
549
|
*/
|
|
537
550
|
class DragTargetReleaseEvent {
|
|
538
551
|
/**
|
|
539
|
-
* The
|
|
552
|
+
* The information related to the current drag event.
|
|
553
|
+
* This is the normalized drag event that contains details about the drag operation.
|
|
540
554
|
*/
|
|
541
555
|
dragEvent;
|
|
542
556
|
/**
|
|
543
|
-
* The DOM element
|
|
557
|
+
* The DOM element being dragged.
|
|
544
558
|
*/
|
|
545
559
|
dragTarget;
|
|
546
560
|
/**
|
|
@@ -548,7 +562,7 @@ class DragTargetReleaseEvent {
|
|
|
548
562
|
*/
|
|
549
563
|
dragTargetId;
|
|
550
564
|
/**
|
|
551
|
-
* The index of the current drag target in the collection of drag targets
|
|
565
|
+
* The index of the current drag target in the collection of drag targets. Applies to `DragTargetContainer` directive.
|
|
552
566
|
*/
|
|
553
567
|
dragTargetIndex;
|
|
554
568
|
/**
|
|
@@ -577,12 +591,14 @@ let isDragStartPrevented$1 = false;
|
|
|
577
591
|
let isDragPrevented$1 = false;
|
|
578
592
|
/**
|
|
579
593
|
* Represents the [Kendo UI DragTargetContainer directive for Angular]({% slug api_utils_dragtargetcontainerdirective %}).
|
|
580
|
-
*
|
|
594
|
+
* Use this directive to make multiple elements draggable inside a container.
|
|
581
595
|
*
|
|
582
596
|
* @example
|
|
583
|
-
* ```
|
|
597
|
+
* ```html
|
|
584
598
|
* <ul kendoDragTargetContainer dragTargetFilter=".my-draggable">
|
|
585
|
-
*
|
|
599
|
+
* <li class="my-draggable"> Item 1</li>
|
|
600
|
+
* <li class="my-draggable"> Item 2</li>
|
|
601
|
+
* <li class="my-draggable"> Item 3</li>
|
|
586
602
|
* </ul>
|
|
587
603
|
* ```
|
|
588
604
|
*/
|
|
@@ -594,15 +610,14 @@ class DragTargetContainerDirective {
|
|
|
594
610
|
viewContainer;
|
|
595
611
|
cdr;
|
|
596
612
|
/**
|
|
597
|
-
* Defines whether a hint will be used for dragging. By default, the hint is a copy of the current drag target.
|
|
613
|
+
* 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 %}).
|
|
598
614
|
*
|
|
599
615
|
* @default false
|
|
600
616
|
*/
|
|
601
617
|
hint = false;
|
|
602
618
|
/**
|
|
603
|
-
*
|
|
604
|
-
*
|
|
605
|
-
* DOM `selector`.
|
|
619
|
+
* Sets a selector for elements in the container to make them draggable. The possible values include any
|
|
620
|
+
* DOM `selector`. [See example]({% slug drag_target_container %}).
|
|
606
621
|
*/
|
|
607
622
|
set dragTargetFilter(value) {
|
|
608
623
|
this._dragTargetFilter = value;
|
|
@@ -614,24 +629,24 @@ class DragTargetContainerDirective {
|
|
|
614
629
|
return this._dragTargetFilter;
|
|
615
630
|
}
|
|
616
631
|
/**
|
|
617
|
-
*
|
|
632
|
+
* Sets a selector for elements inside each drag target to use as drag handles.
|
|
618
633
|
*/
|
|
619
634
|
dragHandle;
|
|
620
635
|
/**
|
|
621
|
-
*
|
|
636
|
+
* Sets the delay in milliseconds before dragging begins. [See example](slug:drag_target_container#toc-events).
|
|
622
637
|
*
|
|
623
638
|
* @default 0
|
|
624
639
|
*/
|
|
625
640
|
dragDelay = 0;
|
|
626
641
|
/**
|
|
627
|
-
*
|
|
642
|
+
* Sets the number of pixels the pointer must move before dragging starts. [See example]({% slug minimum_distance %}).
|
|
628
643
|
*
|
|
629
644
|
* @default 0
|
|
630
645
|
*/
|
|
631
646
|
threshold = 0;
|
|
632
647
|
/**
|
|
633
|
-
*
|
|
634
|
-
* It exposes the current
|
|
648
|
+
* Sets a unique identifier for each drag target.
|
|
649
|
+
* It exposes the current drag target HTML element and its index in the collection of drag targets as arguments.
|
|
635
650
|
*/
|
|
636
651
|
set dragTargetId(fn) {
|
|
637
652
|
if (isDevMode && typeof fn !== 'function') {
|
|
@@ -643,8 +658,8 @@ class DragTargetContainerDirective {
|
|
|
643
658
|
return this._dragTargetId;
|
|
644
659
|
}
|
|
645
660
|
/**
|
|
646
|
-
*
|
|
647
|
-
* It exposes the current DragTarget HTML element, its `dragTargetId
|
|
661
|
+
* Sets a callback function to return custom data for `DropTarget` events.
|
|
662
|
+
* It exposes the current `DragTarget` HTML element, its `dragTargetId`, and its index in the collection of drag targets as arguments.
|
|
648
663
|
*/
|
|
649
664
|
set dragData(fn) {
|
|
650
665
|
if (isDevMode && typeof fn !== 'function') {
|
|
@@ -656,7 +671,7 @@ class DragTargetContainerDirective {
|
|
|
656
671
|
return this._dragData;
|
|
657
672
|
}
|
|
658
673
|
/**
|
|
659
|
-
*
|
|
674
|
+
* Disables dragging of drag targets in the container when set to `true`.
|
|
660
675
|
*
|
|
661
676
|
* @default false
|
|
662
677
|
*/
|
|
@@ -680,13 +695,13 @@ class DragTargetContainerDirective {
|
|
|
680
695
|
return this._dragDisabled;
|
|
681
696
|
}
|
|
682
697
|
/**
|
|
683
|
-
*
|
|
698
|
+
* Sets whether to use the default dragging behavior or handle it manually.
|
|
684
699
|
*
|
|
685
700
|
* @default 'auto'
|
|
686
701
|
*/
|
|
687
702
|
mode = 'auto';
|
|
688
703
|
/**
|
|
689
|
-
*
|
|
704
|
+
* Sets the cursor style of the drag targets. Accepts same values as the [CSS `cursor` property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#values).
|
|
690
705
|
*
|
|
691
706
|
* @default 'move'
|
|
692
707
|
*/
|
|
@@ -696,31 +711,31 @@ class DragTargetContainerDirective {
|
|
|
696
711
|
*/
|
|
697
712
|
hintContext;
|
|
698
713
|
/**
|
|
699
|
-
* Fires when a
|
|
714
|
+
* Fires when a drag target's `dragDelay` has passed and the user can drag the element.
|
|
700
715
|
*/
|
|
701
716
|
onDragReady = new EventEmitter();
|
|
702
717
|
/**
|
|
703
|
-
* Fires when the user presses a
|
|
718
|
+
* Fires when the user presses a drag target element.
|
|
704
719
|
*/
|
|
705
720
|
onPress = new EventEmitter();
|
|
706
721
|
/**
|
|
707
|
-
* Fires when
|
|
708
|
-
|
|
722
|
+
* Fires when dragging of a drag target element begins.
|
|
723
|
+
*/
|
|
709
724
|
onDragStart = new EventEmitter();
|
|
710
725
|
/**
|
|
711
|
-
* Fires while the user drags a
|
|
726
|
+
* Fires while the user drags a drag target element.
|
|
712
727
|
*/
|
|
713
728
|
onDrag = new EventEmitter();
|
|
714
729
|
/**
|
|
715
|
-
* Fires when the user releases a
|
|
730
|
+
* Fires when the user releases a drag target element after pressing it.
|
|
716
731
|
*/
|
|
717
732
|
onRelease = new EventEmitter();
|
|
718
733
|
/**
|
|
719
|
-
* Fires when
|
|
734
|
+
* Fires when dragging of a drag target ends and the element is released.
|
|
720
735
|
*/
|
|
721
736
|
onDragEnd = new EventEmitter();
|
|
722
737
|
/**
|
|
723
|
-
*
|
|
738
|
+
* Notifies the `DragTargetContainer` that its content has changed.
|
|
724
739
|
*/
|
|
725
740
|
notify() {
|
|
726
741
|
this.cdr.detectChanges();
|
|
@@ -1271,6 +1286,7 @@ let isDragStartPrevented = false;
|
|
|
1271
1286
|
let isDragPrevented = false;
|
|
1272
1287
|
/**
|
|
1273
1288
|
* Represents the Kendo UI DragTarget directive for Angular.
|
|
1289
|
+
* Use this directive to make an element draggable.
|
|
1274
1290
|
*/
|
|
1275
1291
|
class DragTargetDirective {
|
|
1276
1292
|
element;
|
|
@@ -1288,40 +1304,40 @@ class DragTargetDirective {
|
|
|
1288
1304
|
*/
|
|
1289
1305
|
hint = false;
|
|
1290
1306
|
/**
|
|
1291
|
-
*
|
|
1307
|
+
* Sets the number of pixels the pointer must move before dragging starts. Applies when `manualDrag` is `false`. [See example]({% slug minimum_distance %}).
|
|
1292
1308
|
*
|
|
1293
1309
|
* @default 0
|
|
1294
1310
|
*/
|
|
1295
1311
|
threshold = 0;
|
|
1296
1312
|
/**
|
|
1297
|
-
*
|
|
1313
|
+
* Sets the automatic container scrolling behavior when close to the edge. [See example]({% slug auto_scroll %}).
|
|
1298
1314
|
*
|
|
1299
1315
|
* @default true
|
|
1300
1316
|
*/
|
|
1301
1317
|
autoScroll = true;
|
|
1302
1318
|
/**
|
|
1303
|
-
*
|
|
1319
|
+
* Sets a unique identifier for the drag target.
|
|
1304
1320
|
*/
|
|
1305
1321
|
dragTargetId;
|
|
1306
1322
|
/**
|
|
1307
|
-
*
|
|
1323
|
+
* Sets the delay in milliseconds before dragging begins. [See example]({% slug drag_delay %}).
|
|
1308
1324
|
*
|
|
1309
1325
|
* @default 0
|
|
1310
1326
|
*/
|
|
1311
1327
|
dragDelay = 0;
|
|
1312
1328
|
/**
|
|
1313
|
-
* Restricts
|
|
1329
|
+
* Restricts dragging to horizontal or vertical only. Applies when `mode` is `auto`. [See example]({% slug axis_lock %}).
|
|
1314
1330
|
*/
|
|
1315
1331
|
restrictByAxis;
|
|
1316
1332
|
/**
|
|
1317
|
-
* Specifies whether the default dragging behavior
|
|
1333
|
+
* Specifies whether to use the default dragging behavior or handle it manually.
|
|
1318
1334
|
*
|
|
1319
1335
|
* @default 'auto'
|
|
1320
1336
|
*/
|
|
1321
1337
|
mode = 'auto';
|
|
1322
1338
|
/**
|
|
1323
|
-
* Defines a callback function used for attaching custom data to the
|
|
1324
|
-
* The data
|
|
1339
|
+
* Defines a callback function used for attaching custom data to the drag target.
|
|
1340
|
+
* The data is available in the events of the respective [`DropTarget`]({% slug api_utils_droptargetdirective %}) or [`DropTargetContainer`]({% slug api_utils_droptargetcontainerdirective %}) directives.
|
|
1325
1341
|
* The current DragTarget HTML element and its `dragTargetId` will be available as arguments.
|
|
1326
1342
|
*/
|
|
1327
1343
|
set dragData(fn) {
|
|
@@ -1334,33 +1350,33 @@ class DragTargetDirective {
|
|
|
1334
1350
|
return this._dragData;
|
|
1335
1351
|
}
|
|
1336
1352
|
/**
|
|
1337
|
-
*
|
|
1353
|
+
* Sets the cursor style of the drag target. Accepts same values as the [CSS `cursor` property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#values).
|
|
1338
1354
|
*
|
|
1339
1355
|
* @default 'move'
|
|
1340
1356
|
*/
|
|
1341
1357
|
cursorStyle = 'move';
|
|
1342
1358
|
/**
|
|
1343
|
-
* Fires when the user presses the
|
|
1359
|
+
* Fires when the user presses the drag target element.
|
|
1344
1360
|
*/
|
|
1345
1361
|
onPress = new EventEmitter();
|
|
1346
1362
|
/**
|
|
1347
|
-
* Fires when
|
|
1363
|
+
* Fires when dragging of the drag target element begins.
|
|
1348
1364
|
*/
|
|
1349
1365
|
onDragStart = new EventEmitter();
|
|
1350
1366
|
/**
|
|
1351
|
-
* Fires while the user drags the
|
|
1367
|
+
* Fires while the user drags the drag target element.
|
|
1352
1368
|
*/
|
|
1353
1369
|
onDrag = new EventEmitter();
|
|
1354
1370
|
/**
|
|
1355
|
-
* Fires when the
|
|
1371
|
+
* Fires when the drag target's `dragDelay` has passed and the user can drag the element.
|
|
1356
1372
|
*/
|
|
1357
1373
|
onDragReady = new EventEmitter();
|
|
1358
1374
|
/**
|
|
1359
|
-
* Fires when
|
|
1375
|
+
* Fires when `DragTarget` is released, either by dropping it on a drop target or by releasing the mouse button.
|
|
1360
1376
|
*/
|
|
1361
1377
|
onRelease = new EventEmitter();
|
|
1362
1378
|
/**
|
|
1363
|
-
* Fires when
|
|
1379
|
+
* Fires when dragging of the drag target ends and the element is released.
|
|
1364
1380
|
*/
|
|
1365
1381
|
onDragEnd = new EventEmitter();
|
|
1366
1382
|
dragTarget = null;
|
|
@@ -1842,7 +1858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1842
1858
|
}] } });
|
|
1843
1859
|
|
|
1844
1860
|
/**
|
|
1845
|
-
* Arguments for the drag events of the DropTarget and DropTargetContainer directives.
|
|
1861
|
+
* Arguments for the drag events of the `DropTarget` and `DropTargetContainer` directives.
|
|
1846
1862
|
*/
|
|
1847
1863
|
class DropTargetEvent {
|
|
1848
1864
|
/**
|
|
@@ -1862,11 +1878,11 @@ class DropTargetEvent {
|
|
|
1862
1878
|
*/
|
|
1863
1879
|
dragData;
|
|
1864
1880
|
/**
|
|
1865
|
-
* The index of the current drop target in the collection of drop targets
|
|
1881
|
+
* The index of the current drop target in the collection of drop targets. Applies to `DropTargetContainer` directive.
|
|
1866
1882
|
*/
|
|
1867
1883
|
dropTargetIndex;
|
|
1868
1884
|
/**
|
|
1869
|
-
* The hint of the DragTarget
|
|
1885
|
+
* The hint element of the `DragTarget`.
|
|
1870
1886
|
*/
|
|
1871
1887
|
hintElement;
|
|
1872
1888
|
/**
|
|
@@ -1893,12 +1909,14 @@ class DropTargetEvent {
|
|
|
1893
1909
|
|
|
1894
1910
|
/**
|
|
1895
1911
|
* Represents the [Kendo UI DropTargetContainer directive for Angular]({% slug api_utils_droptargetcontainerdirective %}).
|
|
1896
|
-
*
|
|
1912
|
+
* Use this directive to make multiple elements drop targets inside a container.
|
|
1897
1913
|
*
|
|
1898
1914
|
* @example
|
|
1899
|
-
* ```
|
|
1915
|
+
* ```html
|
|
1900
1916
|
* <div kendoDropTargetContainer dropTargetFilter=".my-droptarget">
|
|
1901
|
-
*
|
|
1917
|
+
* <div class="my-droptarget">
|
|
1918
|
+
* Drop here
|
|
1919
|
+
* </div>
|
|
1902
1920
|
* </div>
|
|
1903
1921
|
* ```
|
|
1904
1922
|
*/
|
|
@@ -1908,9 +1926,7 @@ class DropTargetContainerDirective {
|
|
|
1908
1926
|
ngZone;
|
|
1909
1927
|
cdr;
|
|
1910
1928
|
/**
|
|
1911
|
-
*
|
|
1912
|
-
* ([see example]({% slug drop_target_container %})). The possible values include any
|
|
1913
|
-
* DOM `selector`.
|
|
1929
|
+
* Sets a selector for elements in the container to make them drop targets. [See example]({% slug drop_target_container %}).
|
|
1914
1930
|
*/
|
|
1915
1931
|
set dropTargetFilter(value) {
|
|
1916
1932
|
this._dropTargetFilter = value;
|
|
@@ -1922,7 +1938,7 @@ class DropTargetContainerDirective {
|
|
|
1922
1938
|
return this._dropTargetFilter;
|
|
1923
1939
|
}
|
|
1924
1940
|
/**
|
|
1925
|
-
* Specifies whether the
|
|
1941
|
+
* Specifies whether the drop targets within the container will emit the corresponding events upon interaction with a drag target.
|
|
1926
1942
|
*/
|
|
1927
1943
|
set dropDisabled(value) {
|
|
1928
1944
|
this._dropDisabled = value;
|
|
@@ -1937,23 +1953,23 @@ class DropTargetContainerDirective {
|
|
|
1937
1953
|
return this._dropDisabled;
|
|
1938
1954
|
}
|
|
1939
1955
|
/**
|
|
1940
|
-
* Fires when a
|
|
1956
|
+
* Fires when a drag target enters a drop target.
|
|
1941
1957
|
*/
|
|
1942
1958
|
onDragEnter = new EventEmitter();
|
|
1943
1959
|
/**
|
|
1944
|
-
* Fires when a
|
|
1960
|
+
* Fires when a drag target is dragged over a drop target.
|
|
1945
1961
|
*/
|
|
1946
1962
|
onDragOver = new EventEmitter();
|
|
1947
1963
|
/**
|
|
1948
|
-
* Fires when a
|
|
1964
|
+
* Fires when a drag target leaves a drop target.
|
|
1949
1965
|
*/
|
|
1950
1966
|
onDragLeave = new EventEmitter();
|
|
1951
1967
|
/**
|
|
1952
|
-
* Fires when a
|
|
1968
|
+
* Fires when a drag target is dropped over a drop target.
|
|
1953
1969
|
*/
|
|
1954
1970
|
onDrop = new EventEmitter();
|
|
1955
1971
|
/**
|
|
1956
|
-
*
|
|
1972
|
+
* Notifies the `DropTargetContainer` that its content has changed.
|
|
1957
1973
|
*/
|
|
1958
1974
|
notify() {
|
|
1959
1975
|
this.cdr.detectChanges();
|
|
@@ -2116,25 +2132,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2116
2132
|
|
|
2117
2133
|
/**
|
|
2118
2134
|
* Represents the Kendo UI DropTarget directive for Angular.
|
|
2135
|
+
* Use this directive to make an element a drop target for draggable items.
|
|
2136
|
+
*
|
|
2137
|
+
* ```html
|
|
2138
|
+
* <div kendoDropTarget>
|
|
2139
|
+
* Drop here
|
|
2140
|
+
* </div>
|
|
2141
|
+
* ```
|
|
2142
|
+
*
|
|
2119
2143
|
*/
|
|
2120
2144
|
class DropTargetDirective {
|
|
2121
2145
|
service;
|
|
2122
2146
|
element;
|
|
2123
2147
|
ngZone;
|
|
2124
2148
|
/**
|
|
2125
|
-
* Fires when a
|
|
2149
|
+
* Fires when a drag target enters the drop target.
|
|
2126
2150
|
*/
|
|
2127
2151
|
onDragEnter = new EventEmitter();
|
|
2128
2152
|
/**
|
|
2129
|
-
* Fires when a
|
|
2153
|
+
* Fires when a drag target is dragged over the drop target.
|
|
2130
2154
|
*/
|
|
2131
2155
|
onDragOver = new EventEmitter();
|
|
2132
2156
|
/**
|
|
2133
|
-
* Fires when a
|
|
2157
|
+
* Fires when a drag target leaves the drop target.
|
|
2134
2158
|
*/
|
|
2135
2159
|
onDragLeave = new EventEmitter();
|
|
2136
2160
|
/**
|
|
2137
|
-
* Fires when a
|
|
2161
|
+
* Fires when a drag target is dropped over the drop target.
|
|
2138
2162
|
*/
|
|
2139
2163
|
onDrop = new EventEmitter();
|
|
2140
2164
|
constructor(service, element, ngZone) {
|
|
@@ -2233,7 +2257,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2233
2257
|
}] } });
|
|
2234
2258
|
|
|
2235
2259
|
/**
|
|
2236
|
-
*
|
|
2260
|
+
* Use this utility array to access all Drag and Drop-related components and directives in a standalone Angular component.
|
|
2261
|
+
*
|
|
2262
|
+
* @example
|
|
2263
|
+
* ```typescript
|
|
2264
|
+
* import { Component } from '@angular/core';
|
|
2265
|
+
* import { KENDO_DRAGANDDROP } from '@progress/kendo-angular-utils';
|
|
2266
|
+
*
|
|
2267
|
+
* @Component({
|
|
2268
|
+
* selector: 'my-app',
|
|
2269
|
+
* standalone: true,
|
|
2270
|
+
* imports: [KENDO_DRAGANDDROP],
|
|
2271
|
+
* template: `
|
|
2272
|
+
* <div kendoDragTarget>Drag me</div>
|
|
2273
|
+
* <div kendoDropTarget>Drop here</div>
|
|
2274
|
+
* `
|
|
2275
|
+
* })
|
|
2276
|
+
* export class AppComponent {}
|
|
2277
|
+
* ```
|
|
2237
2278
|
*/
|
|
2238
2279
|
const KENDO_DRAGANDDROP = [
|
|
2239
2280
|
DragTargetDirective,
|
|
@@ -2244,8 +2285,8 @@ const KENDO_DRAGANDDROP = [
|
|
|
2244
2285
|
HintComponent
|
|
2245
2286
|
];
|
|
2246
2287
|
/**
|
|
2247
|
-
*
|
|
2248
|
-
* >
|
|
2288
|
+
* Use this utility array to access all `@progress/kendo-angular-utils`-related components and directives in a standalone Angular component.
|
|
2289
|
+
* > Currently, `KENDO_UTILS` includes only the `KENDO_DRAGANDDROP` utility array and their usage is equivalent.
|
|
2249
2290
|
*/
|
|
2250
2291
|
const KENDO_UTILS = [
|
|
2251
2292
|
...KENDO_DRAGANDDROP
|
|
@@ -2253,34 +2294,22 @@ const KENDO_UTILS = [
|
|
|
2253
2294
|
|
|
2254
2295
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
2255
2296
|
/**
|
|
2256
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
|
|
2297
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmodules'])
|
|
2257
2298
|
* definition for the Utils components.
|
|
2258
2299
|
*
|
|
2259
2300
|
* @example
|
|
2260
|
-
*
|
|
2261
|
-
* ```ts-no-run
|
|
2262
|
-
* // Import the Utils module
|
|
2301
|
+
* ```ts
|
|
2263
2302
|
* import { UtilsModule } from '@progress/kendo-angular-utils';
|
|
2264
|
-
*
|
|
2265
|
-
* // The browser platform with a compiler
|
|
2266
2303
|
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
2267
|
-
*
|
|
2268
2304
|
* import { NgModule } from '@angular/core';
|
|
2269
|
-
*
|
|
2270
|
-
* // Import the app component
|
|
2271
2305
|
* import { AppComponent } from './app.component';
|
|
2272
2306
|
*
|
|
2273
|
-
*
|
|
2274
|
-
*
|
|
2275
|
-
*
|
|
2276
|
-
* imports: [BrowserModule, UtilsModule], // import Utils module
|
|
2307
|
+
* @NgModule({
|
|
2308
|
+
* declarations: [AppComponent],
|
|
2309
|
+
* imports: [BrowserModule, UtilsModule],
|
|
2277
2310
|
* bootstrap: [AppComponent]
|
|
2278
2311
|
* })
|
|
2279
2312
|
* export class AppModule {}
|
|
2280
|
-
*
|
|
2281
|
-
* // Compile and launch the module
|
|
2282
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
2283
|
-
*
|
|
2284
2313
|
* ```
|
|
2285
2314
|
*/
|
|
2286
2315
|
class UtilsModule {
|
|
@@ -2298,34 +2327,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2298
2327
|
|
|
2299
2328
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
2300
2329
|
/**
|
|
2301
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
|
|
2330
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmodules'])
|
|
2302
2331
|
* definition for the Drag and Drop directives.
|
|
2303
2332
|
*
|
|
2304
2333
|
* @example
|
|
2305
|
-
*
|
|
2306
|
-
* ```ts-no-run
|
|
2307
|
-
* // Import the DragAndDrop module
|
|
2334
|
+
* ```ts
|
|
2308
2335
|
* import { DragAndDropModule } from '@progress/kendo-angular-utils';
|
|
2309
|
-
*
|
|
2310
|
-
* // The browser platform with a compiler
|
|
2311
2336
|
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
2312
|
-
*
|
|
2313
2337
|
* import { NgModule } from '@angular/core';
|
|
2314
|
-
*
|
|
2315
|
-
* // Import the app component
|
|
2316
2338
|
* import { AppComponent } from './app.component';
|
|
2317
2339
|
*
|
|
2318
|
-
*
|
|
2319
|
-
*
|
|
2320
|
-
*
|
|
2321
|
-
* imports: [BrowserModule, DragAndDropModule], // import DragAndDropModule module
|
|
2340
|
+
* @NgModule({
|
|
2341
|
+
* declarations: [AppComponent],
|
|
2342
|
+
* imports: [BrowserModule, DragAndDropModule],
|
|
2322
2343
|
* bootstrap: [AppComponent]
|
|
2323
2344
|
* })
|
|
2324
2345
|
* export class AppModule {}
|
|
2325
|
-
*
|
|
2326
|
-
* // Compile and launch the module
|
|
2327
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
2328
|
-
*
|
|
2329
2346
|
* ```
|
|
2330
2347
|
*/
|
|
2331
2348
|
class DragAndDropModule {
|
|
@@ -2342,7 +2359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2342
2359
|
}] });
|
|
2343
2360
|
|
|
2344
2361
|
/**
|
|
2345
|
-
* A service that
|
|
2362
|
+
* A service that lets you change the current adaptive settings dynamically. Use the public `notify` method to update the settings.
|
|
2346
2363
|
*/
|
|
2347
2364
|
class AdaptiveSettingsService {
|
|
2348
2365
|
/**
|
|
@@ -2350,7 +2367,7 @@ class AdaptiveSettingsService {
|
|
|
2350
2367
|
*/
|
|
2351
2368
|
changes = new Subject();
|
|
2352
2369
|
/**
|
|
2353
|
-
* Notifies subscribers that the adaptive settings
|
|
2370
|
+
* Notifies subscribers that the adaptive settings have changed.
|
|
2354
2371
|
*
|
|
2355
2372
|
* @param adaptiveSettings - (Optional) A new value for the adaptive settings token.
|
|
2356
2373
|
*/
|
|
@@ -2365,18 +2382,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2365
2382
|
}] });
|
|
2366
2383
|
|
|
2367
2384
|
/**
|
|
2368
|
-
* A token that specifies the AdaptiveSettings
|
|
2385
|
+
* A token that specifies the `AdaptiveSettings` for Kendo UI for Angular components.
|
|
2369
2386
|
*
|
|
2387
|
+
* @example
|
|
2370
2388
|
* ```ts
|
|
2371
2389
|
* import { NgModule } from '@angular/core';
|
|
2372
2390
|
*
|
|
2373
2391
|
* @NgModule({
|
|
2374
|
-
*
|
|
2375
|
-
*
|
|
2392
|
+
* ...,
|
|
2393
|
+
* providers: [{ provide: ADAPTIVE_SETTINGS, useValue: { small: 400, medium: 600 } }]
|
|
2376
2394
|
* })
|
|
2377
2395
|
* export class AppModule {}
|
|
2378
2396
|
* ```
|
|
2379
|
-
*
|
|
2380
2397
|
*/
|
|
2381
2398
|
const ADAPTIVE_SETTINGS = new InjectionToken('Kendo UI Adaptive-Settings token');
|
|
2382
2399
|
|
|
@@ -2385,21 +2402,17 @@ const DEFAULT_ADAPTIVE_SETTINGS = {
|
|
|
2385
2402
|
medium: 768
|
|
2386
2403
|
};
|
|
2387
2404
|
/**
|
|
2388
|
-
* The service responsible for handling changes in
|
|
2405
|
+
* The service responsible for handling changes in adaptive settings. Add it to the providers array when using adaptive breakpoints in a standalone component.
|
|
2389
2406
|
*
|
|
2390
2407
|
* @example
|
|
2391
|
-
*
|
|
2392
|
-
* ```ts-no-run
|
|
2393
|
-
* // Import the AdaptiveService
|
|
2408
|
+
* ```ts
|
|
2394
2409
|
* import { AdaptiveService } from '@progress/kendo-angular-utils';
|
|
2395
2410
|
*
|
|
2396
|
-
* // Define a standalone component
|
|
2397
2411
|
* @Component({
|
|
2398
|
-
*
|
|
2399
|
-
*
|
|
2400
|
-
*
|
|
2401
|
-
*
|
|
2402
|
-
* template: ...
|
|
2412
|
+
* selector: 'my-component',
|
|
2413
|
+
* standalone: true,
|
|
2414
|
+
* providers: [AdaptiveService, { provide: ADAPTIVE_SETTINGS, useValue: { small: 300 } }],
|
|
2415
|
+
* template: '...'
|
|
2403
2416
|
* })
|
|
2404
2417
|
* export class AppComponent {}
|
|
2405
2418
|
* ```
|