@progress/kendo-angular-listbox 21.0.0-develop.9 → 21.0.1-develop.1
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/codemods/template-transformer/index.js +93 -0
- package/codemods/utils.js +711 -0
- package/codemods/v21/listbox-actionclick.js +52 -0
- package/codemods/v21/listbox-selectedindex.js +125 -0
- package/codemods/v21/listbox-toolbar.js +14 -0
- package/data-binding.directive.d.ts +7 -5
- package/esm2022/data-binding.directive.mjs +128 -33
- package/esm2022/item-selectable.directive.mjs +6 -1
- package/esm2022/keyboard-navigation.service.mjs +73 -24
- package/esm2022/listbox.component.mjs +139 -51
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/selection-mode.mjs +5 -0
- package/esm2022/selection.service.mjs +127 -6
- package/fesm2022/progress-kendo-angular-listbox.mjs +473 -116
- package/index.d.ts +0 -1
- package/keyboard-navigation.service.d.ts +17 -3
- package/listbox.component.d.ts +24 -8
- package/package.json +33 -7
- package/schematics/ngAdd/index.js +4 -4
- package/selection-mode.d.ts +12 -0
- package/selection.service.d.ts +18 -6
- package/toolbar.d.ts +1 -10
package/index.d.ts
CHANGED
|
@@ -10,7 +10,6 @@ export { ItemSelectableDirective } from './item-selectable.directive';
|
|
|
10
10
|
export { ListBoxSize } from './size';
|
|
11
11
|
export { ActionName } from './toolbar';
|
|
12
12
|
export { ListBoxToolbarPosition } from './toolbar';
|
|
13
|
-
export { Toolbar } from './toolbar';
|
|
14
13
|
export { ListBoxToolbarConfig } from './toolbar';
|
|
15
14
|
export { ListBoxSelectionEvent } from './selection.service';
|
|
16
15
|
export { CustomMessagesComponent } from './localization/custom-messages.component';
|
|
@@ -6,8 +6,17 @@ 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";
|
|
10
9
|
import * as i0 from "@angular/core";
|
|
10
|
+
/**
|
|
11
|
+
* @hidden
|
|
12
|
+
* Internal event for keyboard navigation selection changes
|
|
13
|
+
*/
|
|
14
|
+
export interface KeyboardSelectionEvent {
|
|
15
|
+
index: number;
|
|
16
|
+
prevIndex?: number;
|
|
17
|
+
ctrlKey?: boolean;
|
|
18
|
+
shiftKey?: boolean;
|
|
19
|
+
}
|
|
11
20
|
/**
|
|
12
21
|
* @hidden
|
|
13
22
|
*/
|
|
@@ -21,9 +30,13 @@ export declare class KeyboardNavigationService {
|
|
|
21
30
|
onMoveSelectedItem: EventEmitter<string>;
|
|
22
31
|
onTransferAllEvent: EventEmitter<ActionName>;
|
|
23
32
|
onShiftSelectedItem: EventEmitter<ActionName>;
|
|
24
|
-
onSelectionChange: EventEmitter<
|
|
33
|
+
onSelectionChange: EventEmitter<KeyboardSelectionEvent>;
|
|
34
|
+
onSelectAll: EventEmitter<void>;
|
|
35
|
+
onSelectToEnd: EventEmitter<{
|
|
36
|
+
direction: 'home' | 'end';
|
|
37
|
+
}>;
|
|
25
38
|
constructor(renderer: Renderer2, zone: NgZone);
|
|
26
|
-
onKeyDown(event: any, toolsRef: Array<Button>, toolbar: Tool[], childListbox: ListBoxComponent, parentListbox: ListBoxComponent, listboxItems: Array<ElementRef
|
|
39
|
+
onKeyDown(event: any, toolsRef: Array<Button>, toolbar: Tool[], childListbox: ListBoxComponent, parentListbox: ListBoxComponent, listboxItems: Array<ElementRef>, currentListbox: ListBoxComponent): void;
|
|
27
40
|
changeTabindex(previousItem: HTMLElement, currentItem: HTMLElement, shouldBlur?: boolean): void;
|
|
28
41
|
private handleToolbarArrows;
|
|
29
42
|
private onSpaceKey;
|
|
@@ -34,6 +47,7 @@ export declare class KeyboardNavigationService {
|
|
|
34
47
|
private transferAllItems;
|
|
35
48
|
private transferItem;
|
|
36
49
|
private changeFocusedItem;
|
|
50
|
+
private onShiftArrow;
|
|
37
51
|
private onArrowDown;
|
|
38
52
|
private onArrowUp;
|
|
39
53
|
static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardNavigationService, never>;
|
package/listbox.component.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ import { ItemTemplateDirective } from './item-template.directive';
|
|
|
8
8
|
import { Direction } from './util';
|
|
9
9
|
import { ListBoxSize } from './size';
|
|
10
10
|
import { ActionName, ListBoxToolbarConfig, Tool } from './toolbar';
|
|
11
|
+
import { SelectionMode } from './selection-mode';
|
|
11
12
|
import { Button } from '@progress/kendo-angular-buttons';
|
|
12
13
|
import { KeyboardNavigationService } from './keyboard-navigation.service';
|
|
13
14
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
@@ -48,7 +49,7 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
48
49
|
private renderer;
|
|
49
50
|
private zone;
|
|
50
51
|
private localization;
|
|
51
|
-
private
|
|
52
|
+
private cdr;
|
|
52
53
|
/**
|
|
53
54
|
* @hidden
|
|
54
55
|
*/
|
|
@@ -81,6 +82,13 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
81
82
|
* Specifies the field of the data item that provides the text content of the nodes.
|
|
82
83
|
*/
|
|
83
84
|
textField: string;
|
|
85
|
+
/**
|
|
86
|
+
* Sets the selection mode of the ListBox.
|
|
87
|
+
*
|
|
88
|
+
* @default 'single'
|
|
89
|
+
*/
|
|
90
|
+
set selectable(mode: SelectionMode);
|
|
91
|
+
get selectable(): SelectionMode;
|
|
84
92
|
/**
|
|
85
93
|
* Specifies the data that the ListBox displays.
|
|
86
94
|
*
|
|
@@ -96,8 +104,10 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
96
104
|
/**
|
|
97
105
|
* Configures the toolbar of the ListBox.
|
|
98
106
|
* Specifies whether to display a toolbar and which tools and position to use.
|
|
107
|
+
*
|
|
108
|
+
* @default false
|
|
99
109
|
*/
|
|
100
|
-
set toolbar(config: ListBoxToolbarConfig);
|
|
110
|
+
set toolbar(config: boolean | ListBoxToolbarConfig);
|
|
101
111
|
/**
|
|
102
112
|
* Specifies the value of the `aria-label` attribute of the Listbox element.
|
|
103
113
|
*
|
|
@@ -122,7 +132,7 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
122
132
|
/**
|
|
123
133
|
* Fires when you click a ListBox item.
|
|
124
134
|
*/
|
|
125
|
-
|
|
135
|
+
action: EventEmitter<ActionName>;
|
|
126
136
|
/**
|
|
127
137
|
* @hidden
|
|
128
138
|
*/
|
|
@@ -167,7 +177,8 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
167
177
|
private _size;
|
|
168
178
|
private subs;
|
|
169
179
|
private shouldFireFocusIn;
|
|
170
|
-
|
|
180
|
+
private _selectable;
|
|
181
|
+
constructor(keyboardNavigationService: KeyboardNavigationService, selectionService: ListBoxSelectionService, hostElement: ElementRef, renderer: Renderer2, zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef);
|
|
171
182
|
ngOnInit(): void;
|
|
172
183
|
ngAfterViewInit(): void;
|
|
173
184
|
ngOnDestroy(): void;
|
|
@@ -175,8 +186,14 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
175
186
|
* @hidden
|
|
176
187
|
*/
|
|
177
188
|
performAction(actionName: ActionName): void;
|
|
189
|
+
/**
|
|
190
|
+
* Selects multiple ListBox nodes programmatically.
|
|
191
|
+
*/
|
|
192
|
+
select(indices: number[]): void;
|
|
178
193
|
/**
|
|
179
194
|
* Selects a ListBox node programmatically.
|
|
195
|
+
*
|
|
196
|
+
* @hidden
|
|
180
197
|
*/
|
|
181
198
|
selectItem(index: number): void;
|
|
182
199
|
/**
|
|
@@ -184,9 +201,9 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
184
201
|
*/
|
|
185
202
|
clearSelection(): void;
|
|
186
203
|
/**
|
|
187
|
-
* Gets the
|
|
204
|
+
* Gets the indexes of the currently selected items in the ListBox.
|
|
188
205
|
*/
|
|
189
|
-
get
|
|
206
|
+
get selectedIndices(): number[];
|
|
190
207
|
/**
|
|
191
208
|
* @hidden
|
|
192
209
|
*/
|
|
@@ -203,7 +220,6 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
203
220
|
* @hidden
|
|
204
221
|
*/
|
|
205
222
|
toolSVGIcon(icon: SVGIcon): SVGIcon;
|
|
206
|
-
private onClickEvent;
|
|
207
223
|
private initSubscriptions;
|
|
208
224
|
private onFocusIn;
|
|
209
225
|
private setIds;
|
|
@@ -211,5 +227,5 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
211
227
|
private setToolbarClass;
|
|
212
228
|
private setSizingClass;
|
|
213
229
|
static ɵfac: i0.ɵɵFactoryDeclaration<ListBoxComponent, never>;
|
|
214
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ListBoxComponent, "kendo-listbox", never, { "textField": { "alias": "textField"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "toolbar": { "alias": "toolbar"; "required": false; }; "listboxLabel": { "alias": "listboxLabel"; "required": false; }; "listboxToolbarLabel": { "alias": "listboxToolbarLabel"; "required": false; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "
|
|
230
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ListBoxComponent, "kendo-listbox", never, { "textField": { "alias": "textField"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "toolbar": { "alias": "toolbar"; "required": false; }; "listboxLabel": { "alias": "listboxLabel"; "required": false; }; "listboxToolbarLabel": { "alias": "listboxToolbarLabel"; "required": false; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "action": "action"; "getChildListbox": "getChildListbox"; }, ["itemTemplate"], never, true, never>;
|
|
215
231
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-listbox",
|
|
3
|
-
"version": "21.0.
|
|
3
|
+
"version": "21.0.1-develop.1",
|
|
4
4
|
"description": "Kendo UI for Angular ListBox",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -16,10 +16,35 @@
|
|
|
16
16
|
],
|
|
17
17
|
"@progress": {
|
|
18
18
|
"friendlyName": "ListBox",
|
|
19
|
+
"migrations": {
|
|
20
|
+
"options": {
|
|
21
|
+
"parser": "tsx",
|
|
22
|
+
"pattern": "*.{ts,html}"
|
|
23
|
+
},
|
|
24
|
+
"codemods": {
|
|
25
|
+
"19": [
|
|
26
|
+
{
|
|
27
|
+
"description": "Migrate selectedIndex to selectedIndices for ListBox component.",
|
|
28
|
+
"file": "codemods/v21/listbox-selectedindex.js",
|
|
29
|
+
"prompt": "true"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"description": "Migrate actionClick to action for ListBox component.",
|
|
33
|
+
"file": "codemods/v21/listbox-actionclick.js",
|
|
34
|
+
"prompt": "true"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"description": "Migrate Toolbar interface name to ListBoxToolbarConfig.",
|
|
38
|
+
"file": "codemods/v21/listbox-toolbar.js",
|
|
39
|
+
"prompt": "true"
|
|
40
|
+
}
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
},
|
|
19
44
|
"package": {
|
|
20
45
|
"productName": "Kendo UI for Angular",
|
|
21
46
|
"productCode": "KENDOUIANGULAR",
|
|
22
|
-
"publishDate":
|
|
47
|
+
"publishDate": 1762953613,
|
|
23
48
|
"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"
|
|
24
49
|
}
|
|
25
50
|
},
|
|
@@ -29,15 +54,16 @@
|
|
|
29
54
|
"@angular/core": "18 - 20",
|
|
30
55
|
"@angular/platform-browser": "18 - 20",
|
|
31
56
|
"@progress/kendo-licensing": "^1.7.0",
|
|
32
|
-
"@progress/kendo-angular-buttons": "21.0.
|
|
33
|
-
"@progress/kendo-angular-common": "21.0.
|
|
34
|
-
"@progress/kendo-angular-popup": "21.0.
|
|
57
|
+
"@progress/kendo-angular-buttons": "21.0.1-develop.1",
|
|
58
|
+
"@progress/kendo-angular-common": "21.0.1-develop.1",
|
|
59
|
+
"@progress/kendo-angular-popup": "21.0.1-develop.1",
|
|
35
60
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
36
61
|
},
|
|
37
62
|
"dependencies": {
|
|
38
63
|
"tslib": "^2.3.1",
|
|
39
|
-
"@progress/kendo-angular-schematics": "21.0.
|
|
40
|
-
"@progress/kendo-common": "^1.0.1"
|
|
64
|
+
"@progress/kendo-angular-schematics": "21.0.1-develop.1",
|
|
65
|
+
"@progress/kendo-common": "^1.0.1",
|
|
66
|
+
"node-html-parser": "^7.0.1"
|
|
41
67
|
},
|
|
42
68
|
"schematics": "./schematics/collection.json",
|
|
43
69
|
"module": "fesm2022/progress-kendo-angular-listbox.mjs",
|
|
@@ -7,11 +7,11 @@ function default_1(options) {
|
|
|
7
7
|
// Additional dependencies to install.
|
|
8
8
|
// See https://github.com/telerik/kendo-schematics/issues/28
|
|
9
9
|
peerDependencies: {
|
|
10
|
-
'@progress/kendo-angular-buttons': '21.0.
|
|
11
|
-
'@progress/kendo-angular-common': '21.0.
|
|
12
|
-
'@progress/kendo-angular-l10n': '21.0.
|
|
10
|
+
'@progress/kendo-angular-buttons': '21.0.1-develop.1',
|
|
11
|
+
'@progress/kendo-angular-common': '21.0.1-develop.1',
|
|
12
|
+
'@progress/kendo-angular-l10n': '21.0.1-develop.1',
|
|
13
13
|
// Peer of kendo-angular-buttons
|
|
14
|
-
'@progress/kendo-angular-popup': '21.0.
|
|
14
|
+
'@progress/kendo-angular-popup': '21.0.1-develop.1'
|
|
15
15
|
} });
|
|
16
16
|
return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
|
|
17
17
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Represents the possible selection options of the ListBox.
|
|
7
|
+
*
|
|
8
|
+
* The possible values are:
|
|
9
|
+
* - `'single'` - allows the selection of a single item.
|
|
10
|
+
* - `'multiple'` - allows the selection of multiple items.
|
|
11
|
+
*/
|
|
12
|
+
export type SelectionMode = 'single' | 'multiple';
|
package/selection.service.d.ts
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
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 { SelectionMode } from "./selection-mode";
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
/**
|
|
8
9
|
* Defines the event that fires when you make a new selection in the ListBox component.
|
|
@@ -10,21 +11,32 @@ import * as i0 from "@angular/core";
|
|
|
10
11
|
*/
|
|
11
12
|
export interface ListBoxSelectionEvent {
|
|
12
13
|
/**
|
|
13
|
-
* The
|
|
14
|
+
* The indices of items that were selected with the last selection operation.
|
|
15
|
+
* Returns `null` if no items were selected.
|
|
14
16
|
*/
|
|
15
|
-
|
|
17
|
+
selectedIndices: number[] | null;
|
|
16
18
|
/**
|
|
17
|
-
* The
|
|
19
|
+
* The indices of items that were deselected with the last selection operation.
|
|
20
|
+
* Returns `null` if no items were deselected.
|
|
18
21
|
*/
|
|
19
|
-
|
|
22
|
+
deselectedIndices: number[] | null;
|
|
20
23
|
}
|
|
21
24
|
/**
|
|
22
25
|
* @hidden
|
|
23
26
|
*/
|
|
24
27
|
export declare class ListBoxSelectionService {
|
|
28
|
+
selectedIndices: number[];
|
|
29
|
+
selectionMode: SelectionMode;
|
|
30
|
+
lastSelectedOrUnselectedIndex: number | null;
|
|
31
|
+
rangeSelectionTargetIndex: number | null;
|
|
32
|
+
rangeSelectionAnchorIndex: number | null;
|
|
25
33
|
onSelect: EventEmitter<any>;
|
|
26
|
-
|
|
27
|
-
|
|
34
|
+
select(index: number, ctrlKey?: boolean, shiftKey?: boolean): void;
|
|
35
|
+
selectRange(targetIndex: number): void;
|
|
36
|
+
setSelectedIndices(indices: number[]): void;
|
|
37
|
+
addToSelectedIndices(index: number): void;
|
|
38
|
+
selectAll(totalItems: number): void;
|
|
39
|
+
areAllSelected(totalItems: number): boolean;
|
|
28
40
|
isSelected(index: number): boolean;
|
|
29
41
|
clearSelection(): void;
|
|
30
42
|
static ɵfac: i0.ɵɵFactoryDeclaration<ListBoxSelectionService, never>;
|
package/toolbar.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ export type ListBoxToolbarPosition = 'left' | 'right' | 'top' | 'bottom';
|
|
|
14
14
|
/**
|
|
15
15
|
* Defines the possible tool and position settings that the ListBox can accept for its built-in toolbar.
|
|
16
16
|
*/
|
|
17
|
-
export interface
|
|
17
|
+
export interface ListBoxToolbarConfig {
|
|
18
18
|
/**
|
|
19
19
|
* Specifies the set of tools to display in the toolbar.
|
|
20
20
|
* When you omit this setting, all tools are included.
|
|
@@ -25,15 +25,6 @@ export interface Toolbar {
|
|
|
25
25
|
*/
|
|
26
26
|
position?: ListBoxToolbarPosition;
|
|
27
27
|
}
|
|
28
|
-
/**
|
|
29
|
-
* Defines the possible values that the ListBox can accept for its built-in toolbar.
|
|
30
|
-
*
|
|
31
|
-
* - Use `false` to hide the toolbar.
|
|
32
|
-
* - Omit the setting or use `true` to show the default settings, which are the full set of possible tools and position `"right"`.
|
|
33
|
-
* - Use a config object of type [`Toolbar`]({% slug api_listbox_toolbar %}) to specify tools or position. When you specify only [`tools`]({% slug api_listbox_toolbar %}#toc-tools) or [`position`]({% slug api_listbox_toolbar %}#toc-position), the other property will use its default value.
|
|
34
|
-
*
|
|
35
|
-
*/
|
|
36
|
-
export type ListBoxToolbarConfig = boolean | Toolbar;
|
|
37
28
|
/**
|
|
38
29
|
* @hidden
|
|
39
30
|
*/
|