@progress/kendo-angular-listbox 15.0.2-develop.9 → 15.1.0-develop.1

package/esm2020/listbox.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subscription } from 'rxjs';
 import { packageMetadata } from './package-metadata';
@@ -30,13 +30,14 @@ let idx = 0;
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
 export class ListBoxComponent {
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
+    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
          */
@@ -261,15 +262,18 @@ export class ListBoxComponent {
     initSubscriptions(navService, hostEl, toolsRef) {
         this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
         this.subs.add(navService.onTransferAllEvent.subscribe((actionToPerform) => this.performAction(actionToPerform)));
-        this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', (event) => this.onFocusIn(event)));
         this.subs.add(this.selectionService.onSelect.subscribe((e) => this.onClickEvent(e.prevIndex, e.index)));
         this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
         this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
+        if (this.listboxElement) {
+            this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', (event) => this.onFocusIn(event)));
+        }
         this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
         this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
             const { prevIndex, index } = indexes;
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex });
+            this.changeDetector.markForCheck();
         }));
     }
     onFocusIn(event) {
@@ -277,6 +281,9 @@ export class ListBoxComponent {
         if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
             const items = this.listboxItems.toArray();
             const index = items.findIndex(elem => elem.nativeElement === event.target);
+            if (index === -1) {
+                return;
+            }
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex: null });
             const previousItem = items[navService.selectedListboxItemIndex]?.nativeElement;
@@ -286,6 +293,9 @@ export class ListBoxComponent {
         }
     }
     setIds() {
+        if (!this.listboxElement) {
+            return;
+        }
         const listbox = this.listboxElement.nativeElement;
         this.listboxId = this.getListboxId;
         this.renderer.setAttribute(listbox, 'id', this.listboxId);
@@ -343,7 +353,7 @@ export class ListBoxComponent {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
 }
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.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 });
 ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, 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,
@@ -374,6 +384,9 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
 
             i18n-remove="kendo.listbox.remove|The title of the Remove button"
             remove="Remove"
+
+            i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
+            noDataText="No data found."
             >
         </ng-container>
         <div
@@ -399,7 +412,10 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </div>
         <div class="k-list-scroller k-selectable">
             <div class="{{ listClasses }}">
-                <div class="k-list-content">
+                <div
+                    *ngIf="data.length > 0"
+                    class="k-list-content"
+                >
                     <ul
                         #listbox
                         class="k-list-ul"
@@ -432,6 +448,10 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                         </li>
                     </ul>
                 </div>
+                <span
+                    *ngIf="data.length === 0"
+                    class="k-nodata"
+                >{{ messageFor('noDataText') }}</span>
             </div>
         </div>
     `, isInline: true, components: [{ type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i5.LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { type: i4.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
@@ -470,6 +490,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-remove="kendo.listbox.remove|The title of the Remove button"
             remove="Remove"
+
+            i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
+            noDataText="No data found."
             >
         </ng-container>
         <div
@@ -495,7 +518,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
         <div class="k-list-scroller k-selectable">
             <div class="{{ listClasses }}">
-                <div class="k-list-content">
+                <div
+                    *ngIf="data.length > 0"
+                    class="k-list-content"
+                >
                     <ul
                         #listbox
                         class="k-list-ul"
@@ -528,11 +554,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         </li>
                     </ul>
                 </div>
+                <span
+                    *ngIf="data.length === 0"
+                    class="k-nodata"
+                >{{ messageFor('noDataText') }}</span>
             </div>
         </div>
     `,
                 }]
