@progress/kendo-angular-sortable 17.0.0-develop.9 → 17.0.0
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/binding.directive.d.ts +1 -1
- package/draggable.directive.d.ts +1 -1
- package/{esm2020 → esm2022}/binding.directive.mjs +14 -8
- package/{esm2020 → esm2022}/data-events.mjs +28 -0
- package/{esm2020 → esm2022}/draggable-event.mjs +8 -0
- package/{esm2020 → esm2022}/draggable.directive.mjs +15 -8
- package/{esm2020 → esm2022}/item-template.directive.mjs +8 -6
- package/{esm2020 → esm2022}/navigate-event.mjs +12 -0
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/preventable-event.mjs +1 -3
- package/{esm2020 → esm2022}/sortable-container.mjs +3 -3
- package/{esm2020 → esm2022}/sortable-events.mjs +8 -14
- package/{esm2020 → esm2022}/sortable.component.mjs +246 -221
- package/{esm2020 → esm2022}/sortable.module.mjs +4 -4
- package/{esm2020 → esm2022}/sortable.service.mjs +51 -44
- package/{fesm2015 → fesm2022}/progress-kendo-angular-sortable.mjs +588 -501
- package/package.json +12 -18
- package/sortable-events.d.ts +0 -24
- package/sortable.component.d.ts +1 -1
- package/fesm2020/progress-kendo-angular-sortable.mjs +0 -2046
- /package/{esm2020 → esm2022}/data-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-sortable.mjs +0 -0
- /package/{esm2020 → esm2022}/sortable-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/util.mjs +0 -0
|
@@ -188,19 +188,244 @@ const packageMetadata = {
|
|
|
188
188
|
name: '@progress/kendo-angular-sortable',
|
|
189
189
|
productName: 'Kendo UI for Angular',
|
|
190
190
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
191
|
-
publishDate:
|
|
192
|
-
version: '17.0.0
|
|
191
|
+
publishDate: 1731414213,
|
|
192
|
+
version: '17.0.0',
|
|
193
193
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
194
194
|
};
|
|
195
195
|
|
|
196
|
+
const allowDrag = (e) => {
|
|
197
|
+
const target = e.originalEvent.target;
|
|
198
|
+
return target.hasAttribute('data-sortable-item') || !(isFocusable(target) || widgetTarget(target));
|
|
199
|
+
};
|
|
200
|
+
/**
|
|
201
|
+
* The service that provides the drag-and-drop functionality for
|
|
202
|
+
* transferring items between Sortable components within the same page.
|
|
203
|
+
*
|
|
204
|
+
*/
|
|
205
|
+
class SortableService {
|
|
206
|
+
ngZone;
|
|
207
|
+
/**
|
|
208
|
+
* Specifies the Draggable item that is currently being moved.
|
|
209
|
+
*/
|
|
210
|
+
activeDraggable = null;
|
|
211
|
+
/**
|
|
212
|
+
* Specifies the Draggable item from which the dragging started.
|
|
213
|
+
*/
|
|
214
|
+
originDraggable = null;
|
|
215
|
+
/**
|
|
216
|
+
* @hidden
|
|
217
|
+
*/
|
|
218
|
+
originIndex;
|
|
219
|
+
/**
|
|
220
|
+
* @hidden
|
|
221
|
+
*/
|
|
222
|
+
targetSortable = null;
|
|
223
|
+
/**
|
|
224
|
+
* Specifies the Draggable item that last emitted an event.
|
|
225
|
+
*/
|
|
226
|
+
lastDraggable = null;
|
|
227
|
+
/**
|
|
228
|
+
* @hidden
|
|
229
|
+
*/
|
|
230
|
+
onPressSubject = new Subject();
|
|
231
|
+
/**
|
|
232
|
+
* @hidden
|
|
233
|
+
*/
|
|
234
|
+
onDragSubject = new Subject();
|
|
235
|
+
/**
|
|
236
|
+
* @hidden
|
|
237
|
+
*/
|
|
238
|
+
onReleaseSubject = new Subject();
|
|
239
|
+
subscriptions;
|
|
240
|
+
source = null;
|
|
241
|
+
_target = null;
|
|
242
|
+
sortableCounter = 0;
|
|
243
|
+
sortableRegister = {};
|
|
244
|
+
pressArgs;
|
|
245
|
+
/**
|
|
246
|
+
* Specifies the `SortableComponent` instance under the currently dragged item.
|
|
247
|
+
*/
|
|
248
|
+
set target(target) {
|
|
249
|
+
this._target = target;
|
|
250
|
+
}
|
|
251
|
+
get target() {
|
|
252
|
+
return this._target;
|
|
253
|
+
}
|
|
254
|
+
constructor(ngZone) {
|
|
255
|
+
this.ngZone = ngZone;
|
|
256
|
+
if (!isDocumentAvailable()) {
|
|
257
|
+
return;
|
|
258
|
+
}
|
|
259
|
+
this.subscriptions = this.onPressSubject.pipe(filter(allowDrag), tap(press => {
|
|
260
|
+
this.targetSortable = this.getSortableComponentFromTouch(press);
|
|
261
|
+
}), filter(_ => Boolean(this.targetSortable)), tap(press => {
|
|
262
|
+
this.onReleaseSubject.pipe(take(1)).subscribe(event => this.release(event));
|
|
263
|
+
this.pressArgs = press;
|
|
264
|
+
if (press.isTouch) {
|
|
265
|
+
press.originalEvent.preventDefault();
|
|
266
|
+
}
|
|
267
|
+
}), switchMap(_drag => this.onDragSubject.pipe(filter(_ => Boolean(this.targetSortable)), //stop further events if dragStart is prevented
|
|
268
|
+
tap((e) => this.drag(e))))).subscribe();
|
|
269
|
+
}
|
|
270
|
+
/**
|
|
271
|
+
* @hidden
|
|
272
|
+
*/
|
|
273
|
+
onPress(e) {
|
|
274
|
+
this.onPressSubject.next(e);
|
|
275
|
+
}
|
|
276
|
+
/**
|
|
277
|
+
* @hidden
|
|
278
|
+
*/
|
|
279
|
+
onDrag(e) {
|
|
280
|
+
this.onDragSubject.next(e);
|
|
281
|
+
}
|
|
282
|
+
/**
|
|
283
|
+
* @hidden
|
|
284
|
+
*/
|
|
285
|
+
onRelease(e) {
|
|
286
|
+
this.onReleaseSubject.next(e);
|
|
287
|
+
}
|
|
288
|
+
/**
|
|
289
|
+
* @hidden
|
|
290
|
+
*/
|
|
291
|
+
ngOnDestroy() {
|
|
292
|
+
if (this.subscriptions) {
|
|
293
|
+
this.subscriptions.unsubscribe();
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
/**
|
|
297
|
+
* Registers a `SortableComponent` with which the service operates.
|
|
298
|
+
*
|
|
299
|
+
* @param sortableComponent - The `SortableComponent`.
|
|
300
|
+
* @return - The unique key that the current `SortableComponent` gets when registered.
|
|
301
|
+
*/
|
|
302
|
+
registerComponent(sortableComponent) {
|
|
303
|
+
const id = this.sortableCounter.toString();
|
|
304
|
+
this.sortableRegister[id] = sortableComponent;
|
|
305
|
+
this.sortableCounter++;
|
|
306
|
+
return id;
|
|
307
|
+
}
|
|
308
|
+
/**
|
|
309
|
+
* Removes a `SortableComponent` from the registered `SortableComponents` with which the service operates.
|
|
310
|
+
*
|
|
311
|
+
* @param key - The key of the `SortableComponent` which will be removed from the register.
|
|
312
|
+
* Obtained when `registerComponent` is called.
|
|
313
|
+
*/
|
|
314
|
+
unregisterComponent(key) {
|
|
315
|
+
this.sortableRegister[key] = null;
|
|
316
|
+
}
|
|
317
|
+
/**
|
|
318
|
+
* Sets the `SortableComponent` as a source component. When dragging an item from one Sortable to another,
|
|
319
|
+
* the source component is the one from which the item originates.
|
|
320
|
+
*
|
|
321
|
+
* @param sortable - The `SortableComponent`.
|
|
322
|
+
*/
|
|
323
|
+
setSource(sortable) {
|
|
324
|
+
this.source = sortable;
|
|
325
|
+
}
|
|
326
|
+
/**
|
|
327
|
+
* Returns the source `SortableComponent` from which
|
|
328
|
+
* an item is dragged to other Sortable components.
|
|
329
|
+
*
|
|
330
|
+
* @return - The `SourceComponent`.
|
|
331
|
+
*/
|
|
332
|
+
getSource() {
|
|
333
|
+
return this.source;
|
|
334
|
+
}
|
|
335
|
+
/**
|
|
336
|
+
* The method that finds the `SortableComponent` which is registered to
|
|
337
|
+
* the `SortableService` by using the arguments of the `touch` event.
|
|
338
|
+
*
|
|
339
|
+
* @param touch - A Touch-Object of the `Touch` type interface.
|
|
340
|
+
* Represents a single contact point (finger or stylus)
|
|
341
|
+
* on a touch-sensitive device (touchscreen or trackpad).
|
|
342
|
+
*
|
|
343
|
+
* @return { component: SortableComponent, index: number } - An object
|
|
344
|
+
* where the component is the `SortableComponent` that owns the item
|
|
345
|
+
* and the index is the index of the touched item.
|
|
346
|
+
*/
|
|
347
|
+
getSortableComponentFromTouch(touch) {
|
|
348
|
+
if (!isDocumentAvailable()) {
|
|
349
|
+
return { component: undefined, index: undefined };
|
|
350
|
+
}
|
|
351
|
+
let realTarget = document.elementFromPoint(touch.clientX, touch.clientY);
|
|
352
|
+
while (realTarget) {
|
|
353
|
+
const id = realTarget.getAttribute('data-sortable-id');
|
|
354
|
+
const index = realTarget.getAttribute('data-sortable-index');
|
|
355
|
+
if (id) {
|
|
356
|
+
const targetSortable = this.sortableRegister[id];
|
|
357
|
+
if (targetSortable) {
|
|
358
|
+
return { component: targetSortable, index: parseInt(index, 10) };
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
realTarget = realTarget.parentElement;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
start() {
|
|
365
|
+
const pressArgs = this.pressArgs;
|
|
366
|
+
if (pressArgs) {
|
|
367
|
+
this.pressArgs = null;
|
|
368
|
+
const startTarget = draggableFromEvent(pressArgs, this.targetSortable.component);
|
|
369
|
+
if (this.targetSortable.component.startDrag({ target: startTarget, originalEvent: pressArgs })) {
|
|
370
|
+
this.targetSortable = null;
|
|
371
|
+
return true;
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
release(event) {
|
|
376
|
+
if (this.source) {
|
|
377
|
+
this.ngZone.run(() => {
|
|
378
|
+
if (this.targetSortable) {
|
|
379
|
+
const dropTarget = draggableFromEvent(event, this.targetSortable.component);
|
|
380
|
+
this.source.endDrag({ target: dropTarget, originalEvent: event });
|
|
381
|
+
}
|
|
382
|
+
this.source.positionHintFromEvent(null);
|
|
383
|
+
this.source.markForCheck();
|
|
384
|
+
});
|
|
385
|
+
}
|
|
386
|
+
this.targetSortable = null;
|
|
387
|
+
this.pressArgs = null;
|
|
388
|
+
}
|
|
389
|
+
drag(event) {
|
|
390
|
+
this.ngZone.run(() => {
|
|
391
|
+
if (this.start()) {
|
|
392
|
+
return;
|
|
393
|
+
}
|
|
394
|
+
this.source.positionHintFromEvent(event);
|
|
395
|
+
const sortable = this.getSortableComponentFromTouch(event);
|
|
396
|
+
if (!sortable || sortable && sortable.component !== this.target) {
|
|
397
|
+
if (this.target) {
|
|
398
|
+
this.target.leave({ target: undefined, originalEvent: event });
|
|
399
|
+
}
|
|
400
|
+
else if (this.source !== this.target) {
|
|
401
|
+
this.source.leave({ target: undefined, originalEvent: event });
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
if (sortable && sortable.component) {
|
|
405
|
+
const draggable = draggableFromEvent(event, sortable.component);
|
|
406
|
+
sortable.component.drag({ target: draggable, originalEvent: event });
|
|
407
|
+
}
|
|
408
|
+
this.source.markForCheck();
|
|
409
|
+
});
|
|
410
|
+
}
|
|
411
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
412
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableService, providedIn: 'root' });
|
|
413
|
+
}
|
|
414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableService, decorators: [{
|
|
415
|
+
type: Injectable,
|
|
416
|
+
args: [{
|
|
417
|
+
providedIn: 'root'
|
|
418
|
+
}]
|
|
419
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
|
|
420
|
+
|
|
196
421
|
/**
|
|
197
422
|
* @hidden
|
|
198
423
|
*/
|
|
199
424
|
class SortableContainer {
|
|
425
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableContainer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
426
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableContainer });
|
|
200
427
|
}
|
|
201
|
-
|
|
202
|
-
SortableContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortableContainer });
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortableContainer, decorators: [{
|
|
428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableContainer, decorators: [{
|
|
204
429
|
type: Injectable
|
|
205
430
|
}] });
|
|
206
431
|
|
|
@@ -208,11 +433,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
208
433
|
* @hidden
|
|
209
434
|
*/
|
|
210
435
|
class DraggableDirective {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
436
|
+
parent;
|
|
437
|
+
el;
|
|
438
|
+
renderer;
|
|
439
|
+
index;
|
|
440
|
+
disabled;
|
|
216
441
|
set hidden(value) {
|
|
217
442
|
this._hidden = value;
|
|
218
443
|
this.updateDisplayStyle();
|
|
@@ -220,6 +445,7 @@ class DraggableDirective {
|
|
|
220
445
|
get hidden() {
|
|
221
446
|
return this._hidden;
|
|
222
447
|
}
|
|
448
|
+
_hidden;
|
|
223
449
|
get _focused() {
|
|
224
450
|
return this.disabled ? false : (this.index === this.parent.activeIndex);
|
|
225
451
|
}
|
|
@@ -233,6 +459,12 @@ class DraggableDirective {
|
|
|
233
459
|
this._display = display;
|
|
234
460
|
this.updateDisplayStyle();
|
|
235
461
|
}
|
|
462
|
+
_display;
|
|
463
|
+
constructor(parent, el, renderer) {
|
|
464
|
+
this.parent = parent;
|
|
465
|
+
this.el = el;
|
|
466
|
+
this.renderer = renderer;
|
|
467
|
+
}
|
|
236
468
|
ngOnInit() {
|
|
237
469
|
const nativeElement = this.el.nativeElement;
|
|
238
470
|
this.display = nativeElement.style.display;
|
|
@@ -246,10 +478,10 @@ class DraggableDirective {
|
|
|
246
478
|
updateDisplayStyle() {
|
|
247
479
|
this.renderer.setStyle(this.el.nativeElement, 'display', this.display);
|
|
248
480
|
}
|
|
481
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableDirective, deps: [{ token: SortableContainer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
482
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableDirective, isStandalone: true, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused", "attr.aria-disabled": "this._disabled" } }, ngImport: i0 });
|
|
249
483
|
}
|
|
250
|
-
|
|
251
|
-
DraggableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DraggableDirective, isStandalone: true, selector: "[kendoDraggable]", inputs: { index: "index", disabled: "disabled", hidden: "hidden" }, host: { properties: { "class.k-focus": "this._focused", "attr.aria-disabled": "this._disabled" } }, ngImport: i0 });
|
|
252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DraggableDirective, decorators: [{
|
|
484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableDirective, decorators: [{
|
|
253
485
|
type: Directive,
|
|
254
486
|
args: [{
|
|
255
487
|
selector: '[kendoDraggable]',
|
|
@@ -274,13 +506,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
274
506
|
* @hidden
|
|
275
507
|
*/
|
|
276
508
|
class ItemTemplateDirective {
|
|
509
|
+
templateRef;
|
|
277
510
|
constructor(templateRef) {
|
|
278
511
|
this.templateRef = templateRef;
|
|
279
512
|
}
|
|
513
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
514
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoSortableItemTemplate]", ngImport: i0 });
|
|
280
515
|
}
|
|
281
|
-
|
|
282
|
-
ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoSortableItemTemplate]", ngImport: i0 });
|
|
283
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, decorators: [{
|
|
516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemTemplateDirective, decorators: [{
|
|
284
517
|
type: Directive,
|
|
285
518
|
args: [{
|
|
286
519
|
selector: '[kendoSortableItemTemplate]',
|
|
@@ -291,13 +524,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
291
524
|
* @hidden
|
|
292
525
|
*/
|
|
293
526
|
class PlaceholderTemplateDirective {
|
|
527
|
+
templateRef;
|
|
294
528
|
constructor(templateRef) {
|
|
295
529
|
this.templateRef = templateRef;
|
|
296
530
|
}
|
|
531
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaceholderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
532
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PlaceholderTemplateDirective, isStandalone: true, selector: "[kendoSortablePlaceholderTemplate]", ngImport: i0 });
|
|
297
533
|
}
|
|
298
|
-
|
|
299
|
-
PlaceholderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PlaceholderTemplateDirective, isStandalone: true, selector: "[kendoSortablePlaceholderTemplate]", ngImport: i0 });
|
|
300
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PlaceholderTemplateDirective, decorators: [{
|
|
534
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaceholderTemplateDirective, decorators: [{
|
|
301
535
|
type: Directive,
|
|
302
536
|
args: [{
|
|
303
537
|
selector: '[kendoSortablePlaceholderTemplate]',
|
|
@@ -312,9 +546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
312
546
|
* @hidden
|
|
313
547
|
*/
|
|
314
548
|
class PreventableEvent {
|
|
315
|
-
|
|
316
|
-
this.prevented = false;
|
|
317
|
-
}
|
|
549
|
+
prevented = false;
|
|
318
550
|
/**
|
|
319
551
|
* Prevents the default action for a specified event.
|
|
320
552
|
* In this way, the source component suppresses
|
|
@@ -339,282 +571,78 @@ class PreventableEvent {
|
|
|
339
571
|
*/
|
|
340
572
|
class NavigateEvent extends PreventableEvent {
|
|
341
573
|
/**
|
|
342
|
-
*
|
|
343
|
-
*/
|
|
344
|
-
constructor(options) {
|
|
345
|
-
super();
|
|
346
|
-
Object.assign(this, options);
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
/**
|
|
351
|
-
* The arguments for the `DraggableDirective` events.
|
|
352
|
-
* @hidden
|
|
353
|
-
*/
|
|
354
|
-
class DraggableEvent extends PreventableEvent {
|
|
355
|
-
/**
|
|
356
|
-
* @hidden
|
|
574
|
+
* The index of the draggable item.
|
|
357
575
|
*/
|
|
358
|
-
|
|
359
|
-
super();
|
|
360
|
-
Object.assign(this, options);
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
/**
|
|
365
|
-
* Arguments for the `dragStart` event.
|
|
366
|
-
*/
|
|
367
|
-
class DragStartEvent extends PreventableEvent {
|
|
576
|
+
index;
|
|
368
577
|
/**
|
|
369
|
-
*
|
|
578
|
+
* The old index of the draggable item.
|
|
370
579
|
*/
|
|
371
|
-
|
|
372
|
-
super();
|
|
373
|
-
Object.assign(this, options);
|
|
374
|
-
}
|
|
375
|
-
}
|
|
376
|
-
/**
|
|
377
|
-
* Arguments for the `dragOver` event.
|
|
378
|
-
*/
|
|
379
|
-
class DragOverEvent extends DragStartEvent {
|
|
580
|
+
oldIndex;
|
|
380
581
|
/**
|
|
381
|
-
*
|
|
582
|
+
* Indicates whether the ctrl or meta keys are pressed.
|
|
382
583
|
*/
|
|
383
|
-
|
|
384
|
-
super(options);
|
|
385
|
-
Object.assign(this, options);
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
/**
|
|
389
|
-
* Arguments for the `dragEnd` event.
|
|
390
|
-
*/
|
|
391
|
-
class DragEndEvent extends DragOverEvent {
|
|
584
|
+
ctrlKey;
|
|
392
585
|
/**
|
|
393
586
|
* @hidden
|
|
394
587
|
*/
|
|
395
588
|
constructor(options) {
|
|
396
|
-
super(
|
|
589
|
+
super();
|
|
397
590
|
Object.assign(this, options);
|
|
398
591
|
}
|
|
399
592
|
}
|
|
400
593
|
|
|
401
|
-
const allowDrag = (e) => {
|
|
402
|
-
const target = e.originalEvent.target;
|
|
403
|
-
return target.hasAttribute('data-sortable-item') || !(isFocusable(target) || widgetTarget(target));
|
|
404
|
-
};
|
|
405
594
|
/**
|
|
406
|
-
* The
|
|
407
|
-
*
|
|
408
|
-
*
|
|
595
|
+
* The arguments for the `DraggableDirective` events.
|
|
596
|
+
* @hidden
|
|
409
597
|
*/
|
|
410
|
-
class
|
|
411
|
-
constructor(ngZone) {
|
|
412
|
-
this.ngZone = ngZone;
|
|
413
|
-
/**
|
|
414
|
-
* Specifies the Draggable item that is currently being moved.
|
|
415
|
-
*/
|
|
416
|
-
this.activeDraggable = null;
|
|
417
|
-
/**
|
|
418
|
-
* Specifies the Draggable item from which the dragging started.
|
|
419
|
-
*/
|
|
420
|
-
this.originDraggable = null;
|
|
421
|
-
/**
|
|
422
|
-
* @hidden
|
|
423
|
-
*/
|
|
424
|
-
this.targetSortable = null;
|
|
425
|
-
/**
|
|
426
|
-
* Specifies the Draggable item that last emitted an event.
|
|
427
|
-
*/
|
|
428
|
-
this.lastDraggable = null;
|
|
429
|
-
/**
|
|
430
|
-
* @hidden
|
|
431
|
-
*/
|
|
432
|
-
this.onPressSubject = new Subject();
|
|
433
|
-
/**
|
|
434
|
-
* @hidden
|
|
435
|
-
*/
|
|
436
|
-
this.onDragSubject = new Subject();
|
|
437
|
-
/**
|
|
438
|
-
* @hidden
|
|
439
|
-
*/
|
|
440
|
-
this.onReleaseSubject = new Subject();
|
|
441
|
-
this.source = null;
|
|
442
|
-
this._target = null;
|
|
443
|
-
this.sortableCounter = 0;
|
|
444
|
-
this.sortableRegister = {};
|
|
445
|
-
if (!isDocumentAvailable()) {
|
|
446
|
-
return;
|
|
447
|
-
}
|
|
448
|
-
this.subscriptions = this.onPressSubject.pipe(filter(allowDrag), tap(press => {
|
|
449
|
-
this.targetSortable = this.getSortableComponentFromTouch(press);
|
|
450
|
-
}), filter(_ => Boolean(this.targetSortable)), tap(press => {
|
|
451
|
-
this.onReleaseSubject.pipe(take(1)).subscribe(event => this.release(event));
|
|
452
|
-
this.pressArgs = press;
|
|
453
|
-
if (press.isTouch) {
|
|
454
|
-
press.originalEvent.preventDefault();
|
|
455
|
-
}
|
|
456
|
-
}), switchMap(_drag => this.onDragSubject.pipe(filter(_ => Boolean(this.targetSortable)), //stop further events if dragStart is prevented
|
|
457
|
-
tap((e) => this.drag(e))))).subscribe();
|
|
458
|
-
}
|
|
459
|
-
/**
|
|
460
|
-
* Specifies the `SortableComponent` instance under the currently dragged item.
|
|
461
|
-
*/
|
|
462
|
-
set target(target) {
|
|
463
|
-
this._target = target;
|
|
464
|
-
}
|
|
465
|
-
get target() {
|
|
466
|
-
return this._target;
|
|
467
|
-
}
|
|
468
|
-
/**
|
|
469
|
-
* @hidden
|
|
470
|
-
*/
|
|
471
|
-
onPress(e) {
|
|
472
|
-
this.onPressSubject.next(e);
|
|
473
|
-
}
|
|
474
|
-
/**
|
|
475
|
-
* @hidden
|
|
476
|
-
*/
|
|
477
|
-
onDrag(e) {
|
|
478
|
-
this.onDragSubject.next(e);
|
|
479
|
-
}
|
|
480
|
-
/**
|
|
481
|
-
* @hidden
|
|
482
|
-
*/
|
|
483
|
-
onRelease(e) {
|
|
484
|
-
this.onReleaseSubject.next(e);
|
|
485
|
-
}
|
|
598
|
+
class DraggableEvent extends PreventableEvent {
|
|
486
599
|
/**
|
|
487
|
-
*
|
|
600
|
+
* The target DraggableDirective instance.
|
|
488
601
|
*/
|
|
489
|
-
|
|
490
|
-
if (this.subscriptions) {
|
|
491
|
-
this.subscriptions.unsubscribe();
|
|
492
|
-
}
|
|
493
|
-
}
|
|
602
|
+
target;
|
|
494
603
|
/**
|
|
495
|
-
*
|
|
496
|
-
*
|
|
497
|
-
* @param sortableComponent - The `SortableComponent`.
|
|
498
|
-
* @return - The unique key that the current `SortableComponent` gets when registered.
|
|
604
|
+
* The browser event emitted by the target's native element.
|
|
499
605
|
*/
|
|
500
|
-
|
|
501
|
-
const id = this.sortableCounter.toString();
|
|
502
|
-
this.sortableRegister[id] = sortableComponent;
|
|
503
|
-
this.sortableCounter++;
|
|
504
|
-
return id;
|
|
505
|
-
}
|
|
606
|
+
originalEvent; //DragEvent | TouchEvent;
|
|
506
607
|
/**
|
|
507
|
-
*
|
|
508
|
-
*
|
|
509
|
-
* @param key - The key of the `SortableComponent` which will be removed from the register.
|
|
510
|
-
* Obtained when `registerComponent` is called.
|
|
608
|
+
* @hidden
|
|
511
609
|
*/
|
|
512
|
-
|
|
513
|
-
|
|
610
|
+
constructor(options) {
|
|
611
|
+
super();
|
|
612
|
+
Object.assign(this, options);
|
|
514
613
|
}
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
/**
|
|
617
|
+
* Arguments for the `dragStart` event.
|
|
618
|
+
*/
|
|
619
|
+
class DragStartEvent extends PreventableEvent {
|
|
515
620
|
/**
|
|
516
|
-
*
|
|
517
|
-
* the source component is the one from which the item originates.
|
|
518
|
-
*
|
|
519
|
-
* @param sortable - The `SortableComponent`.
|
|
621
|
+
* The index of the draggable item.
|
|
520
622
|
*/
|
|
521
|
-
|
|
522
|
-
this.source = sortable;
|
|
523
|
-
}
|
|
623
|
+
index;
|
|
524
624
|
/**
|
|
525
|
-
*
|
|
526
|
-
* an item is dragged to other Sortable components.
|
|
527
|
-
*
|
|
528
|
-
* @return - The `SourceComponent`.
|
|
625
|
+
* The old index of the draggable item.
|
|
529
626
|
*/
|
|
530
|
-
|
|
531
|
-
return this.source;
|
|
532
|
-
}
|
|
627
|
+
oldIndex;
|
|
533
628
|
/**
|
|
534
|
-
*
|
|
535
|
-
* the `SortableService` by using the arguments of the `touch` event.
|
|
536
|
-
*
|
|
537
|
-
* @param touch - A Touch-Object of the `Touch` type interface.
|
|
538
|
-
* Represents a single contact point (finger or stylus)
|
|
539
|
-
* on a touch-sensitive device (touchscreen or trackpad).
|
|
540
|
-
*
|
|
541
|
-
* @return { component: SortableComponent, index: number } - An object
|
|
542
|
-
* where the component is the `SortableComponent` that owns the item
|
|
543
|
-
* and the index is the index of the touched item.
|
|
629
|
+
* @hidden
|
|
544
630
|
*/
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
}
|
|
549
|
-
let realTarget = document.elementFromPoint(touch.clientX, touch.clientY);
|
|
550
|
-
while (realTarget) {
|
|
551
|
-
const id = realTarget.getAttribute('data-sortable-id');
|
|
552
|
-
const index = realTarget.getAttribute('data-sortable-index');
|
|
553
|
-
if (id) {
|
|
554
|
-
const targetSortable = this.sortableRegister[id];
|
|
555
|
-
if (targetSortable) {
|
|
556
|
-
return { component: targetSortable, index: parseInt(index, 10) };
|
|
557
|
-
}
|
|
558
|
-
}
|
|
559
|
-
realTarget = realTarget.parentElement;
|
|
560
|
-
}
|
|
561
|
-
}
|
|
562
|
-
start() {
|
|
563
|
-
const pressArgs = this.pressArgs;
|
|
564
|
-
if (pressArgs) {
|
|
565
|
-
this.pressArgs = null;
|
|
566
|
-
const startTarget = draggableFromEvent(pressArgs, this.targetSortable.component);
|
|
567
|
-
if (this.targetSortable.component.startDrag({ target: startTarget, originalEvent: pressArgs })) {
|
|
568
|
-
this.targetSortable = null;
|
|
569
|
-
return true;
|
|
570
|
-
}
|
|
571
|
-
}
|
|
572
|
-
}
|
|
573
|
-
release(event) {
|
|
574
|
-
if (this.source) {
|
|
575
|
-
this.ngZone.run(() => {
|
|
576
|
-
if (this.targetSortable) {
|
|
577
|
-
const dropTarget = draggableFromEvent(event, this.targetSortable.component);
|
|
578
|
-
this.source.endDrag({ target: dropTarget, originalEvent: event });
|
|
579
|
-
}
|
|
580
|
-
this.source.positionHintFromEvent(null);
|
|
581
|
-
this.source.markForCheck();
|
|
582
|
-
});
|
|
583
|
-
}
|
|
584
|
-
this.targetSortable = null;
|
|
585
|
-
this.pressArgs = null;
|
|
586
|
-
}
|
|
587
|
-
drag(event) {
|
|
588
|
-
this.ngZone.run(() => {
|
|
589
|
-
if (this.start()) {
|
|
590
|
-
return;
|
|
591
|
-
}
|
|
592
|
-
this.source.positionHintFromEvent(event);
|
|
593
|
-
const sortable = this.getSortableComponentFromTouch(event);
|
|
594
|
-
if (!sortable || sortable && sortable.component !== this.target) {
|
|
595
|
-
if (this.target) {
|
|
596
|
-
this.target.leave({ target: undefined, originalEvent: event });
|
|
597
|
-
}
|
|
598
|
-
else if (this.source !== this.target) {
|
|
599
|
-
this.source.leave({ target: undefined, originalEvent: event });
|
|
600
|
-
}
|
|
601
|
-
}
|
|
602
|
-
if (sortable && sortable.component) {
|
|
603
|
-
const draggable = draggableFromEvent(event, sortable.component);
|
|
604
|
-
sortable.component.drag({ target: draggable, originalEvent: event });
|
|
605
|
-
}
|
|
606
|
-
this.source.markForCheck();
|
|
607
|
-
});
|
|
631
|
+
constructor(options) {
|
|
632
|
+
super();
|
|
633
|
+
Object.assign(this, options);
|
|
608
634
|
}
|
|
609
635
|
}
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
636
|
+
/**
|
|
637
|
+
* Arguments for the `dragOver` event.
|
|
638
|
+
*/
|
|
639
|
+
class DragOverEvent extends DragStartEvent {
|
|
640
|
+
}
|
|
641
|
+
/**
|
|
642
|
+
* Arguments for the `dragEnd` event.
|
|
643
|
+
*/
|
|
644
|
+
class DragEndEvent extends DragOverEvent {
|
|
645
|
+
}
|
|
618
646
|
|
|
619
647
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
620
648
|
const KEY_SHORTCUTS = 'Control+ArrowLeft Control+ArrowRight Meta+ArrowLeft Meta+ArrowRight';
|
|
@@ -631,213 +659,14 @@ const KEY_SHORTCUTS = 'Control+ArrowLeft Control+ArrowRight Meta+ArrowLeft Meta+
|
|
|
631
659
|
* Represents the Kendo UI Sortable component for Angular.
|
|
632
660
|
*/
|
|
633
661
|
class SortableComponent {
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
this.tabIndex = null;
|
|
643
|
-
/**
|
|
644
|
-
* Enables or disables the [keyboard navigation]({% slug keyboard_navigation_sortable %}).
|
|
645
|
-
* @default false
|
|
646
|
-
*/
|
|
647
|
-
this.navigable = false;
|
|
648
|
-
/**
|
|
649
|
-
* Enables or disables the built-in animations.
|
|
650
|
-
* @default false
|
|
651
|
-
*/
|
|
652
|
-
this.animation = false;
|
|
653
|
-
/**
|
|
654
|
-
* Sets an array of integers, which represent the indexes of the disabled items from the data array
|
|
655
|
-
* ([see example](slug:items_sortable#toc-disabling-items)).
|
|
656
|
-
*/
|
|
657
|
-
this.disabledIndexes = [];
|
|
658
|
-
/**
|
|
659
|
-
* Sets a string that represents the name of the zone to which the Sortable belongs
|
|
660
|
-
* ([see example](slug:items_sortable#toc-transferring-of-items)). Items can be transferred
|
|
661
|
-
* between Sortables which belong to the same zone.
|
|
662
|
-
*/
|
|
663
|
-
this.zone = undefined;
|
|
664
|
-
/**
|
|
665
|
-
* Defines the zones from which items can be transferred onto the current Sortable component
|
|
666
|
-
* ([see example](slug:items_sortable#toc-transferring-of-items)). If the `acceptZones` property
|
|
667
|
-
* of the target Sortable is set, allows you to transfer items between Sortables which belong
|
|
668
|
-
* to different zones.
|
|
669
|
-
*/
|
|
670
|
-
this.acceptZones = undefined;
|
|
671
|
-
/**
|
|
672
|
-
* Represents the CSS styles which are applied to each Sortable item.
|
|
673
|
-
*
|
|
674
|
-
* @example
|
|
675
|
-
* ```ts
|
|
676
|
-
* import { Component } from '@angular/core';
|
|
677
|
-
* import { SortableModule } from '@progress/kendo-angular-sortable';
|
|
678
|
-
*
|
|
679
|
-
* _@Component({
|
|
680
|
-
* selector: 'my-app',
|
|
681
|
-
* template: `
|
|
682
|
-
* <kendo-sortable
|
|
683
|
-
* [data]="['1','2','3','4','5','6','7']"
|
|
684
|
-
* [itemStyle] ="{
|
|
685
|
-
* 'display': 'inline-block',
|
|
686
|
-
* 'background-color': '#51A0ED',
|
|
687
|
-
* 'height':'50px',
|
|
688
|
-
* 'width':'50px',
|
|
689
|
-
* 'margin':'3px',
|
|
690
|
-
* 'cursor':'move'
|
|
691
|
-
* }"
|
|
692
|
-
* >
|
|
693
|
-
* </kendo-sortable>
|
|
694
|
-
* `
|
|
695
|
-
* })
|
|
696
|
-
* export class AppComponent {
|
|
697
|
-
* }
|
|
698
|
-
* ```
|
|
699
|
-
*/
|
|
700
|
-
this.itemStyle = {};
|
|
701
|
-
/**
|
|
702
|
-
* Defines the CSS styles applied to an empty item ([see example]({% slug templates_sortable %})).
|
|
703
|
-
*/
|
|
704
|
-
this.emptyItemStyle = undefined;
|
|
705
|
-
/**
|
|
706
|
-
* Defines the CSS styles which are applied to the currently dragged item ([see example]({% slug templates_sortable %})).
|
|
707
|
-
*/
|
|
708
|
-
this.activeItemStyle = undefined;
|
|
709
|
-
/**
|
|
710
|
-
* Defines the CSS styles which are applied to all disabled items.
|
|
711
|
-
*/
|
|
712
|
-
this.disabledItemStyle = undefined;
|
|
713
|
-
/**
|
|
714
|
-
* Defines the class which is applied to each Sortable item.
|
|
715
|
-
*/
|
|
716
|
-
this.itemClass = "";
|
|
717
|
-
/**
|
|
718
|
-
* Defines the class which is applied to the active Sortable item.
|
|
719
|
-
*/
|
|
720
|
-
this.activeItemClass = null;
|
|
721
|
-
/**
|
|
722
|
-
* Defines the class which is applied to the empty item when the Sortable has empty data.
|
|
723
|
-
*/
|
|
724
|
-
this.emptyItemClass = null;
|
|
725
|
-
/**
|
|
726
|
-
* Defines the class which is applied to each disabled Sortable item.
|
|
727
|
-
*/
|
|
728
|
-
this.disabledItemClass = null;
|
|
729
|
-
/**
|
|
730
|
-
* Sets the text message that will be displayed when the Sortable has no items.
|
|
731
|
-
*
|
|
732
|
-
* @example
|
|
733
|
-
* ```ts
|
|
734
|
-
* import { Component } from '@angular/core';
|
|
735
|
-
* import { SortableModule } from '@progress/kendo-angular-sortable';
|
|
736
|
-
*
|
|
737
|
-
* _@Component({
|
|
738
|
-
* selector: 'my-app',
|
|
739
|
-
* template: `
|
|
740
|
-
* <kendo-sortable [data]="[]"
|
|
741
|
-
* [emptyText]="'No items - custom message and styles'"
|
|
742
|
-
* [emptyItemStyle] = "{'height': '40px', 'width':'400px', 'border': '2px dashed black'}" >
|
|
743
|
-
* </kendo-sortable>
|
|
744
|
-
* `
|
|
745
|
-
* })
|
|
746
|
-
* export class AppComponent { }
|
|
747
|
-
* ```
|
|
748
|
-
*/
|
|
749
|
-
this.emptyText = "Empty";
|
|
750
|
-
/**
|
|
751
|
-
* @hidden
|
|
752
|
-
*/
|
|
753
|
-
this.defaultTemplateRef = null;
|
|
754
|
-
/**
|
|
755
|
-
* Defines the template that will be used for rendering the items.
|
|
756
|
-
* @hidden
|
|
757
|
-
*/
|
|
758
|
-
this.itemTemplateDirectiveRef = null;
|
|
759
|
-
/**
|
|
760
|
-
* Defines the template that will be used for rendering the placeholder.
|
|
761
|
-
* @hidden
|
|
762
|
-
*/
|
|
763
|
-
this.placeholderTemplateDirectiveRef = null;
|
|
764
|
-
this.itemWrappers = new QueryList();
|
|
765
|
-
/**
|
|
766
|
-
* Fires when the dragging of an item is started.
|
|
767
|
-
*/
|
|
768
|
-
this.dragStart = new EventEmitter();
|
|
769
|
-
/**
|
|
770
|
-
* Fires when the dragging of an item is completed.
|
|
771
|
-
*/
|
|
772
|
-
this.dragEnd = new EventEmitter();
|
|
773
|
-
/**
|
|
774
|
-
* Fires while the dragging of an item is in progress.
|
|
775
|
-
*/
|
|
776
|
-
this.dragOver = new EventEmitter();
|
|
777
|
-
/**
|
|
778
|
-
* Fires when dragging an item outside of the component.
|
|
779
|
-
*/
|
|
780
|
-
this.dragLeave = new EventEmitter();
|
|
781
|
-
/**
|
|
782
|
-
* Fires while the moving an item from one position to another.
|
|
783
|
-
*/
|
|
784
|
-
this.dataMove = new EventEmitter();
|
|
785
|
-
/**
|
|
786
|
-
* Fires when a new item is added to the Sortable.
|
|
787
|
-
*/
|
|
788
|
-
this.dataAdd = new EventEmitter();
|
|
789
|
-
/**
|
|
790
|
-
* Fires when an item is removed from the Sortable.
|
|
791
|
-
*/
|
|
792
|
-
this.dataRemove = new EventEmitter();
|
|
793
|
-
/**
|
|
794
|
-
* Fires when navigating using the keyboard.
|
|
795
|
-
*/
|
|
796
|
-
this.navigate = new EventEmitter();
|
|
797
|
-
/**
|
|
798
|
-
* The index of the currently focused item.
|
|
799
|
-
* If no item is focused, set to `-1`.
|
|
800
|
-
*/
|
|
801
|
-
this.activeIndex = -1;
|
|
802
|
-
this.hostRole = 'list';
|
|
803
|
-
/**
|
|
804
|
-
* Flag indicating if the component is currently playing animations.
|
|
805
|
-
* @hidden
|
|
806
|
-
*/
|
|
807
|
-
this.animating = false;
|
|
808
|
-
/**
|
|
809
|
-
* The index of the currently dragged item.
|
|
810
|
-
*/
|
|
811
|
-
this.dragIndex = -1;
|
|
812
|
-
/**
|
|
813
|
-
* The index of the item above which the dragged item is.
|
|
814
|
-
*/
|
|
815
|
-
this.dragOverIndex = -1;
|
|
816
|
-
this.onDragStartSubject = new Subject();
|
|
817
|
-
this.onDragOverSubject = new Subject();
|
|
818
|
-
this.onDragLeaveSubject = new Subject();
|
|
819
|
-
this.onDragEndSubject = new Subject();
|
|
820
|
-
/**
|
|
821
|
-
* The location of the hint indicator when dragging on mobile devices.
|
|
822
|
-
*/
|
|
823
|
-
this.hintLocation = null;
|
|
824
|
-
this._localData = [];
|
|
825
|
-
/**
|
|
826
|
-
* @hidden
|
|
827
|
-
*/
|
|
828
|
-
this.ariaKeyShortcuts = KEY_SHORTCUTS;
|
|
829
|
-
this.focusableItems = [];
|
|
830
|
-
this.animationDuration = 300;
|
|
831
|
-
this.afterKeyPress = false;
|
|
832
|
-
this.sortableService = null;
|
|
833
|
-
this._hideActiveItem = false;
|
|
834
|
-
this.prevActiveIndex = 0;
|
|
835
|
-
validatePackage(packageMetadata);
|
|
836
|
-
this.wrapper = wrapper.nativeElement;
|
|
837
|
-
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
|
838
|
-
this.sortableService = sortableService;
|
|
839
|
-
this.subscribeEvents();
|
|
840
|
-
}
|
|
662
|
+
ngZone;
|
|
663
|
+
renderer;
|
|
664
|
+
changeDetector;
|
|
665
|
+
localization;
|
|
666
|
+
/**
|
|
667
|
+
* Specifies the tab index of the Sortable component.
|
|
668
|
+
*/
|
|
669
|
+
tabIndex = null;
|
|
841
670
|
/**
|
|
842
671
|
* Sets an array of any data that is used as a data source for the Sortable.
|
|
843
672
|
* {% meta height:430 %}
|
|
@@ -856,6 +685,11 @@ class SortableComponent {
|
|
|
856
685
|
get data() {
|
|
857
686
|
return this._data;
|
|
858
687
|
}
|
|
688
|
+
/**
|
|
689
|
+
* Enables or disables the [keyboard navigation]({% slug keyboard_navigation_sortable %}).
|
|
690
|
+
* @default false
|
|
691
|
+
*/
|
|
692
|
+
navigable = false;
|
|
859
693
|
/**
|
|
860
694
|
* @hidden
|
|
861
695
|
*
|
|
@@ -864,12 +698,220 @@ class SortableComponent {
|
|
|
864
698
|
set navigatable(value) {
|
|
865
699
|
this.navigable = value;
|
|
866
700
|
}
|
|
701
|
+
/**
|
|
702
|
+
* Enables or disables the built-in animations.
|
|
703
|
+
* @default false
|
|
704
|
+
*/
|
|
705
|
+
animation = false;
|
|
706
|
+
/**
|
|
707
|
+
* Sets an array of integers, which represent the indexes of the disabled items from the data array
|
|
708
|
+
* ([see example](slug:items_sortable#toc-disabling-items)).
|
|
709
|
+
*/
|
|
710
|
+
disabledIndexes = [];
|
|
711
|
+
/**
|
|
712
|
+
* Sets a string that represents the name of the zone to which the Sortable belongs
|
|
713
|
+
* ([see example](slug:items_sortable#toc-transferring-of-items)). Items can be transferred
|
|
714
|
+
* between Sortables which belong to the same zone.
|
|
715
|
+
*/
|
|
716
|
+
zone = undefined;
|
|
717
|
+
/**
|
|
718
|
+
* Defines the zones from which items can be transferred onto the current Sortable component
|
|
719
|
+
* ([see example](slug:items_sortable#toc-transferring-of-items)). If the `acceptZones` property
|
|
720
|
+
* of the target Sortable is set, allows you to transfer items between Sortables which belong
|
|
721
|
+
* to different zones.
|
|
722
|
+
*/
|
|
723
|
+
acceptZones = undefined;
|
|
724
|
+
/**
|
|
725
|
+
* Represents the CSS styles which are applied to each Sortable item.
|
|
726
|
+
*
|
|
727
|
+
* @example
|
|
728
|
+
* ```ts
|
|
729
|
+
* import { Component } from '@angular/core';
|
|
730
|
+
* import { SortableModule } from '@progress/kendo-angular-sortable';
|
|
731
|
+
*
|
|
732
|
+
* _@Component({
|
|
733
|
+
* selector: 'my-app',
|
|
734
|
+
* template: `
|
|
735
|
+
* <kendo-sortable
|
|
736
|
+
* [data]="['1','2','3','4','5','6','7']"
|
|
737
|
+
* [itemStyle] ="{
|
|
738
|
+
* 'display': 'inline-block',
|
|
739
|
+
* 'background-color': '#51A0ED',
|
|
740
|
+
* 'height':'50px',
|
|
741
|
+
* 'width':'50px',
|
|
742
|
+
* 'margin':'3px',
|
|
743
|
+
* 'cursor':'move'
|
|
744
|
+
* }"
|
|
745
|
+
* >
|
|
746
|
+
* </kendo-sortable>
|
|
747
|
+
* `
|
|
748
|
+
* })
|
|
749
|
+
* export class AppComponent {
|
|
750
|
+
* }
|
|
751
|
+
* ```
|
|
752
|
+
*/
|
|
753
|
+
itemStyle = {};
|
|
754
|
+
/**
|
|
755
|
+
* Defines the CSS styles applied to an empty item ([see example]({% slug templates_sortable %})).
|
|
756
|
+
*/
|
|
757
|
+
emptyItemStyle = undefined;
|
|
758
|
+
/**
|
|
759
|
+
* Defines the CSS styles which are applied to the currently dragged item ([see example]({% slug templates_sortable %})).
|
|
760
|
+
*/
|
|
761
|
+
activeItemStyle = undefined;
|
|
762
|
+
/**
|
|
763
|
+
* Defines the CSS styles which are applied to all disabled items.
|
|
764
|
+
*/
|
|
765
|
+
disabledItemStyle = undefined;
|
|
766
|
+
/**
|
|
767
|
+
* Defines the class which is applied to each Sortable item.
|
|
768
|
+
*/
|
|
769
|
+
itemClass = "";
|
|
770
|
+
/**
|
|
771
|
+
* Defines the class which is applied to the active Sortable item.
|
|
772
|
+
*/
|
|
773
|
+
activeItemClass = null;
|
|
774
|
+
/**
|
|
775
|
+
* Defines the class which is applied to the empty item when the Sortable has empty data.
|
|
776
|
+
*/
|
|
777
|
+
emptyItemClass = null;
|
|
778
|
+
/**
|
|
779
|
+
* Defines the class which is applied to each disabled Sortable item.
|
|
780
|
+
*/
|
|
781
|
+
disabledItemClass = null;
|
|
782
|
+
/**
|
|
783
|
+
* Sets the text message that will be displayed when the Sortable has no items.
|
|
784
|
+
*
|
|
785
|
+
* @example
|
|
786
|
+
* ```ts
|
|
787
|
+
* import { Component } from '@angular/core';
|
|
788
|
+
* import { SortableModule } from '@progress/kendo-angular-sortable';
|
|
789
|
+
*
|
|
790
|
+
* _@Component({
|
|
791
|
+
* selector: 'my-app',
|
|
792
|
+
* template: `
|
|
793
|
+
* <kendo-sortable [data]="[]"
|
|
794
|
+
* [emptyText]="'No items - custom message and styles'"
|
|
795
|
+
* [emptyItemStyle] = "{'height': '40px', 'width':'400px', 'border': '2px dashed black'}" >
|
|
796
|
+
* </kendo-sortable>
|
|
797
|
+
* `
|
|
798
|
+
* })
|
|
799
|
+
* export class AppComponent { }
|
|
800
|
+
* ```
|
|
801
|
+
*/
|
|
802
|
+
emptyText = "Empty";
|
|
803
|
+
/**
|
|
804
|
+
* @hidden
|
|
805
|
+
*/
|
|
806
|
+
defaultTemplateRef = null;
|
|
807
|
+
/**
|
|
808
|
+
* Defines the template that will be used for rendering the items.
|
|
809
|
+
* @hidden
|
|
810
|
+
*/
|
|
811
|
+
itemTemplateDirectiveRef = null;
|
|
812
|
+
/**
|
|
813
|
+
* Defines the template that will be used for rendering the placeholder.
|
|
814
|
+
* @hidden
|
|
815
|
+
*/
|
|
816
|
+
placeholderTemplateDirectiveRef = null;
|
|
817
|
+
itemWrappers = new QueryList();
|
|
818
|
+
draggables;
|
|
819
|
+
noDataContainer;
|
|
820
|
+
hint;
|
|
821
|
+
/**
|
|
822
|
+
* Fires when the dragging of an item is started.
|
|
823
|
+
*/
|
|
824
|
+
dragStart = new EventEmitter();
|
|
825
|
+
/**
|
|
826
|
+
* Fires when the dragging of an item is completed.
|
|
827
|
+
*/
|
|
828
|
+
dragEnd = new EventEmitter();
|
|
829
|
+
/**
|
|
830
|
+
* Fires while the dragging of an item is in progress.
|
|
831
|
+
*/
|
|
832
|
+
dragOver = new EventEmitter();
|
|
833
|
+
/**
|
|
834
|
+
* Fires when dragging an item outside of the component.
|
|
835
|
+
*/
|
|
836
|
+
dragLeave = new EventEmitter();
|
|
837
|
+
/**
|
|
838
|
+
* Fires while the moving an item from one position to another.
|
|
839
|
+
*/
|
|
840
|
+
dataMove = new EventEmitter();
|
|
841
|
+
/**
|
|
842
|
+
* Fires when a new item is added to the Sortable.
|
|
843
|
+
*/
|
|
844
|
+
dataAdd = new EventEmitter();
|
|
845
|
+
/**
|
|
846
|
+
* Fires when an item is removed from the Sortable.
|
|
847
|
+
*/
|
|
848
|
+
dataRemove = new EventEmitter();
|
|
849
|
+
/**
|
|
850
|
+
* Fires when navigating using the keyboard.
|
|
851
|
+
*/
|
|
852
|
+
navigate = new EventEmitter();
|
|
853
|
+
/**
|
|
854
|
+
* The index of the currently focused item.
|
|
855
|
+
* If no item is focused, set to `-1`.
|
|
856
|
+
*/
|
|
857
|
+
activeIndex = -1;
|
|
867
858
|
get touchAction() {
|
|
868
859
|
return "none";
|
|
869
860
|
}
|
|
870
861
|
get dir() {
|
|
871
862
|
return this.direction;
|
|
872
863
|
}
|
|
864
|
+
hostRole = 'list';
|
|
865
|
+
/**
|
|
866
|
+
* Flag indicating if the component is currently playing animations.
|
|
867
|
+
* @hidden
|
|
868
|
+
*/
|
|
869
|
+
animating = false;
|
|
870
|
+
/**
|
|
871
|
+
* The index of the currently dragged item.
|
|
872
|
+
*/
|
|
873
|
+
dragIndex = -1;
|
|
874
|
+
/**
|
|
875
|
+
* The index of the item above which the dragged item is.
|
|
876
|
+
*/
|
|
877
|
+
dragOverIndex = -1;
|
|
878
|
+
onDragStartSubject = new Subject();
|
|
879
|
+
onDragOverSubject = new Subject();
|
|
880
|
+
onDragLeaveSubject = new Subject();
|
|
881
|
+
onDragEndSubject = new Subject();
|
|
882
|
+
/**
|
|
883
|
+
* The SortableComponent's HTMLElement.
|
|
884
|
+
*/
|
|
885
|
+
wrapper;
|
|
886
|
+
/**
|
|
887
|
+
* The location of the hint indicator when dragging on mobile devices.
|
|
888
|
+
*/
|
|
889
|
+
hintLocation = null;
|
|
890
|
+
id;
|
|
891
|
+
itemTemplateRef;
|
|
892
|
+
placeholderTemplateRef;
|
|
893
|
+
_data;
|
|
894
|
+
_localData = [];
|
|
895
|
+
/**
|
|
896
|
+
* @hidden
|
|
897
|
+
*/
|
|
898
|
+
ariaKeyShortcuts = KEY_SHORTCUTS;
|
|
899
|
+
localizationChangeSubscription;
|
|
900
|
+
dragStartSubscription;
|
|
901
|
+
dragOverSubscription;
|
|
902
|
+
dragLeaveSubscription;
|
|
903
|
+
dragEndSubscription;
|
|
904
|
+
childrenTabindexSubscription;
|
|
905
|
+
focusableItems = [];
|
|
906
|
+
animationDuration = 300;
|
|
907
|
+
afterKeyPress = false;
|
|
908
|
+
sortableService = null;
|
|
909
|
+
_hideActiveItem = false;
|
|
910
|
+
prevActiveIndex = 0;
|
|
911
|
+
direction;
|
|
912
|
+
_animating;
|
|
913
|
+
draggable;
|
|
914
|
+
offsetParent;
|
|
873
915
|
setItemData(data, i) {
|
|
874
916
|
this._localData[i].item = data.item;
|
|
875
917
|
this._localData[i].index = data.index;
|
|
@@ -888,6 +930,17 @@ class SortableComponent {
|
|
|
888
930
|
}
|
|
889
931
|
return template;
|
|
890
932
|
}
|
|
933
|
+
constructor(ngZone, renderer, changeDetector, localization, wrapper, sortableService) {
|
|
934
|
+
this.ngZone = ngZone;
|
|
935
|
+
this.renderer = renderer;
|
|
936
|
+
this.changeDetector = changeDetector;
|
|
937
|
+
this.localization = localization;
|
|
938
|
+
validatePackage(packageMetadata);
|
|
939
|
+
this.wrapper = wrapper.nativeElement;
|
|
940
|
+
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
|
941
|
+
this.sortableService = sortableService;
|
|
942
|
+
this.subscribeEvents();
|
|
943
|
+
}
|
|
891
944
|
ngOnInit() {
|
|
892
945
|
if (!this.data) {
|
|
893
946
|
this.data = [];
|
|
@@ -1572,19 +1625,18 @@ class SortableComponent {
|
|
|
1572
1625
|
}
|
|
1573
1626
|
}
|
|
1574
1627
|
}
|
|
1575
|
-
}
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
}
|
|
1587
|
-
], queries: [{ propertyName: "defaultTemplateRef", predicate: TemplateRef }, { propertyName: "itemTemplateDirectiveRef", predicate: ItemTemplateDirective, read: TemplateRef }, { propertyName: "placeholderTemplateDirectiveRef", predicate: PlaceholderTemplateDirective, read: TemplateRef }], viewQueries: [{ propertyName: "noDataContainer", first: true, predicate: ["noDataRef"], descendants: true }, { propertyName: "hint", first: true, predicate: ["hint"], descendants: true }, { propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true }, { propertyName: "draggables", predicate: DraggableDirective, descendants: true }], exportAs: ["kendoSortable"], usesOnChanges: true, ngImport: i0, template: `
|
|
1628
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1629
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SortableComponent, isStandalone: true, selector: "kendo-sortable", inputs: { tabIndex: "tabIndex", data: "data", navigable: "navigable", navigatable: "navigatable", animation: "animation", disabledIndexes: "disabledIndexes", zone: "zone", acceptZones: "acceptZones", itemStyle: "itemStyle", emptyItemStyle: "emptyItemStyle", activeItemStyle: "activeItemStyle", disabledItemStyle: "disabledItemStyle", itemClass: "itemClass", activeItemClass: "activeItemClass", emptyItemClass: "emptyItemClass", disabledItemClass: "disabledItemClass", emptyText: "emptyText", activeIndex: "activeIndex" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", dragOver: "dragOver", dragLeave: "dragLeave", dataMove: "dataMove", dataAdd: "dataAdd", dataRemove: "dataRemove", navigate: "navigate" }, host: { properties: { "style.touch-action": "this.touchAction", "attr.dir": "this.dir", "attr.role": "this.hostRole" } }, providers: [
|
|
1630
|
+
LocalizationService,
|
|
1631
|
+
{
|
|
1632
|
+
provide: L10N_PREFIX,
|
|
1633
|
+
useValue: 'kendo.sortable'
|
|
1634
|
+
},
|
|
1635
|
+
{
|
|
1636
|
+
provide: SortableContainer,
|
|
1637
|
+
useExisting: forwardRef(() => SortableComponent)
|
|
1638
|
+
}
|
|
1639
|
+
], queries: [{ propertyName: "defaultTemplateRef", predicate: TemplateRef }, { propertyName: "itemTemplateDirectiveRef", predicate: ItemTemplateDirective, read: TemplateRef }, { propertyName: "placeholderTemplateDirectiveRef", predicate: PlaceholderTemplateDirective, read: TemplateRef }], viewQueries: [{ propertyName: "noDataContainer", first: true, predicate: ["noDataRef"], descendants: true }, { propertyName: "hint", first: true, predicate: ["hint"], descendants: true }, { propertyName: "itemWrappers", predicate: ["itemWrapper"], descendants: true }, { propertyName: "draggables", predicate: DraggableDirective, descendants: true }], exportAs: ["kendoSortable"], usesOnChanges: true, ngImport: i0, template: `
|
|
1588
1640
|
<div #itemWrapper *ngFor="let item of _localData;let i=index"
|
|
1589
1641
|
kendoDraggable
|
|
1590
1642
|
role="listitem"
|
|
@@ -1631,7 +1683,8 @@ SortableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
1631
1683
|
<ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
|
|
1632
1684
|
</div>
|
|
1633
1685
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["index", "disabled", "hidden"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1634
|
-
|
|
1686
|
+
}
|
|
1687
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableComponent, decorators: [{
|
|
1635
1688
|
type: Component,
|
|
1636
1689
|
args: [{
|
|
1637
1690
|
exportAs: 'kendoSortable',
|
|
@@ -1785,6 +1838,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1785
1838
|
* The arguments for the `SortableComponent` `dataAdd` event.
|
|
1786
1839
|
*/
|
|
1787
1840
|
class DataAddEvent extends PreventableEvent {
|
|
1841
|
+
/**
|
|
1842
|
+
* The index of the data item.
|
|
1843
|
+
*/
|
|
1844
|
+
index;
|
|
1845
|
+
/**
|
|
1846
|
+
* The data item that will be added.
|
|
1847
|
+
*/
|
|
1848
|
+
dataItem;
|
|
1788
1849
|
/**
|
|
1789
1850
|
* @hidden
|
|
1790
1851
|
*/
|
|
@@ -1797,6 +1858,14 @@ class DataAddEvent extends PreventableEvent {
|
|
|
1797
1858
|
* The arguments for the `SortableComponent` `dataRemove` event.
|
|
1798
1859
|
*/
|
|
1799
1860
|
class DataRemoveEvent extends PreventableEvent {
|
|
1861
|
+
/**
|
|
1862
|
+
* The index of the data item.
|
|
1863
|
+
*/
|
|
1864
|
+
index;
|
|
1865
|
+
/**
|
|
1866
|
+
* The data item that will be removed.
|
|
1867
|
+
*/
|
|
1868
|
+
dataItem;
|
|
1800
1869
|
/**
|
|
1801
1870
|
* @hidden
|
|
1802
1871
|
*/
|
|
@@ -1809,6 +1878,18 @@ class DataRemoveEvent extends PreventableEvent {
|
|
|
1809
1878
|
* The arguments for the `SortableComponent` `dataMove` event.
|
|
1810
1879
|
*/
|
|
1811
1880
|
class DataMoveEvent extends PreventableEvent {
|
|
1881
|
+
/**
|
|
1882
|
+
* The index of the data item.
|
|
1883
|
+
*/
|
|
1884
|
+
index;
|
|
1885
|
+
/**
|
|
1886
|
+
* The old index of the data item.
|
|
1887
|
+
*/
|
|
1888
|
+
oldIndex;
|
|
1889
|
+
/**
|
|
1890
|
+
* The data item that will be removed.
|
|
1891
|
+
*/
|
|
1892
|
+
dataItem;
|
|
1812
1893
|
/**
|
|
1813
1894
|
* @hidden
|
|
1814
1895
|
*/
|
|
@@ -1823,11 +1904,12 @@ class DataMoveEvent extends PreventableEvent {
|
|
|
1823
1904
|
* This is achieved by subscribing to the Sortable's events and handling them using the API methods it provides.
|
|
1824
1905
|
*/
|
|
1825
1906
|
class SortableBindingDirective {
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
|
|
1830
|
-
|
|
1907
|
+
sortable;
|
|
1908
|
+
sortableService;
|
|
1909
|
+
removeHiddenSubscription;
|
|
1910
|
+
dragOverSubscription;
|
|
1911
|
+
navigateSubscription;
|
|
1912
|
+
lastTarget;
|
|
1831
1913
|
/**
|
|
1832
1914
|
* Sets a data-bound array that is used as a data source for the Sortable.
|
|
1833
1915
|
*
|
|
@@ -1841,6 +1923,11 @@ class SortableBindingDirective {
|
|
|
1841
1923
|
set data(data) {
|
|
1842
1924
|
this.sortable.data = data;
|
|
1843
1925
|
}
|
|
1926
|
+
constructor(sortable, sortableService) {
|
|
1927
|
+
this.sortable = sortable;
|
|
1928
|
+
this.sortableService = sortableService;
|
|
1929
|
+
this.sortableService = sortableService;
|
|
1930
|
+
}
|
|
1844
1931
|
nextEnabledIndex(index, sortable) {
|
|
1845
1932
|
for (let i = index; i <= sortable.data.length; i++) {
|
|
1846
1933
|
if (sortable.itemEnabled(i)) {
|
|
@@ -1968,10 +2055,10 @@ class SortableBindingDirective {
|
|
|
1968
2055
|
this.removeHiddenSubscription.unsubscribe();
|
|
1969
2056
|
}
|
|
1970
2057
|
}
|
|
2058
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableBindingDirective, deps: [{ token: SortableComponent }, { token: SortableService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2059
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SortableBindingDirective, isStandalone: true, selector: "[kendoSortableBinding]", inputs: { data: ["kendoSortableBinding", "data"] }, ngImport: i0 });
|
|
1971
2060
|
}
|
|
1972
|
-
|
|
1973
|
-
SortableBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SortableBindingDirective, isStandalone: true, selector: "[kendoSortableBinding]", inputs: { data: ["kendoSortableBinding", "data"] }, ngImport: i0 });
|
|
1974
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortableBindingDirective, decorators: [{
|
|
2061
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableBindingDirective, decorators: [{
|
|
1975
2062
|
type: Directive,
|
|
1976
2063
|
args: [{
|
|
1977
2064
|
selector: '[kendoSortableBinding]',
|
|
@@ -2025,11 +2112,11 @@ const KENDO_SORTABLE = [
|
|
|
2025
2112
|
* ```
|
|
2026
2113
|
*/
|
|
2027
2114
|
class SortableModule {
|
|
2115
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2116
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SortableModule, imports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective], exports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective] });
|
|
2117
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableModule, providers: [SortableService] });
|
|
2028
2118
|
}
|
|
2029
|
-
|
|
2030
|
-
SortableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SortableModule, imports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective], exports: [SortableComponent, DraggableDirective, PlaceholderTemplateDirective, ItemTemplateDirective, SortableBindingDirective] });
|
|
2031
|
-
SortableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortableModule, providers: [SortableService], imports: [SortableComponent] });
|
|
2032
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortableModule, decorators: [{
|
|
2119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableModule, decorators: [{
|
|
2033
2120
|
type: NgModule,
|
|
2034
2121
|
args: [{
|
|
2035
2122
|
imports: [...KENDO_SORTABLE],
|