@progress/kendo-angular-listbox 19.1.2-develop.2 → 19.1.2-develop.3
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/data-binding.directive.d.ts +19 -3
- package/esm2022/data-binding.directive.mjs +19 -3
- package/esm2022/item-template.directive.mjs +15 -13
- package/esm2022/listbox.component.mjs +43 -17
- package/esm2022/localization/custom-messages.component.mjs +15 -1
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-listbox.mjs +94 -36
- package/item-template.directive.d.ts +15 -13
- package/listbox.component.d.ts +43 -17
- package/localization/custom-messages.component.d.ts +15 -1
- package/package.json +6 -6
- package/schematics/ngAdd/index.js +4 -4
- package/selection.service.d.ts +8 -1
- package/size.d.ts +2 -6
- package/toolbar.d.ts +9 -8
|
@@ -6,13 +6,29 @@ import { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
|
|
|
6
6
|
import { ListBoxComponent } from './listbox.component';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Represents the data-binding directive for the Kendo UI ListBox for Angular.
|
|
10
|
+
* Manages the functionality of the ListBox tools out of the box and modifies the provided data accordingly.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```typescript
|
|
14
|
+
* @Component({
|
|
15
|
+
* selector: 'my-app',
|
|
16
|
+
* template: `
|
|
17
|
+
* <kendo-listbox
|
|
18
|
+
* kendoListBoxDataBinding
|
|
19
|
+
* [connectedWith]="targetListBox"
|
|
20
|
+
* [data]="sourceData">
|
|
21
|
+
* </kendo-listbox>
|
|
22
|
+
* `
|
|
23
|
+
* })
|
|
24
|
+
* export class AppComponent { }
|
|
25
|
+
* ```
|
|
10
26
|
*/
|
|
11
27
|
export declare class DataBindingDirective implements OnChanges, OnDestroy {
|
|
12
28
|
private listbox;
|
|
13
29
|
/**
|
|
14
|
-
* Specifies the ListBoxComponent instance with which the current ListBox
|
|
15
|
-
* When two listboxes
|
|
30
|
+
* Specifies the `ListBoxComponent` instance with which the current ListBox connects.
|
|
31
|
+
* When you link two listboxes through this input, you can transfer items between them.
|
|
16
32
|
*/
|
|
17
33
|
connectedWith: ListBoxComponent;
|
|
18
34
|
private actionClickSub;
|
|
@@ -10,13 +10,29 @@ import { isPresent } from './util';
|
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
11
|
import * as i1 from "./listbox.component";
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* Represents the data-binding directive for the Kendo UI ListBox for Angular.
|
|
14
|
+
* Manages the functionality of the ListBox tools out of the box and modifies the provided data accordingly.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```typescript
|
|
18
|
+
* @Component({
|
|
19
|
+
* selector: 'my-app',
|
|
20
|
+
* template: `
|
|
21
|
+
* <kendo-listbox
|
|
22
|
+
* kendoListBoxDataBinding
|
|
23
|
+
* [connectedWith]="targetListBox"
|
|
24
|
+
* [data]="sourceData">
|
|
25
|
+
* </kendo-listbox>
|
|
26
|
+
* `
|
|
27
|
+
* })
|
|
28
|
+
* export class AppComponent { }
|
|
29
|
+
* ```
|
|
14
30
|
*/
|
|
15
31
|
export class DataBindingDirective {
|
|
16
32
|
listbox;
|
|
17
33
|
/**
|
|
18
|
-
* Specifies the ListBoxComponent instance with which the current ListBox
|
|
19
|
-
* When two listboxes
|
|
34
|
+
* Specifies the `ListBoxComponent` instance with which the current ListBox connects.
|
|
35
|
+
* When you link two listboxes through this input, you can transfer items between them.
|
|
20
36
|
*/
|
|
21
37
|
connectedWith;
|
|
22
38
|
actionClickSub = new Subscription();
|
|
@@ -5,22 +5,24 @@
|
|
|
5
5
|
import { Directive, TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
8
|
+
* Allows you to customize the rendering of each item in the Kendo UI ListBox for Angular.
|
|
9
|
+
*
|
|
10
|
+
* Place an `<ng-template>` with the `kendoListBoxItemTemplate` directive inside your `<kendo-listbox>` component.
|
|
11
|
+
* The template context exposes the current data item as `let-dataItem`.
|
|
11
12
|
*
|
|
12
13
|
* @example
|
|
13
|
-
* ```
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
14
|
+
* ```typescript
|
|
15
|
+
* @Component({
|
|
16
|
+
* selector: 'my-app',
|
|
17
|
+
* template: `
|
|
18
|
+
* <kendo-listbox [data]="listBoxItems">
|
|
19
|
+
* <ng-template kendoListBoxItemTemplate let-dataItem>
|
|
20
|
+
* <span>{{ dataItem }} item</span>
|
|
21
|
+
* </ng-template>
|
|
22
|
+
* </kendo-listbox>
|
|
23
|
+
* `
|
|
23
24
|
* })
|
|
25
|
+
* export class AppComponent { }
|
|
24
26
|
* ```
|
|
25
27
|
*/
|
|
26
28
|
export class ItemTemplateDirective {
|
|
@@ -28,7 +28,29 @@ import * as i3 from "@progress/kendo-angular-l10n";
|
|
|
28
28
|
const DEFAULT_SIZE = 'medium';
|
|
29
29
|
let idx = 0;
|
|
30
30
|
/**
|
|
31
|
-
* Represents the
|
|
31
|
+
* Represents the Kendo UI ListBox component for Angular.
|
|
32
|
+
* Provides a list of items from which you can select and transfer data between connected ListBoxes
|
|
33
|
+
* ([see overview]({% slug overview_listbox %})).
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```typescript
|
|
37
|
+
* @Component({
|
|
38
|
+
* selector: 'my-app',
|
|
39
|
+
* template: `
|
|
40
|
+
* <kendo-listbox
|
|
41
|
+
* [data]="items"
|
|
42
|
+
* textField="name"
|
|
43
|
+
* [toolbar]="true">
|
|
44
|
+
* </kendo-listbox>
|
|
45
|
+
* `
|
|
46
|
+
* })
|
|
47
|
+
* export class AppComponent {
|
|
48
|
+
* items = [
|
|
49
|
+
* { name: 'Item 1' },
|
|
50
|
+
* { name: 'Item 2' }
|
|
51
|
+
* ];
|
|
52
|
+
* }
|
|
53
|
+
* ```
|
|
32
54
|
*/
|
|
33
55
|
export class ListBoxComponent {
|
|
34
56
|
keyboardNavigationService;
|
|
@@ -67,20 +89,18 @@ export class ListBoxComponent {
|
|
|
67
89
|
*/
|
|
68
90
|
tools;
|
|
69
91
|
/**
|
|
70
|
-
*
|
|
92
|
+
* Specifies the field of the data item that provides the text content of the nodes.
|
|
71
93
|
*/
|
|
72
94
|
textField;
|
|
73
95
|
/**
|
|
74
|
-
*
|
|
96
|
+
* Specifies the data that the ListBox displays.
|
|
97
|
+
*
|
|
98
|
+
* @default []
|
|
75
99
|
*/
|
|
76
100
|
data = [];
|
|
77
101
|
/**
|
|
78
|
-
*
|
|
102
|
+
* Specifies the size of the component.
|
|
79
103
|
*
|
|
80
|
-
* The possible values are:
|
|
81
|
-
* - `'small'`
|
|
82
|
-
* - `'medium'` (default)
|
|
83
|
-
* - `'large'`
|
|
84
104
|
*/
|
|
85
105
|
set size(size) {
|
|
86
106
|
const newSize = size ? size : DEFAULT_SIZE;
|
|
@@ -92,7 +112,8 @@ export class ListBoxComponent {
|
|
|
92
112
|
return this._size;
|
|
93
113
|
}
|
|
94
114
|
/**
|
|
95
|
-
*
|
|
115
|
+
* Configures the toolbar of the ListBox.
|
|
116
|
+
* Specifies whether to display a toolbar and which tools and position to use.
|
|
96
117
|
*/
|
|
97
118
|
set toolbar(config) {
|
|
98
119
|
let position = DEFAULT_TOOLBAR_POSITION;
|
|
@@ -108,23 +129,28 @@ export class ListBoxComponent {
|
|
|
108
129
|
this.setToolbarClass(position);
|
|
109
130
|
}
|
|
110
131
|
/**
|
|
111
|
-
*
|
|
132
|
+
* Specifies the value of the `aria-label` attribute of the Listbox element.
|
|
133
|
+
*
|
|
134
|
+
* @default 'Listbox'
|
|
112
135
|
*/
|
|
113
136
|
listboxLabel = 'Listbox';
|
|
114
137
|
/**
|
|
115
|
-
*
|
|
138
|
+
* Specifies the value of the `aria-label` attribute of the Listbox toolbar element.
|
|
139
|
+
*
|
|
140
|
+
* @default 'Toolbar'
|
|
116
141
|
*/
|
|
117
142
|
listboxToolbarLabel = 'Toolbar';
|
|
118
143
|
/**
|
|
119
|
-
*
|
|
144
|
+
* Specifies a function that determines if a specific item is disabled.
|
|
120
145
|
*/
|
|
121
146
|
itemDisabled = defaultItemDisabled;
|
|
122
147
|
/**
|
|
123
|
-
* Fires when
|
|
148
|
+
* Fires when you select a different ListBox item.
|
|
149
|
+
* Also fires when you move a node, because moving changes its index.
|
|
124
150
|
*/
|
|
125
151
|
selectionChange = new EventEmitter();
|
|
126
152
|
/**
|
|
127
|
-
* Fires when
|
|
153
|
+
* Fires when you click a ListBox item.
|
|
128
154
|
*/
|
|
129
155
|
actionClick = new EventEmitter();
|
|
130
156
|
/**
|
|
@@ -239,19 +265,19 @@ export class ListBoxComponent {
|
|
|
239
265
|
}
|
|
240
266
|
}
|
|
241
267
|
/**
|
|
242
|
-
*
|
|
268
|
+
* Selects a ListBox node programmatically.
|
|
243
269
|
*/
|
|
244
270
|
selectItem(index) {
|
|
245
271
|
this.selectionService.selectedIndex = index;
|
|
246
272
|
}
|
|
247
273
|
/**
|
|
248
|
-
*
|
|
274
|
+
* Clears the ListBox selection programmatically.
|
|
249
275
|
*/
|
|
250
276
|
clearSelection() {
|
|
251
277
|
this.selectionService.clearSelection();
|
|
252
278
|
}
|
|
253
279
|
/**
|
|
254
|
-
*
|
|
280
|
+
* Gets the index of the currently selected item in the ListBox.
|
|
255
281
|
*/
|
|
256
282
|
get selectedIndex() {
|
|
257
283
|
return this.selectionService.selectedIndex;
|
|
@@ -8,8 +8,22 @@ import { Messages } from './messages';
|
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Provides custom messages that override the default component messages
|
|
12
12
|
* ([see example](slug:globalization_listbox#toc-custom-messages)).
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```typescript
|
|
16
|
+
* @Component({
|
|
17
|
+
* selector: 'my-app',
|
|
18
|
+
* template: `
|
|
19
|
+
* <kendo-listbox-messages
|
|
20
|
+
* transferAllTo="Transfer All To"
|
|
21
|
+
* transferAllFrom="Transfer All From">
|
|
22
|
+
* </kendo-listbox-messages>
|
|
23
|
+
* `
|
|
24
|
+
* })
|
|
25
|
+
* export class AppComponent { }
|
|
26
|
+
* ```
|
|
13
27
|
*/
|
|
14
28
|
export class CustomMessagesComponent extends Messages {
|
|
15
29
|
service;
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '19.1.2-develop.
|
|
13
|
+
publishDate: 1750152819,
|
|
14
|
+
version: '19.1.2-develop.3',
|
|
15
15
|
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'
|
|
16
16
|
};
|
|
@@ -25,8 +25,8 @@ const packageMetadata = {
|
|
|
25
25
|
productName: 'Kendo UI for Angular',
|
|
26
26
|
productCode: 'KENDOUIANGULAR',
|
|
27
27
|
productCodes: ['KENDOUIANGULAR'],
|
|
28
|
-
publishDate:
|
|
29
|
-
version: '19.1.2-develop.
|
|
28
|
+
publishDate: 1750152819,
|
|
29
|
+
version: '19.1.2-develop.3',
|
|
30
30
|
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'
|
|
31
31
|
};
|
|
32
32
|
|
|
@@ -54,22 +54,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
54
54
|
}] });
|
|
55
55
|
|
|
56
56
|
/**
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
57
|
+
* Allows you to customize the rendering of each item in the Kendo UI ListBox for Angular.
|
|
58
|
+
*
|
|
59
|
+
* Place an `<ng-template>` with the `kendoListBoxItemTemplate` directive inside your `<kendo-listbox>` component.
|
|
60
|
+
* The template context exposes the current data item as `let-dataItem`.
|
|
60
61
|
*
|
|
61
62
|
* @example
|
|
62
|
-
* ```
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
63
|
+
* ```typescript
|
|
64
|
+
* @Component({
|
|
65
|
+
* selector: 'my-app',
|
|
66
|
+
* template: `
|
|
67
|
+
* <kendo-listbox [data]="listBoxItems">
|
|
68
|
+
* <ng-template kendoListBoxItemTemplate let-dataItem>
|
|
69
|
+
* <span>{{ dataItem }} item</span>
|
|
70
|
+
* </ng-template>
|
|
71
|
+
* </kendo-listbox>
|
|
72
|
+
* `
|
|
72
73
|
* })
|
|
74
|
+
* export class AppComponent { }
|
|
73
75
|
* ```
|
|
74
76
|
*/
|
|
75
77
|
class ItemTemplateDirective {
|
|
@@ -601,7 +603,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
601
603
|
const DEFAULT_SIZE = 'medium';
|
|
602
604
|
let idx = 0;
|
|
603
605
|
/**
|
|
604
|
-
* Represents the
|
|
606
|
+
* Represents the Kendo UI ListBox component for Angular.
|
|
607
|
+
* Provides a list of items from which you can select and transfer data between connected ListBoxes
|
|
608
|
+
* ([see overview]({% slug overview_listbox %})).
|
|
609
|
+
*
|
|
610
|
+
* @example
|
|
611
|
+
* ```typescript
|
|
612
|
+
* @Component({
|
|
613
|
+
* selector: 'my-app',
|
|
614
|
+
* template: `
|
|
615
|
+
* <kendo-listbox
|
|
616
|
+
* [data]="items"
|
|
617
|
+
* textField="name"
|
|
618
|
+
* [toolbar]="true">
|
|
619
|
+
* </kendo-listbox>
|
|
620
|
+
* `
|
|
621
|
+
* })
|
|
622
|
+
* export class AppComponent {
|
|
623
|
+
* items = [
|
|
624
|
+
* { name: 'Item 1' },
|
|
625
|
+
* { name: 'Item 2' }
|
|
626
|
+
* ];
|
|
627
|
+
* }
|
|
628
|
+
* ```
|
|
605
629
|
*/
|
|
606
630
|
class ListBoxComponent {
|
|
607
631
|
keyboardNavigationService;
|
|
@@ -640,20 +664,18 @@ class ListBoxComponent {
|
|
|
640
664
|
*/
|
|
641
665
|
tools;
|
|
642
666
|
/**
|
|
643
|
-
*
|
|
667
|
+
* Specifies the field of the data item that provides the text content of the nodes.
|
|
644
668
|
*/
|
|
645
669
|
textField;
|
|
646
670
|
/**
|
|
647
|
-
*
|
|
671
|
+
* Specifies the data that the ListBox displays.
|
|
672
|
+
*
|
|
673
|
+
* @default []
|
|
648
674
|
*/
|
|
649
675
|
data = [];
|
|
650
676
|
/**
|
|
651
|
-
*
|
|
677
|
+
* Specifies the size of the component.
|
|
652
678
|
*
|
|
653
|
-
* The possible values are:
|
|
654
|
-
* - `'small'`
|
|
655
|
-
* - `'medium'` (default)
|
|
656
|
-
* - `'large'`
|
|
657
679
|
*/
|
|
658
680
|
set size(size) {
|
|
659
681
|
const newSize = size ? size : DEFAULT_SIZE;
|
|
@@ -665,7 +687,8 @@ class ListBoxComponent {
|
|
|
665
687
|
return this._size;
|
|
666
688
|
}
|
|
667
689
|
/**
|
|
668
|
-
*
|
|
690
|
+
* Configures the toolbar of the ListBox.
|
|
691
|
+
* Specifies whether to display a toolbar and which tools and position to use.
|
|
669
692
|
*/
|
|
670
693
|
set toolbar(config) {
|
|
671
694
|
let position = DEFAULT_TOOLBAR_POSITION;
|
|
@@ -681,23 +704,28 @@ class ListBoxComponent {
|
|
|
681
704
|
this.setToolbarClass(position);
|
|
682
705
|
}
|
|
683
706
|
/**
|
|
684
|
-
*
|
|
707
|
+
* Specifies the value of the `aria-label` attribute of the Listbox element.
|
|
708
|
+
*
|
|
709
|
+
* @default 'Listbox'
|
|
685
710
|
*/
|
|
686
711
|
listboxLabel = 'Listbox';
|
|
687
712
|
/**
|
|
688
|
-
*
|
|
713
|
+
* Specifies the value of the `aria-label` attribute of the Listbox toolbar element.
|
|
714
|
+
*
|
|
715
|
+
* @default 'Toolbar'
|
|
689
716
|
*/
|
|
690
717
|
listboxToolbarLabel = 'Toolbar';
|
|
691
718
|
/**
|
|
692
|
-
*
|
|
719
|
+
* Specifies a function that determines if a specific item is disabled.
|
|
693
720
|
*/
|
|
694
721
|
itemDisabled = defaultItemDisabled;
|
|
695
722
|
/**
|
|
696
|
-
* Fires when
|
|
723
|
+
* Fires when you select a different ListBox item.
|
|
724
|
+
* Also fires when you move a node, because moving changes its index.
|
|
697
725
|
*/
|
|
698
726
|
selectionChange = new EventEmitter();
|
|
699
727
|
/**
|
|
700
|
-
* Fires when
|
|
728
|
+
* Fires when you click a ListBox item.
|
|
701
729
|
*/
|
|
702
730
|
actionClick = new EventEmitter();
|
|
703
731
|
/**
|
|
@@ -812,19 +840,19 @@ class ListBoxComponent {
|
|
|
812
840
|
}
|
|
813
841
|
}
|
|
814
842
|
/**
|
|
815
|
-
*
|
|
843
|
+
* Selects a ListBox node programmatically.
|
|
816
844
|
*/
|
|
817
845
|
selectItem(index) {
|
|
818
846
|
this.selectionService.selectedIndex = index;
|
|
819
847
|
}
|
|
820
848
|
/**
|
|
821
|
-
*
|
|
849
|
+
* Clears the ListBox selection programmatically.
|
|
822
850
|
*/
|
|
823
851
|
clearSelection() {
|
|
824
852
|
this.selectionService.clearSelection();
|
|
825
853
|
}
|
|
826
854
|
/**
|
|
827
|
-
*
|
|
855
|
+
* Gets the index of the currently selected item in the ListBox.
|
|
828
856
|
*/
|
|
829
857
|
get selectedIndex() {
|
|
830
858
|
return this.selectionService.selectedIndex;
|
|
@@ -1234,13 +1262,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1234
1262
|
}] } });
|
|
1235
1263
|
|
|
1236
1264
|
/**
|
|
1237
|
-
*
|
|
1265
|
+
* Represents the data-binding directive for the Kendo UI ListBox for Angular.
|
|
1266
|
+
* Manages the functionality of the ListBox tools out of the box and modifies the provided data accordingly.
|
|
1267
|
+
*
|
|
1268
|
+
* @example
|
|
1269
|
+
* ```typescript
|
|
1270
|
+
* @Component({
|
|
1271
|
+
* selector: 'my-app',
|
|
1272
|
+
* template: `
|
|
1273
|
+
* <kendo-listbox
|
|
1274
|
+
* kendoListBoxDataBinding
|
|
1275
|
+
* [connectedWith]="targetListBox"
|
|
1276
|
+
* [data]="sourceData">
|
|
1277
|
+
* </kendo-listbox>
|
|
1278
|
+
* `
|
|
1279
|
+
* })
|
|
1280
|
+
* export class AppComponent { }
|
|
1281
|
+
* ```
|
|
1238
1282
|
*/
|
|
1239
1283
|
class DataBindingDirective {
|
|
1240
1284
|
listbox;
|
|
1241
1285
|
/**
|
|
1242
|
-
* Specifies the ListBoxComponent instance with which the current ListBox
|
|
1243
|
-
* When two listboxes
|
|
1286
|
+
* Specifies the `ListBoxComponent` instance with which the current ListBox connects.
|
|
1287
|
+
* When you link two listboxes through this input, you can transfer items between them.
|
|
1244
1288
|
*/
|
|
1245
1289
|
connectedWith;
|
|
1246
1290
|
actionClickSub = new Subscription();
|
|
@@ -1378,8 +1422,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1378
1422
|
}] } });
|
|
1379
1423
|
|
|
1380
1424
|
/**
|
|
1381
|
-
*
|
|
1425
|
+
* Provides custom messages that override the default component messages
|
|
1382
1426
|
* ([see example](slug:globalization_listbox#toc-custom-messages)).
|
|
1427
|
+
*
|
|
1428
|
+
* @example
|
|
1429
|
+
* ```typescript
|
|
1430
|
+
* @Component({
|
|
1431
|
+
* selector: 'my-app',
|
|
1432
|
+
* template: `
|
|
1433
|
+
* <kendo-listbox-messages
|
|
1434
|
+
* transferAllTo="Transfer All To"
|
|
1435
|
+
* transferAllFrom="Transfer All From">
|
|
1436
|
+
* </kendo-listbox-messages>
|
|
1437
|
+
* `
|
|
1438
|
+
* })
|
|
1439
|
+
* export class AppComponent { }
|
|
1440
|
+
* ```
|
|
1383
1441
|
*/
|
|
1384
1442
|
class CustomMessagesComponent extends Messages {
|
|
1385
1443
|
service;
|
|
@@ -5,22 +5,24 @@
|
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
8
|
+
* Allows you to customize the rendering of each item in the Kendo UI ListBox for Angular.
|
|
9
|
+
*
|
|
10
|
+
* Place an `<ng-template>` with the `kendoListBoxItemTemplate` directive inside your `<kendo-listbox>` component.
|
|
11
|
+
* The template context exposes the current data item as `let-dataItem`.
|
|
11
12
|
*
|
|
12
13
|
* @example
|
|
13
|
-
* ```
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
14
|
+
* ```typescript
|
|
15
|
+
* @Component({
|
|
16
|
+
* selector: 'my-app',
|
|
17
|
+
* template: `
|
|
18
|
+
* <kendo-listbox [data]="listBoxItems">
|
|
19
|
+
* <ng-template kendoListBoxItemTemplate let-dataItem>
|
|
20
|
+
* <span>{{ dataItem }} item</span>
|
|
21
|
+
* </ng-template>
|
|
22
|
+
* </kendo-listbox>
|
|
23
|
+
* `
|
|
23
24
|
* })
|
|
25
|
+
* export class AppComponent { }
|
|
24
26
|
* ```
|
|
25
27
|
*/
|
|
26
28
|
export declare class ItemTemplateDirective {
|
package/listbox.component.d.ts
CHANGED
|
@@ -14,7 +14,29 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
14
14
|
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
15
15
|
import * as i0 from "@angular/core";
|
|
16
16
|
/**
|
|
17
|
-
* Represents the
|
|
17
|
+
* Represents the Kendo UI ListBox component for Angular.
|
|
18
|
+
* Provides a list of items from which you can select and transfer data between connected ListBoxes
|
|
19
|
+
* ([see overview]({% slug overview_listbox %})).
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```typescript
|
|
23
|
+
* @Component({
|
|
24
|
+
* selector: 'my-app',
|
|
25
|
+
* template: `
|
|
26
|
+
* <kendo-listbox
|
|
27
|
+
* [data]="items"
|
|
28
|
+
* textField="name"
|
|
29
|
+
* [toolbar]="true">
|
|
30
|
+
* </kendo-listbox>
|
|
31
|
+
* `
|
|
32
|
+
* })
|
|
33
|
+
* export class AppComponent {
|
|
34
|
+
* items = [
|
|
35
|
+
* { name: 'Item 1' },
|
|
36
|
+
* { name: 'Item 2' }
|
|
37
|
+
* ];
|
|
38
|
+
* }
|
|
39
|
+
* ```
|
|
18
40
|
*/
|
|
19
41
|
export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
20
42
|
keyboardNavigationService: KeyboardNavigationService;
|
|
@@ -53,45 +75,49 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
53
75
|
*/
|
|
54
76
|
tools: QueryList<Button>;
|
|
55
77
|
/**
|
|
56
|
-
*
|
|
78
|
+
* Specifies the field of the data item that provides the text content of the nodes.
|
|
57
79
|
*/
|
|
58
80
|
textField: string;
|
|
59
81
|
/**
|
|
60
|
-
*
|
|
82
|
+
* Specifies the data that the ListBox displays.
|
|
83
|
+
*
|
|
84
|
+
* @default []
|
|
61
85
|
*/
|
|
62
86
|
data: any[];
|
|
63
87
|
/**
|
|
64
|
-
*
|
|
88
|
+
* Specifies the size of the component.
|
|
65
89
|
*
|
|
66
|
-
* The possible values are:
|
|
67
|
-
* - `'small'`
|
|
68
|
-
* - `'medium'` (default)
|
|
69
|
-
* - `'large'`
|
|
70
90
|
*/
|
|
71
91
|
set size(size: ListBoxSize);
|
|
72
92
|
get size(): ListBoxSize;
|
|
73
93
|
/**
|
|
74
|
-
*
|
|
94
|
+
* Configures the toolbar of the ListBox.
|
|
95
|
+
* Specifies whether to display a toolbar and which tools and position to use.
|
|
75
96
|
*/
|
|
76
97
|
set toolbar(config: ListBoxToolbarConfig);
|
|
77
98
|
/**
|
|
78
|
-
*
|
|
99
|
+
* Specifies the value of the `aria-label` attribute of the Listbox element.
|
|
100
|
+
*
|
|
101
|
+
* @default 'Listbox'
|
|
79
102
|
*/
|
|
80
103
|
listboxLabel: string;
|
|
81
104
|
/**
|
|
82
|
-
*
|
|
105
|
+
* Specifies the value of the `aria-label` attribute of the Listbox toolbar element.
|
|
106
|
+
*
|
|
107
|
+
* @default 'Toolbar'
|
|
83
108
|
*/
|
|
84
109
|
listboxToolbarLabel: string;
|
|
85
110
|
/**
|
|
86
|
-
*
|
|
111
|
+
* Specifies a function that determines if a specific item is disabled.
|
|
87
112
|
*/
|
|
88
113
|
itemDisabled: (item: any) => boolean;
|
|
89
114
|
/**
|
|
90
|
-
* Fires when
|
|
115
|
+
* Fires when you select a different ListBox item.
|
|
116
|
+
* Also fires when you move a node, because moving changes its index.
|
|
91
117
|
*/
|
|
92
118
|
selectionChange: EventEmitter<ListBoxSelectionEvent>;
|
|
93
119
|
/**
|
|
94
|
-
* Fires when
|
|
120
|
+
* Fires when you click a ListBox item.
|
|
95
121
|
*/
|
|
96
122
|
actionClick: EventEmitter<ActionName>;
|
|
97
123
|
/**
|
|
@@ -147,15 +173,15 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
|
|
|
147
173
|
*/
|
|
148
174
|
performAction(actionName: ActionName): void;
|
|
149
175
|
/**
|
|
150
|
-
*
|
|
176
|
+
* Selects a ListBox node programmatically.
|
|
151
177
|
*/
|
|
152
178
|
selectItem(index: number): void;
|
|
153
179
|
/**
|
|
154
|
-
*
|
|
180
|
+
* Clears the ListBox selection programmatically.
|
|
155
181
|
*/
|
|
156
182
|
clearSelection(): void;
|
|
157
183
|
/**
|
|
158
|
-
*
|
|
184
|
+
* Gets the index of the currently selected item in the ListBox.
|
|
159
185
|
*/
|
|
160
186
|
get selectedIndex(): number;
|
|
161
187
|
/**
|
|
@@ -6,8 +6,22 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
6
6
|
import { Messages } from './messages';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Provides custom messages that override the default component messages
|
|
10
10
|
* ([see example](slug:globalization_listbox#toc-custom-messages)).
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```typescript
|
|
14
|
+
* @Component({
|
|
15
|
+
* selector: 'my-app',
|
|
16
|
+
* template: `
|
|
17
|
+
* <kendo-listbox-messages
|
|
18
|
+
* transferAllTo="Transfer All To"
|
|
19
|
+
* transferAllFrom="Transfer All From">
|
|
20
|
+
* </kendo-listbox-messages>
|
|
21
|
+
* `
|
|
22
|
+
* })
|
|
23
|
+
* export class AppComponent { }
|
|
24
|
+
* ```
|
|
11
25
|
*/
|
|
12
26
|
export declare class CustomMessagesComponent extends Messages {
|
|
13
27
|
protected service: LocalizationService;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-listbox",
|
|
3
|
-
"version": "19.1.2-develop.
|
|
3
|
+
"version": "19.1.2-develop.3",
|
|
4
4
|
"description": "Kendo UI for Angular ListBox",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"package": {
|
|
20
20
|
"productName": "Kendo UI for Angular",
|
|
21
21
|
"productCode": "KENDOUIANGULAR",
|
|
22
|
-
"publishDate":
|
|
22
|
+
"publishDate": 1750152819,
|
|
23
23
|
"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
24
|
}
|
|
25
25
|
},
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
"@angular/core": "16 - 20",
|
|
30
30
|
"@angular/platform-browser": "16 - 20",
|
|
31
31
|
"@progress/kendo-licensing": "^1.5.0",
|
|
32
|
-
"@progress/kendo-angular-buttons": "19.1.2-develop.
|
|
33
|
-
"@progress/kendo-angular-common": "19.1.2-develop.
|
|
34
|
-
"@progress/kendo-angular-popup": "19.1.2-develop.
|
|
32
|
+
"@progress/kendo-angular-buttons": "19.1.2-develop.3",
|
|
33
|
+
"@progress/kendo-angular-common": "19.1.2-develop.3",
|
|
34
|
+
"@progress/kendo-angular-popup": "19.1.2-develop.3",
|
|
35
35
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"tslib": "^2.3.1",
|
|
39
|
-
"@progress/kendo-angular-schematics": "19.1.2-develop.
|
|
39
|
+
"@progress/kendo-angular-schematics": "19.1.2-develop.3",
|
|
40
40
|
"@progress/kendo-common": "^1.0.1"
|
|
41
41
|
},
|
|
42
42
|
"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': '19.1.2-develop.
|
|
10
|
-
'@progress/kendo-angular-common': '19.1.2-develop.
|
|
11
|
-
'@progress/kendo-angular-l10n': '19.1.2-develop.
|
|
9
|
+
'@progress/kendo-angular-buttons': '19.1.2-develop.3',
|
|
10
|
+
'@progress/kendo-angular-common': '19.1.2-develop.3',
|
|
11
|
+
'@progress/kendo-angular-l10n': '19.1.2-develop.3',
|
|
12
12
|
// Peer of kendo-angular-buttons
|
|
13
|
-
'@progress/kendo-angular-popup': '19.1.2-develop.
|
|
13
|
+
'@progress/kendo-angular-popup': '19.1.2-develop.3'
|
|
14
14
|
} });
|
|
15
15
|
return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
|
|
16
16
|
}
|
package/selection.service.d.ts
CHANGED
|
@@ -5,10 +5,17 @@
|
|
|
5
5
|
import { EventEmitter } from "@angular/core";
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Defines the event that fires when you make a new selection in the ListBox component.
|
|
9
|
+
*
|
|
9
10
|
*/
|
|
10
11
|
export interface ListBoxSelectionEvent {
|
|
12
|
+
/**
|
|
13
|
+
* The index of the currently selected item.
|
|
14
|
+
*/
|
|
11
15
|
index: number;
|
|
16
|
+
/**
|
|
17
|
+
* The index of the previously selected item.
|
|
18
|
+
*/
|
|
12
19
|
prevIndex: number;
|
|
13
20
|
}
|
|
14
21
|
/**
|
package/size.d.ts
CHANGED
|
@@ -3,11 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* The possible values are:
|
|
9
|
-
* - `'small'`
|
|
10
|
-
* - `'medium'`
|
|
11
|
-
* - `'large'`
|
|
6
|
+
* Defines the possible size options of the ListBox.
|
|
7
|
+
* The size affects the height of the listbox and the size of the items.
|
|
12
8
|
*/
|
|
13
9
|
export type ListBoxSize = 'small' | 'medium' | 'large';
|
package/toolbar.d.ts
CHANGED
|
@@ -4,33 +4,34 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { SVGIcon } from "@progress/kendo-svg-icons";
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Defines the possible toolbar buttons that the ListBox can display.
|
|
8
8
|
*/
|
|
9
9
|
export type ActionName = 'moveUp' | 'moveDown' | 'transferTo' | 'transferFrom' | 'transferAllTo' | 'transferAllFrom' | 'remove';
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Defines the possible values for customizing the toolbar position of the ListBox component.
|
|
12
12
|
*/
|
|
13
13
|
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
17
|
export interface Toolbar {
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
20
|
-
*
|
|
19
|
+
* Specifies the set of tools to display in the toolbar.
|
|
20
|
+
* When you omit this setting, all tools are included.
|
|
21
21
|
*/
|
|
22
22
|
tools?: ActionName[];
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* Specifies the position of the toolbar.
|
|
25
25
|
*/
|
|
26
26
|
position?: ListBoxToolbarPosition;
|
|
27
27
|
}
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
29
|
+
* Defines the possible values that the ListBox can accept for its built-in toolbar.
|
|
30
30
|
*
|
|
31
31
|
* - Use `false` to hide the toolbar.
|
|
32
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.
|
|
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
|
+
*
|
|
34
35
|
*/
|
|
35
36
|
export type ListBoxToolbarConfig = boolean | Toolbar;
|
|
36
37
|
/**
|