-        }], ctorParameters: function () { return [{ type: i1.KeyboardNavigationService }, { type: i2.ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.LocalizationService }]; }, propDecorators: { listboxClassName: [{
+        }], ctorParameters: function () { return [{ type: i1.KeyboardNavigationService }, { type: i2.ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{

package/esm2020/localization/messages.mjs

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
 export class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { moveUp: "moveUp", moveDown: "moveDown", remove: "remove", transferTo: "transferTo", transferFrom: "transferFrom", transferAllTo: "transferAllTo", transferAllFrom: "transferAllFrom" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.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: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { moveUp: [{
@@ -29,4 +29,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], transferAllFrom: [{
                 type: Input
+            }], noDataText: [{
+                type: Input
             }] } });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1708071701,
-    version: '15.0.2-develop.9',
+    publishDate: 1708505054,
+    version: '15.1.0-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/fesm2015/progress-kendo-angular-listbox.mjs

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1708071701,
-    version: '15.0.2-develop.9',
+    publishDate: 1708505054,
+    version: '15.1.0-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'
 };
 
@@ -479,7 +479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { moveUp: "moveUp", moveDown: "moveDown", remove: "remove", transferTo: "transferTo", transferFrom: "transferFrom", transferAllTo: "transferAllTo", transferAllFrom: "transferAllFrom" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.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: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { moveUp: [{
@@ -496,6 +496,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], transferAllFrom: [{
                 type: Input
+            }], noDataText: [{
+                type: Input
             }] } });
 
 /**
@@ -566,13 +568,14 @@ let idx = 0;
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
 class ListBoxComponent {
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
+    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
          */
@@ -798,15 +801,18 @@ class ListBoxComponent {
     initSubscriptions(navService, hostEl, toolsRef) {
         this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
         this.subs.add(navService.onTransferAllEvent.subscribe((actionToPerform) => this.performAction(actionToPerform)));
-        this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', (event) => this.onFocusIn(event)));
         this.subs.add(this.selectionService.onSelect.subscribe((e) => this.onClickEvent(e.prevIndex, e.index)));
         this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
         this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
+        if (this.listboxElement) {
+            this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', (event) => this.onFocusIn(event)));
+        }
         this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
         this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
             const { prevIndex, index } = indexes;
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex });
+            this.changeDetector.markForCheck();
         }));
     }
     onFocusIn(event) {
@@ -815,6 +821,9 @@ class ListBoxComponent {
         if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
             const items = this.listboxItems.toArray();
             const index = items.findIndex(elem => elem.nativeElement === event.target);
+            if (index === -1) {
+                return;
+            }
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex: null });
             const previousItem = (_a = items[navService.selectedListboxItemIndex]) === null || _a === void 0 ? void 0 : _a.nativeElement;
@@ -825,6 +834,9 @@ class ListBoxComponent {
     }
     setIds() {
         var _a, _b, _c;
+        if (!this.listboxElement) {
+            return;
+        }
         const listbox = this.listboxElement.nativeElement;
         this.listboxId = this.getListboxId;
         this.renderer.setAttribute(listbox, 'id', this.listboxId);
@@ -883,7 +895,7 @@ class ListBoxComponent {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
 }
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
 ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, 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,
@@ -914,6 +926,9 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
 
             i18n-remove="kendo.listbox.remove|The title of the Remove button"
             remove="Remove"
+
+            i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
+            noDataText="No data found."
             >
         </ng-container>
         <div
@@ -939,7 +954,10 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </div>
         <div class="k-list-scroller k-selectable">
             <div class="{{ listClasses }}">
-                <div class="k-list-content">
+                <div
+                    *ngIf="data.length > 0"
+                    class="k-list-content"
+                >
                     <ul
                         #listbox
                         class="k-list-ul"
@@ -972,6 +990,10 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                         </li>
                     </ul>
                 </div>
+                <span
+                    *ngIf="data.length === 0"
+                    class="k-nodata"
+                >{{ messageFor('noDataText') }}</span>
             </div>
         </div>
     `, isInline: true, components: [{ type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { type: i4.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
@@ -1010,6 +1032,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-remove="kendo.listbox.remove|The title of the Remove button"
             remove="Remove"
+
+            i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
+            noDataText="No data found."
             >
         </ng-container>
         <div
@@ -1035,7 +1060,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
         <div class="k-list-scroller k-selectable">
             <div class="{{ listClasses }}">
-                <div class="k-list-content">
+                <div
+                    *ngIf="data.length > 0"
+                    class="k-list-content"
+                >
                     <ul
                         #listbox
                         class="k-list-ul"
@@ -1068,11 +1096,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         </li>
                     </ul>
                 </div>
+                <span
+                    *ngIf="data.length === 0"
+                    class="k-nodata"
+                >{{ messageFor('noDataText') }}</span>
             </div>
         </div>
     `,
                 }]
