@progress/kendo-angular-listbox 25.1.0-develop.1 → 25.1.0-develop.11
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/fesm2022/progress-kendo-angular-listbox.mjs +139 -40
- package/index.d.ts +51 -19
- package/package-metadata.mjs +2 -2
- package/package.json +6 -6
- package/schematics/ngAdd/index.js +4 -4
|
@@ -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 * as i0 from '@angular/core';
|
|
6
|
-
import { EventEmitter, Injectable, Directive, HostListener, HostBinding, Input, forwardRef, isDevMode, Output, ViewChildren, ViewChild, ContentChild, Component, NgModule } from '@angular/core';
|
|
6
|
+
import { EventEmitter, Injectable, Directive, HostListener, HostBinding, Input, signal, forwardRef, isDevMode, afterNextRender, Output, ViewChildren, ViewChild, ContentChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
7
7
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
8
8
|
import { Subscription } from 'rxjs';
|
|
9
9
|
import { getter } from '@progress/kendo-common';
|
|
@@ -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: '25.1.0-develop.
|
|
28
|
+
publishDate: 1787724404,
|
|
29
|
+
version: '25.1.0-develop.11',
|
|
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
|
|
|
@@ -791,35 +791,83 @@ class Messages extends ComponentMessages {
|
|
|
791
791
|
/**
|
|
792
792
|
* The text of the `Move Up` button title.
|
|
793
793
|
*/
|
|
794
|
-
moveUp
|
|
794
|
+
set moveUp(value) {
|
|
795
|
+
this._moveUp.set(value);
|
|
796
|
+
}
|
|
797
|
+
get moveUp() {
|
|
798
|
+
return this._moveUp();
|
|
799
|
+
}
|
|
795
800
|
/**
|
|
796
801
|
* The text of the `Move Down` button title.
|
|
797
802
|
*/
|
|
798
|
-
moveDown
|
|
803
|
+
set moveDown(value) {
|
|
804
|
+
this._moveDown.set(value);
|
|
805
|
+
}
|
|
806
|
+
get moveDown() {
|
|
807
|
+
return this._moveDown();
|
|
808
|
+
}
|
|
799
809
|
/**
|
|
800
810
|
* The text of the `Remove` button tittle.
|
|
801
811
|
*/
|
|
802
|
-
remove
|
|
812
|
+
set remove(value) {
|
|
813
|
+
this._remove.set(value);
|
|
814
|
+
}
|
|
815
|
+
get remove() {
|
|
816
|
+
return this._remove();
|
|
817
|
+
}
|
|
803
818
|
/**
|
|
804
819
|
* The text of the `Transfer To` button title.
|
|
805
820
|
*/
|
|
806
|
-
transferTo
|
|
821
|
+
set transferTo(value) {
|
|
822
|
+
this._transferTo.set(value);
|
|
823
|
+
}
|
|
824
|
+
get transferTo() {
|
|
825
|
+
return this._transferTo();
|
|
826
|
+
}
|
|
807
827
|
/**
|
|
808
828
|
* The text of the `Transfer From` button title.
|
|
809
829
|
*/
|
|
810
|
-
transferFrom
|
|
830
|
+
set transferFrom(value) {
|
|
831
|
+
this._transferFrom.set(value);
|
|
832
|
+
}
|
|
833
|
+
get transferFrom() {
|
|
834
|
+
return this._transferFrom();
|
|
835
|
+
}
|
|
811
836
|
/**
|
|
812
837
|
* The text of the `Transfer All To` button title.
|
|
813
838
|
*/
|
|
814
|
-
transferAllTo
|
|
839
|
+
set transferAllTo(value) {
|
|
840
|
+
this._transferAllTo.set(value);
|
|
841
|
+
}
|
|
842
|
+
get transferAllTo() {
|
|
843
|
+
return this._transferAllTo();
|
|
844
|
+
}
|
|
815
845
|
/**
|
|
816
846
|
* The text of the `Transfer All From` button title.
|
|
817
847
|
*/
|
|
818
|
-
transferAllFrom
|
|
848
|
+
set transferAllFrom(value) {
|
|
849
|
+
this._transferAllFrom.set(value);
|
|
850
|
+
}
|
|
851
|
+
get transferAllFrom() {
|
|
852
|
+
return this._transferAllFrom();
|
|
853
|
+
}
|
|
819
854
|
/**
|
|
820
855
|
* The text displayed when there are no items.
|
|
821
856
|
*/
|
|
822
|
-
noDataText
|
|
857
|
+
set noDataText(value) {
|
|
858
|
+
this._noDataText.set(value);
|
|
859
|
+
}
|
|
860
|
+
get noDataText() {
|
|
861
|
+
return this._noDataText();
|
|
862
|
+
}
|
|
863
|
+
_moveUp = signal(undefined, ...(ngDevMode ? [{ debugName: "_moveUp" }] : []));
|
|
864
|
+
_moveDown = signal(undefined, ...(ngDevMode ? [{ debugName: "_moveDown" }] : []));
|
|
865
|
+
_remove = signal(undefined, ...(ngDevMode ? [{ debugName: "_remove" }] : []));
|
|
866
|
+
_transferTo = signal(undefined, ...(ngDevMode ? [{ debugName: "_transferTo" }] : []));
|
|
867
|
+
_transferFrom = signal(undefined, ...(ngDevMode ? [{ debugName: "_transferFrom" }] : []));
|
|
868
|
+
_transferAllTo = signal(undefined, ...(ngDevMode ? [{ debugName: "_transferAllTo" }] : []));
|
|
869
|
+
_transferAllFrom = signal(undefined, ...(ngDevMode ? [{ debugName: "_transferAllFrom" }] : []));
|
|
870
|
+
_noDataText = signal(undefined, ...(ngDevMode ? [{ debugName: "_noDataText" }] : []));
|
|
823
871
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
824
872
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, inputs: { moveUp: "moveUp", moveDown: "moveDown", remove: "remove", transferTo: "transferTo", transferFrom: "transferFrom", transferAllTo: "transferAllTo", transferAllFrom: "transferAllFrom", noDataText: "noDataText" }, usesInheritance: true, ngImport: i0 });
|
|
825
873
|
}
|
|
@@ -911,6 +959,7 @@ class ListBoxComponent {
|
|
|
911
959
|
zone;
|
|
912
960
|
localization;
|
|
913
961
|
cdr;
|
|
962
|
+
injector;
|
|
914
963
|
/**
|
|
915
964
|
* @hidden
|
|
916
965
|
*/
|
|
@@ -946,25 +995,35 @@ class ListBoxComponent {
|
|
|
946
995
|
/**
|
|
947
996
|
* Specifies the field of the data item that provides the text content of the nodes.
|
|
948
997
|
*/
|
|
949
|
-
textField
|
|
998
|
+
set textField(value) {
|
|
999
|
+
this._textField.set(value);
|
|
1000
|
+
}
|
|
1001
|
+
get textField() {
|
|
1002
|
+
return this._textField();
|
|
1003
|
+
}
|
|
950
1004
|
/**
|
|
951
1005
|
* Sets the selection mode of the ListBox.
|
|
952
1006
|
*
|
|
953
1007
|
* @default 'single'
|
|
954
1008
|
*/
|
|
955
1009
|
set selectable(mode) {
|
|
956
|
-
this._selectable
|
|
1010
|
+
this._selectable.set(mode);
|
|
957
1011
|
this.selectionService.selectionMode = mode;
|
|
958
1012
|
}
|
|
959
1013
|
get selectable() {
|
|
960
|
-
return this._selectable;
|
|
1014
|
+
return this._selectable();
|
|
961
1015
|
}
|
|
962
1016
|
/**
|
|
963
1017
|
* Specifies the data that the ListBox displays.
|
|
964
1018
|
*
|
|
965
1019
|
* @default []
|
|
966
1020
|
*/
|
|
967
|
-
data
|
|
1021
|
+
set data(value) {
|
|
1022
|
+
this._data.set(value);
|
|
1023
|
+
}
|
|
1024
|
+
get data() {
|
|
1025
|
+
return this._data();
|
|
1026
|
+
}
|
|
968
1027
|
/**
|
|
969
1028
|
* Specifies the size of the component.
|
|
970
1029
|
*
|
|
@@ -972,10 +1031,10 @@ class ListBoxComponent {
|
|
|
972
1031
|
set size(size) {
|
|
973
1032
|
this.renderer.removeClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[this.size]}`);
|
|
974
1033
|
this.setSizingClass(size);
|
|
975
|
-
this._size
|
|
1034
|
+
this._size.set(size);
|
|
976
1035
|
}
|
|
977
1036
|
get size() {
|
|
978
|
-
return this._size;
|
|
1037
|
+
return this._size();
|
|
979
1038
|
}
|
|
980
1039
|
/**
|
|
981
1040
|
* Configures the toolbar of the ListBox.
|
|
@@ -984,6 +1043,7 @@ class ListBoxComponent {
|
|
|
984
1043
|
* @default false
|
|
985
1044
|
*/
|
|
986
1045
|
set toolbar(config) {
|
|
1046
|
+
this._toolbar.set(config);
|
|
987
1047
|
let position = DEFAULT_TOOLBAR_POSITION;
|
|
988
1048
|
if (typeof config === 'boolean') {
|
|
989
1049
|
this.selectedTools = config ? allTools : [];
|
|
@@ -996,6 +1056,9 @@ class ListBoxComponent {
|
|
|
996
1056
|
}
|
|
997
1057
|
this.setToolbarClass(position);
|
|
998
1058
|
}
|
|
1059
|
+
get toolbar() {
|
|
1060
|
+
return this._toolbar();
|
|
1061
|
+
}
|
|
999
1062
|
/**
|
|
1000
1063
|
* Specifies the value of the `aria-label` attribute of the Listbox element.
|
|
1001
1064
|
*
|
|
@@ -1004,7 +1067,12 @@ class ListBoxComponent {
|
|
|
1004
1067
|
* @remarks
|
|
1005
1068
|
* This property is related to accessibility.
|
|
1006
1069
|
*/
|
|
1007
|
-
listboxLabel
|
|
1070
|
+
set listboxLabel(value) {
|
|
1071
|
+
this._listboxLabel.set(value);
|
|
1072
|
+
}
|
|
1073
|
+
get listboxLabel() {
|
|
1074
|
+
return this._listboxLabel();
|
|
1075
|
+
}
|
|
1008
1076
|
/**
|
|
1009
1077
|
* Specifies the value of the `aria-label` attribute of the Listbox toolbar element.
|
|
1010
1078
|
*
|
|
@@ -1013,11 +1081,21 @@ class ListBoxComponent {
|
|
|
1013
1081
|
* @remarks
|
|
1014
1082
|
* This property is related to accessibility.
|
|
1015
1083
|
*/
|
|
1016
|
-
listboxToolbarLabel
|
|
1084
|
+
set listboxToolbarLabel(value) {
|
|
1085
|
+
this._listboxToolbarLabel.set(value);
|
|
1086
|
+
}
|
|
1087
|
+
get listboxToolbarLabel() {
|
|
1088
|
+
return this._listboxToolbarLabel();
|
|
1089
|
+
}
|
|
1017
1090
|
/**
|
|
1018
1091
|
* Specifies a function that determines if a specific item is disabled.
|
|
1019
1092
|
*/
|
|
1020
|
-
itemDisabled
|
|
1093
|
+
set itemDisabled(fn) {
|
|
1094
|
+
this._itemDisabled.set(fn);
|
|
1095
|
+
}
|
|
1096
|
+
get itemDisabled() {
|
|
1097
|
+
return this._itemDisabled();
|
|
1098
|
+
}
|
|
1021
1099
|
/**
|
|
1022
1100
|
* Fires when you select a different ListBox item.
|
|
1023
1101
|
* Also fires when you move a node, because moving changes its index.
|
|
@@ -1071,12 +1149,20 @@ class ListBoxComponent {
|
|
|
1071
1149
|
* @hidden
|
|
1072
1150
|
*/
|
|
1073
1151
|
chevronRightIcon = chevronRightIcon;
|
|
1152
|
+
_size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
|
|
1153
|
+
_selectable = signal('single', ...(ngDevMode ? [{ debugName: "_selectable" }] : []));
|
|
1154
|
+
_textField = signal(undefined, ...(ngDevMode ? [{ debugName: "_textField" }] : []));
|
|
1155
|
+
_data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
|
|
1156
|
+
_toolbar = signal(false, ...(ngDevMode ? [{ debugName: "_toolbar" }] : []));
|
|
1157
|
+
_listboxLabel = signal('Listbox', ...(ngDevMode ? [{ debugName: "_listboxLabel" }] : []));
|
|
1158
|
+
_listboxToolbarLabel = signal('Toolbar', ...(ngDevMode ? [{ debugName: "_listboxToolbarLabel" }] : []));
|
|
1159
|
+
_itemDisabled = signal(defaultItemDisabled, ...(ngDevMode ? [{ debugName: "_itemDisabled" }] : []));
|
|
1074
1160
|
localizationSubscription;
|
|
1075
|
-
_size;
|
|
1076
1161
|
subs = new Subscription();
|
|
1077
1162
|
shouldFireFocusIn = false;
|
|
1078
|
-
|
|
1079
|
-
|
|
1163
|
+
_prevItemTemplate;
|
|
1164
|
+
_prevNoDataTemplate;
|
|
1165
|
+
constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization, cdr, injector) {
|
|
1080
1166
|
this.keyboardNavigationService = keyboardNavigationService;
|
|
1081
1167
|
this.selectionService = selectionService;
|
|
1082
1168
|
this.hostElement = hostElement;
|
|
@@ -1084,6 +1170,7 @@ class ListBoxComponent {
|
|
|
1084
1170
|
this.zone = zone;
|
|
1085
1171
|
this.localization = localization;
|
|
1086
1172
|
this.cdr = cdr;
|
|
1173
|
+
this.injector = injector;
|
|
1087
1174
|
validatePackage(packageMetadata);
|
|
1088
1175
|
this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
|
|
1089
1176
|
this.setSizingClass(this.size);
|
|
@@ -1101,6 +1188,7 @@ class ListBoxComponent {
|
|
|
1101
1188
|
}
|
|
1102
1189
|
this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => {
|
|
1103
1190
|
this.direction = rtl ? 'rtl' : 'ltr';
|
|
1191
|
+
this.cdr.markForCheck();
|
|
1104
1192
|
});
|
|
1105
1193
|
this.subs.add(this.localizationSubscription);
|
|
1106
1194
|
}
|
|
@@ -1111,6 +1199,14 @@ class ListBoxComponent {
|
|
|
1111
1199
|
this.setIds();
|
|
1112
1200
|
this.initSubscriptions(navService, hostEl, toolsRef);
|
|
1113
1201
|
}
|
|
1202
|
+
ngAfterContentChecked() {
|
|
1203
|
+
if (this._prevItemTemplate !== this.itemTemplate ||
|
|
1204
|
+
this._prevNoDataTemplate !== this.noDataTemplate) {
|
|
1205
|
+
this._prevItemTemplate = this.itemTemplate;
|
|
1206
|
+
this._prevNoDataTemplate = this.noDataTemplate;
|
|
1207
|
+
this.cdr.markForCheck();
|
|
1208
|
+
}
|
|
1209
|
+
}
|
|
1114
1210
|
ngOnDestroy() {
|
|
1115
1211
|
this.subs.unsubscribe();
|
|
1116
1212
|
}
|
|
@@ -1150,6 +1246,7 @@ class ListBoxComponent {
|
|
|
1150
1246
|
select(indices) {
|
|
1151
1247
|
const validIndices = indices.filter(index => index >= 0 && index < this.data.length);
|
|
1152
1248
|
this.selectionService.setSelectedIndices(validIndices);
|
|
1249
|
+
this.cdr.markForCheck();
|
|
1153
1250
|
}
|
|
1154
1251
|
/**
|
|
1155
1252
|
* Selects a ListBox node programmatically.
|
|
@@ -1166,6 +1263,7 @@ class ListBoxComponent {
|
|
|
1166
1263
|
*/
|
|
1167
1264
|
clearSelection() {
|
|
1168
1265
|
this.selectionService.clearSelection();
|
|
1266
|
+
this.cdr.markForCheck();
|
|
1169
1267
|
}
|
|
1170
1268
|
/**
|
|
1171
1269
|
* Gets the indexes of the currently selected items in the ListBox.
|
|
@@ -1334,16 +1432,16 @@ class ListBoxComponent {
|
|
|
1334
1432
|
const toolbar = this.toolbarElement?.nativeElement;
|
|
1335
1433
|
const parentToolbar = this.parentListbox?.toolbarElement?.nativeElement;
|
|
1336
1434
|
if (this.parentListbox && this.childListbox) {
|
|
1337
|
-
|
|
1435
|
+
afterNextRender(() => {
|
|
1338
1436
|
this.toolbarId = `${this.parentListbox.listboxId} ${this.listboxId} ${this.childListbox.listboxId}`;
|
|
1339
1437
|
this.renderer.setAttribute(toolbar, 'aria-controls', this.toolbarId);
|
|
1340
|
-
});
|
|
1438
|
+
}, { injector: this.injector });
|
|
1341
1439
|
}
|
|
1342
1440
|
else if (this.childListbox && !this.parentListbox) {
|
|
1343
|
-
|
|
1344
|
-
this.toolbarId =
|
|
1441
|
+
afterNextRender(() => {
|
|
1442
|
+
this.toolbarId = `${this.listboxId} ${this.childListbox.listboxId}`;
|
|
1345
1443
|
this.renderer.setAttribute(toolbar, 'aria-controls', this.toolbarId);
|
|
1346
|
-
});
|
|
1444
|
+
}, { injector: this.injector });
|
|
1347
1445
|
}
|
|
1348
1446
|
else if (this.parentListbox && this.selectedTools.length > 0) {
|
|
1349
1447
|
this.toolbarId = `${this.parentListbox.listboxId} ${this.listboxId}`;
|
|
@@ -1388,7 +1486,7 @@ class ListBoxComponent {
|
|
|
1388
1486
|
this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
|
|
1389
1487
|
}
|
|
1390
1488
|
}
|
|
1391
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1489
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
1392
1490
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", selectable: "selectable", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", action: "action", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
|
|
1393
1491
|
ListBoxSelectionService,
|
|
1394
1492
|
KeyboardNavigationService,
|
|
@@ -1501,7 +1599,7 @@ class ListBoxComponent {
|
|
|
1501
1599
|
}
|
|
1502
1600
|
</div>
|
|
1503
1601
|
</div>
|
|
1504
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1602
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1505
1603
|
}
|
|
1506
1604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ListBoxComponent, decorators: [{
|
|
1507
1605
|
type: Component,
|
|
@@ -1621,10 +1719,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
|
|
|
1621
1719
|
</div>
|
|
1622
1720
|
</div>
|
|
1623
1721
|
`,
|
|
1722
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1624
1723
|
standalone: true,
|
|
1625
1724
|
imports: [LocalizedMessagesDirective, ButtonComponent, ItemSelectableDirective, TemplateContextDirective, NgTemplateOutlet]
|
|
1626
1725
|
}]
|
|
1627
|
-
}], ctorParameters: () => [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listboxClassName: [{
|
|
1726
|
+
}], ctorParameters: () => [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { listboxClassName: [{
|
|
1628
1727
|
type: HostBinding,
|
|
1629
1728
|
args: ['class.k-listbox']
|
|
1630
1729
|
}], direction: [{
|
|
@@ -1696,7 +1795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
|
|
|
1696
1795
|
*/
|
|
1697
1796
|
class DataBindingDirective {
|
|
1698
1797
|
listbox;
|
|
1699
|
-
|
|
1798
|
+
injector;
|
|
1700
1799
|
/**
|
|
1701
1800
|
* Specifies the `ListBoxComponent` instance with which the current ListBox connects.
|
|
1702
1801
|
* When you link two listboxes through this input, you can transfer items between them.
|
|
@@ -1706,9 +1805,9 @@ class DataBindingDirective {
|
|
|
1706
1805
|
selectedBoxSub = new Subscription();
|
|
1707
1806
|
connectedWithSub = new Subscription();
|
|
1708
1807
|
selectedBox;
|
|
1709
|
-
constructor(listbox,
|
|
1808
|
+
constructor(listbox, injector) {
|
|
1710
1809
|
this.listbox = listbox;
|
|
1711
|
-
this.
|
|
1810
|
+
this.injector = injector;
|
|
1712
1811
|
this.selectedBox = this.listbox;
|
|
1713
1812
|
this.connectedWithSub.add(this.listbox.getChildListbox.subscribe(() => {
|
|
1714
1813
|
this.listbox.childListbox = this.connectedWith;
|
|
@@ -1838,7 +1937,7 @@ class DataBindingDirective {
|
|
|
1838
1937
|
}
|
|
1839
1938
|
}
|
|
1840
1939
|
newSelectedIndices.sort((a, b) => a - b);
|
|
1841
|
-
this.selectedBox.
|
|
1940
|
+
this.selectedBox.select(newSelectedIndices);
|
|
1842
1941
|
const navigation = this.selectedBox.keyboardNavigationService;
|
|
1843
1942
|
const currentFocusedIndex = navigation.focusedListboxItemIndex;
|
|
1844
1943
|
const focusedItemIndexInSelection = sortedIndices.indexOf(currentFocusedIndex);
|
|
@@ -1849,14 +1948,14 @@ class DataBindingDirective {
|
|
|
1849
1948
|
else {
|
|
1850
1949
|
newFocusIndex = dir === 'up' ? topIndex - 1 : bottomIndex + 1;
|
|
1851
1950
|
}
|
|
1852
|
-
|
|
1951
|
+
afterNextRender(() => {
|
|
1853
1952
|
const listboxItems = this.selectedBox.listboxItems.toArray();
|
|
1854
1953
|
const previousItem = listboxItems[currentFocusedIndex]?.nativeElement;
|
|
1855
1954
|
const currentItem = listboxItems[newFocusIndex]?.nativeElement;
|
|
1856
1955
|
navigation.changeTabindex(previousItem, currentItem);
|
|
1857
1956
|
navigation.focusedListboxItemIndex = newFocusIndex;
|
|
1858
1957
|
navigation.selectedListboxItemIndex = newFocusIndex;
|
|
1859
|
-
});
|
|
1958
|
+
}, { injector: this.injector });
|
|
1860
1959
|
}
|
|
1861
1960
|
removeSelectedItems() {
|
|
1862
1961
|
const itemIndices = this.selectedBox.selectedIndices;
|
|
@@ -1868,7 +1967,7 @@ class DataBindingDirective {
|
|
|
1868
1967
|
for (const index of sortedIndices) {
|
|
1869
1968
|
this.selectedBox.data.splice(index, 1);
|
|
1870
1969
|
}
|
|
1871
|
-
this.selectedBox.
|
|
1970
|
+
this.selectedBox.clearSelection();
|
|
1872
1971
|
}
|
|
1873
1972
|
transferSelectedItems(source, target) {
|
|
1874
1973
|
const selectedIndices = source?.data && source?.selectedIndices;
|
|
@@ -1942,7 +2041,7 @@ class DataBindingDirective {
|
|
|
1942
2041
|
selectionService.rangeSelectionAnchorIndex = index;
|
|
1943
2042
|
selectionService.lastSelectedOrUnselectedIndex = index;
|
|
1944
2043
|
};
|
|
1945
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListBoxComponent }, { token: i0.
|
|
2044
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListBoxComponent }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1946
2045
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: DataBindingDirective, isStandalone: true, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
|
|
1947
2046
|
}
|
|
1948
2047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: DataBindingDirective, decorators: [{
|
|
@@ -1951,7 +2050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
|
|
|
1951
2050
|
selector: '[kendoListBoxDataBinding]',
|
|
1952
2051
|
standalone: true
|
|
1953
2052
|
}]
|
|
1954
|
-
}], ctorParameters: () => [{ type: ListBoxComponent }, { type: i0.
|
|
2053
|
+
}], ctorParameters: () => [{ type: ListBoxComponent }, { type: i0.Injector }], propDecorators: { connectedWith: [{
|
|
1955
2054
|
type: Input
|
|
1956
2055
|
}] } });
|
|
1957
2056
|
|
package/index.d.ts
CHANGED
|
@@ -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 * as i0 from '@angular/core';
|
|
6
|
-
import { EventEmitter, TemplateRef, Renderer2, NgZone, ElementRef, OnInit, AfterViewInit, OnDestroy, QueryList, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
|
|
6
|
+
import { EventEmitter, TemplateRef, Renderer2, NgZone, ElementRef, OnInit, AfterViewInit, OnDestroy, QueryList, ChangeDetectorRef, Injector, OnChanges, SimpleChanges } from '@angular/core';
|
|
7
7
|
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
8
8
|
import { Button } from '@progress/kendo-angular-buttons';
|
|
9
9
|
import { LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
|
|
@@ -235,6 +235,7 @@ declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
235
235
|
private zone;
|
|
236
236
|
private localization;
|
|
237
237
|
private cdr;
|
|
238
|
+
private injector;
|
|
238
239
|
/**
|
|
239
240
|
* @hidden
|
|
240
241
|
*/
|
|
@@ -270,7 +271,8 @@ declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
270
271
|
/**
|
|
271
272
|
* Specifies the field of the data item that provides the text content of the nodes.
|
|
272
273
|
*/
|
|
273
|
-
textField: string;
|
|
274
|
+
set textField(value: string);
|
|
275
|
+
get textField(): string;
|
|
274
276
|
/**
|
|
275
277
|
* Sets the selection mode of the ListBox.
|
|
276
278
|
*
|
|
@@ -283,7 +285,8 @@ declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
283
285
|
*
|
|
284
286
|
* @default []
|
|
285
287
|
*/
|
|
286
|
-
data: any[];
|
|
288
|
+
set data(value: any[]);
|
|
289
|
+
get data(): any[];
|
|
287
290
|
/**
|
|
288
291
|
* Specifies the size of the component.
|
|
289
292
|
*
|
|
@@ -297,6 +300,7 @@ declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
297
300
|
* @default false
|
|
298
301
|
*/
|
|
299
302
|
set toolbar(config: boolean | ListBoxToolbarConfig);
|
|
303
|
+
get toolbar(): boolean | ListBoxToolbarConfig;
|
|
300
304
|
/**
|
|
301
305
|
* Specifies the value of the `aria-label` attribute of the Listbox element.
|
|
302
306
|
*
|
|
@@ -305,7 +309,8 @@ declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
305
309
|
* @remarks
|
|
306
310
|
* This property is related to accessibility.
|
|
307
311
|
*/
|
|
308
|
-
listboxLabel: string;
|
|
312
|
+
set listboxLabel(value: string);
|
|
313
|
+
get listboxLabel(): string;
|
|
309
314
|
/**
|
|
310
315
|
* Specifies the value of the `aria-label` attribute of the Listbox toolbar element.
|
|
311
316
|
*
|
|
@@ -314,11 +319,13 @@ declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
314
319
|
* @remarks
|
|
315
320
|
* This property is related to accessibility.
|
|
316
321
|
*/
|
|
317
|
-
listboxToolbarLabel: string;
|
|
322
|
+
set listboxToolbarLabel(value: string);
|
|
323
|
+
get listboxToolbarLabel(): string;
|
|
318
324
|
/**
|
|
319
325
|
* Specifies a function that determines if a specific item is disabled.
|
|
320
326
|
*/
|
|
321
|
-
itemDisabled: (item: any) => boolean;
|
|
327
|
+
set itemDisabled(fn: (item: any) => boolean);
|
|
328
|
+
get itemDisabled(): (item: any) => boolean;
|
|
322
329
|
/**
|
|
323
330
|
* Fires when you select a different ListBox item.
|
|
324
331
|
* Also fires when you move a node, because moving changes its index.
|
|
@@ -368,14 +375,23 @@ declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
|
368
375
|
* @hidden
|
|
369
376
|
*/
|
|
370
377
|
chevronRightIcon: SVGIcon;
|
|
371
|
-
private localizationSubscription;
|
|
372
378
|
private _size;
|
|
379
|
+
private _selectable;
|
|
380
|
+
private _textField;
|
|
381
|
+
private _data;
|
|
382
|
+
private _toolbar;
|
|
383
|
+
private _listboxLabel;
|
|
384
|
+
private _listboxToolbarLabel;
|
|
385
|
+
private _itemDisabled;
|
|
386
|
+
private localizationSubscription;
|
|
373
387
|
private subs;
|
|
374
388
|
private shouldFireFocusIn;
|
|
375
|
-
private
|
|
376
|
-
|
|
389
|
+
private _prevItemTemplate;
|
|
390
|
+
private _prevNoDataTemplate;
|
|
391
|
+
constructor(keyboardNavigationService: KeyboardNavigationService, selectionService: ListBoxSelectionService, hostElement: ElementRef, renderer: Renderer2, zone: NgZone, localization: LocalizationService, cdr: ChangeDetectorRef, injector: Injector);
|
|
377
392
|
ngOnInit(): void;
|
|
378
393
|
ngAfterViewInit(): void;
|
|
394
|
+
ngAfterContentChecked(): void;
|
|
379
395
|
ngOnDestroy(): void;
|
|
380
396
|
/**
|
|
381
397
|
* @hidden
|
|
@@ -462,7 +478,7 @@ declare class ItemSelectableDirective {
|
|
|
462
478
|
*/
|
|
463
479
|
declare class DataBindingDirective implements OnChanges, OnDestroy {
|
|
464
480
|
private listbox;
|
|
465
|
-
private
|
|
481
|
+
private injector;
|
|
466
482
|
/**
|
|
467
483
|
* Specifies the `ListBoxComponent` instance with which the current ListBox connects.
|
|
468
484
|
* When you link two listboxes through this input, you can transfer items between them.
|
|
@@ -472,7 +488,7 @@ declare class DataBindingDirective implements OnChanges, OnDestroy {
|
|
|
472
488
|
private selectedBoxSub;
|
|
473
489
|
private connectedWithSub;
|
|
474
490
|
private selectedBox;
|
|
475
|
-
constructor(listbox: ListBoxComponent,
|
|
491
|
+
constructor(listbox: ListBoxComponent, injector: Injector);
|
|
476
492
|
/**
|
|
477
493
|
* @hidden
|
|
478
494
|
*/
|
|
@@ -497,35 +513,51 @@ declare class Messages extends ComponentMessages {
|
|
|
497
513
|
/**
|
|
498
514
|
* The text of the `Move Up` button title.
|
|
499
515
|
*/
|
|
500
|
-
moveUp: string;
|
|
516
|
+
set moveUp(value: string);
|
|
517
|
+
get moveUp(): string;
|
|
501
518
|
/**
|
|
502
519
|
* The text of the `Move Down` button title.
|
|
503
520
|
*/
|
|
504
|
-
moveDown: string;
|
|
521
|
+
set moveDown(value: string);
|
|
522
|
+
get moveDown(): string;
|
|
505
523
|
/**
|
|
506
524
|
* The text of the `Remove` button tittle.
|
|
507
525
|
*/
|
|
508
|
-
remove: string;
|
|
526
|
+
set remove(value: string);
|
|
527
|
+
get remove(): string;
|
|
509
528
|
/**
|
|
510
529
|
* The text of the `Transfer To` button title.
|
|
511
530
|
*/
|
|
512
|
-
transferTo: string;
|
|
531
|
+
set transferTo(value: string);
|
|
532
|
+
get transferTo(): string;
|
|
513
533
|
/**
|
|
514
534
|
* The text of the `Transfer From` button title.
|
|
515
535
|
*/
|
|
516
|
-
transferFrom: string;
|
|
536
|
+
set transferFrom(value: string);
|
|
537
|
+
get transferFrom(): string;
|
|
517
538
|
/**
|
|
518
539
|
* The text of the `Transfer All To` button title.
|
|
519
540
|
*/
|
|
520
|
-
transferAllTo: string;
|
|
541
|
+
set transferAllTo(value: string);
|
|
542
|
+
get transferAllTo(): string;
|
|
521
543
|
/**
|
|
522
544
|
* The text of the `Transfer All From` button title.
|
|
523
545
|
*/
|
|
524
|
-
transferAllFrom: string;
|
|
546
|
+
set transferAllFrom(value: string);
|
|
547
|
+
get transferAllFrom(): string;
|
|
525
548
|
/**
|
|
526
549
|
* The text displayed when there are no items.
|
|
527
550
|
*/
|
|
528
|
-
noDataText: string;
|
|
551
|
+
set noDataText(value: string);
|
|
552
|
+
get noDataText(): string;
|
|
553
|
+
private _moveUp;
|
|
554
|
+
private _moveDown;
|
|
555
|
+
private _remove;
|
|
556
|
+
private _transferTo;
|
|
557
|
+
private _transferFrom;
|
|
558
|
+
private _transferAllTo;
|
|
559
|
+
private _transferAllFrom;
|
|
560
|
+
private _noDataText;
|
|
529
561
|
static ɵfac: i0.ɵɵFactoryDeclaration<Messages, never>;
|
|
530
562
|
static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, never, never, { "moveUp": { "alias": "moveUp"; "required": false; }; "moveDown": { "alias": "moveDown"; "required": false; }; "remove": { "alias": "remove"; "required": false; }; "transferTo": { "alias": "transferTo"; "required": false; }; "transferFrom": { "alias": "transferFrom"; "required": false; }; "transferAllTo": { "alias": "transferAllTo"; "required": false; }; "transferAllFrom": { "alias": "transferAllFrom"; "required": false; }; "noDataText": { "alias": "noDataText"; "required": false; }; }, {}, never, never, true, never>;
|
|
531
563
|
}
|
package/package-metadata.mjs
CHANGED
|
@@ -7,7 +7,7 @@ export const packageMetadata = {
|
|
|
7
7
|
"productCodes": [
|
|
8
8
|
"KENDOUIANGULAR"
|
|
9
9
|
],
|
|
10
|
-
"publishDate":
|
|
11
|
-
"version": "25.1.0-develop.
|
|
10
|
+
"publishDate": 1787724404,
|
|
11
|
+
"version": "25.1.0-develop.11",
|
|
12
12
|
"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"
|
|
13
13
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-listbox",
|
|
3
|
-
"version": "25.1.0-develop.
|
|
3
|
+
"version": "25.1.0-develop.11",
|
|
4
4
|
"description": "Kendo UI for Angular ListBox",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"package": {
|
|
42
42
|
"productName": "Kendo UI for Angular",
|
|
43
43
|
"productCode": "KENDOUIANGULAR",
|
|
44
|
-
"publishDate":
|
|
44
|
+
"publishDate": 1787724404,
|
|
45
45
|
"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"
|
|
46
46
|
}
|
|
47
47
|
},
|
|
@@ -51,14 +51,14 @@
|
|
|
51
51
|
"@angular/core": "20 - 22",
|
|
52
52
|
"@angular/platform-browser": "20 - 22",
|
|
53
53
|
"@progress/kendo-licensing": "^1.11.0",
|
|
54
|
-
"@progress/kendo-angular-buttons": "25.1.0-develop.
|
|
55
|
-
"@progress/kendo-angular-common": "25.1.0-develop.
|
|
56
|
-
"@progress/kendo-angular-popup": "25.1.0-develop.
|
|
54
|
+
"@progress/kendo-angular-buttons": "25.1.0-develop.11",
|
|
55
|
+
"@progress/kendo-angular-common": "25.1.0-develop.11",
|
|
56
|
+
"@progress/kendo-angular-popup": "25.1.0-develop.11",
|
|
57
57
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"tslib": "^2.3.1",
|
|
61
|
-
"@progress/kendo-angular-schematics": "25.1.0-develop.
|
|
61
|
+
"@progress/kendo-angular-schematics": "25.1.0-develop.11",
|
|
62
62
|
"@progress/kendo-common": "^1.0.1"
|
|
63
63
|
},
|
|
64
64
|
"schematics": "./schematics/collection.json",
|
|
@@ -11,11 +11,11 @@ function default_1(options) {
|
|
|
11
11
|
// Additional dependencies to install.
|
|
12
12
|
// See https://github.com/telerik/kendo-schematics/issues/28
|
|
13
13
|
peerDependencies: {
|
|
14
|
-
'@progress/kendo-angular-buttons': '25.1.0-develop.
|
|
15
|
-
'@progress/kendo-angular-common': '25.1.0-develop.
|
|
16
|
-
'@progress/kendo-angular-l10n': '25.1.0-develop.
|
|
14
|
+
'@progress/kendo-angular-buttons': '25.1.0-develop.11',
|
|
15
|
+
'@progress/kendo-angular-common': '25.1.0-develop.11',
|
|
16
|
+
'@progress/kendo-angular-l10n': '25.1.0-develop.11',
|
|
17
17
|
// Peer of kendo-angular-buttons
|
|
18
|
-
'@progress/kendo-angular-popup': '25.1.0-develop.
|
|
18
|
+
'@progress/kendo-angular-popup': '25.1.0-develop.11'
|
|
19
19
|
} });
|
|
20
20
|
return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
|
|
21
21
|
}
|