@progress/kendo-angular-listbox 13.0.0-develop.2 → 13.0.0-develop.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/data-binding.directive.mjs +2 -0
- package/esm2020/item-selectable.directive.mjs +2 -2
- package/esm2020/keyboard-navigation.service.mjs +18 -11
- package/esm2020/listbox.component.mjs +53 -14
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-listbox.mjs +77 -30
- package/fesm2020/progress-kendo-angular-listbox.mjs +76 -29
- package/keyboard-navigation.service.d.ts +3 -2
- package/listbox.component.d.ts +18 -0
- package/package.json +5 -5
- package/schematics/ngAdd/index.js +4 -4
|
@@ -101,6 +101,8 @@ export class DataBindingDirective {
|
|
|
101
101
|
return;
|
|
102
102
|
}
|
|
103
103
|
const newIndex = dir === 'up' ? index - 1 : index + 1;
|
|
104
|
+
const navigation = this.selectedBox.keyboardNavigationService;
|
|
105
|
+
navigation.focusedListboxItemIndex = navigation.selectedListboxItemIndex = newIndex;
|
|
104
106
|
[this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
|
|
105
107
|
this.selectedBox.selectionService.select(newIndex);
|
|
106
108
|
}
|
|
@@ -22,7 +22,7 @@ export class ItemSelectableDirective {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
ItemSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: i1.ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
25
|
-
ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "
|
|
25
|
+
ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
|
|
26
26
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, decorators: [{
|
|
27
27
|
type: Directive,
|
|
28
28
|
args: [{
|
|
@@ -35,5 +35,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
35
35
|
args: ['class.k-selected']
|
|
36
36
|
}], onClick: [{
|
|
37
37
|
type: HostListener,
|
|
38
|
-
args: ['
|
|
38
|
+
args: ['mousedown', ['$event']]
|
|
39
39
|
}] } });
|
|
@@ -19,10 +19,10 @@ export class KeyboardNavigationService {
|
|
|
19
19
|
this.focusedListboxItemIndex = 0;
|
|
20
20
|
this.focusedToolIndex = 0;
|
|
21
21
|
this.onDeleteEvent = new EventEmitter();
|
|
22
|
-
this.onSelectionChange = new EventEmitter();
|
|
23
22
|
this.onMoveSelectedItem = new EventEmitter();
|
|
24
23
|
this.onTransferAllEvent = new EventEmitter();
|
|
25
24
|
this.onShiftSelectedItem = new EventEmitter();
|
|
25
|
+
this.onSelectionChange = new EventEmitter();
|
|
26
26
|
}
|
|
27
27
|
onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems) {
|
|
28
28
|
const target = event.target;
|
|
@@ -68,10 +68,12 @@ export class KeyboardNavigationService {
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
|
-
changeTabindex(previousItem, currentItem) {
|
|
71
|
+
changeTabindex(previousItem, currentItem, shouldBlur = true) {
|
|
72
72
|
if (previousItem) {
|
|
73
73
|
this.renderer.setAttribute(previousItem, 'tabindex', '-1');
|
|
74
|
-
|
|
74
|
+
if (shouldBlur) {
|
|
75
|
+
previousItem.blur();
|
|
76
|
+
}
|
|
75
77
|
}
|
|
76
78
|
;
|
|
77
79
|
if (currentItem) {
|
|
@@ -97,8 +99,8 @@ export class KeyboardNavigationService {
|
|
|
97
99
|
const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
98
100
|
const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
99
101
|
this.changeTabindex(previousItem, currentItem);
|
|
102
|
+
this.onSelectionChange.emit({ index: this.focusedListboxItemIndex, prevIndex: this.selectedListboxItemIndex });
|
|
100
103
|
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
101
|
-
this.onSelectionChange.emit(this.selectedListboxItemIndex);
|
|
102
104
|
}
|
|
103
105
|
onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
|
|
104
106
|
event.preventDefault();
|
|
@@ -116,7 +118,7 @@ export class KeyboardNavigationService {
|
|
|
116
118
|
return;
|
|
117
119
|
}
|
|
118
120
|
dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
|
|
119
|
-
this.onSelectionChange.emit(this.selectedListboxItemIndex);
|
|
121
|
+
this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
|
|
120
122
|
this.focusedListboxItemIndex = this.selectedListboxItemIndex;
|
|
121
123
|
}
|
|
122
124
|
onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems) {
|
|
@@ -133,17 +135,22 @@ export class KeyboardNavigationService {
|
|
|
133
135
|
event.stopImmediatePropagation();
|
|
134
136
|
event.preventDefault();
|
|
135
137
|
const areIndexesEqual = this.selectedListboxItemIndex === this.focusedListboxItemIndex;
|
|
136
|
-
const
|
|
137
|
-
|
|
138
|
+
const canDeselect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
|
|
139
|
+
let previousItem;
|
|
140
|
+
let currentItem;
|
|
141
|
+
let prevIndex;
|
|
142
|
+
if (canDeselect) {
|
|
143
|
+
previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
138
144
|
this.selectedListboxItemIndex = null;
|
|
139
145
|
}
|
|
140
146
|
else {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
this.
|
|
147
|
+
previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
148
|
+
currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
149
|
+
prevIndex = this.selectedListboxItemIndex;
|
|
144
150
|
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
145
151
|
}
|
|
146
|
-
this.
|
|
152
|
+
this.changeTabindex(previousItem, currentItem, !!currentItem);
|
|
153
|
+
this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex });
|
|
147
154
|
}
|
|
148
155
|
onF10Key(tools) {
|
|
149
156
|
if (this.focusedToolIndex && this.focusedToolIndex > -1) {
|
|
@@ -15,6 +15,7 @@ import { allTools, DEFAULT_TOOLBAR_POSITION, sizeClassMap, actionsClasses } from
|
|
|
15
15
|
import { KeyboardNavigationService } from './keyboard-navigation.service';
|
|
16
16
|
import { take } from 'rxjs/operators';
|
|
17
17
|
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
18
|
+
import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
|
|
18
19
|
import * as i0 from "@angular/core";
|
|
19
20
|
import * as i1 from "./keyboard-navigation.service";
|
|
20
21
|
import * as i2 from "./selection.service";
|
|
@@ -72,8 +73,17 @@ export class ListBoxComponent {
|
|
|
72
73
|
* @hidden
|
|
73
74
|
*/
|
|
74
75
|
this.selectedTools = allTools;
|
|
76
|
+
/**
|
|
77
|
+
* @hidden
|
|
78
|
+
*/
|
|
79
|
+
this.caretAltLeftIcon = caretAltLeftIcon;
|
|
80
|
+
/**
|
|
81
|
+
* @hidden
|
|
82
|
+
*/
|
|
83
|
+
this.caretAltRightIcon = caretAltRightIcon;
|
|
75
84
|
this._size = DEFAULT_SIZE;
|
|
76
85
|
this.subs = new Subscription();
|
|
86
|
+
this.shouldFireFocusIn = true;
|
|
77
87
|
validatePackage(packageMetadata);
|
|
78
88
|
this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
|
|
79
89
|
this.setSizingClass(this.size);
|
|
@@ -209,16 +219,44 @@ export class ListBoxComponent {
|
|
|
209
219
|
}
|
|
210
220
|
return fieldAccessor(dataItem, this.textField);
|
|
211
221
|
}
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
222
|
+
/**
|
|
223
|
+
* @hidden
|
|
224
|
+
*/
|
|
225
|
+
toolIcon(icon) {
|
|
226
|
+
return this.direction === 'ltr' ?
|
|
227
|
+
icon :
|
|
228
|
+
icon === 'caret-alt-left' ?
|
|
229
|
+
'caret-alt-right' :
|
|
230
|
+
icon === 'caret-alt-right' ?
|
|
231
|
+
'caret-alt-left' :
|
|
232
|
+
icon;
|
|
233
|
+
}
|
|
234
|
+
/**
|
|
235
|
+
* @hidden
|
|
236
|
+
*/
|
|
237
|
+
toolSVGIcon(icon) {
|
|
238
|
+
return this.direction === 'ltr' ?
|
|
239
|
+
icon :
|
|
240
|
+
icon === this.caretAltLeftIcon ?
|
|
241
|
+
this.caretAltRightIcon :
|
|
242
|
+
icon === this.caretAltRightIcon ?
|
|
243
|
+
this.caretAltLeftIcon :
|
|
244
|
+
icon;
|
|
245
|
+
}
|
|
246
|
+
onClickEvent(prevIndex, index) {
|
|
247
|
+
this.shouldFireFocusIn = false;
|
|
248
|
+
this.selectionChange.next({ index, prevIndex: this.keyboardNavigationService.selectedListboxItemIndex });
|
|
249
|
+
this.keyboardNavigationService.selectedListboxItemIndex = index;
|
|
250
|
+
this.keyboardNavigationService.focusedListboxItemIndex = index;
|
|
216
251
|
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
217
252
|
const listboxItems = this.listboxItems.toArray();
|
|
218
253
|
const previousItem = prevIndex ? listboxItems[prevIndex].nativeElement : listboxItems[0].nativeElement;
|
|
219
|
-
const currentItem = listboxItems[
|
|
254
|
+
const currentItem = listboxItems[index].nativeElement;
|
|
220
255
|
this.keyboardNavigationService.changeTabindex(previousItem, currentItem);
|
|
221
256
|
});
|
|
257
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
258
|
+
this.shouldFireFocusIn = true;
|
|
259
|
+
});
|
|
222
260
|
}
|
|
223
261
|
initSubscriptions(navService, hostEl, toolsRef) {
|
|
224
262
|
this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
|
|
@@ -228,14 +266,15 @@ export class ListBoxComponent {
|
|
|
228
266
|
this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
|
|
229
267
|
this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
|
|
230
268
|
this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
|
|
231
|
-
this.subs.add(navService.onSelectionChange.subscribe((
|
|
269
|
+
this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
|
|
270
|
+
const { prevIndex, index } = indexes;
|
|
232
271
|
this.selectionService.selectedIndex = index;
|
|
233
|
-
this.selectionChange.next({ index, prevIndex
|
|
272
|
+
this.selectionChange.next({ index, prevIndex });
|
|
234
273
|
}));
|
|
235
274
|
}
|
|
236
275
|
onFocusIn(event) {
|
|
237
276
|
const navService = this.keyboardNavigationService;
|
|
238
|
-
if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex) {
|
|
277
|
+
if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
|
|
239
278
|
const items = this.listboxItems.toArray();
|
|
240
279
|
const index = items.findIndex(elem => elem.nativeElement === event.target);
|
|
241
280
|
this.selectionService.selectedIndex = index;
|
|
@@ -317,7 +356,7 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
317
356
|
<ng-container kendoListBoxLocalizedMessages
|
|
318
357
|
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
319
358
|
moveUp="Move Up"
|
|
320
|
-
|
|
359
|
+
|
|
321
360
|
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
322
361
|
moveDown="Move Down"
|
|
323
362
|
|
|
@@ -350,8 +389,8 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
350
389
|
kendoButton
|
|
351
390
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
352
391
|
[size]="this.size"
|
|
353
|
-
[icon]="tool.icon"
|
|
354
|
-
[svgIcon]="tool.svgIcon"
|
|
392
|
+
[icon]="toolIcon(tool.icon)"
|
|
393
|
+
[svgIcon]="toolSVGIcon(tool.svgIcon)"
|
|
355
394
|
[attr.title]="messageFor(tool.name)"
|
|
356
395
|
(click)="performAction(tool.name)"
|
|
357
396
|
role="button"
|
|
@@ -413,7 +452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
413
452
|
<ng-container kendoListBoxLocalizedMessages
|
|
414
453
|
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
415
454
|
moveUp="Move Up"
|
|
416
|
-
|
|
455
|
+
|
|
417
456
|
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
418
457
|
moveDown="Move Down"
|
|
419
458
|
|
|
@@ -446,8 +485,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
446
485
|
kendoButton
|
|
447
486
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
448
487
|
[size]="this.size"
|
|
449
|
-
[icon]="tool.icon"
|
|
450
|
-
[svgIcon]="tool.svgIcon"
|
|
488
|
+
[icon]="toolIcon(tool.icon)"
|
|
489
|
+
[svgIcon]="toolSVGIcon(tool.svgIcon)"
|
|
451
490
|
[attr.title]="messageFor(tool.name)"
|
|
452
491
|
(click)="performAction(tool.name)"
|
|
453
492
|
role="button"
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-listbox',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '13.0.0-develop.
|
|
12
|
+
publishDate: 1685972842,
|
|
13
|
+
version: '13.0.0-develop.21',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
15
15
|
};
|
|
@@ -24,8 +24,8 @@ const packageMetadata = {
|
|
|
24
24
|
name: '@progress/kendo-angular-listbox',
|
|
25
25
|
productName: 'Kendo UI for Angular',
|
|
26
26
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
27
|
-
publishDate:
|
|
28
|
-
version: '13.0.0-develop.
|
|
27
|
+
publishDate: 1685972842,
|
|
28
|
+
version: '13.0.0-develop.21',
|
|
29
29
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
30
30
|
};
|
|
31
31
|
|
|
@@ -201,10 +201,10 @@ class KeyboardNavigationService {
|
|
|
201
201
|
this.focusedListboxItemIndex = 0;
|
|
202
202
|
this.focusedToolIndex = 0;
|
|
203
203
|
this.onDeleteEvent = new EventEmitter();
|
|
204
|
-
this.onSelectionChange = new EventEmitter();
|
|
205
204
|
this.onMoveSelectedItem = new EventEmitter();
|
|
206
205
|
this.onTransferAllEvent = new EventEmitter();
|
|
207
206
|
this.onShiftSelectedItem = new EventEmitter();
|
|
207
|
+
this.onSelectionChange = new EventEmitter();
|
|
208
208
|
}
|
|
209
209
|
onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems) {
|
|
210
210
|
const target = event.target;
|
|
@@ -250,10 +250,12 @@ class KeyboardNavigationService {
|
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
252
|
}
|
|
253
|
-
changeTabindex(previousItem, currentItem) {
|
|
253
|
+
changeTabindex(previousItem, currentItem, shouldBlur = true) {
|
|
254
254
|
if (previousItem) {
|
|
255
255
|
this.renderer.setAttribute(previousItem, 'tabindex', '-1');
|
|
256
|
-
|
|
256
|
+
if (shouldBlur) {
|
|
257
|
+
previousItem.blur();
|
|
258
|
+
}
|
|
257
259
|
}
|
|
258
260
|
;
|
|
259
261
|
if (currentItem) {
|
|
@@ -280,8 +282,8 @@ class KeyboardNavigationService {
|
|
|
280
282
|
const previousItem = (_a = listboxItems[this.selectedListboxItemIndex]) === null || _a === void 0 ? void 0 : _a.nativeElement;
|
|
281
283
|
const currentItem = (_b = listboxItems[this.focusedListboxItemIndex]) === null || _b === void 0 ? void 0 : _b.nativeElement;
|
|
282
284
|
this.changeTabindex(previousItem, currentItem);
|
|
285
|
+
this.onSelectionChange.emit({ index: this.focusedListboxItemIndex, prevIndex: this.selectedListboxItemIndex });
|
|
283
286
|
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
284
|
-
this.onSelectionChange.emit(this.selectedListboxItemIndex);
|
|
285
287
|
}
|
|
286
288
|
onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
|
|
287
289
|
event.preventDefault();
|
|
@@ -299,7 +301,7 @@ class KeyboardNavigationService {
|
|
|
299
301
|
return;
|
|
300
302
|
}
|
|
301
303
|
dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
|
|
302
|
-
this.onSelectionChange.emit(this.selectedListboxItemIndex);
|
|
304
|
+
this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
|
|
303
305
|
this.focusedListboxItemIndex = this.selectedListboxItemIndex;
|
|
304
306
|
}
|
|
305
307
|
onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems) {
|
|
@@ -313,21 +315,26 @@ class KeyboardNavigationService {
|
|
|
313
315
|
}
|
|
314
316
|
}
|
|
315
317
|
onSelectChange(event, listboxItems) {
|
|
316
|
-
var _a, _b;
|
|
318
|
+
var _a, _b, _c;
|
|
317
319
|
event.stopImmediatePropagation();
|
|
318
320
|
event.preventDefault();
|
|
319
321
|
const areIndexesEqual = this.selectedListboxItemIndex === this.focusedListboxItemIndex;
|
|
320
|
-
const
|
|
321
|
-
|
|
322
|
+
const canDeselect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
|
|
323
|
+
let previousItem;
|
|
324
|
+
let currentItem;
|
|
325
|
+
let prevIndex;
|
|
326
|
+
if (canDeselect) {
|
|
327
|
+
previousItem = (_a = listboxItems[this.selectedListboxItemIndex]) === null || _a === void 0 ? void 0 : _a.nativeElement;
|
|
322
328
|
this.selectedListboxItemIndex = null;
|
|
323
329
|
}
|
|
324
330
|
else {
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
this.
|
|
331
|
+
previousItem = (_b = listboxItems[this.selectedListboxItemIndex]) === null || _b === void 0 ? void 0 : _b.nativeElement;
|
|
332
|
+
currentItem = (_c = listboxItems[this.focusedListboxItemIndex]) === null || _c === void 0 ? void 0 : _c.nativeElement;
|
|
333
|
+
prevIndex = this.selectedListboxItemIndex;
|
|
328
334
|
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
329
335
|
}
|
|
330
|
-
this.
|
|
336
|
+
this.changeTabindex(previousItem, currentItem, !!currentItem);
|
|
337
|
+
this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex });
|
|
331
338
|
}
|
|
332
339
|
onF10Key(tools) {
|
|
333
340
|
var _a;
|
|
@@ -536,7 +543,7 @@ class ItemSelectableDirective {
|
|
|
536
543
|
}
|
|
537
544
|
}
|
|
538
545
|
ItemSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
539
|
-
ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "
|
|
546
|
+
ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
|
|
540
547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, decorators: [{
|
|
541
548
|
type: Directive,
|
|
542
549
|
args: [{
|
|
@@ -549,7 +556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
549
556
|
args: ['class.k-selected']
|
|
550
557
|
}], onClick: [{
|
|
551
558
|
type: HostListener,
|
|
552
|
-
args: ['
|
|
559
|
+
args: ['mousedown', ['$event']]
|
|
553
560
|
}] } });
|
|
554
561
|
|
|
555
562
|
/* eslint-disable @typescript-eslint/no-inferrable-types */
|
|
@@ -602,8 +609,17 @@ class ListBoxComponent {
|
|
|
602
609
|
* @hidden
|
|
603
610
|
*/
|
|
604
611
|
this.selectedTools = allTools;
|
|
612
|
+
/**
|
|
613
|
+
* @hidden
|
|
614
|
+
*/
|
|
615
|
+
this.caretAltLeftIcon = caretAltLeftIcon;
|
|
616
|
+
/**
|
|
617
|
+
* @hidden
|
|
618
|
+
*/
|
|
619
|
+
this.caretAltRightIcon = caretAltRightIcon;
|
|
605
620
|
this._size = DEFAULT_SIZE;
|
|
606
621
|
this.subs = new Subscription();
|
|
622
|
+
this.shouldFireFocusIn = true;
|
|
607
623
|
validatePackage(packageMetadata);
|
|
608
624
|
this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
|
|
609
625
|
this.setSizingClass(this.size);
|
|
@@ -740,16 +756,44 @@ class ListBoxComponent {
|
|
|
740
756
|
}
|
|
741
757
|
return fieldAccessor(dataItem, this.textField);
|
|
742
758
|
}
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
759
|
+
/**
|
|
760
|
+
* @hidden
|
|
761
|
+
*/
|
|
762
|
+
toolIcon(icon) {
|
|
763
|
+
return this.direction === 'ltr' ?
|
|
764
|
+
icon :
|
|
765
|
+
icon === 'caret-alt-left' ?
|
|
766
|
+
'caret-alt-right' :
|
|
767
|
+
icon === 'caret-alt-right' ?
|
|
768
|
+
'caret-alt-left' :
|
|
769
|
+
icon;
|
|
770
|
+
}
|
|
771
|
+
/**
|
|
772
|
+
* @hidden
|
|
773
|
+
*/
|
|
774
|
+
toolSVGIcon(icon) {
|
|
775
|
+
return this.direction === 'ltr' ?
|
|
776
|
+
icon :
|
|
777
|
+
icon === this.caretAltLeftIcon ?
|
|
778
|
+
this.caretAltRightIcon :
|
|
779
|
+
icon === this.caretAltRightIcon ?
|
|
780
|
+
this.caretAltLeftIcon :
|
|
781
|
+
icon;
|
|
782
|
+
}
|
|
783
|
+
onClickEvent(prevIndex, index) {
|
|
784
|
+
this.shouldFireFocusIn = false;
|
|
785
|
+
this.selectionChange.next({ index, prevIndex: this.keyboardNavigationService.selectedListboxItemIndex });
|
|
786
|
+
this.keyboardNavigationService.selectedListboxItemIndex = index;
|
|
787
|
+
this.keyboardNavigationService.focusedListboxItemIndex = index;
|
|
747
788
|
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
748
789
|
const listboxItems = this.listboxItems.toArray();
|
|
749
790
|
const previousItem = prevIndex ? listboxItems[prevIndex].nativeElement : listboxItems[0].nativeElement;
|
|
750
|
-
const currentItem = listboxItems[
|
|
791
|
+
const currentItem = listboxItems[index].nativeElement;
|
|
751
792
|
this.keyboardNavigationService.changeTabindex(previousItem, currentItem);
|
|
752
793
|
});
|
|
794
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
795
|
+
this.shouldFireFocusIn = true;
|
|
796
|
+
});
|
|
753
797
|
}
|
|
754
798
|
initSubscriptions(navService, hostEl, toolsRef) {
|
|
755
799
|
this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
|
|
@@ -759,15 +803,16 @@ class ListBoxComponent {
|
|
|
759
803
|
this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
|
|
760
804
|
this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
|
|
761
805
|
this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
|
|
762
|
-
this.subs.add(navService.onSelectionChange.subscribe((
|
|
806
|
+
this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
|
|
807
|
+
const { prevIndex, index } = indexes;
|
|
763
808
|
this.selectionService.selectedIndex = index;
|
|
764
|
-
this.selectionChange.next({ index, prevIndex
|
|
809
|
+
this.selectionChange.next({ index, prevIndex });
|
|
765
810
|
}));
|
|
766
811
|
}
|
|
767
812
|
onFocusIn(event) {
|
|
768
813
|
var _a, _b;
|
|
769
814
|
const navService = this.keyboardNavigationService;
|
|
770
|
-
if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex) {
|
|
815
|
+
if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
|
|
771
816
|
const items = this.listboxItems.toArray();
|
|
772
817
|
const index = items.findIndex(elem => elem.nativeElement === event.target);
|
|
773
818
|
this.selectionService.selectedIndex = index;
|
|
@@ -851,7 +896,7 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
851
896
|
<ng-container kendoListBoxLocalizedMessages
|
|
852
897
|
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
853
898
|
moveUp="Move Up"
|
|
854
|
-
|
|
899
|
+
|
|
855
900
|
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
856
901
|
moveDown="Move Down"
|
|
857
902
|
|
|
@@ -884,8 +929,8 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
884
929
|
kendoButton
|
|
885
930
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
886
931
|
[size]="this.size"
|
|
887
|
-
[icon]="tool.icon"
|
|
888
|
-
[svgIcon]="tool.svgIcon"
|
|
932
|
+
[icon]="toolIcon(tool.icon)"
|
|
933
|
+
[svgIcon]="toolSVGIcon(tool.svgIcon)"
|
|
889
934
|
[attr.title]="messageFor(tool.name)"
|
|
890
935
|
(click)="performAction(tool.name)"
|
|
891
936
|
role="button"
|
|
@@ -947,7 +992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
947
992
|
<ng-container kendoListBoxLocalizedMessages
|
|
948
993
|
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
949
994
|
moveUp="Move Up"
|
|
950
|
-
|
|
995
|
+
|
|
951
996
|
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
952
997
|
moveDown="Move Down"
|
|
953
998
|
|
|
@@ -980,8 +1025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
980
1025
|
kendoButton
|
|
981
1026
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
982
1027
|
[size]="this.size"
|
|
983
|
-
[icon]="tool.icon"
|
|
984
|
-
[svgIcon]="tool.svgIcon"
|
|
1028
|
+
[icon]="toolIcon(tool.icon)"
|
|
1029
|
+
[svgIcon]="toolSVGIcon(tool.svgIcon)"
|
|
985
1030
|
[attr.title]="messageFor(tool.name)"
|
|
986
1031
|
(click)="performAction(tool.name)"
|
|
987
1032
|
role="button"
|
|
@@ -1162,6 +1207,8 @@ class DataBindingDirective {
|
|
|
1162
1207
|
return;
|
|
1163
1208
|
}
|
|
1164
1209
|
const newIndex = dir === 'up' ? index - 1 : index + 1;
|
|
1210
|
+
const navigation = this.selectedBox.keyboardNavigationService;
|
|
1211
|
+
navigation.focusedListboxItemIndex = navigation.selectedListboxItemIndex = newIndex;
|
|
1165
1212
|
[this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
|
|
1166
1213
|
this.selectedBox.selectionService.select(newIndex);
|
|
1167
1214
|
}
|
|
@@ -24,8 +24,8 @@ const packageMetadata = {
|
|
|
24
24
|
name: '@progress/kendo-angular-listbox',
|
|
25
25
|
productName: 'Kendo UI for Angular',
|
|
26
26
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
27
|
-
publishDate:
|
|
28
|
-
version: '13.0.0-develop.
|
|
27
|
+
publishDate: 1685972842,
|
|
28
|
+
version: '13.0.0-develop.21',
|
|
29
29
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
30
30
|
};
|
|
31
31
|
|
|
@@ -201,10 +201,10 @@ class KeyboardNavigationService {
|
|
|
201
201
|
this.focusedListboxItemIndex = 0;
|
|
202
202
|
this.focusedToolIndex = 0;
|
|
203
203
|
this.onDeleteEvent = new EventEmitter();
|
|
204
|
-
this.onSelectionChange = new EventEmitter();
|
|
205
204
|
this.onMoveSelectedItem = new EventEmitter();
|
|
206
205
|
this.onTransferAllEvent = new EventEmitter();
|
|
207
206
|
this.onShiftSelectedItem = new EventEmitter();
|
|
207
|
+
this.onSelectionChange = new EventEmitter();
|
|
208
208
|
}
|
|
209
209
|
onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems) {
|
|
210
210
|
const target = event.target;
|
|
@@ -250,10 +250,12 @@ class KeyboardNavigationService {
|
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
252
|
}
|
|
253
|
-
changeTabindex(previousItem, currentItem) {
|
|
253
|
+
changeTabindex(previousItem, currentItem, shouldBlur = true) {
|
|
254
254
|
if (previousItem) {
|
|
255
255
|
this.renderer.setAttribute(previousItem, 'tabindex', '-1');
|
|
256
|
-
|
|
256
|
+
if (shouldBlur) {
|
|
257
|
+
previousItem.blur();
|
|
258
|
+
}
|
|
257
259
|
}
|
|
258
260
|
;
|
|
259
261
|
if (currentItem) {
|
|
@@ -279,8 +281,8 @@ class KeyboardNavigationService {
|
|
|
279
281
|
const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
280
282
|
const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
281
283
|
this.changeTabindex(previousItem, currentItem);
|
|
284
|
+
this.onSelectionChange.emit({ index: this.focusedListboxItemIndex, prevIndex: this.selectedListboxItemIndex });
|
|
282
285
|
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
283
|
-
this.onSelectionChange.emit(this.selectedListboxItemIndex);
|
|
284
286
|
}
|
|
285
287
|
onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
|
|
286
288
|
event.preventDefault();
|
|
@@ -298,7 +300,7 @@ class KeyboardNavigationService {
|
|
|
298
300
|
return;
|
|
299
301
|
}
|
|
300
302
|
dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
|
|
301
|
-
this.onSelectionChange.emit(this.selectedListboxItemIndex);
|
|
303
|
+
this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
|
|
302
304
|
this.focusedListboxItemIndex = this.selectedListboxItemIndex;
|
|
303
305
|
}
|
|
304
306
|
onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems) {
|
|
@@ -315,17 +317,22 @@ class KeyboardNavigationService {
|
|
|
315
317
|
event.stopImmediatePropagation();
|
|
316
318
|
event.preventDefault();
|
|
317
319
|
const areIndexesEqual = this.selectedListboxItemIndex === this.focusedListboxItemIndex;
|
|
318
|
-
const
|
|
319
|
-
|
|
320
|
+
const canDeselect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
|
|
321
|
+
let previousItem;
|
|
322
|
+
let currentItem;
|
|
323
|
+
let prevIndex;
|
|
324
|
+
if (canDeselect) {
|
|
325
|
+
previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
320
326
|
this.selectedListboxItemIndex = null;
|
|
321
327
|
}
|
|
322
328
|
else {
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
this.
|
|
329
|
+
previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
330
|
+
currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
331
|
+
prevIndex = this.selectedListboxItemIndex;
|
|
326
332
|
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
327
333
|
}
|
|
328
|
-
this.
|
|
334
|
+
this.changeTabindex(previousItem, currentItem, !!currentItem);
|
|
335
|
+
this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex });
|
|
329
336
|
}
|
|
330
337
|
onF10Key(tools) {
|
|
331
338
|
if (this.focusedToolIndex && this.focusedToolIndex > -1) {
|
|
@@ -531,7 +538,7 @@ class ItemSelectableDirective {
|
|
|
531
538
|
}
|
|
532
539
|
}
|
|
533
540
|
ItemSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
534
|
-
ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "
|
|
541
|
+
ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
|
|
535
542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ItemSelectableDirective, decorators: [{
|
|
536
543
|
type: Directive,
|
|
537
544
|
args: [{
|
|
@@ -544,7 +551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
544
551
|
args: ['class.k-selected']
|
|
545
552
|
}], onClick: [{
|
|
546
553
|
type: HostListener,
|
|
547
|
-
args: ['
|
|
554
|
+
args: ['mousedown', ['$event']]
|
|
548
555
|
}] } });
|
|
549
556
|
|
|
550
557
|
/* eslint-disable @typescript-eslint/no-inferrable-types */
|
|
@@ -597,8 +604,17 @@ class ListBoxComponent {
|
|
|
597
604
|
* @hidden
|
|
598
605
|
*/
|
|
599
606
|
this.selectedTools = allTools;
|
|
607
|
+
/**
|
|
608
|
+
* @hidden
|
|
609
|
+
*/
|
|
610
|
+
this.caretAltLeftIcon = caretAltLeftIcon;
|
|
611
|
+
/**
|
|
612
|
+
* @hidden
|
|
613
|
+
*/
|
|
614
|
+
this.caretAltRightIcon = caretAltRightIcon;
|
|
600
615
|
this._size = DEFAULT_SIZE;
|
|
601
616
|
this.subs = new Subscription();
|
|
617
|
+
this.shouldFireFocusIn = true;
|
|
602
618
|
validatePackage(packageMetadata);
|
|
603
619
|
this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
|
|
604
620
|
this.setSizingClass(this.size);
|
|
@@ -734,16 +750,44 @@ class ListBoxComponent {
|
|
|
734
750
|
}
|
|
735
751
|
return fieldAccessor(dataItem, this.textField);
|
|
736
752
|
}
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
753
|
+
/**
|
|
754
|
+
* @hidden
|
|
755
|
+
*/
|
|
756
|
+
toolIcon(icon) {
|
|
757
|
+
return this.direction === 'ltr' ?
|
|
758
|
+
icon :
|
|
759
|
+
icon === 'caret-alt-left' ?
|
|
760
|
+
'caret-alt-right' :
|
|
761
|
+
icon === 'caret-alt-right' ?
|
|
762
|
+
'caret-alt-left' :
|
|
763
|
+
icon;
|
|
764
|
+
}
|
|
765
|
+
/**
|
|
766
|
+
* @hidden
|
|
767
|
+
*/
|
|
768
|
+
toolSVGIcon(icon) {
|
|
769
|
+
return this.direction === 'ltr' ?
|
|
770
|
+
icon :
|
|
771
|
+
icon === this.caretAltLeftIcon ?
|
|
772
|
+
this.caretAltRightIcon :
|
|
773
|
+
icon === this.caretAltRightIcon ?
|
|
774
|
+
this.caretAltLeftIcon :
|
|
775
|
+
icon;
|
|
776
|
+
}
|
|
777
|
+
onClickEvent(prevIndex, index) {
|
|
778
|
+
this.shouldFireFocusIn = false;
|
|
779
|
+
this.selectionChange.next({ index, prevIndex: this.keyboardNavigationService.selectedListboxItemIndex });
|
|
780
|
+
this.keyboardNavigationService.selectedListboxItemIndex = index;
|
|
781
|
+
this.keyboardNavigationService.focusedListboxItemIndex = index;
|
|
741
782
|
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
742
783
|
const listboxItems = this.listboxItems.toArray();
|
|
743
784
|
const previousItem = prevIndex ? listboxItems[prevIndex].nativeElement : listboxItems[0].nativeElement;
|
|
744
|
-
const currentItem = listboxItems[
|
|
785
|
+
const currentItem = listboxItems[index].nativeElement;
|
|
745
786
|
this.keyboardNavigationService.changeTabindex(previousItem, currentItem);
|
|
746
787
|
});
|
|
788
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
789
|
+
this.shouldFireFocusIn = true;
|
|
790
|
+
});
|
|
747
791
|
}
|
|
748
792
|
initSubscriptions(navService, hostEl, toolsRef) {
|
|
749
793
|
this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
|
|
@@ -753,14 +797,15 @@ class ListBoxComponent {
|
|
|
753
797
|
this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
|
|
754
798
|
this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
|
|
755
799
|
this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
|
|
756
|
-
this.subs.add(navService.onSelectionChange.subscribe((
|
|
800
|
+
this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
|
|
801
|
+
const { prevIndex, index } = indexes;
|
|
757
802
|
this.selectionService.selectedIndex = index;
|
|
758
|
-
this.selectionChange.next({ index, prevIndex
|
|
803
|
+
this.selectionChange.next({ index, prevIndex });
|
|
759
804
|
}));
|
|
760
805
|
}
|
|
761
806
|
onFocusIn(event) {
|
|
762
807
|
const navService = this.keyboardNavigationService;
|
|
763
|
-
if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex) {
|
|
808
|
+
if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
|
|
764
809
|
const items = this.listboxItems.toArray();
|
|
765
810
|
const index = items.findIndex(elem => elem.nativeElement === event.target);
|
|
766
811
|
this.selectionService.selectedIndex = index;
|
|
@@ -842,7 +887,7 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
842
887
|
<ng-container kendoListBoxLocalizedMessages
|
|
843
888
|
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
844
889
|
moveUp="Move Up"
|
|
845
|
-
|
|
890
|
+
|
|
846
891
|
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
847
892
|
moveDown="Move Down"
|
|
848
893
|
|
|
@@ -875,8 +920,8 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
875
920
|
kendoButton
|
|
876
921
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
877
922
|
[size]="this.size"
|
|
878
|
-
[icon]="tool.icon"
|
|
879
|
-
[svgIcon]="tool.svgIcon"
|
|
923
|
+
[icon]="toolIcon(tool.icon)"
|
|
924
|
+
[svgIcon]="toolSVGIcon(tool.svgIcon)"
|
|
880
925
|
[attr.title]="messageFor(tool.name)"
|
|
881
926
|
(click)="performAction(tool.name)"
|
|
882
927
|
role="button"
|
|
@@ -938,7 +983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
938
983
|
<ng-container kendoListBoxLocalizedMessages
|
|
939
984
|
i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
|
|
940
985
|
moveUp="Move Up"
|
|
941
|
-
|
|
986
|
+
|
|
942
987
|
i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
|
|
943
988
|
moveDown="Move Down"
|
|
944
989
|
|
|
@@ -971,8 +1016,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
971
1016
|
kendoButton
|
|
972
1017
|
[attr.tabindex]="i === 0 ? '0' : '-1'"
|
|
973
1018
|
[size]="this.size"
|
|
974
|
-
[icon]="tool.icon"
|
|
975
|
-
[svgIcon]="tool.svgIcon"
|
|
1019
|
+
[icon]="toolIcon(tool.icon)"
|
|
1020
|
+
[svgIcon]="toolSVGIcon(tool.svgIcon)"
|
|
976
1021
|
[attr.title]="messageFor(tool.name)"
|
|
977
1022
|
(click)="performAction(tool.name)"
|
|
978
1023
|
role="button"
|
|
@@ -1153,6 +1198,8 @@ class DataBindingDirective {
|
|
|
1153
1198
|
return;
|
|
1154
1199
|
}
|
|
1155
1200
|
const newIndex = dir === 'up' ? index - 1 : index + 1;
|
|
1201
|
+
const navigation = this.selectedBox.keyboardNavigationService;
|
|
1202
|
+
navigation.focusedListboxItemIndex = navigation.selectedListboxItemIndex = newIndex;
|
|
1156
1203
|
[this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
|
|
1157
1204
|
this.selectedBox.selectionService.select(newIndex);
|
|
1158
1205
|
}
|
|
@@ -6,6 +6,7 @@ import { ElementRef, EventEmitter, NgZone, Renderer2 } from "@angular/core";
|
|
|
6
6
|
import { Button } from "@progress/kendo-angular-buttons";
|
|
7
7
|
import { ListBoxComponent } from "./listbox.component";
|
|
8
8
|
import { ActionName, Tool } from "./toolbar";
|
|
9
|
+
import { ListBoxSelectionEvent } from "./selection.service";
|
|
9
10
|
import * as i0 from "@angular/core";
|
|
10
11
|
/**
|
|
11
12
|
* @hidden
|
|
@@ -17,13 +18,13 @@ export declare class KeyboardNavigationService {
|
|
|
17
18
|
focusedListboxItemIndex: number;
|
|
18
19
|
focusedToolIndex: number;
|
|
19
20
|
onDeleteEvent: EventEmitter<number>;
|
|
20
|
-
onSelectionChange: EventEmitter<number>;
|
|
21
21
|
onMoveSelectedItem: EventEmitter<string>;
|
|
22
22
|
onTransferAllEvent: EventEmitter<ActionName>;
|
|
23
23
|
onShiftSelectedItem: EventEmitter<ActionName>;
|
|
24
|
+
onSelectionChange: EventEmitter<ListBoxSelectionEvent>;
|
|
24
25
|
constructor(renderer: Renderer2, zone: NgZone);
|
|
25
26
|
onKeyDown(event: any, toolsRef: Array<Button>, toolbar: Tool[], childListbox: ListBoxComponent, parentListbox: ListBoxComponent, listboxItems: Array<ElementRef>): void;
|
|
26
|
-
changeTabindex(previousItem: HTMLElement, currentItem: HTMLElement): void;
|
|
27
|
+
changeTabindex(previousItem: HTMLElement, currentItem: HTMLElement, shouldBlur?: boolean): void;
|
|
27
28
|
private handleToolbarArrows;
|
|
28
29
|
private onSpaceKey;
|
|
29
30
|
private onArrowUpOrDown;
|
package/listbox.component.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ import { ActionName, ListBoxToolbarConfig, Tool } from './toolbar';
|
|
|
11
11
|
import { Button } from '@progress/kendo-angular-buttons';
|
|
12
12
|
import { KeyboardNavigationService } from './keyboard-navigation.service';
|
|
13
13
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
14
|
+
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
14
15
|
import * as i0 from "@angular/core";
|
|
15
16
|
/**
|
|
16
17
|
* Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
|
|
@@ -124,9 +125,18 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
124
125
|
* @hidden
|
|
125
126
|
*/
|
|
126
127
|
parentListbox: ListBoxComponent;
|
|
128
|
+
/**
|
|
129
|
+
* @hidden
|
|
130
|
+
*/
|
|
131
|
+
caretAltLeftIcon: SVGIcon;
|
|
132
|
+
/**
|
|
133
|
+
* @hidden
|
|
134
|
+
*/
|
|
135
|
+
caretAltRightIcon: SVGIcon;
|
|
127
136
|
private localizationSubscription;
|
|
128
137
|
private _size;
|
|
129
138
|
private subs;
|
|
139
|
+
private shouldFireFocusIn;
|
|
130
140
|
constructor(keyboardNavigationService: KeyboardNavigationService, selectionService: ListBoxSelectionService, hostElement: ElementRef, renderer: Renderer2, zone: NgZone, localization: LocalizationService);
|
|
131
141
|
ngOnInit(): void;
|
|
132
142
|
ngAfterViewInit(): void;
|
|
@@ -155,6 +165,14 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
155
165
|
* @hidden
|
|
156
166
|
*/
|
|
157
167
|
getText(dataItem: any): string;
|
|
168
|
+
/**
|
|
169
|
+
* @hidden
|
|
170
|
+
*/
|
|
171
|
+
toolIcon(icon: string): string;
|
|
172
|
+
/**
|
|
173
|
+
* @hidden
|
|
174
|
+
*/
|
|
175
|
+
toolSVGIcon(icon: SVGIcon): SVGIcon;
|
|
158
176
|
private onClickEvent;
|
|
159
177
|
private initSubscriptions;
|
|
160
178
|
private onFocusIn;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-listbox",
|
|
3
|
-
"version": "13.0.0-develop.
|
|
3
|
+
"version": "13.0.0-develop.21",
|
|
4
4
|
"description": "Kendo UI for Angular ListBox",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
"@angular/core": "13 - 16",
|
|
24
24
|
"@angular/platform-browser": "13 - 16",
|
|
25
25
|
"@progress/kendo-licensing": "^1.0.2",
|
|
26
|
-
"@progress/kendo-angular-buttons": "13.0.0-develop.
|
|
27
|
-
"@progress/kendo-angular-common": "13.0.0-develop.
|
|
28
|
-
"@progress/kendo-angular-popup": "13.0.0-develop.
|
|
26
|
+
"@progress/kendo-angular-buttons": "13.0.0-develop.21",
|
|
27
|
+
"@progress/kendo-angular-common": "13.0.0-develop.21",
|
|
28
|
+
"@progress/kendo-angular-popup": "13.0.0-develop.21",
|
|
29
29
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"tslib": "^2.3.1",
|
|
33
|
-
"@progress/kendo-angular-schematics": "13.0.0-develop.
|
|
33
|
+
"@progress/kendo-angular-schematics": "13.0.0-develop.21",
|
|
34
34
|
"@progress/kendo-common": "^0.2.2"
|
|
35
35
|
},
|
|
36
36
|
"schematics": "./schematics/collection.json",
|
|
@@ -6,11 +6,11 @@ function default_1(options) {
|
|
|
6
6
|
// Additional dependencies to install.
|
|
7
7
|
// See https://github.com/telerik/kendo-schematics/issues/28
|
|
8
8
|
peerDependencies: {
|
|
9
|
-
'@progress/kendo-angular-buttons': '13.0.0-develop.
|
|
10
|
-
'@progress/kendo-angular-common': '13.0.0-develop.
|
|
11
|
-
'@progress/kendo-angular-l10n': '13.0.0-develop.
|
|
9
|
+
'@progress/kendo-angular-buttons': '13.0.0-develop.21',
|
|
10
|
+
'@progress/kendo-angular-common': '13.0.0-develop.21',
|
|
11
|
+
'@progress/kendo-angular-l10n': '13.0.0-develop.21',
|
|
12
12
|
// Peer of kendo-angular-buttons
|
|
13
|
-
'@progress/kendo-angular-popup': '13.0.0-develop.
|
|
13
|
+
'@progress/kendo-angular-popup': '13.0.0-develop.21'
|
|
14
14
|
} });
|
|
15
15
|
return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
|
|
16
16
|
}
|