@progress/kendo-angular-listbox 21.4.1 → 22.0.0
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 +34 -34
- package/localization/messages.d.ts +1 -1
- package/package.json +9 -17
- package/schematics/ngAdd/index.js +4 -4
- package/esm2022/constants.mjs +0 -73
- package/esm2022/data-binding.directive.mjs +0 -294
- package/esm2022/directives.mjs +0 -19
- package/esm2022/index.mjs +0 -12
- package/esm2022/item-selectable.directive.mjs +0 -47
- package/esm2022/item-template.directive.mjs +0 -42
- package/esm2022/keyboard-navigation.service.mjs +0 -389
- package/esm2022/listbox.component.mjs +0 -792
- package/esm2022/listbox.module.mjs +0 -32
- package/esm2022/localization/custom-messages.component.mjs +0 -58
- package/esm2022/localization/localized-messages.directive.mjs +0 -39
- package/esm2022/localization/messages.mjs +0 -66
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/progress-kendo-angular-listbox.mjs +0 -8
- package/esm2022/selection-mode.mjs +0 -5
- package/esm2022/selection.service.mjs +0 -166
- package/esm2022/size.mjs +0 -5
- package/esm2022/toolbar.mjs +0 -5
- package/esm2022/util.mjs +0 -38
|
@@ -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,
|
|
6
|
+
import { EventEmitter, Injectable, Directive, HostListener, HostBinding, Input, forwardRef, isDevMode, Output, ViewChildren, ViewChild, ContentChild, 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';
|
|
@@ -24,8 +24,8 @@ const packageMetadata = {
|
|
|
24
24
|
productName: 'Kendo UI for Angular',
|
|
25
25
|
productCode: 'KENDOUIANGULAR',
|
|
26
26
|
productCodes: ['KENDOUIANGULAR'],
|
|
27
|
-
publishDate:
|
|
28
|
-
version: '
|
|
27
|
+
publishDate: 1768402549,
|
|
28
|
+
version: '22.0.0',
|
|
29
29
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
30
30
|
};
|
|
31
31
|
|
|
@@ -183,10 +183,10 @@ class ListBoxSelectionService {
|
|
|
183
183
|
this.lastSelectedOrUnselectedIndex = null;
|
|
184
184
|
this.rangeSelectionAnchorIndex = null;
|
|
185
185
|
}
|
|
186
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
187
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
186
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListBoxSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
187
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListBoxSelectionService });
|
|
188
188
|
}
|
|
189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListBoxSelectionService, decorators: [{
|
|
190
190
|
type: Injectable
|
|
191
191
|
}] });
|
|
192
192
|
|
|
@@ -216,10 +216,10 @@ class ItemTemplateDirective {
|
|
|
216
216
|
constructor(templateRef) {
|
|
217
217
|
this.templateRef = templateRef;
|
|
218
218
|
}
|
|
219
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
220
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
219
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
220
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoListBoxItemTemplate]", ngImport: i0 });
|
|
221
221
|
}
|
|
222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ItemTemplateDirective, decorators: [{
|
|
223
223
|
type: Directive,
|
|
224
224
|
args: [{
|
|
225
225
|
selector: '[kendoListBoxItemTemplate]',
|
|
@@ -704,10 +704,10 @@ class KeyboardNavigationService {
|
|
|
704
704
|
}
|
|
705
705
|
return listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
706
706
|
}
|
|
707
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
708
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
707
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
708
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KeyboardNavigationService });
|
|
709
709
|
}
|
|
710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KeyboardNavigationService, decorators: [{
|
|
711
711
|
type: Injectable
|
|
712
712
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }] });
|
|
713
713
|
|
|
@@ -732,10 +732,10 @@ class ItemSelectableDirective {
|
|
|
732
732
|
}
|
|
733
733
|
this.selectionService.select(this.index, ctrlKey, shiftKey);
|
|
734
734
|
}
|
|
735
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
736
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
735
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
736
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: ItemSelectableDirective, isStandalone: true, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
|
|
737
737
|
}
|
|
738
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
738
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ItemSelectableDirective, decorators: [{
|
|
739
739
|
type: Directive,
|
|
740
740
|
args: [{
|
|
741
741
|
selector: '[kendoListBoxItemSelectable]',
|
|
@@ -787,10 +787,10 @@ class Messages extends ComponentMessages {
|
|
|
787
787
|
* The text displayed when there are no items.
|
|
788
788
|
*/
|
|
789
789
|
noDataText;
|
|
790
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
791
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
790
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
791
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", 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 });
|
|
792
792
|
}
|
|
793
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
793
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: Messages, decorators: [{
|
|
794
794
|
type: Directive
|
|
795
795
|
}], propDecorators: { moveUp: [{
|
|
796
796
|
type: Input
|
|
@@ -819,15 +819,15 @@ class LocalizedMessagesDirective extends Messages {
|
|
|
819
819
|
super();
|
|
820
820
|
this.service = service;
|
|
821
821
|
}
|
|
822
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
823
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
822
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
823
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoListBoxLocalizedMessages]", providers: [
|
|
824
824
|
{
|
|
825
825
|
provide: Messages,
|
|
826
826
|
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
827
827
|
}
|
|
828
828
|
], usesInheritance: true, ngImport: i0 });
|
|
829
829
|
}
|
|
830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
830
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
|
831
831
|
type: Directive,
|
|
832
832
|
args: [{
|
|
833
833
|
providers: [
|
|
@@ -1341,8 +1341,8 @@ class ListBoxComponent {
|
|
|
1341
1341
|
setSizingClass(size) {
|
|
1342
1342
|
this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
|
|
1343
1343
|
}
|
|
1344
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1345
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1344
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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 });
|
|
1345
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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: [
|
|
1346
1346
|
ListBoxSelectionService,
|
|
1347
1347
|
KeyboardNavigationService,
|
|
1348
1348
|
LocalizationService,
|
|
@@ -1450,7 +1450,7 @@ class ListBoxComponent {
|
|
|
1450
1450
|
</div>
|
|
1451
1451
|
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
|
|
1452
1452
|
}
|
|
1453
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListBoxComponent, decorators: [{
|
|
1454
1454
|
type: Component,
|
|
1455
1455
|
args: [{
|
|
1456
1456
|
selector: 'kendo-listbox',
|
|
@@ -1880,10 +1880,10 @@ class DataBindingDirective {
|
|
|
1880
1880
|
selectionService.rangeSelectionAnchorIndex = index;
|
|
1881
1881
|
selectionService.lastSelectedOrUnselectedIndex = index;
|
|
1882
1882
|
};
|
|
1883
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1884
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1883
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListBoxComponent }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1884
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: DataBindingDirective, isStandalone: true, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
|
|
1885
1885
|
}
|
|
1886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1886
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DataBindingDirective, decorators: [{
|
|
1887
1887
|
type: Directive,
|
|
1888
1888
|
args: [{
|
|
1889
1889
|
selector: '[kendoListBoxDataBinding]',
|
|
@@ -1920,15 +1920,15 @@ class CustomMessagesComponent extends Messages {
|
|
|
1920
1920
|
get override() {
|
|
1921
1921
|
return true;
|
|
1922
1922
|
}
|
|
1923
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1924
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1923
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1924
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-listbox-messages", providers: [
|
|
1925
1925
|
{
|
|
1926
1926
|
provide: Messages,
|
|
1927
1927
|
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
1928
1928
|
}
|
|
1929
1929
|
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
1930
1930
|
}
|
|
1931
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1931
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CustomMessagesComponent, decorators: [{
|
|
1932
1932
|
type: Component,
|
|
1933
1933
|
args: [{
|
|
1934
1934
|
providers: [
|
|
@@ -1959,11 +1959,11 @@ const KENDO_LISTBOX = [
|
|
|
1959
1959
|
* Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the ListBox component.
|
|
1960
1960
|
*/
|
|
1961
1961
|
class ListBoxModule {
|
|
1962
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1963
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1964
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1962
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1963
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: ListBoxModule, imports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective, CustomMessagesComponent], exports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective, CustomMessagesComponent] });
|
|
1964
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListBoxModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ListBoxComponent] });
|
|
1965
1965
|
}
|
|
1966
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListBoxModule, decorators: [{
|
|
1967
1967
|
type: NgModule,
|
|
1968
1968
|
args: [{
|
|
1969
1969
|
imports: [...KENDO_LISTBOX],
|
|
@@ -41,5 +41,5 @@ export declare class Messages extends ComponentMessages {
|
|
|
41
41
|
*/
|
|
42
42
|
noDataText: string;
|
|
43
43
|
static ɵfac: i0.ɵɵFactoryDeclaration<Messages, never>;
|
|
44
|
-
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,
|
|
44
|
+
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>;
|
|
45
45
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-listbox",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "22.0.0",
|
|
4
4
|
"description": "Kendo UI for Angular ListBox",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -40,28 +40,22 @@
|
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}
|
|
43
|
-
},
|
|
44
|
-
"package": {
|
|
45
|
-
"productName": "Kendo UI for Angular",
|
|
46
|
-
"productCode": "KENDOUIANGULAR",
|
|
47
|
-
"publishDate": 1768393337,
|
|
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"
|
|
49
43
|
}
|
|
50
44
|
},
|
|
51
45
|
"peerDependencies": {
|
|
52
|
-
"@angular/animations": "
|
|
53
|
-
"@angular/common": "
|
|
54
|
-
"@angular/core": "
|
|
55
|
-
"@angular/platform-browser": "
|
|
46
|
+
"@angular/animations": "19 - 21",
|
|
47
|
+
"@angular/common": "19 - 21",
|
|
48
|
+
"@angular/core": "19 - 21",
|
|
49
|
+
"@angular/platform-browser": "19 - 21",
|
|
56
50
|
"@progress/kendo-licensing": "^1.7.0",
|
|
57
|
-
"@progress/kendo-angular-buttons": "
|
|
58
|
-
"@progress/kendo-angular-common": "
|
|
59
|
-
"@progress/kendo-angular-popup": "
|
|
51
|
+
"@progress/kendo-angular-buttons": "22.0.0",
|
|
52
|
+
"@progress/kendo-angular-common": "22.0.0",
|
|
53
|
+
"@progress/kendo-angular-popup": "22.0.0",
|
|
60
54
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
61
55
|
},
|
|
62
56
|
"dependencies": {
|
|
63
57
|
"tslib": "^2.3.1",
|
|
64
|
-
"@progress/kendo-angular-schematics": "
|
|
58
|
+
"@progress/kendo-angular-schematics": "22.0.0",
|
|
65
59
|
"@progress/kendo-common": "^1.0.1"
|
|
66
60
|
},
|
|
67
61
|
"schematics": "./schematics/collection.json",
|
|
@@ -73,8 +67,6 @@
|
|
|
73
67
|
},
|
|
74
68
|
".": {
|
|
75
69
|
"types": "./index.d.ts",
|
|
76
|
-
"esm2022": "./esm2022/progress-kendo-angular-listbox.mjs",
|
|
77
|
-
"esm": "./esm2022/progress-kendo-angular-listbox.mjs",
|
|
78
70
|
"default": "./fesm2022/progress-kendo-angular-listbox.mjs"
|
|
79
71
|
}
|
|
80
72
|
},
|
|
@@ -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': '
|
|
15
|
-
'@progress/kendo-angular-common': '
|
|
16
|
-
'@progress/kendo-angular-l10n': '
|
|
14
|
+
'@progress/kendo-angular-buttons': '22.0.0',
|
|
15
|
+
'@progress/kendo-angular-common': '22.0.0',
|
|
16
|
+
'@progress/kendo-angular-l10n': '22.0.0',
|
|
17
17
|
// Peer of kendo-angular-buttons
|
|
18
|
-
'@progress/kendo-angular-popup': '
|
|
18
|
+
'@progress/kendo-angular-popup': '22.0.0'
|
|
19
19
|
} });
|
|
20
20
|
return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
|
|
21
21
|
}
|
package/esm2022/constants.mjs
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretDoubleAltLeftIcon, caretDoubleAltRightIcon, xIcon } from "@progress/kendo-svg-icons";
|
|
6
|
-
/**
|
|
7
|
-
* @hidden
|
|
8
|
-
*/
|
|
9
|
-
export const DEFAULT_TOOLBAR_POSITION = 'right';
|
|
10
|
-
/**
|
|
11
|
-
* @hidden
|
|
12
|
-
*/
|
|
13
|
-
export const allTools = [
|
|
14
|
-
{
|
|
15
|
-
name: 'moveUp',
|
|
16
|
-
label: 'Move Up',
|
|
17
|
-
icon: 'caret-alt-up',
|
|
18
|
-
svgIcon: caretAltUpIcon
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
name: 'moveDown',
|
|
22
|
-
label: 'Move Down',
|
|
23
|
-
icon: 'caret-alt-down',
|
|
24
|
-
svgIcon: caretAltDownIcon
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
name: 'transferTo',
|
|
28
|
-
label: 'Transfer To',
|
|
29
|
-
icon: 'caret-alt-right',
|
|
30
|
-
svgIcon: caretAltRightIcon
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
name: 'transferFrom',
|
|
34
|
-
label: 'Transfer From',
|
|
35
|
-
icon: 'caret-alt-left',
|
|
36
|
-
svgIcon: caretAltLeftIcon
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
name: 'transferAllTo',
|
|
40
|
-
label: 'Transfer All To',
|
|
41
|
-
icon: 'caret-double-alt-right',
|
|
42
|
-
svgIcon: caretDoubleAltRightIcon
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
name: 'transferAllFrom',
|
|
46
|
-
label: 'Transfer All From',
|
|
47
|
-
icon: 'caret-double-alt-left',
|
|
48
|
-
svgIcon: caretDoubleAltLeftIcon
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
name: 'remove',
|
|
52
|
-
label: 'Remove',
|
|
53
|
-
icon: 'x',
|
|
54
|
-
svgIcon: xIcon
|
|
55
|
-
}
|
|
56
|
-
];
|
|
57
|
-
/**
|
|
58
|
-
* @hidden
|
|
59
|
-
*/
|
|
60
|
-
export const sizeClassMap = {
|
|
61
|
-
small: 'sm',
|
|
62
|
-
medium: 'md',
|
|
63
|
-
large: 'lg'
|
|
64
|
-
};
|
|
65
|
-
/**
|
|
66
|
-
* @hidden
|
|
67
|
-
*/
|
|
68
|
-
export const actionsClasses = {
|
|
69
|
-
left: 'k-listbox-actions-left',
|
|
70
|
-
right: 'k-listbox-actions-right',
|
|
71
|
-
top: 'k-listbox-actions-top',
|
|
72
|
-
bottom: 'k-listbox-actions-bottom'
|
|
73
|
-
};
|
|
@@ -1,294 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, Input, NgZone } from '@angular/core';
|
|
6
|
-
import { isChanged } from '@progress/kendo-angular-common';
|
|
7
|
-
import { Subscription } from 'rxjs';
|
|
8
|
-
import { take } from 'rxjs/operators';
|
|
9
|
-
import { ListBoxComponent } from './listbox.component';
|
|
10
|
-
import { isPresent } from './util';
|
|
11
|
-
import * as i0 from "@angular/core";
|
|
12
|
-
import * as i1 from "./listbox.component";
|
|
13
|
-
/**
|
|
14
|
-
* Represents the data-binding directive for the Kendo UI ListBox for Angular.
|
|
15
|
-
* Manages the functionality of the ListBox tools out of the box and modifies the provided data accordingly.
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```typescript
|
|
19
|
-
* @Component({
|
|
20
|
-
* selector: 'my-app',
|
|
21
|
-
* template: `
|
|
22
|
-
* <kendo-listbox
|
|
23
|
-
* kendoListBoxDataBinding
|
|
24
|
-
* [connectedWith]="targetListBox"
|
|
25
|
-
* [data]="sourceData">
|
|
26
|
-
* </kendo-listbox>
|
|
27
|
-
* `
|
|
28
|
-
* })
|
|
29
|
-
* export class AppComponent { }
|
|
30
|
-
* ```
|
|
31
|
-
*
|
|
32
|
-
* @remarks
|
|
33
|
-
* Applied to: {@link ListBoxComponent}.
|
|
34
|
-
*/
|
|
35
|
-
export class DataBindingDirective {
|
|
36
|
-
listbox;
|
|
37
|
-
zone;
|
|
38
|
-
/**
|
|
39
|
-
* Specifies the `ListBoxComponent` instance with which the current ListBox connects.
|
|
40
|
-
* When you link two listboxes through this input, you can transfer items between them.
|
|
41
|
-
*/
|
|
42
|
-
connectedWith;
|
|
43
|
-
actionSub = new Subscription();
|
|
44
|
-
selectedBoxSub = new Subscription();
|
|
45
|
-
connectedWithSub = new Subscription();
|
|
46
|
-
selectedBox;
|
|
47
|
-
constructor(listbox, zone) {
|
|
48
|
-
this.listbox = listbox;
|
|
49
|
-
this.zone = zone;
|
|
50
|
-
this.selectedBox = this.listbox;
|
|
51
|
-
this.connectedWithSub.add(this.listbox.getChildListbox.subscribe(() => {
|
|
52
|
-
this.listbox.childListbox = this.connectedWith;
|
|
53
|
-
}));
|
|
54
|
-
this.actionSub.add(this.listbox.action.subscribe((actionName) => {
|
|
55
|
-
switch (actionName) {
|
|
56
|
-
case 'moveUp': {
|
|
57
|
-
this.moveVertically('up');
|
|
58
|
-
break;
|
|
59
|
-
}
|
|
60
|
-
case 'moveDown': {
|
|
61
|
-
this.moveVertically('down');
|
|
62
|
-
break;
|
|
63
|
-
}
|
|
64
|
-
case 'transferFrom': {
|
|
65
|
-
this.transferSelectedItems(this.connectedWith, this.listbox);
|
|
66
|
-
break;
|
|
67
|
-
}
|
|
68
|
-
case 'transferTo': {
|
|
69
|
-
this.transferSelectedItems(this.listbox, this.connectedWith);
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
72
|
-
case 'transferAllTo': {
|
|
73
|
-
this.transferAll(this.listbox, this.connectedWith);
|
|
74
|
-
break;
|
|
75
|
-
}
|
|
76
|
-
case 'transferAllFrom': {
|
|
77
|
-
this.transferAll(this.connectedWith, this.listbox);
|
|
78
|
-
break;
|
|
79
|
-
}
|
|
80
|
-
case 'remove': {
|
|
81
|
-
this.removeSelectedItems();
|
|
82
|
-
break;
|
|
83
|
-
}
|
|
84
|
-
default: {
|
|
85
|
-
break;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}));
|
|
89
|
-
}
|
|
90
|
-
/**
|
|
91
|
-
* @hidden
|
|
92
|
-
*/
|
|
93
|
-
ngOnChanges(changes) {
|
|
94
|
-
if (isChanged('connectedWith', changes, false)) {
|
|
95
|
-
if (!changes['connectedWith'].firstChange) {
|
|
96
|
-
this.selectedBoxSub.unsubscribe();
|
|
97
|
-
this.selectedBoxSub = new Subscription();
|
|
98
|
-
}
|
|
99
|
-
this.selectedBoxSub.add(this.listbox.selectionChange.subscribe(() => {
|
|
100
|
-
this.selectedBox = this.listbox;
|
|
101
|
-
const connectedNavService = this.connectedWith.keyboardNavigationService;
|
|
102
|
-
const connectedSelService = this.connectedWith.selectionService;
|
|
103
|
-
let lastSelectedIndex = 0;
|
|
104
|
-
if (connectedSelService.selectedIndices.length > 0) {
|
|
105
|
-
lastSelectedIndex = connectedSelService.rangeSelectionTargetIndex ?? connectedSelService.lastSelectedOrUnselectedIndex ?? 0;
|
|
106
|
-
}
|
|
107
|
-
this.connectedWith.clearSelection();
|
|
108
|
-
if (this.connectedWith.data?.length > 0) {
|
|
109
|
-
const validIndex = Math.min(lastSelectedIndex, this.connectedWith.data.length - 1);
|
|
110
|
-
this.updateListBoxIndices(connectedNavService, connectedSelService, validIndex, false);
|
|
111
|
-
}
|
|
112
|
-
else {
|
|
113
|
-
this.updateListBoxIndices(connectedNavService, connectedSelService, 0, false);
|
|
114
|
-
}
|
|
115
|
-
}));
|
|
116
|
-
this.selectedBoxSub.add(this.connectedWith.selectionChange.subscribe(() => {
|
|
117
|
-
this.selectedBox = this.connectedWith;
|
|
118
|
-
const listboxNavService = this.listbox.keyboardNavigationService;
|
|
119
|
-
const listboxSelService = this.listbox.selectionService;
|
|
120
|
-
let lastSelectedIndex = 0;
|
|
121
|
-
if (listboxSelService.selectedIndices.length > 0) {
|
|
122
|
-
lastSelectedIndex = listboxSelService.rangeSelectionTargetIndex ?? listboxSelService.lastSelectedOrUnselectedIndex ?? 0;
|
|
123
|
-
}
|
|
124
|
-
this.listbox.clearSelection();
|
|
125
|
-
if (this.listbox.data?.length > 0) {
|
|
126
|
-
const validIndex = Math.min(lastSelectedIndex, this.listbox.data.length - 1);
|
|
127
|
-
this.updateListBoxIndices(listboxNavService, listboxSelService, validIndex, false);
|
|
128
|
-
}
|
|
129
|
-
else {
|
|
130
|
-
this.updateListBoxIndices(listboxNavService, listboxSelService, 0, false);
|
|
131
|
-
}
|
|
132
|
-
}));
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
/**
|
|
136
|
-
* @hidden
|
|
137
|
-
*/
|
|
138
|
-
ngOnDestroy() {
|
|
139
|
-
if (this.actionSub) {
|
|
140
|
-
this.actionSub.unsubscribe();
|
|
141
|
-
this.actionSub = null;
|
|
142
|
-
}
|
|
143
|
-
if (this.selectedBoxSub) {
|
|
144
|
-
this.selectedBoxSub.unsubscribe();
|
|
145
|
-
this.selectedBoxSub = null;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
moveVertically(dir) {
|
|
149
|
-
const selectedIndices = this.selectedBox.selectedIndices;
|
|
150
|
-
if (!isPresent(selectedIndices) || selectedIndices.length === 0) {
|
|
151
|
-
return;
|
|
152
|
-
}
|
|
153
|
-
const sortedIndices = [...selectedIndices].sort((a, b) => a - b);
|
|
154
|
-
const topIndex = sortedIndices[0];
|
|
155
|
-
const bottomIndex = sortedIndices[sortedIndices.length - 1];
|
|
156
|
-
const topReached = dir === 'up' && topIndex <= 0;
|
|
157
|
-
const bottomReached = dir === 'down' && bottomIndex >= this.selectedBox.data.length - 1;
|
|
158
|
-
if (topReached || bottomReached) {
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
|
-
const data = this.selectedBox.data;
|
|
162
|
-
const newSelectedIndices = [];
|
|
163
|
-
if (dir === 'up') {
|
|
164
|
-
for (const index of sortedIndices) {
|
|
165
|
-
const newIndex = index - 1;
|
|
166
|
-
[data[newIndex], data[index]] = [data[index], data[newIndex]];
|
|
167
|
-
newSelectedIndices.push(newIndex);
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
else {
|
|
171
|
-
for (let i = sortedIndices.length - 1; i >= 0; i--) {
|
|
172
|
-
const index = sortedIndices[i];
|
|
173
|
-
const newIndex = index + 1;
|
|
174
|
-
[data[newIndex], data[index]] = [data[index], data[newIndex]];
|
|
175
|
-
newSelectedIndices.push(newIndex);
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
newSelectedIndices.sort((a, b) => a - b);
|
|
179
|
-
this.selectedBox.selectionService.setSelectedIndices(newSelectedIndices);
|
|
180
|
-
const navigation = this.selectedBox.keyboardNavigationService;
|
|
181
|
-
const currentFocusedIndex = navigation.focusedListboxItemIndex;
|
|
182
|
-
const focusedItemIndexInSelection = sortedIndices.indexOf(currentFocusedIndex);
|
|
183
|
-
let newFocusIndex;
|
|
184
|
-
if (focusedItemIndexInSelection !== -1) {
|
|
185
|
-
newFocusIndex = newSelectedIndices[focusedItemIndexInSelection];
|
|
186
|
-
}
|
|
187
|
-
else {
|
|
188
|
-
newFocusIndex = dir === 'up' ? topIndex - 1 : bottomIndex + 1;
|
|
189
|
-
}
|
|
190
|
-
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
191
|
-
const listboxItems = this.selectedBox.listboxItems.toArray();
|
|
192
|
-
const previousItem = listboxItems[currentFocusedIndex]?.nativeElement;
|
|
193
|
-
const currentItem = listboxItems[newFocusIndex]?.nativeElement;
|
|
194
|
-
navigation.changeTabindex(previousItem, currentItem);
|
|
195
|
-
navigation.focusedListboxItemIndex = newFocusIndex;
|
|
196
|
-
navigation.selectedListboxItemIndex = newFocusIndex;
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
removeSelectedItems() {
|
|
200
|
-
const itemIndices = this.selectedBox.selectedIndices;
|
|
201
|
-
if (!isPresent(itemIndices) || itemIndices.length === 0) {
|
|
202
|
-
return;
|
|
203
|
-
}
|
|
204
|
-
// Remove items in reverse order to maintain correct indices
|
|
205
|
-
const sortedIndices = [...itemIndices].sort((a, b) => b - a);
|
|
206
|
-
for (const index of sortedIndices) {
|
|
207
|
-
this.selectedBox.data.splice(index, 1);
|
|
208
|
-
}
|
|
209
|
-
this.selectedBox.selectionService.clearSelection();
|
|
210
|
-
}
|
|
211
|
-
transferSelectedItems(source, target) {
|
|
212
|
-
const selectedIndices = source?.data && source?.selectedIndices;
|
|
213
|
-
if (!target || !source || !isPresent(selectedIndices) || selectedIndices.length === 0) {
|
|
214
|
-
return;
|
|
215
|
-
}
|
|
216
|
-
const sourceLastIndex = source.selectionService.rangeSelectionTargetIndex ??
|
|
217
|
-
source.selectionService.lastSelectedOrUnselectedIndex ??
|
|
218
|
-
0;
|
|
219
|
-
const itemsToTransfer = selectedIndices.map(index => source.data[index]);
|
|
220
|
-
target.data.push(...itemsToTransfer);
|
|
221
|
-
// Remove items in reverse order to maintain correct indices
|
|
222
|
-
const sortedIndices = [...selectedIndices].sort((a, b) => b - a);
|
|
223
|
-
for (const index of sortedIndices) {
|
|
224
|
-
source.data.splice(index, 1);
|
|
225
|
-
}
|
|
226
|
-
source.clearSelection();
|
|
227
|
-
const removedBeforeAnchor = selectedIndices.filter(i => i < sourceLastIndex).length;
|
|
228
|
-
const adjustedAnchorIndex = Math.max(0, Math.min(sourceLastIndex - removedBeforeAnchor, source.data.length - 1));
|
|
229
|
-
const sourceNavService = source.keyboardNavigationService;
|
|
230
|
-
const sourceSelService = source.selectionService;
|
|
231
|
-
if (source.data.length > 0) {
|
|
232
|
-
this.updateListBoxIndices(sourceNavService, sourceSelService, adjustedAnchorIndex);
|
|
233
|
-
}
|
|
234
|
-
const targetIndex = target.data.length - 1;
|
|
235
|
-
target.select([targetIndex]);
|
|
236
|
-
const targetNavService = target.keyboardNavigationService;
|
|
237
|
-
const targetSelService = target.selectionService;
|
|
238
|
-
this.updateListBoxIndices(targetNavService, targetSelService, targetIndex);
|
|
239
|
-
this.selectedBox = target;
|
|
240
|
-
}
|
|
241
|
-
transferAll(source, target) {
|
|
242
|
-
if (!target || !source || source.data?.length === 0) {
|
|
243
|
-
return;
|
|
244
|
-
}
|
|
245
|
-
const itemsToTransfer = source.data.filter((item) => !source.itemDisabled(item));
|
|
246
|
-
if (itemsToTransfer.length === 0) {
|
|
247
|
-
return;
|
|
248
|
-
}
|
|
249
|
-
// Remove items in reverse order to maintain correct indices
|
|
250
|
-
for (let i = source.data.length - 1; i >= 0; i--) {
|
|
251
|
-
if (!source.itemDisabled(source.data[i])) {
|
|
252
|
-
source.data.splice(i, 1);
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
target.data.push(...itemsToTransfer);
|
|
256
|
-
source.clearSelection();
|
|
257
|
-
const sourceNavService = source.keyboardNavigationService;
|
|
258
|
-
const sourceSelService = source.selectionService;
|
|
259
|
-
if (source.data.length === 0) {
|
|
260
|
-
this.updateListBoxIndices(sourceNavService, sourceSelService, 0);
|
|
261
|
-
}
|
|
262
|
-
else {
|
|
263
|
-
sourceNavService.focusedListboxItemIndex = 0;
|
|
264
|
-
sourceNavService.selectedListboxItemIndex = -1;
|
|
265
|
-
sourceSelService.rangeSelectionAnchorIndex = null;
|
|
266
|
-
sourceSelService.lastSelectedOrUnselectedIndex = null;
|
|
267
|
-
}
|
|
268
|
-
const targetIndex = target.data.length - 1;
|
|
269
|
-
target.select([targetIndex]);
|
|
270
|
-
const targetNavService = target.keyboardNavigationService;
|
|
271
|
-
const targetSelService = target.selectionService;
|
|
272
|
-
this.updateListBoxIndices(targetNavService, targetSelService, targetIndex);
|
|
273
|
-
this.selectedBox = target;
|
|
274
|
-
}
|
|
275
|
-
updateListBoxIndices = (keyboardNavService, selectionService, index, setFocusedIndex = true) => {
|
|
276
|
-
if (setFocusedIndex) {
|
|
277
|
-
keyboardNavService.focusedListboxItemIndex = index;
|
|
278
|
-
}
|
|
279
|
-
keyboardNavService.selectedListboxItemIndex = index;
|
|
280
|
-
selectionService.rangeSelectionAnchorIndex = index;
|
|
281
|
-
selectionService.lastSelectedOrUnselectedIndex = index;
|
|
282
|
-
};
|
|
283
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListBoxComponent }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
284
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DataBindingDirective, isStandalone: true, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
|
|
285
|
-
}
|
|
286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, decorators: [{
|
|
287
|
-
type: Directive,
|
|
288
|
-
args: [{
|
|
289
|
-
selector: '[kendoListBoxDataBinding]',
|
|
290
|
-
standalone: true
|
|
291
|
-
}]
|
|
292
|
-
}], ctorParameters: () => [{ type: i1.ListBoxComponent }, { type: i0.NgZone }], propDecorators: { connectedWith: [{
|
|
293
|
-
type: Input
|
|
294
|
-
}] } });
|