@progress/kendo-angular-sortable 17.0.0-develop.3 → 17.0.0-develop.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -15
- 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
|
@@ -37,213 +37,14 @@ const KEY_SHORTCUTS = 'Control+ArrowLeft Control+ArrowRight Meta+ArrowLeft Meta+
|
|
|
37
37
|
* Represents the Kendo UI Sortable component for Angular.
|
|
38
38
|
*/
|
|
39
39
|
export class SortableComponent {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
this.tabIndex = null;
|
|
49
|
-
/**
|
|
50
|
-
* Enables or disables the [keyboard navigation]({% slug keyboard_navigation_sortable %}).
|
|
51
|
-
* @default false
|
|
52
|
-
*/
|
|
53
|
-
this.navigable = false;
|
|
54
|
-
/**
|
|
55
|
-
* Enables or disables the built-in animations.
|
|
56
|
-
* @default false
|
|
57
|
-
*/
|
|
58
|
-
this.animation = false;
|
|
59
|
-
/**
|
|
60
|
-
* Sets an array of integers, which represent the indexes of the disabled items from the data array
|
|
61
|
-
* ([see example](slug:items_sortable#toc-disabling-items)).
|
|
62
|
-
*/
|
|
63
|
-
this.disabledIndexes = [];
|
|
64
|
-
/**
|
|
65
|
-
* Sets a string that represents the name of the zone to which the Sortable belongs
|
|
66
|
-
* ([see example](slug:items_sortable#toc-transferring-of-items)). Items can be transferred
|
|
67
|
-
* between Sortables which belong to the same zone.
|
|
68
|
-
*/
|
|
69
|
-
this.zone = undefined;
|
|
70
|
-
/**
|
|
71
|
-
* Defines the zones from which items can be transferred onto the current Sortable component
|
|
72
|
-
* ([see example](slug:items_sortable#toc-transferring-of-items)). If the `acceptZones` property
|
|
73
|
-
* of the target Sortable is set, allows you to transfer items between Sortables which belong
|
|
74
|
-
* to different zones.
|
|
75
|
-
*/
|
|
76
|
-
this.acceptZones = undefined;
|
|
77
|
-
/**
|
|
78
|
-
* Represents the CSS styles which are applied to each Sortable item.
|
|
79
|
-
*
|
|
80
|
-
* @example
|
|
81
|
-
* ```ts
|
|
82
|
-
* import { Component } from '@angular/core';
|
|
83
|
-
* import { SortableModule } from '@progress/kendo-angular-sortable';
|
|
84
|
-
*
|
|
85
|
-
* _@Component({
|
|
86
|
-
* selector: 'my-app',
|
|
87
|
-
* template: `
|
|
88
|
-
* <kendo-sortable
|
|
89
|
-
* [data]="['1','2','3','4','5','6','7']"
|
|
90
|
-
* [itemStyle] ="{
|
|
91
|
-
* 'display': 'inline-block',
|
|
92
|
-
* 'background-color': '#51A0ED',
|
|
93
|
-
* 'height':'50px',
|
|
94
|
-
* 'width':'50px',
|
|
95
|
-
* 'margin':'3px',
|
|
96
|
-
* 'cursor':'move'
|
|
97
|
-
* }"
|
|
98
|
-
* >
|
|
99
|
-
* </kendo-sortable>
|
|
100
|
-
* `
|
|
101
|
-
* })
|
|
102
|
-
* export class AppComponent {
|
|
103
|
-
* }
|
|
104
|
-
* ```
|
|
105
|
-
*/
|
|
106
|
-
this.itemStyle = {};
|
|
107
|
-
/**
|
|
108
|
-
* Defines the CSS styles applied to an empty item ([see example]({% slug templates_sortable %})).
|
|
109
|
-
*/
|
|
110
|
-
this.emptyItemStyle = undefined;
|
|
111
|
-
/**
|
|
112
|
-
* Defines the CSS styles which are applied to the currently dragged item ([see example]({% slug templates_sortable %})).
|
|
113
|
-
*/
|
|
114
|
-
this.activeItemStyle = undefined;
|
|
115
|
-
/**
|
|
116
|
-
* Defines the CSS styles which are applied to all disabled items.
|
|
117
|
-
*/
|
|
118
|
-
this.disabledItemStyle = undefined;
|
|
119
|
-
/**
|
|
120
|
-
* Defines the class which is applied to each Sortable item.
|
|
121
|
-
*/
|
|
122
|
-
this.itemClass = "";
|
|
123
|
-
/**
|
|
124
|
-
* Defines the class which is applied to the active Sortable item.
|
|
125
|
-
*/
|
|
126
|
-
this.activeItemClass = null;
|
|
127
|
-
/**
|
|
128
|
-
* Defines the class which is applied to the empty item when the Sortable has empty data.
|
|
129
|
-
*/
|
|
130
|
-
this.emptyItemClass = null;
|
|
131
|
-
/**
|
|
132
|
-
* Defines the class which is applied to each disabled Sortable item.
|
|
133
|
-
*/
|
|
134
|
-
this.disabledItemClass = null;
|
|
135
|
-
/**
|
|
136
|
-
* Sets the text message that will be displayed when the Sortable has no items.
|
|
137
|
-
*
|
|
138
|
-
* @example
|
|
139
|
-
* ```ts
|
|
140
|
-
* import { Component } from '@angular/core';
|
|
141
|
-
* import { SortableModule } from '@progress/kendo-angular-sortable';
|
|
142
|
-
*
|
|
143
|
-
* _@Component({
|
|
144
|
-
* selector: 'my-app',
|
|
145
|
-
* template: `
|
|
146
|
-
* <kendo-sortable [data]="[]"
|
|
147
|
-
* [emptyText]="'No items - custom message and styles'"
|
|
148
|
-
* [emptyItemStyle] = "{'height': '40px', 'width':'400px', 'border': '2px dashed black'}" >
|
|
149
|
-
* </kendo-sortable>
|
|
150
|
-
* `
|
|
151
|
-
* })
|
|
152
|
-
* export class AppComponent { }
|
|
153
|
-
* ```
|
|
154
|
-
*/
|
|
155
|
-
this.emptyText = "Empty";
|
|
156
|
-
/**
|
|
157
|
-
* @hidden
|
|
158
|
-
*/
|
|
159
|
-
this.defaultTemplateRef = null;
|
|
160
|
-
/**
|
|
161
|
-
* Defines the template that will be used for rendering the items.
|
|
162
|
-
* @hidden
|
|
163
|
-
*/
|
|
164
|
-
this.itemTemplateDirectiveRef = null;
|
|
165
|
-
/**
|
|
166
|
-
* Defines the template that will be used for rendering the placeholder.
|
|
167
|
-
* @hidden
|
|
168
|
-
*/
|
|
169
|
-
this.placeholderTemplateDirectiveRef = null;
|
|
170
|
-
this.itemWrappers = new QueryList();
|
|
171
|
-
/**
|
|
172
|
-
* Fires when the dragging of an item is started.
|
|
173
|
-
*/
|
|
174
|
-
this.dragStart = new EventEmitter();
|
|
175
|
-
/**
|
|
176
|
-
* Fires when the dragging of an item is completed.
|
|
177
|
-
*/
|
|
178
|
-
this.dragEnd = new EventEmitter();
|
|
179
|
-
/**
|
|
180
|
-
* Fires while the dragging of an item is in progress.
|
|
181
|
-
*/
|
|
182
|
-
this.dragOver = new EventEmitter();
|
|
183
|
-
/**
|
|
184
|
-
* Fires when dragging an item outside of the component.
|
|
185
|
-
*/
|
|
186
|
-
this.dragLeave = new EventEmitter();
|
|
187
|
-
/**
|
|
188
|
-
* Fires while the moving an item from one position to another.
|
|
189
|
-
*/
|
|
190
|
-
this.dataMove = new EventEmitter();
|
|
191
|
-
/**
|
|
192
|
-
* Fires when a new item is added to the Sortable.
|
|
193
|
-
*/
|
|
194
|
-
this.dataAdd = new EventEmitter();
|
|
195
|
-
/**
|
|
196
|
-
* Fires when an item is removed from the Sortable.
|
|
197
|
-
*/
|
|
198
|
-
this.dataRemove = new EventEmitter();
|
|
199
|
-
/**
|
|
200
|
-
* Fires when navigating using the keyboard.
|
|
201
|
-
*/
|
|
202
|
-
this.navigate = new EventEmitter();
|
|
203
|
-
/**
|
|
204
|
-
* The index of the currently focused item.
|
|
205
|
-
* If no item is focused, set to `-1`.
|
|
206
|
-
*/
|
|
207
|
-
this.activeIndex = -1;
|
|
208
|
-
this.hostRole = 'list';
|
|
209
|
-
/**
|
|
210
|
-
* Flag indicating if the component is currently playing animations.
|
|
211
|
-
* @hidden
|
|
212
|
-
*/
|
|
213
|
-
this.animating = false;
|
|
214
|
-
/**
|
|
215
|
-
* The index of the currently dragged item.
|
|
216
|
-
*/
|
|
217
|
-
this.dragIndex = -1;
|
|
218
|
-
/**
|
|
219
|
-
* The index of the item above which the dragged item is.
|
|
220
|
-
*/
|
|
221
|
-
this.dragOverIndex = -1;
|
|
222
|
-
this.onDragStartSubject = new Subject();
|
|
223
|
-
this.onDragOverSubject = new Subject();
|
|
224
|
-
this.onDragLeaveSubject = new Subject();
|
|
225
|
-
this.onDragEndSubject = new Subject();
|
|
226
|
-
/**
|
|
227
|
-
* The location of the hint indicator when dragging on mobile devices.
|
|
228
|
-
*/
|
|
229
|
-
this.hintLocation = null;
|
|
230
|
-
this._localData = [];
|
|
231
|
-
/**
|
|
232
|
-
* @hidden
|
|
233
|
-
*/
|
|
234
|
-
this.ariaKeyShortcuts = KEY_SHORTCUTS;
|
|
235
|
-
this.focusableItems = [];
|
|
236
|
-
this.animationDuration = 300;
|
|
237
|
-
this.afterKeyPress = false;
|
|
238
|
-
this.sortableService = null;
|
|
239
|
-
this._hideActiveItem = false;
|
|
240
|
-
this.prevActiveIndex = 0;
|
|
241
|
-
validatePackage(packageMetadata);
|
|
242
|
-
this.wrapper = wrapper.nativeElement;
|
|
243
|
-
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
|
244
|
-
this.sortableService = sortableService;
|
|
245
|
-
this.subscribeEvents();
|
|
246
|
-
}
|
|
40
|
+
ngZone;
|
|
41
|
+
renderer;
|
|
42
|
+
changeDetector;
|
|
43
|
+
localization;
|
|
44
|
+
/**
|
|
45
|
+
* Specifies the tab index of the Sortable component.
|
|
46
|
+
*/
|
|
47
|
+
tabIndex = null;
|
|
247
48
|
/**
|
|
248
49
|
* Sets an array of any data that is used as a data source for the Sortable.
|
|
249
50
|
* {% meta height:430 %}
|
|
@@ -262,6 +63,11 @@ export class SortableComponent {
|
|
|
262
63
|
get data() {
|
|
263
64
|
return this._data;
|
|
264
65
|
}
|
|
66
|
+
/**
|
|
67
|
+
* Enables or disables the [keyboard navigation]({% slug keyboard_navigation_sortable %}).
|
|
68
|
+
* @default false
|
|
69
|
+
*/
|
|
70
|
+
navigable = false;
|
|
265
71
|
/**
|
|
266
72
|
* @hidden
|
|
267
73
|
*
|
|
@@ -270,12 +76,220 @@ export class SortableComponent {
|
|
|
270
76
|
set navigatable(value) {
|
|
271
77
|
this.navigable = value;
|
|
272
78
|
}
|
|
79
|
+
/**
|
|
80
|
+
* Enables or disables the built-in animations.
|
|
81
|
+
* @default false
|
|
82
|
+
*/
|
|
83
|
+
animation = false;
|
|
84
|
+
/**
|
|
85
|
+
* Sets an array of integers, which represent the indexes of the disabled items from the data array
|
|
86
|
+
* ([see example](slug:items_sortable#toc-disabling-items)).
|
|
87
|
+
*/
|
|
88
|
+
disabledIndexes = [];
|
|
89
|
+
/**
|
|
90
|
+
* Sets a string that represents the name of the zone to which the Sortable belongs
|
|
91
|
+
* ([see example](slug:items_sortable#toc-transferring-of-items)). Items can be transferred
|
|
92
|
+
* between Sortables which belong to the same zone.
|
|
93
|
+
*/
|
|
94
|
+
zone = undefined;
|
|
95
|
+
/**
|
|
96
|
+
* Defines the zones from which items can be transferred onto the current Sortable component
|
|
97
|
+
* ([see example](slug:items_sortable#toc-transferring-of-items)). If the `acceptZones` property
|
|
98
|
+
* of the target Sortable is set, allows you to transfer items between Sortables which belong
|
|
99
|
+
* to different zones.
|
|
100
|
+
*/
|
|
101
|
+
acceptZones = undefined;
|
|
102
|
+
/**
|
|
103
|
+
* Represents the CSS styles which are applied to each Sortable item.
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* ```ts
|
|
107
|
+
* import { Component } from '@angular/core';
|
|
108
|
+
* import { SortableModule } from '@progress/kendo-angular-sortable';
|
|
109
|
+
*
|
|
110
|
+
* _@Component({
|
|
111
|
+
* selector: 'my-app',
|
|
112
|
+
* template: `
|
|
113
|
+
* <kendo-sortable
|
|
114
|
+
* [data]="['1','2','3','4','5','6','7']"
|
|
115
|
+
* [itemStyle] ="{
|
|
116
|
+
* 'display': 'inline-block',
|
|
117
|
+
* 'background-color': '#51A0ED',
|
|
118
|
+
* 'height':'50px',
|
|
119
|
+
* 'width':'50px',
|
|
120
|
+
* 'margin':'3px',
|
|
121
|
+
* 'cursor':'move'
|
|
122
|
+
* }"
|
|
123
|
+
* >
|
|
124
|
+
* </kendo-sortable>
|
|
125
|
+
* `
|
|
126
|
+
* })
|
|
127
|
+
* export class AppComponent {
|
|
128
|
+
* }
|
|
129
|
+
* ```
|
|
130
|
+
*/
|
|
131
|
+
itemStyle = {};
|
|
132
|
+
/**
|
|
133
|
+
* Defines the CSS styles applied to an empty item ([see example]({% slug templates_sortable %})).
|
|
134
|
+
*/
|
|
135
|
+
emptyItemStyle = undefined;
|
|
136
|
+
/**
|
|
137
|
+
* Defines the CSS styles which are applied to the currently dragged item ([see example]({% slug templates_sortable %})).
|
|
138
|
+
*/
|
|
139
|
+
activeItemStyle = undefined;
|
|
140
|
+
/**
|
|
141
|
+
* Defines the CSS styles which are applied to all disabled items.
|
|
142
|
+
*/
|
|
143
|
+
disabledItemStyle = undefined;
|
|
144
|
+
/**
|
|
145
|
+
* Defines the class which is applied to each Sortable item.
|
|
146
|
+
*/
|
|
147
|
+
itemClass = "";
|
|
148
|
+
/**
|
|
149
|
+
* Defines the class which is applied to the active Sortable item.
|
|
150
|
+
*/
|
|
151
|
+
activeItemClass = null;
|
|
152
|
+
/**
|
|
153
|
+
* Defines the class which is applied to the empty item when the Sortable has empty data.
|
|
154
|
+
*/
|
|
155
|
+
emptyItemClass = null;
|
|
156
|
+
/**
|
|
157
|
+
* Defines the class which is applied to each disabled Sortable item.
|
|
158
|
+
*/
|
|
159
|
+
disabledItemClass = null;
|
|
160
|
+
/**
|
|
161
|
+
* Sets the text message that will be displayed when the Sortable has no items.
|
|
162
|
+
*
|
|
163
|
+
* @example
|
|
164
|
+
* ```ts
|
|
165
|
+
* import { Component } from '@angular/core';
|
|
166
|
+
* import { SortableModule } from '@progress/kendo-angular-sortable';
|
|
167
|
+
*
|
|
168
|
+
* _@Component({
|
|
169
|
+
* selector: 'my-app',
|
|
170
|
+
* template: `
|
|
171
|
+
* <kendo-sortable [data]="[]"
|
|
172
|
+
* [emptyText]="'No items - custom message and styles'"
|
|
173
|
+
* [emptyItemStyle] = "{'height': '40px', 'width':'400px', 'border': '2px dashed black'}" >
|
|
174
|
+
* </kendo-sortable>
|
|
175
|
+
* `
|
|
176
|
+
* })
|
|
177
|
+
* export class AppComponent { }
|
|
178
|
+
* ```
|
|
179
|
+
*/
|
|
180
|
+
emptyText = "Empty";
|
|
181
|
+
/**
|
|
182
|
+
* @hidden
|
|
183
|
+
*/
|
|
184
|
+
defaultTemplateRef = null;
|
|
185
|
+
/**
|
|
186
|
+
* Defines the template that will be used for rendering the items.
|
|
187
|
+
* @hidden
|
|
188
|
+
*/
|
|
189
|
+
itemTemplateDirectiveRef = null;
|
|
190
|
+
/**
|
|
191
|
+
* Defines the template that will be used for rendering the placeholder.
|
|
192
|
+
* @hidden
|
|
193
|
+
*/
|
|
194
|
+
placeholderTemplateDirectiveRef = null;
|
|
195
|
+
itemWrappers = new QueryList();
|
|
196
|
+
draggables;
|
|
197
|
+
noDataContainer;
|
|
198
|
+
hint;
|
|
199
|
+
/**
|
|
200
|
+
* Fires when the dragging of an item is started.
|
|
201
|
+
*/
|
|
202
|
+
dragStart = new EventEmitter();
|
|
203
|
+
/**
|
|
204
|
+
* Fires when the dragging of an item is completed.
|
|
205
|
+
*/
|
|
206
|
+
dragEnd = new EventEmitter();
|
|
207
|
+
/**
|
|
208
|
+
* Fires while the dragging of an item is in progress.
|
|
209
|
+
*/
|
|
210
|
+
dragOver = new EventEmitter();
|
|
211
|
+
/**
|
|
212
|
+
* Fires when dragging an item outside of the component.
|
|
213
|
+
*/
|
|
214
|
+
dragLeave = new EventEmitter();
|
|
215
|
+
/**
|
|
216
|
+
* Fires while the moving an item from one position to another.
|
|
217
|
+
*/
|
|
218
|
+
dataMove = new EventEmitter();
|
|
219
|
+
/**
|
|
220
|
+
* Fires when a new item is added to the Sortable.
|
|
221
|
+
*/
|
|
222
|
+
dataAdd = new EventEmitter();
|
|
223
|
+
/**
|
|
224
|
+
* Fires when an item is removed from the Sortable.
|
|
225
|
+
*/
|
|
226
|
+
dataRemove = new EventEmitter();
|
|
227
|
+
/**
|
|
228
|
+
* Fires when navigating using the keyboard.
|
|
229
|
+
*/
|
|
230
|
+
navigate = new EventEmitter();
|
|
231
|
+
/**
|
|
232
|
+
* The index of the currently focused item.
|
|
233
|
+
* If no item is focused, set to `-1`.
|
|
234
|
+
*/
|
|
235
|
+
activeIndex = -1;
|
|
273
236
|
get touchAction() {
|
|
274
237
|
return "none";
|
|
275
238
|
}
|
|
276
239
|
get dir() {
|
|
277
240
|
return this.direction;
|
|
278
241
|
}
|
|
242
|
+
hostRole = 'list';
|
|
243
|
+
/**
|
|
244
|
+
* Flag indicating if the component is currently playing animations.
|
|
245
|
+
* @hidden
|
|
246
|
+
*/
|
|
247
|
+
animating = false;
|
|
248
|
+
/**
|
|
249
|
+
* The index of the currently dragged item.
|
|
250
|
+
*/
|
|
251
|
+
dragIndex = -1;
|
|
252
|
+
/**
|
|
253
|
+
* The index of the item above which the dragged item is.
|
|
254
|
+
*/
|
|
255
|
+
dragOverIndex = -1;
|
|
256
|
+
onDragStartSubject = new Subject();
|
|
257
|
+
onDragOverSubject = new Subject();
|
|
258
|
+
onDragLeaveSubject = new Subject();
|
|
259
|
+
onDragEndSubject = new Subject();
|
|
260
|
+
/**
|
|
261
|
+
* The SortableComponent's HTMLElement.
|
|
262
|
+
*/
|
|
263
|
+
wrapper;
|
|
264
|
+
/**
|
|
265
|
+
* The location of the hint indicator when dragging on mobile devices.
|
|
266
|
+
*/
|
|
267
|
+
hintLocation = null;
|
|
268
|
+
id;
|
|
269
|
+
itemTemplateRef;
|
|
270
|
+
placeholderTemplateRef;
|
|
271
|
+
_data;
|
|
272
|
+
_localData = [];
|
|
273
|
+
/**
|
|
274
|
+
* @hidden
|
|
275
|
+
*/
|
|
276
|
+
ariaKeyShortcuts = KEY_SHORTCUTS;
|
|
277
|
+
localizationChangeSubscription;
|
|
278
|
+
dragStartSubscription;
|
|
279
|
+
dragOverSubscription;
|
|
280
|
+
dragLeaveSubscription;
|
|
281
|
+
dragEndSubscription;
|
|
282
|
+
childrenTabindexSubscription;
|
|
283
|
+
focusableItems = [];
|
|
284
|
+
animationDuration = 300;
|
|
285
|
+
afterKeyPress = false;
|
|
286
|
+
sortableService = null;
|
|
287
|
+
_hideActiveItem = false;
|
|
288
|
+
prevActiveIndex = 0;
|
|
289
|
+
direction;
|
|
290
|
+
_animating;
|
|
291
|
+
draggable;
|
|
292
|
+
offsetParent;
|
|
279
293
|
setItemData(data, i) {
|
|
280
294
|
this._localData[i].item = data.item;
|
|
281
295
|
this._localData[i].index = data.index;
|
|
@@ -294,6 +308,17 @@ export class SortableComponent {
|
|
|
294
308
|
}
|
|
295
309
|
return template;
|
|
296
310
|
}
|
|
311
|
+
constructor(ngZone, renderer, changeDetector, localization, wrapper, sortableService) {
|
|
312
|
+
this.ngZone = ngZone;
|
|
313
|
+
this.renderer = renderer;
|
|
314
|
+
this.changeDetector = changeDetector;
|
|
315
|
+
this.localization = localization;
|
|
316
|
+
validatePackage(packageMetadata);
|
|
317
|
+
this.wrapper = wrapper.nativeElement;
|
|
318
|
+
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
|
319
|
+
this.sortableService = sortableService;
|
|
320
|
+
this.subscribeEvents();
|
|
321
|
+
}
|
|
297
322
|
ngOnInit() {
|
|
298
323
|
if (!this.data) {
|
|
299
324
|
this.data = [];
|
|
@@ -978,19 +1003,18 @@ export class SortableComponent {
|
|
|
978
1003
|
}
|
|
979
1004
|
}
|
|
980
1005
|
}
|
|
981
|
-
}
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
}
|
|
993
|
-
], 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: `
|
|
1006
|
+
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: i2.SortableService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1007
|
+
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: [
|
|
1008
|
+
LocalizationService,
|
|
1009
|
+
{
|
|
1010
|
+
provide: L10N_PREFIX,
|
|
1011
|
+
useValue: 'kendo.sortable'
|
|
1012
|
+
},
|
|
1013
|
+
{
|
|
1014
|
+
provide: SortableContainer,
|
|
1015
|
+
useExisting: forwardRef(() => SortableComponent)
|
|
1016
|
+
}
|
|
1017
|
+
], 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: `
|
|
994
1018
|
<div #itemWrapper *ngFor="let item of _localData;let i=index"
|
|
995
1019
|
kendoDraggable
|
|
996
1020
|
role="listitem"
|
|
@@ -1037,7 +1061,8 @@ SortableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
1037
1061
|
<ng-container *ngIf="!itemTemplateRef">{{_localData[dragIndex].item}}</ng-container>
|
|
1038
1062
|
</div>
|
|
1039
1063
|
`, 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"] }] });
|
|
1040
|
-
|
|
1064
|
+
}
|
|
1065
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableComponent, decorators: [{
|
|
1041
1066
|
type: Component,
|
|
1042
1067
|
args: [{
|
|
1043
1068
|
exportAs: 'kendoSortable',
|
|
@@ -42,11 +42,11 @@ import * as i4 from "./binding.directive";
|
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
44
|
export class SortableModule {
|
|
45
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
46
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SortableModule, imports: [i1.SortableComponent, i2.DraggableDirective, i3.PlaceholderTemplateDirective, i3.ItemTemplateDirective, i4.SortableBindingDirective], exports: [i1.SortableComponent, i2.DraggableDirective, i3.PlaceholderTemplateDirective, i3.ItemTemplateDirective, i4.SortableBindingDirective] });
|
|
47
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableModule, providers: [SortableService] });
|
|
45
48
|
}
|
|
46
|
-
|
|
47
|
-
SortableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SortableModule, imports: [i1.SortableComponent, i2.DraggableDirective, i3.PlaceholderTemplateDirective, i3.ItemTemplateDirective, i4.SortableBindingDirective], exports: [i1.SortableComponent, i2.DraggableDirective, i3.PlaceholderTemplateDirective, i3.ItemTemplateDirective, i4.SortableBindingDirective] });
|
|
48
|
-
SortableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortableModule, providers: [SortableService], imports: [i1.SortableComponent] });
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortableModule, decorators: [{
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableModule, decorators: [{
|
|
50
50
|
type: NgModule,
|
|
51
51
|
args: [{
|
|
52
52
|
imports: [...KENDO_SORTABLE],
|
|
@@ -18,40 +18,56 @@ const allowDrag = (e) => {
|
|
|
18
18
|
*
|
|
19
19
|
*/
|
|
20
20
|
export class SortableService {
|
|
21
|
+
ngZone;
|
|
22
|
+
/**
|
|
23
|
+
* Specifies the Draggable item that is currently being moved.
|
|
24
|
+
*/
|
|
25
|
+
activeDraggable = null;
|
|
26
|
+
/**
|
|
27
|
+
* Specifies the Draggable item from which the dragging started.
|
|
28
|
+
*/
|
|
29
|
+
originDraggable = null;
|
|
30
|
+
/**
|
|
31
|
+
* @hidden
|
|
32
|
+
*/
|
|
33
|
+
originIndex;
|
|
34
|
+
/**
|
|
35
|
+
* @hidden
|
|
36
|
+
*/
|
|
37
|
+
targetSortable = null;
|
|
38
|
+
/**
|
|
39
|
+
* Specifies the Draggable item that last emitted an event.
|
|
40
|
+
*/
|
|
41
|
+
lastDraggable = null;
|
|
42
|
+
/**
|
|
43
|
+
* @hidden
|
|
44
|
+
*/
|
|
45
|
+
onPressSubject = new Subject();
|
|
46
|
+
/**
|
|
47
|
+
* @hidden
|
|
48
|
+
*/
|
|
49
|
+
onDragSubject = new Subject();
|
|
50
|
+
/**
|
|
51
|
+
* @hidden
|
|
52
|
+
*/
|
|
53
|
+
onReleaseSubject = new Subject();
|
|
54
|
+
subscriptions;
|
|
55
|
+
source = null;
|
|
56
|
+
_target = null;
|
|
57
|
+
sortableCounter = 0;
|
|
58
|
+
sortableRegister = {};
|
|
59
|
+
pressArgs;
|
|
60
|
+
/**
|
|
61
|
+
* Specifies the `SortableComponent` instance under the currently dragged item.
|
|
62
|
+
*/
|
|
63
|
+
set target(target) {
|
|
64
|
+
this._target = target;
|
|
65
|
+
}
|
|
66
|
+
get target() {
|
|
67
|
+
return this._target;
|
|
68
|
+
}
|
|
21
69
|
constructor(ngZone) {
|
|
22
70
|
this.ngZone = ngZone;
|
|
23
|
-
/**
|
|
24
|
-
* Specifies the Draggable item that is currently being moved.
|
|
25
|
-
*/
|
|
26
|
-
this.activeDraggable = null;
|
|
27
|
-
/**
|
|
28
|
-
* Specifies the Draggable item from which the dragging started.
|
|
29
|
-
*/
|
|
30
|
-
this.originDraggable = null;
|
|
31
|
-
/**
|
|
32
|
-
* @hidden
|
|
33
|
-
*/
|
|
34
|
-
this.targetSortable = null;
|
|
35
|
-
/**
|
|
36
|
-
* Specifies the Draggable item that last emitted an event.
|
|
37
|
-
*/
|
|
38
|
-
this.lastDraggable = null;
|
|
39
|
-
/**
|
|
40
|
-
* @hidden
|
|
41
|
-
*/
|
|
42
|
-
this.onPressSubject = new Subject();
|
|
43
|
-
/**
|
|
44
|
-
* @hidden
|
|
45
|
-
*/
|
|
46
|
-
this.onDragSubject = new Subject();
|
|
47
|
-
/**
|
|
48
|
-
* @hidden
|
|
49
|
-
*/
|
|
50
|
-
this.onReleaseSubject = new Subject();
|
|
51
|
-
this.source = null;
|
|
52
|
-
this._target = null;
|
|
53
|
-
this.sortableCounter = 0;
|
|
54
|
-
this.sortableRegister = {};
|
|
55
71
|
if (!isDocumentAvailable()) {
|
|
56
72
|
return;
|
|
57
73
|
}
|
|
@@ -66,15 +82,6 @@ export class SortableService {
|
|
|
66
82
|
}), switchMap(_drag => this.onDragSubject.pipe(filter(_ => Boolean(this.targetSortable)), //stop further events if dragStart is prevented
|
|
67
83
|
tap((e) => this.drag(e))))).subscribe();
|
|
68
84
|
}
|
|
69
|
-
/**
|
|
70
|
-
* Specifies the `SortableComponent` instance under the currently dragged item.
|
|
71
|
-
*/
|
|
72
|
-
set target(target) {
|
|
73
|
-
this._target = target;
|
|
74
|
-
}
|
|
75
|
-
get target() {
|
|
76
|
-
return this._target;
|
|
77
|
-
}
|
|
78
85
|
/**
|
|
79
86
|
* @hidden
|
|
80
87
|
*/
|
|
@@ -216,10 +223,10 @@ export class SortableService {
|
|
|
216
223
|
this.source.markForCheck();
|
|
217
224
|
});
|
|
218
225
|
}
|
|
226
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
227
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableService, providedIn: 'root' });
|
|
219
228
|
}
|
|
220
|
-
|
|
221
|
-
SortableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortableService, providedIn: 'root' });
|
|
222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SortableService, decorators: [{
|
|
229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SortableService, decorators: [{
|
|
223
230
|
type: Injectable,
|
|
224
231
|
args: [{
|
|
225
232
|
providedIn: 'root'
|