-        }], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { listboxClassName: [{
+        }], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{

package/fesm2020/progress-kendo-angular-listbox.mjs

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1708071701,
-    version: '15.0.2-develop.9',
+    publishDate: 1708505054,
+    version: '15.1.0-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'
 };
 
@@ -474,7 +474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { moveUp: "moveUp", moveDown: "moveDown", remove: "remove", transferTo: "transferTo", transferFrom: "transferFrom", transferAllTo: "transferAllTo", transferAllFrom: "transferAllFrom" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.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: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive
         }], propDecorators: { moveUp: [{
@@ -491,6 +491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], transferAllFrom: [{
                 type: Input
+            }], noDataText: [{
+                type: Input
             }] } });
 
 /**
@@ -561,13 +563,14 @@ let idx = 0;
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
 class ListBoxComponent {
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
+    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
          */
@@ -792,15 +795,18 @@ class ListBoxComponent {
     initSubscriptions(navService, hostEl, toolsRef) {
         this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
         this.subs.add(navService.onTransferAllEvent.subscribe((actionToPerform) => this.performAction(actionToPerform)));
-        this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', (event) => this.onFocusIn(event)));
         this.subs.add(this.selectionService.onSelect.subscribe((e) => this.onClickEvent(e.prevIndex, e.index)));
         this.subs.add(navService.onDeleteEvent.subscribe((index) => this.onDeleteEvent(index, navService)));
         this.subs.add(navService.onMoveSelectedItem.subscribe((dir) => this.performAction(dir)));
+        if (this.listboxElement) {
+            this.subs.add(this.renderer.listen(this.listboxElement.nativeElement, 'focusin', (event) => this.onFocusIn(event)));
+        }
         this.subs.add(this.renderer.listen(hostEl, 'keydown', (event) => navService.onKeyDown(event, toolsRef, this.selectedTools, this.childListbox, this.parentListbox, this.listboxItems.toArray())));
         this.subs.add(navService.onSelectionChange.subscribe((indexes) => {
             const { prevIndex, index } = indexes;
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex });
+            this.changeDetector.markForCheck();
         }));
     }
     onFocusIn(event) {
@@ -808,6 +814,9 @@ class ListBoxComponent {
         if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
             const items = this.listboxItems.toArray();
             const index = items.findIndex(elem => elem.nativeElement === event.target);
+            if (index === -1) {
+                return;
+            }
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex: null });
             const previousItem = items[navService.selectedListboxItemIndex]?.nativeElement;
@@ -817,6 +826,9 @@ class ListBoxComponent {
         }
     }
     setIds() {
+        if (!this.listboxElement) {
+            return;
+        }
         const listbox = this.listboxElement.nativeElement;
         this.listboxId = this.getListboxId;
         this.renderer.setAttribute(listbox, 'id', this.listboxId);
@@ -874,7 +886,7 @@ class ListBoxComponent {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
 }
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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 });
 ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, 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,
@@ -905,6 +917,9 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
 
             i18n-remove="kendo.listbox.remove|The title of the Remove button"
             remove="Remove"
+
+            i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
+            noDataText="No data found."
             >
         </ng-container>
         <div
@@ -930,7 +945,10 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </div>
         <div class="k-list-scroller k-selectable">
             <div class="{{ listClasses }}">
-                <div class="k-list-content">
+                <div
+                    *ngIf="data.length > 0"
+                    class="k-list-content"
+                >
                     <ul
                         #listbox
                         class="k-list-ul"
@@ -963,6 +981,10 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                         </li>
                     </ul>
                 </div>
