@progress/kendo-angular-listbox 17.0.0-develop.9 → 17.0.1-develop.1

package/README.md

@@ -1,31 +1,46 @@
-<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
+<a href="https://www.telerik.com/kendo-angular-ui/components/listbox" target="_blank">
 <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
 </a>
 
-## Native UI and Data Visualization Components for Angular
+## Kendo UI for Angular ListBox Component
 
-Kendo UI for Angular is a commercial UI library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
-
-> **Important**
 > * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)&mdash;a commercial UI library.
-> * You will need to install a license key when adding the package to your project. For more information, please refer to the [My License page](https://www.telerik.com/kendo-angular-ui/my-license/).
-> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui/) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui). Doing so indicates that you [Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui).
-> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI dev team!
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
+> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
+
+The Kendo UI for Angular ListBox is a component that displays a list of items. It allows for item selection, reordering, and transfer between two or more ListBox components.
+
+## Key Features
+
+Among the many features which the Kendo UI for Angular ListBox delivers are:
+
+* Data Binding&mdash;The ListBox component accepts two types of data&mdash;an array of strings or an array of objects. [Read more about the ListBox data binding...](https://www.telerik.com/kendo-angular-ui/components/listbox/data-binding)
+* Item Selection&mdash;The ListBox component allows you to select rows through interaction with the row itself. The component emits a [`selectionChange`](https://www.telerik.com/kendo-angular-ui/components/listbox/api/listboxcomponent#selectionchange) event and the index of the currently selected item can be accessed through the [`selectedIndex`](https://www.telerik.com/kendo-angular-ui/components/listbox/api/listboxcomponent#selectedindex) field.
+* Configurable Toolbar&mdash;The ListBox enables you to customize both the appearance and the functionality of its toolbar. [Read more about the ListBox toolbar...](https://www.telerik.com/kendo-angular-ui/components/listbox/toolbar)
+* Templates&mdash;The ListBox enables you to customize the content of its items. [Read more about the ListBox templates...](https://www.telerik.com/kendo-angular-ui/components/listbox/templates)
+* Appearance&mdash;The ListBox provides built-in options that allow you to customize its appearance. [Read more about customizing the appearance of the ListBox...](https://www.telerik.com/kendo-angular-ui/components/listbox/appearance)
+* Connecting Multiple ListBox Components&mdash;It is possible to daisy-chain two or more instances of the ListBox component. [Read more about linking ListBox components...](https://www.telerik.com/kendo-angular-ui/components/listbox/data-binding#using-the-data-binding-directive)
+* Drag and Drop Between ListBox Components&mdash;The Kendo UI for Angular ListBox enables you to drag and drop rows from one ListBox to another ListBox. This allows you to easily maintain the items in each list and organize them in the desired way. [Read more about the drag and drop between ListBox components...](https://www.telerik.com/kendo-angular-ui/components/listbox/drag-and-drop)
+* Accessibility&mdash;The Kendo UI for Angular ListBox component is [WCAG 2.2 AA](https://www.w3.org/TR/WCAG22/) and [Section 508](http://www.section508.gov/) compliant, incorporating [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) best practices for modern web accessibility. The ListBox is also tested against the popular screen readers, including JAWS and NVDA. [Read more about the accessibility of the ListBox...](https://www.telerik.com/kendo-angular-ui/components/listbox/accessibility)
+* Keyboard Navigation&mdash;The ListBox supports a number of keyboard shortcuts which allow users to accomplish various commands. [Read more about the keyboard navigation of the Grid...](https://www.telerik.com/kendo-angular-ui/components/listbox/keyboard-navigation)
+* Globalization&mdash;The Kendo UI for Angular ListBox supports globalization to ensure that it can fit well in any application, no matter what languages and locales need to be supported. Additionally, the ListBox supports rendering in a right-to-left (RTL) direction. [Read more about the globalization of the ListBox...](https://www.telerik.com/kendo-angular-ui/components/listbox/globalization)
+
+## Support Options
+
+For any issues you might encounter while working with the Kendo UI for Angular ListBox, you have the following support channels available:
+
+* Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
+* Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
 
 ## Resources
 
-* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular ListBox](https://www.telerik.com/kendo-angular-ui/components/listbox/installation/getting-started)
 * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
 * [Blogs](http://www.telerik.com/blogs/kendo-ui)
 * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
-## Questions and Feedback
-
-* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
-* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
-* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
-* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
-
 *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 
 *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

package/data-binding.directive.d.ts

@@ -33,5 +33,5 @@ export declare class DataBindingDirective implements OnChanges, OnDestroy {
     private transferItem;
     private transferAll;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataBindingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoListBoxDataBinding]", never, { "connectedWith": "connectedWith"; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoListBoxDataBinding]", never, { "connectedWith": { "alias": "connectedWith"; "required": false; }; }, {}, never, never, true, never>;
 }

package/{esm2020 → esm2022}/data-binding.directive.mjs

@@ -13,11 +13,18 @@ import * as i1 from "./listbox.component";
  * A directive which manages the functoinality of the ListBox tools out of the box, and modifies the provided data accordingly.
  */
 export class DataBindingDirective {
+    listbox;
+    /**
+     * Specifies the ListBoxComponent instance with which the current ListBox should be connected.
+     * When two listboxes are linked via this input, one can transfer items between them.
+     */
+    connectedWith;
+    actionClickSub = new Subscription();
+    selectedBoxSub = new Subscription();
+    connectedWithSub = new Subscription();
+    selectedBox;
     constructor(listbox) {
         this.listbox = listbox;
-        this.actionClickSub = new Subscription();
-        this.selectedBoxSub = new Subscription();
-        this.connectedWithSub = new Subscription();
         this.selectedBox = this.listbox;
         this.connectedWithSub.add(this.listbox.getChildListbox.subscribe(() => {
             this.listbox.childListbox = this.connectedWith;
@@ -133,10 +140,10 @@ export class DataBindingDirective {
         target.selectItem(target.data.length - 1);
         this.selectedBox = target;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DataBindingDirective, isStandalone: true, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
 }
-DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DataBindingDirective, isStandalone: true, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListBoxDataBinding]',

package/{esm2020 → esm2022}/item-selectable.directive.mjs

@@ -10,6 +10,8 @@ import * as i1 from "./selection.service";
  * @hidden
  */
 export class ItemSelectableDirective {
+    selectionService;
+    index;
     constructor(selectionService) {
         this.selectionService = selectionService;
     }
@@ -20,10 +22,10 @@ export class ItemSelectableDirective {
         event.stopPropagation();
         this.selectionService.select(this.index);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: i1.ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ItemSelectableDirective, isStandalone: true, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
 }
-ItemSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: i1.ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
-ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ItemSelectableDirective, isStandalone: true, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemSelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListBoxItemSelectable]',

package/{esm2020 → esm2022}/item-template.directive.mjs

@@ -24,13 +24,14 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class ItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoListBoxItemTemplate]", ngImport: i0 });
 }
-ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoListBoxItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListBoxItemTemplate]',

package/{esm2020 → esm2022}/keyboard-navigation.service.mjs

@@ -12,17 +12,19 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class KeyboardNavigationService {
+    renderer;
+    zone;
+    selectedListboxItemIndex = 0;
+    focusedListboxItemIndex = 0;
+    focusedToolIndex = 0;
+    onDeleteEvent = new EventEmitter();
+    onMoveSelectedItem = new EventEmitter();
+    onTransferAllEvent = new EventEmitter();
+    onShiftSelectedItem = new EventEmitter();
+    onSelectionChange = new EventEmitter();
     constructor(renderer, zone) {
         this.renderer = renderer;
         this.zone = zone;
-        this.selectedListboxItemIndex = 0;
-        this.focusedListboxItemIndex = 0;
-        this.focusedToolIndex = 0;
-        this.onDeleteEvent = new EventEmitter();
-        this.onMoveSelectedItem = new EventEmitter();
-        this.onTransferAllEvent = new EventEmitter();
-        this.onShiftSelectedItem = new EventEmitter();
-        this.onSelectionChange = new EventEmitter();
     }
     onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems) {
         const target = event.target;
@@ -278,9 +280,9 @@ export class KeyboardNavigationService {
             this.changeTabindex(previousItem, currentItem);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyboardNavigationService });
 }
-KeyboardNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-KeyboardNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KeyboardNavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: KeyboardNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyboardNavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }]; } });

package/{esm2020 → esm2022}/listbox.component.mjs

@@ -31,66 +31,49 @@ let idx = 0;
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
 export class ListBoxComponent {
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization, changeDetector) {
-        this.keyboardNavigationService = keyboardNavigationService;
-        this.selectionService = selectionService;
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.zone = zone;
-        this.localization = localization;
-        this.changeDetector = changeDetector;
-        /**
-         * @hidden
-         */
-        this.listboxClassName = true;
-        /**
-         * The data which will be displayed by the ListBox.
-         */
-        this.data = [];
-        /**
-         * The value of the aria-label attribute of the Listbox element.
-         */
-        this.listboxLabel = 'Listbox';
-        /**
-         * The value of the aria-label attribute of the Listbox toolbar element.
-         */
-        this.listboxToolbarLabel = 'Toolbar';
-        /**
-         * A function which determines if a specific item is disabled.
-         */
-        this.itemDisabled = defaultItemDisabled;
-        /**
-         * Fires when the user selects a different ListBox item. Also fires when a node is moved, since that also changes its index.
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Fires when the user clicks a ListBox item.
-         */
-        this.actionClick = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.getChildListbox = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.selectedTools = allTools;
-        /**
-         * @hidden
-         */
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        /**
-         * @hidden
-         */
-        this.caretAltRightIcon = caretAltRightIcon;
-        this._size = DEFAULT_SIZE;
-        this.subs = new Subscription();
-        this.shouldFireFocusIn = true;
-        validatePackage(packageMetadata);
-        this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
-        this.setSizingClass(this.size);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-    }
+    keyboardNavigationService;
+    selectionService;
+    hostElement;
+    renderer;
+    zone;
+    localization;
+    changeDetector;
+    /**
+     * @hidden
+     */
+    listboxClassName = true;
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * @hidden
+     */
+    itemTemplate;
+    /**
+     * @hidden
+     */
+    listboxElement;
+    /**
+     * @hidden
+     */
+    listboxItems;
+    /**
+     * @hidden
+     */
+    toolbarElement;
+    /**
+     * @hidden
+     */
+    tools;
+    /**
+     * The fields of the data item that provide the text content of the nodes.
+     */
+    textField;
+    /**
+     * The data which will be displayed by the ListBox.
+     */
+    data = [];
     /**
      * Sets the size of the component.
      *
@@ -124,6 +107,30 @@ export class ListBoxComponent {
         }
         this.setToolbarClass(position);
     }
+    /**
+     * The value of the aria-label attribute of the Listbox element.
+     */
+    listboxLabel = 'Listbox';
+    /**
+     * The value of the aria-label attribute of the Listbox toolbar element.
+     */
+    listboxToolbarLabel = 'Toolbar';
+    /**
+     * A function which determines if a specific item is disabled.
+     */
+    itemDisabled = defaultItemDisabled;
+    /**
+     * Fires when the user selects a different ListBox item. Also fires when a node is moved, since that also changes its index.
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Fires when the user clicks a ListBox item.
+     */
+    actionClick = new EventEmitter();
+    /**
+     * @hidden
+     */
+    getChildListbox = new EventEmitter();
     /**
      * @hidden
      */
@@ -136,6 +143,51 @@ export class ListBoxComponent {
     messageFor(key) {
         return this.localization.get(key);
     }
+    /**
+     * @hidden
+     */
+    selectedTools = allTools;
+    /**
+     * @hidden
+     */
+    listboxId;
+    /**
+     * @hidden
+     */
+    toolbarId;
+    /**
+     * @hidden
+     */
+    childListbox;
+    /**
+     * @hidden
+     */
+    parentListbox;
+    /**
+     * @hidden
+     */
+    caretAltLeftIcon = caretAltLeftIcon;
+    /**
+     * @hidden
+     */
+    caretAltRightIcon = caretAltRightIcon;
+    localizationSubscription;
+    _size = DEFAULT_SIZE;
+    subs = new Subscription();
+    shouldFireFocusIn = true;
+    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization, changeDetector) {
+        this.keyboardNavigationService = keyboardNavigationService;
+        this.selectionService = selectionService;
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.localization = localization;
+        this.changeDetector = changeDetector;
+        validatePackage(packageMetadata);
+        this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
+        this.setSizingClass(this.size);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+    }
     ngOnInit() {
         // This event emitter gives us the connectedWith value from the DataBinding directive
         this.getChildListbox.emit();
@@ -353,17 +405,16 @@ export class ListBoxComponent {
     setSizingClass(size) {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
-}
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListBoxComponent, deps: [{ token: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
-        ListBoxSelectionService,
-        KeyboardNavigationService,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.listbox'
-        },
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "listboxItems", predicate: ["listboxItems"], descendants: true }, { propertyName: "tools", predicate: ["tools"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
+            ListBoxSelectionService,
+            KeyboardNavigationService,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.listbox'
+            },
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "listboxItems", predicate: ["listboxItems"], descendants: true }, { propertyName: "tools", predicate: ["tools"], descendants: true }], ngImport: i0, template: `
         <ng-container kendoListBoxLocalizedMessages
             i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
             moveUp="Move Up"
@@ -456,7 +507,8 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
             </div>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListBoxComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-listbox',

package/{esm2020 → esm2022}/listbox.module.mjs

@@ -18,11 +18,11 @@ import * as i5 from "./localization/custom-messages.component";
  * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the ListBox component.
  */
 export class ListBoxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ListBoxModule, imports: [i1.ListBoxComponent, i2.ItemTemplateDirective, i3.ItemSelectableDirective, i4.DataBindingDirective, i5.CustomMessagesComponent], exports: [i1.ListBoxComponent, i2.ItemTemplateDirective, i3.ItemSelectableDirective, i4.DataBindingDirective, i5.CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListBoxModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ListBoxComponent] });
 }
-ListBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ListBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ListBoxModule, imports: [i1.ListBoxComponent, i2.ItemTemplateDirective, i3.ItemSelectableDirective, i4.DataBindingDirective, i5.CustomMessagesComponent], exports: [i1.ListBoxComponent, i2.ItemTemplateDirective, i3.ItemSelectableDirective, i4.DataBindingDirective, i5.CustomMessagesComponent] });
-ListBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListBoxModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.ListBoxComponent, i5.CustomMessagesComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_LISTBOX],

package/{esm2020 → esm2022}/localization/custom-messages.component.mjs

@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ([see example](slug:globalization_listbox#toc-custom-messages)).
  */
 export class CustomMessagesComponent extends Messages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -19,15 +20,15 @@ export class CustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-listbox-messages", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => CustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-listbox-messages", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs

@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class LocalizedMessagesDirective extends Messages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoListBoxLocalizedMessages]", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoListBoxLocalizedMessages]", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [

package/esm2022/localization/messages.mjs

@@ -0,0 +1,66 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { Input } from '@angular/core';
+import { ComponentMessages } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class Messages extends ComponentMessages {
+    /**
+     * The text of the `Move Up` button title.
+     */
+    moveUp;
+    /**
+     * The text of the `Move Down` button title.
+     */
+    moveDown;
+    /**
+     * The text of the `Remove` button tittle.
+     */
+    remove;
+    /**
+     * The text of the `Transfer To` button title.
+     */
+    transferTo;
+    /**
+     * The text of the `Transfer From` button title.
+     */
+    transferFrom;
+    /**
+     * The text of the `Transfer All To` button title.
+     */
+    transferAllTo;
+    /**
+     * The text of the `Transfer All From` button title.
+     */
+    transferAllFrom;
+    /**
+     * The text displayed when there are no items.
+     */
+    noDataText;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { moveUp: "moveUp", moveDown: "moveDown", remove: "remove", transferTo: "transferTo", transferFrom: "transferFrom", transferAllTo: "transferAllTo", transferAllFrom: "transferAllFrom", noDataText: "noDataText" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
+            type: Directive
+        }], propDecorators: { moveUp: [{
+                type: Input
+            }], moveDown: [{
+                type: Input
+            }], remove: [{
+                type: Input
+            }], transferTo: [{
+                type: Input
+            }], transferFrom: [{
+                type: Input
+            }], transferAllTo: [{
+                type: Input
+            }], transferAllFrom: [{
+                type: Input
+            }], noDataText: [{
+                type: Input
+            }] } });

package/{esm2020 → esm2022}/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729174772,
-    version: '17.0.0-develop.9',
+    publishDate: 1731429942,
+    version: '17.0.1-develop.1',
     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'
 };

package/{esm2020 → esm2022}/selection.service.mjs

@@ -8,10 +8,8 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ListBoxSelectionService {
-    constructor() {
-        this.onSelect = new EventEmitter();
-        this.selectedIndex = null;
-    }
+    onSelect = new EventEmitter();
+    selectedIndex = null;
     select(index) {
         this.onSelect.next({ index: index, prevIndex: this.selectedIndex });
         this.selectedIndex = index;
@@ -22,9 +20,9 @@ export class ListBoxSelectionService {
     clearSelection() {
         this.selectedIndex = null;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListBoxSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListBoxSelectionService });
 }
-ListBoxSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListBoxSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ListBoxSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListBoxSelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListBoxSelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListBoxSelectionService, decorators: [{
             type: Injectable
         }] });