@progress/kendo-angular-dropdowns 7.1.0 → 7.2.0-dev.202209121509
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/bundles/kendo-angular-dropdowns.umd.js +1 -1
- package/common/data.service.d.ts +5 -0
- package/common/navigation/navigation-action.d.ts +6 -1
- package/common/navigation/navigation.service.d.ts +5 -0
- package/common/selection/selection.service.d.ts +18 -4
- package/common/util.d.ts +4 -0
- package/esm2015/common/data.service.js +11 -1
- package/esm2015/common/list.component.js +1 -1
- package/esm2015/common/navigation/navigation-action.js +5 -0
- package/esm2015/common/navigation/navigation.service.js +22 -0
- package/esm2015/common/selection/selectable.directive.js +2 -1
- package/esm2015/common/selection/selection.service.js +70 -7
- package/esm2015/common/util.js +4 -0
- package/esm2015/multiselect/multiselect.component.js +145 -25
- package/esm2015/package-metadata.js +1 -1
- package/fesm2015/kendo-angular-dropdowns.js +369 -145
- package/multiselect/multiselect.component.d.ts +14 -1
- package/package.json +1 -1
package/common/data.service.d.ts
CHANGED
|
@@ -69,6 +69,11 @@ export declare class DataService {
|
|
|
69
69
|
* Used to get the group at the provided index.
|
|
70
70
|
*/
|
|
71
71
|
groupAt(index: number): any;
|
|
72
|
+
/**
|
|
73
|
+
* @hidden
|
|
74
|
+
* Used to get all group items indices.
|
|
75
|
+
*/
|
|
76
|
+
groupItemsIndices(): number[];
|
|
72
77
|
/**
|
|
73
78
|
* @hidden
|
|
74
79
|
* Used to get the field by which the data is grouped.
|
|
@@ -39,6 +39,11 @@ export declare class NavigationService {
|
|
|
39
39
|
end: EventEmitter<NavigationEvent>;
|
|
40
40
|
pagedown: EventEmitter<NavigationEvent>;
|
|
41
41
|
pageup: EventEmitter<NavigationEvent>;
|
|
42
|
+
selectnext: EventEmitter<NavigationEvent>;
|
|
43
|
+
selectprevious: EventEmitter<NavigationEvent>;
|
|
44
|
+
selectall: EventEmitter<NavigationEvent>;
|
|
45
|
+
selectalltobeginning: EventEmitter<NavigationEvent>;
|
|
46
|
+
selectalltoend: EventEmitter<NavigationEvent>;
|
|
42
47
|
constructor(disabledItemsService: DisabledItemsService, selectionService: SelectionService);
|
|
43
48
|
process(args: any): NavigationAction;
|
|
44
49
|
private next;
|
|
@@ -3,38 +3,52 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { EventEmitter } from '@angular/core';
|
|
6
|
+
import { DisabledItemsService } from '../disabled-items/disabled-items.service';
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
/**
|
|
8
9
|
* @hidden
|
|
9
10
|
*/
|
|
10
11
|
export interface SelectionEvent {
|
|
11
12
|
indices: number[];
|
|
12
|
-
added?: number;
|
|
13
|
-
removed?: number;
|
|
13
|
+
added?: number | number[];
|
|
14
|
+
removed?: number | number[];
|
|
14
15
|
newSelection?: boolean;
|
|
16
|
+
preventClosingPopup?: boolean;
|
|
17
|
+
isMultipleSelection?: boolean;
|
|
15
18
|
}
|
|
16
19
|
/**
|
|
17
20
|
* @hidden
|
|
18
21
|
*/
|
|
19
22
|
export declare class SelectionService {
|
|
23
|
+
private disabledItemsService;
|
|
20
24
|
onSelect: EventEmitter<SelectionEvent>;
|
|
21
25
|
onChange: EventEmitter<SelectionEvent>;
|
|
22
26
|
onFocus: EventEmitter<number>;
|
|
23
27
|
total: number;
|
|
28
|
+
lastClickedIndex: number;
|
|
24
29
|
private selectedIndices;
|
|
25
30
|
private focusedIndex;
|
|
31
|
+
constructor(disabledItemsService: DisabledItemsService);
|
|
26
32
|
getTotal(): number;
|
|
27
33
|
isSelected(index: number): boolean;
|
|
28
34
|
isFocused(index: number): boolean;
|
|
29
35
|
focus(index: number): void;
|
|
30
36
|
select(index: number): void;
|
|
31
|
-
add(index: number): void;
|
|
32
|
-
|
|
37
|
+
add(index: number, preventClosingPopup?: boolean): void;
|
|
38
|
+
private indicesToBeRemoved;
|
|
39
|
+
private indicesToBeAdded;
|
|
40
|
+
emitMultipleAddedRemoved(): void;
|
|
41
|
+
addMultiple(indices: number[]): void;
|
|
42
|
+
deselect(index: number, preventClosingPopup?: boolean): void;
|
|
43
|
+
unselectMultiple(indices: number[]): void;
|
|
33
44
|
change(index: number): void;
|
|
34
45
|
resetSelection(index: number | number[]): void;
|
|
35
46
|
get selected(): number[];
|
|
36
47
|
get focused(): number;
|
|
37
48
|
set focused(index: number);
|
|
49
|
+
selectFromTo(from: number, to: number): void;
|
|
50
|
+
unselectFromTo(from: number, to: number): void;
|
|
51
|
+
unselectNotNeededIndices(startOfSelection: number, endOfSelection: number, totalItems: number): void;
|
|
38
52
|
static ɵfac: i0.ɵɵFactoryDeclaration<SelectionService, never>;
|
|
39
53
|
static ɵprov: i0.ɵɵInjectableDeclaration<SelectionService>;
|
|
40
54
|
}
|
package/common/util.d.ts
CHANGED
|
@@ -157,3 +157,7 @@ export declare const getRoundedClass: (rounded: DropDownRounded) => string;
|
|
|
157
157
|
* Return the fillMode class based on the component and fillMode input.
|
|
158
158
|
*/
|
|
159
159
|
export declare const getFillModeClass: (component: string, fillMode: DropDownFillMode) => string;
|
|
160
|
+
/**
|
|
161
|
+
* @hidden
|
|
162
|
+
*/
|
|
163
|
+
export declare const filterAndMap: (arr: any[], predicate: (item: any) => boolean, mapper: (item: any) => any) => any[];
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Injectable } from '@angular/core';
|
|
6
|
-
import { isPresent, hasProps, getter } from './util';
|
|
6
|
+
import { isPresent, hasProps, getter, filterAndMap } from './util';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
9
|
* @hidden
|
|
@@ -178,6 +178,16 @@ export class DataService {
|
|
|
178
178
|
}
|
|
179
179
|
return this._flatData.find((item) => item.header && item.index === index);
|
|
180
180
|
}
|
|
181
|
+
/**
|
|
182
|
+
* @hidden
|
|
183
|
+
* Used to get all group items indices.
|
|
184
|
+
*/
|
|
185
|
+
groupItemsIndices() {
|
|
186
|
+
if (this.isGrouped) {
|
|
187
|
+
return filterAndMap(this.data, item => item.header, mappedItem => mappedItem.index);
|
|
188
|
+
}
|
|
189
|
+
return [];
|
|
190
|
+
}
|
|
181
191
|
/**
|
|
182
192
|
* @hidden
|
|
183
193
|
* Used to get the field by which the data is grouped.
|
|
@@ -142,7 +142,7 @@ export class ListComponent {
|
|
|
142
142
|
this.selectionService.add(index);
|
|
143
143
|
}
|
|
144
144
|
if (!isChecked && this.selectionService.isSelected(index)) {
|
|
145
|
-
this.selectionService.
|
|
145
|
+
this.selectionService.deselect(index);
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
prepareClasses() {
|
|
@@ -24,4 +24,9 @@ export var NavigationAction;
|
|
|
24
24
|
NavigationAction[NavigationAction["Right"] = 13] = "Right";
|
|
25
25
|
NavigationAction[NavigationAction["PageDown"] = 14] = "PageDown";
|
|
26
26
|
NavigationAction[NavigationAction["PageUp"] = 15] = "PageUp";
|
|
27
|
+
NavigationAction[NavigationAction["SelectPrevious"] = 16] = "SelectPrevious";
|
|
28
|
+
NavigationAction[NavigationAction["SelectNext"] = 17] = "SelectNext";
|
|
29
|
+
NavigationAction[NavigationAction["SelectAll"] = 18] = "SelectAll";
|
|
30
|
+
NavigationAction[NavigationAction["SelectAllToBeginning"] = 19] = "SelectAllToBeginning";
|
|
31
|
+
NavigationAction[NavigationAction["SelectAllToEnd"] = 20] = "SelectAllToEnd";
|
|
27
32
|
})(NavigationAction || (NavigationAction = {}));
|
|
@@ -44,10 +44,17 @@ export class NavigationService {
|
|
|
44
44
|
this.end = new EventEmitter();
|
|
45
45
|
this.pagedown = new EventEmitter();
|
|
46
46
|
this.pageup = new EventEmitter();
|
|
47
|
+
this.selectnext = new EventEmitter();
|
|
48
|
+
this.selectprevious = new EventEmitter();
|
|
49
|
+
this.selectall = new EventEmitter();
|
|
50
|
+
this.selectalltobeginning = new EventEmitter();
|
|
51
|
+
this.selectalltoend = new EventEmitter();
|
|
47
52
|
}
|
|
48
53
|
process(args) {
|
|
49
54
|
const keyCode = args.originalEvent.keyCode;
|
|
50
55
|
const altKey = args.originalEvent.altKey;
|
|
56
|
+
const shiftKey = args.originalEvent.shiftKey;
|
|
57
|
+
const ctrlKey = args.originalEvent.ctrlKey;
|
|
51
58
|
let index;
|
|
52
59
|
let action = NavigationAction.Undefined;
|
|
53
60
|
if (altKey && keyCode === Keys.ArrowDown) {
|
|
@@ -56,6 +63,21 @@ export class NavigationService {
|
|
|
56
63
|
else if (altKey && keyCode === Keys.ArrowUp) {
|
|
57
64
|
action = NavigationAction.Close;
|
|
58
65
|
}
|
|
66
|
+
else if (shiftKey && keyCode === Keys.ArrowUp) {
|
|
67
|
+
action = NavigationAction.SelectPrevious;
|
|
68
|
+
}
|
|
69
|
+
else if (shiftKey && keyCode === Keys.ArrowDown) {
|
|
70
|
+
action = NavigationAction.SelectNext;
|
|
71
|
+
}
|
|
72
|
+
else if (ctrlKey && keyCode === Keys.KeyA) {
|
|
73
|
+
action = NavigationAction.SelectAll;
|
|
74
|
+
}
|
|
75
|
+
else if (ctrlKey && shiftKey && keyCode === Keys.Home) {
|
|
76
|
+
action = NavigationAction.SelectAllToBeginning;
|
|
77
|
+
}
|
|
78
|
+
else if (ctrlKey && shiftKey && keyCode === Keys.End) {
|
|
79
|
+
action = NavigationAction.SelectAllToEnd;
|
|
80
|
+
}
|
|
59
81
|
else if (keyCode === Keys.Enter) {
|
|
60
82
|
action = NavigationAction.Enter;
|
|
61
83
|
}
|
|
@@ -24,12 +24,13 @@ export class SelectableDirective {
|
|
|
24
24
|
}
|
|
25
25
|
onClick(event) {
|
|
26
26
|
event.stopPropagation();
|
|
27
|
+
this.selectionService.lastClickedIndex = this.index;
|
|
27
28
|
if (this.checkboxes.enabled && !this.checkboxes.checkOnClick) {
|
|
28
29
|
return;
|
|
29
30
|
}
|
|
30
31
|
if (this.multipleSelection) {
|
|
31
32
|
if (this.selectionService.isSelected(this.index)) {
|
|
32
|
-
this.selectionService.
|
|
33
|
+
this.selectionService.deselect(this.index);
|
|
33
34
|
}
|
|
34
35
|
else {
|
|
35
36
|
this.selectionService.add(this.index);
|
|
@@ -5,16 +5,20 @@
|
|
|
5
5
|
import { Injectable, EventEmitter } from '@angular/core';
|
|
6
6
|
import { isPresent } from '../util';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
|
+
import * as i1 from "../disabled-items/disabled-items.service";
|
|
8
9
|
/**
|
|
9
10
|
* @hidden
|
|
10
11
|
*/
|
|
11
12
|
export class SelectionService {
|
|
12
|
-
constructor() {
|
|
13
|
+
constructor(disabledItemsService) {
|
|
14
|
+
this.disabledItemsService = disabledItemsService;
|
|
13
15
|
this.onSelect = new EventEmitter();
|
|
14
16
|
this.onChange = new EventEmitter();
|
|
15
17
|
this.onFocus = new EventEmitter();
|
|
16
18
|
this.total = 0;
|
|
17
19
|
this.selectedIndices = [];
|
|
20
|
+
this.indicesToBeRemoved = [];
|
|
21
|
+
this.indicesToBeAdded = [];
|
|
18
22
|
}
|
|
19
23
|
getTotal() {
|
|
20
24
|
return this.total;
|
|
@@ -43,7 +47,7 @@ export class SelectionService {
|
|
|
43
47
|
newSelection: isPresent(index)
|
|
44
48
|
});
|
|
45
49
|
}
|
|
46
|
-
add(index) {
|
|
50
|
+
add(index, preventClosingPopup) {
|
|
47
51
|
if (this.isSelected(index)) {
|
|
48
52
|
return;
|
|
49
53
|
}
|
|
@@ -51,20 +55,47 @@ export class SelectionService {
|
|
|
51
55
|
this.focused = index;
|
|
52
56
|
this.onChange.emit({
|
|
53
57
|
added: index,
|
|
54
|
-
indices: this.selectedIndices.slice()
|
|
58
|
+
indices: this.selectedIndices.slice(),
|
|
59
|
+
preventClosingPopup: preventClosingPopup
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
emitMultipleAddedRemoved() {
|
|
63
|
+
this.onChange.emit({
|
|
64
|
+
added: this.indicesToBeAdded,
|
|
65
|
+
removed: this.indicesToBeRemoved,
|
|
66
|
+
indices: this.selectedIndices.slice(),
|
|
67
|
+
preventClosingPopup: true,
|
|
68
|
+
isMultipleSelection: true
|
|
55
69
|
});
|
|
70
|
+
this.indicesToBeAdded = [];
|
|
71
|
+
this.indicesToBeRemoved = [];
|
|
72
|
+
}
|
|
73
|
+
addMultiple(indices) {
|
|
74
|
+
this.indicesToBeAdded = indices.slice();
|
|
75
|
+
this.selectedIndices.push(...indices);
|
|
56
76
|
}
|
|
57
|
-
|
|
77
|
+
deselect(index, preventClosingPopup) {
|
|
58
78
|
if (!this.isSelected(index)) {
|
|
59
79
|
return;
|
|
60
80
|
}
|
|
61
81
|
const position = this.selectedIndices.indexOf(index);
|
|
62
82
|
this.selectedIndices.splice(position, 1);
|
|
63
83
|
this.focused = index;
|
|
84
|
+
if (this.selected.length === 0) {
|
|
85
|
+
this.lastClickedIndex = null;
|
|
86
|
+
}
|
|
64
87
|
this.onChange.emit({
|
|
65
88
|
indices: this.selectedIndices.slice(),
|
|
66
|
-
removed: index
|
|
89
|
+
removed: index,
|
|
90
|
+
preventClosingPopup: preventClosingPopup
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
unselectMultiple(indices) {
|
|
94
|
+
indices.forEach((index) => {
|
|
95
|
+
const position = this.selectedIndices.indexOf(index);
|
|
96
|
+
this.selectedIndices.splice(position, 1);
|
|
67
97
|
});
|
|
98
|
+
this.indicesToBeRemoved = indices.slice();
|
|
68
99
|
}
|
|
69
100
|
change(index) {
|
|
70
101
|
const newSelection = isPresent(index) && !this.isSelected(index);
|
|
@@ -91,9 +122,41 @@ export class SelectionService {
|
|
|
91
122
|
this.onFocus.emit(index);
|
|
92
123
|
}
|
|
93
124
|
}
|
|
125
|
+
selectFromTo(from, to) {
|
|
126
|
+
let addedIndices = [];
|
|
127
|
+
for (let i = from; i <= to; i++) {
|
|
128
|
+
if (!this.isSelected(i) && !this.disabledItemsService.isIndexDisabled(i)) {
|
|
129
|
+
addedIndices.push(i);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
this.addMultiple(addedIndices);
|
|
133
|
+
}
|
|
134
|
+
unselectFromTo(from, to) {
|
|
135
|
+
let indicesToBeUnselected = [];
|
|
136
|
+
for (let i = from; i >= to; i--) {
|
|
137
|
+
if (this.isSelected(i) && !this.disabledItemsService.isIndexDisabled(i)) {
|
|
138
|
+
indicesToBeUnselected.push(i);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
this.unselectMultiple(indicesToBeUnselected);
|
|
142
|
+
}
|
|
143
|
+
unselectNotNeededIndices(startOfSelection, endOfSelection, totalItems) {
|
|
144
|
+
let indicesToBeUnselected = [];
|
|
145
|
+
for (let i = 0; i < startOfSelection; i++) {
|
|
146
|
+
if (this.isSelected(i)) {
|
|
147
|
+
indicesToBeUnselected.push(i);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
for (let i = endOfSelection + 1; i < totalItems; i++) {
|
|
151
|
+
if (this.isSelected(i)) {
|
|
152
|
+
indicesToBeUnselected.push(i);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
this.unselectMultiple(indicesToBeUnselected);
|
|
156
|
+
}
|
|
94
157
|
}
|
|
95
|
-
SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
158
|
+
SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, deps: [{ token: i1.DisabledItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
96
159
|
SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService });
|
|
97
160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionService, decorators: [{
|
|
98
161
|
type: Injectable
|
|
99
|
-
}] });
|
|
162
|
+
}], ctorParameters: function () { return [{ type: i1.DisabledItemsService }]; } });
|
package/esm2015/common/util.js
CHANGED
|
@@ -324,3 +324,7 @@ export const getFillModeClass = (component, fillMode) => {
|
|
|
324
324
|
};
|
|
325
325
|
return FILLMODE_CLASSES[fillMode];
|
|
326
326
|
};
|
|
327
|
+
/**
|
|
328
|
+
* @hidden
|
|
329
|
+
*/
|
|
330
|
+
export const filterAndMap = (arr, predicate, mapper) => arr.reduce((acc, curr) => predicate(curr) ? [...acc, mapper(curr)] : acc, []);
|
|
@@ -560,6 +560,16 @@ export class MultiSelectComponent {
|
|
|
560
560
|
get isLoading() {
|
|
561
561
|
return this.loading;
|
|
562
562
|
}
|
|
563
|
+
/**
|
|
564
|
+
* @hidden
|
|
565
|
+
*/
|
|
566
|
+
handleKeyboardEvent(event) {
|
|
567
|
+
if (event.ctrlKey && event.keyCode === Keys.KeyA) {
|
|
568
|
+
event.preventDefault();
|
|
569
|
+
event.stopImmediatePropagation();
|
|
570
|
+
this.handleSelectAll();
|
|
571
|
+
}
|
|
572
|
+
}
|
|
563
573
|
/**
|
|
564
574
|
* @hidden
|
|
565
575
|
*/
|
|
@@ -651,23 +661,45 @@ export class MultiSelectComponent {
|
|
|
651
661
|
* @hidden
|
|
652
662
|
*/
|
|
653
663
|
change(event) {
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
664
|
+
if (event.isMultipleSelection) {
|
|
665
|
+
// Existing items.
|
|
666
|
+
if (isPresent(event.added) && event.added.length > 0) {
|
|
667
|
+
event.added.forEach((itemIndex) => {
|
|
668
|
+
const dataItem = this.dataService.itemAt(itemIndex);
|
|
669
|
+
const newItem = (this.valuePrimitive && isPresent(dataItem) && isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] : dataItem;
|
|
670
|
+
if (newItem) {
|
|
671
|
+
this.value = [...this.value, newItem];
|
|
672
|
+
}
|
|
673
|
+
});
|
|
674
|
+
}
|
|
675
|
+
if (isPresent(event.removed) && event.removed.length > 0) {
|
|
676
|
+
event.removed.forEach((itemIndex) => {
|
|
677
|
+
const dataItem = this.dataService.itemAt(itemIndex);
|
|
678
|
+
const filter = (item) => getter(item, this.valueField) !== getter(dataItem, this.valueField);
|
|
679
|
+
this.value = this.value.filter(filter);
|
|
680
|
+
});
|
|
681
|
+
this.cdr.detectChanges();
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
else {
|
|
685
|
+
const isCustomItem = (isPresent(event.added) || isPresent(event.removed)) && (event.added === -1 || event.removed === -1);
|
|
686
|
+
if (isCustomItem) {
|
|
687
|
+
this.addCustomValue(this.text);
|
|
688
|
+
return; // The change is emited asynchronosly.
|
|
689
|
+
}
|
|
690
|
+
// Existing items.
|
|
691
|
+
if (isPresent(event.added)) {
|
|
692
|
+
const dataItem = this.dataService.itemAt(event.added);
|
|
693
|
+
const newItem = (this.valuePrimitive && isPresent(dataItem) && isPresent(dataItem[this.valueField])) ? dataItem[this.valueField] : dataItem;
|
|
694
|
+
this.value = [...this.value, newItem];
|
|
695
|
+
}
|
|
696
|
+
if (isPresent(event.removed)) {
|
|
697
|
+
const dataItem = this.dataService.itemAt(event.removed);
|
|
698
|
+
const filter = (item) => getter(item, this.valueField) !== getter(dataItem, this.valueField);
|
|
699
|
+
this.value = this.value.filter(filter);
|
|
700
|
+
this.selectionService.focused = event.removed;
|
|
701
|
+
this.cdr.detectChanges();
|
|
702
|
+
}
|
|
671
703
|
}
|
|
672
704
|
this.emitValueChange();
|
|
673
705
|
}
|
|
@@ -800,10 +832,11 @@ export class MultiSelectComponent {
|
|
|
800
832
|
* @hidden
|
|
801
833
|
*/
|
|
802
834
|
clearAll(event) {
|
|
803
|
-
event.stopImmediatePropagation();
|
|
804
|
-
event.preventDefault();
|
|
835
|
+
event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
|
|
836
|
+
event === null || event === void 0 ? void 0 : event.preventDefault();
|
|
805
837
|
this.focus();
|
|
806
838
|
this.clearFilter();
|
|
839
|
+
this.selectionService.lastClickedIndex = null;
|
|
807
840
|
const selected = this.selectionService.selected;
|
|
808
841
|
this.value = this.value.filter((_item, index) => this.disabledItemsService.isIndexDisabled(selected[index]));
|
|
809
842
|
this.emitValueChange();
|
|
@@ -952,7 +985,11 @@ export class MultiSelectComponent {
|
|
|
952
985
|
this.navigationService.delete.pipe(filter(isTagFocused)).subscribe(this.handleDelete.bind(this)),
|
|
953
986
|
this.navigationService.left.subscribe(this.direction === 'rtl' ? this.handleRightKey.bind(this) : this.handleLeftKey.bind(this)),
|
|
954
987
|
this.navigationService.right.subscribe(this.direction === 'rtl' ? this.handleLeftKey.bind(this) : this.handleRightKey.bind(this)),
|
|
955
|
-
this.navigationService.down.subscribe((event) => this.handleDownKey(event.index))
|
|
988
|
+
this.navigationService.down.subscribe((event) => this.handleDownKey(event.index)),
|
|
989
|
+
this.navigationService.selectprevious.pipe(filter(isOpen)).subscribe((event) => this.handleSelectUpDown(event)),
|
|
990
|
+
this.navigationService.selectnext.pipe(filter(isOpen)).subscribe((event) => this.handleSelectUpDown(event)),
|
|
991
|
+
this.navigationService.selectalltobeginning.pipe(filter(isOpen)).subscribe(() => this.handleSelectAllToBeginning()),
|
|
992
|
+
this.navigationService.selectalltoend.pipe(filter(isOpen)).subscribe(() => this.handleSelectAllToEnd())
|
|
956
993
|
].forEach(s => this.observableSubscriptions.add(s));
|
|
957
994
|
}
|
|
958
995
|
subscribeTouchEvents() {
|
|
@@ -1011,7 +1048,7 @@ export class MultiSelectComponent {
|
|
|
1011
1048
|
return;
|
|
1012
1049
|
}
|
|
1013
1050
|
if (isNumber(index)) {
|
|
1014
|
-
this.selectionService.
|
|
1051
|
+
this.selectionService.deselect(index);
|
|
1015
1052
|
this.selectionService.focused = index;
|
|
1016
1053
|
this.togglePopup(false);
|
|
1017
1054
|
}
|
|
@@ -1076,7 +1113,7 @@ export class MultiSelectComponent {
|
|
|
1076
1113
|
}
|
|
1077
1114
|
else {
|
|
1078
1115
|
if (!customItem && this.selectionService.isSelected(itemIndex)) {
|
|
1079
|
-
this.selectionService.
|
|
1116
|
+
this.selectionService.deselect(itemIndex);
|
|
1080
1117
|
this.selectionService.focused = itemIndex;
|
|
1081
1118
|
}
|
|
1082
1119
|
else {
|
|
@@ -1098,7 +1135,7 @@ export class MultiSelectComponent {
|
|
|
1098
1135
|
}
|
|
1099
1136
|
handleItemChange(event) {
|
|
1100
1137
|
this.change(event);
|
|
1101
|
-
if (this.autoClose) {
|
|
1138
|
+
if (this.autoClose && !event.preventClosingPopup) {
|
|
1102
1139
|
this.togglePopup(false);
|
|
1103
1140
|
}
|
|
1104
1141
|
if (this.autoClose || !this.filterable) {
|
|
@@ -1108,6 +1145,7 @@ export class MultiSelectComponent {
|
|
|
1108
1145
|
handleEnter(event) {
|
|
1109
1146
|
const service = this.selectionService;
|
|
1110
1147
|
const focusedIndex = this.selectionService.focused;
|
|
1148
|
+
this.selectionService.lastClickedIndex = focusedIndex;
|
|
1111
1149
|
if (this.isOpen) {
|
|
1112
1150
|
event.originalEvent.preventDefault();
|
|
1113
1151
|
}
|
|
@@ -1118,7 +1156,7 @@ export class MultiSelectComponent {
|
|
|
1118
1156
|
return; // Clear filter & close are done at customValueSubscription due to race conditions.
|
|
1119
1157
|
}
|
|
1120
1158
|
if (service.isSelected(focusedIndex)) {
|
|
1121
|
-
service.
|
|
1159
|
+
service.deselect(focusedIndex);
|
|
1122
1160
|
service.focused = focusedIndex;
|
|
1123
1161
|
}
|
|
1124
1162
|
else {
|
|
@@ -1141,6 +1179,85 @@ export class MultiSelectComponent {
|
|
|
1141
1179
|
handleHome() {
|
|
1142
1180
|
this.focusedTagIndex = 0;
|
|
1143
1181
|
}
|
|
1182
|
+
sortSelectionAscending() {
|
|
1183
|
+
return this.selectionService.selected.sort((a, b) => a - b);
|
|
1184
|
+
}
|
|
1185
|
+
handleSelectAll() {
|
|
1186
|
+
const selectedItemsCount = this.selectionService.selected.length;
|
|
1187
|
+
const dataItemsCount = this.dataService.data.length;
|
|
1188
|
+
const dataItemsWithoutHeadersCount = this.dataService.data.filter(i => !i.header).length;
|
|
1189
|
+
if ((!this.dataService.grouped && selectedItemsCount === dataItemsCount) ||
|
|
1190
|
+
(this.dataService.grouped && selectedItemsCount === dataItemsWithoutHeadersCount)) {
|
|
1191
|
+
this.clearAll();
|
|
1192
|
+
}
|
|
1193
|
+
else {
|
|
1194
|
+
this.selectionService.selectFromTo(0, dataItemsCount - 1);
|
|
1195
|
+
this.selectionService.emitMultipleAddedRemoved();
|
|
1196
|
+
}
|
|
1197
|
+
}
|
|
1198
|
+
handleSelectAllToBeginning() {
|
|
1199
|
+
const selectedItemsCount = this.selectionService.selected.length;
|
|
1200
|
+
const dataItemsCount = this.dataService.data.length;
|
|
1201
|
+
const focusedItem = this.selectionService.focused;
|
|
1202
|
+
const largestIndex = this.sortSelectionAscending()[selectedItemsCount - 1];
|
|
1203
|
+
if (selectedItemsCount !== dataItemsCount) {
|
|
1204
|
+
this.selectionService.unselectFromTo(largestIndex, focusedItem + 1);
|
|
1205
|
+
this.selectionService.selectFromTo(0, focusedItem);
|
|
1206
|
+
}
|
|
1207
|
+
this.nextTick(() => this.selectionService.focus(0));
|
|
1208
|
+
this.selectionService.emitMultipleAddedRemoved();
|
|
1209
|
+
}
|
|
1210
|
+
handleSelectAllToEnd() {
|
|
1211
|
+
const selectedItemsCount = this.selectionService.selected.length;
|
|
1212
|
+
const dataItemsCount = this.dataService.data.length;
|
|
1213
|
+
const focusedItem = this.selectionService.focused;
|
|
1214
|
+
if (selectedItemsCount !== dataItemsCount) {
|
|
1215
|
+
this.selectionService.unselectFromTo(focusedItem - 1, 0);
|
|
1216
|
+
this.selectionService.selectFromTo(focusedItem, dataItemsCount - 1);
|
|
1217
|
+
}
|
|
1218
|
+
if (this.dataService.grouped) {
|
|
1219
|
+
const lastItemIndex = this.dataService.groupIndices[this.dataService.groupIndices.length - 1] - 1;
|
|
1220
|
+
this.nextTick(() => this.selectionService.focus(lastItemIndex));
|
|
1221
|
+
}
|
|
1222
|
+
else {
|
|
1223
|
+
this.nextTick(() => this.selectionService.focus(dataItemsCount - 1));
|
|
1224
|
+
}
|
|
1225
|
+
this.selectionService.emitMultipleAddedRemoved();
|
|
1226
|
+
}
|
|
1227
|
+
handleSelectUpDown(event) {
|
|
1228
|
+
const focusedIndex = this.selectionService.focused;
|
|
1229
|
+
if (!isPresent(focusedIndex)) {
|
|
1230
|
+
return;
|
|
1231
|
+
}
|
|
1232
|
+
let indexToSelect;
|
|
1233
|
+
if (event.originalEvent.key === 'ArrowUp') {
|
|
1234
|
+
indexToSelect = focusedIndex > 0 ? focusedIndex - 1 : focusedIndex;
|
|
1235
|
+
}
|
|
1236
|
+
else {
|
|
1237
|
+
indexToSelect = focusedIndex < this.dataService.data.length - 1 ? focusedIndex + 1 : focusedIndex;
|
|
1238
|
+
}
|
|
1239
|
+
if (!isPresent(this.selectionService.lastClickedIndex)) {
|
|
1240
|
+
this.selectionService.lastClickedIndex = focusedIndex;
|
|
1241
|
+
}
|
|
1242
|
+
this.selectRangeFromTo(indexToSelect);
|
|
1243
|
+
}
|
|
1244
|
+
/**
|
|
1245
|
+
* Selects all items between the focused item and the last clicked item (index). Also removes all other selected items.
|
|
1246
|
+
*/
|
|
1247
|
+
selectRangeFromTo(indexToSelect) {
|
|
1248
|
+
const lastClickedIndex = this.selectionService.lastClickedIndex;
|
|
1249
|
+
if (lastClickedIndex > indexToSelect) {
|
|
1250
|
+
this.selectionService.unselectNotNeededIndices(indexToSelect, lastClickedIndex, this.dataService.data.length);
|
|
1251
|
+
this.selectionService.selectFromTo(indexToSelect, this.selectionService.lastClickedIndex);
|
|
1252
|
+
this.selectionService.emitMultipleAddedRemoved();
|
|
1253
|
+
}
|
|
1254
|
+
else {
|
|
1255
|
+
this.selectionService.unselectNotNeededIndices(lastClickedIndex, indexToSelect, this.dataService.data.length);
|
|
1256
|
+
this.selectionService.selectFromTo(lastClickedIndex, indexToSelect);
|
|
1257
|
+
this.selectionService.emitMultipleAddedRemoved();
|
|
1258
|
+
}
|
|
1259
|
+
this.nextTick(() => this.selectionService.focus(indexToSelect));
|
|
1260
|
+
}
|
|
1144
1261
|
handleUp(index) {
|
|
1145
1262
|
this.selectionService.focused = index;
|
|
1146
1263
|
}
|
|
@@ -1339,7 +1456,7 @@ export class MultiSelectComponent {
|
|
|
1339
1456
|
}
|
|
1340
1457
|
}
|
|
1341
1458
|
MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1342
|
-
MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
|
|
1459
|
+
MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)", "mousedown": "hostMousedown($event)" }, properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
|
|
1343
1460
|
MULTISELECT_VALUE_ACCESSOR,
|
|
1344
1461
|
DataService,
|
|
1345
1462
|
SelectionService,
|
|
@@ -1778,6 +1895,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
1778
1895
|
}], isLoading: [{
|
|
1779
1896
|
type: HostBinding,
|
|
1780
1897
|
args: ['class.k-loading']
|
|
1898
|
+
}], handleKeyboardEvent: [{
|
|
1899
|
+
type: HostListener,
|
|
1900
|
+
args: ['document:keydown', ['$event']]
|
|
1781
1901
|
}], hostMousedown: [{
|
|
1782
1902
|
type: HostListener,
|
|
1783
1903
|
args: ['mousedown', ['$event']]
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-dropdowns',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1662995282,
|
|
13
13
|
version: '',
|
|
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
|
};
|