+                <span
+                    *ngIf="data.length === 0"
+                    class="k-nodata"
+                >{{ messageFor('noDataText') }}</span>
             </div>
         </div>
     `, isInline: true, components: [{ type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { type: i4.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
@@ -1001,6 +1023,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-remove="kendo.listbox.remove|The title of the Remove button"
             remove="Remove"
+
+            i18n-noDataText="kendo.listbox.noDataText|The text displayed when there are no items"
+            noDataText="No data found."
             >
         </ng-container>
         <div
@@ -1026,7 +1051,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
         <div class="k-list-scroller k-selectable">
             <div class="{{ listClasses }}">
-                <div class="k-list-content">
+                <div
+                    *ngIf="data.length > 0"
+                    class="k-list-content"
+                >
                     <ul
                         #listbox
                         class="k-list-ul"
@@ -1059,11 +1087,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         </li>
                     </ul>
                 </div>
+                <span
+                    *ngIf="data.length === 0"
+                    class="k-nodata"
+                >{{ messageFor('noDataText') }}</span>
             </div>
         </div>
     `,
                 }]
-        }], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { listboxClassName: [{
+        }], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{

package/listbox.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
 import { ListBoxSelectionEvent, ListBoxSelectionService } from './selection.service';
 import { ItemTemplateDirective } from './item-template.directive';
 import { Direction } from './util';
@@ -23,6 +23,7 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
     private renderer;
     private zone;
     private localization;
+    private changeDetector;
     /**
      * @hidden
      */
@@ -137,7 +138,7 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
     private _size;
     private subs;
     private shouldFireFocusIn;
-    constructor(keyboardNavigationService: KeyboardNavigationService, selectionService: ListBoxSelectionService, hostElement: ElementRef, renderer: Renderer2, zone: NgZone, localization: LocalizationService);
+    constructor(keyboardNavigationService: KeyboardNavigationService, selectionService: ListBoxSelectionService, hostElement: ElementRef, renderer: Renderer2, zone: NgZone, localization: LocalizationService, changeDetector: ChangeDetectorRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/localization/messages.d.ts

@@ -36,6 +36,10 @@ export declare class Messages extends ComponentMessages {
      * The text of the `Transfer All From` button title.
      */
     transferAllFrom: string;
+    /**
+     * The text displayed when there are no items.
+     */
+    noDataText: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<Messages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, never, never, { "moveUp": "moveUp"; "moveDown": "moveDown"; "remove": "remove"; "transferTo": "transferTo"; "transferFrom": "transferFrom"; "transferAllTo": "transferAllTo"; "transferAllFrom": "transferAllFrom"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, never, never, { "moveUp": "moveUp"; "moveDown": "moveDown"; "remove": "remove"; "transferTo": "transferTo"; "transferFrom": "transferFrom"; "transferAllTo": "transferAllTo"; "transferAllFrom": "transferAllFrom"; "noDataText": "noDataText"; }, {}, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-listbox",
-  "version": "15.0.2-develop.9",
+  "version": "15.1.0-develop.1",
   "description": "Kendo UI for Angular ListBox",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,14 +23,14 @@
     "@angular/core": "13 - 17",
     "@angular/platform-browser": "13 - 17",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "15.0.2-develop.9",
-    "@progress/kendo-angular-common": "15.0.2-develop.9",
-    "@progress/kendo-angular-popup": "15.0.2-develop.9",
+    "@progress/kendo-angular-buttons": "15.1.0-develop.1",
+    "@progress/kendo-angular-common": "15.1.0-develop.1",
+    "@progress/kendo-angular-popup": "15.1.0-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "15.0.2-develop.9",
+    "@progress/kendo-angular-schematics": "15.1.0-develop.1",
     "@progress/kendo-common": "^0.2.2"
   },
   "schematics": "./schematics/collection.json",

package/schematics/ngAdd/index.js

@@ -6,11 +6,11 @@ function default_1(options) {
         // Additional dependencies to install.
         // See https://github.com/telerik/kendo-schematics/issues/28
         peerDependencies: {
-            '@progress/kendo-angular-buttons': '15.0.2-develop.9',
-            '@progress/kendo-angular-common': '15.0.2-develop.9',
-            '@progress/kendo-angular-l10n': '15.0.2-develop.9',
+            '@progress/kendo-angular-buttons': '15.1.0-develop.1',
+            '@progress/kendo-angular-common': '15.1.0-develop.1',
+            '@progress/kendo-angular-l10n': '15.1.0-develop.1',
             // Peer of kendo-angular-buttons
-            '@progress/kendo-angular-popup': '15.0.2-develop.9'
+            '@progress/kendo-angular-popup': '15.1.0-develop.1'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }