@progress/kendo-angular-listbox 24.0.0-develop.36 → 24.0.0-develop.38

package/directives.d.ts

@@ -7,7 +7,8 @@ import { ItemSelectableDirective } from "./item-selectable.directive";
 import { ItemTemplateDirective } from "./item-template.directive";
 import { ListBoxComponent } from "./listbox.component";
 import { CustomMessagesComponent } from "./localization/custom-messages.component";
+import { NoDataTemplateDirective } from "./no-data-template.directive";
 /**
  * Utility array that contains all `@progress/kendo-angular-listbox` related components and directives
  */
-export declare const KENDO_LISTBOX: readonly [typeof ListBoxComponent, typeof ItemTemplateDirective, typeof ItemSelectableDirective, typeof DataBindingDirective, typeof CustomMessagesComponent];
+export declare const KENDO_LISTBOX: readonly [typeof ListBoxComponent, typeof ItemTemplateDirective, typeof ItemSelectableDirective, typeof NoDataTemplateDirective, typeof DataBindingDirective, typeof CustomMessagesComponent];

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

@@ -9,10 +9,11 @@ import { Subscription } from 'rxjs';
 import { getter } from '@progress/kendo-common';
 import { chevronUpIcon, chevronDownIcon, chevronRightIcon, chevronLeftIcon, chevronDoubleRightIcon, chevronDoubleLeftIcon, xIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { normalizeKeys, Keys, isPresent as isPresent$1, TemplateContextDirective, isChanged, ResizeBatchService } from '@progress/kendo-angular-common';
+import { normalizeKeys, Keys, isPresent as isPresent$1, TemplateContextDirective, KENDO_WEBMCP_HOST, isChanged, ResizeBatchService } from '@progress/kendo-angular-common';
 import { take } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { NgTemplateOutlet } from '@angular/common';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
 
@@ -24,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1779120576,
-    version: '24.0.0-develop.36',
+    publishDate: 1779192095,
+    version: '24.0.0-develop.38',
     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'
 };
 
@@ -227,6 +228,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+/**
+ * Lets you customize the content shown when the ListBox has no data to display.
+ * To define a no-data template, nest an `<ng-template>` tag
+ * with the `kendoListBoxNoDataTemplate` directive inside the `<kendo-listbox>` tag
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listbox/templates#no-data-template)).
+ *
+ * @example
+ * ```html
+ * <kendo-listbox [data]="[]">
+ *   <ng-template kendoListBoxNoDataTemplate>
+ *     No items to display.
+ *   </ng-template>
+ * </kendo-listbox>
+ * ```
+ */
+class NoDataTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: NoDataTemplateDirective, isStandalone: true, selector: "[kendoListBoxNoDataTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListBoxNoDataTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
 /**
  * @hidden
  */
@@ -888,6 +920,10 @@ class ListBoxComponent {
      * @hidden
      */
     itemTemplate;
+    /**
+     * @hidden
+     */
+    noDataTemplate;
     /**
      * @hidden
      */
@@ -1358,7 +1394,8 @@ class ListBoxComponent {
                 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: `
+            { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => ListBoxComponent) }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, 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"
@@ -1410,7 +1447,7 @@ class ListBoxComponent {
         }
         <div class="k-list-scroller k-selectable">
           <div class="{{ listClasses }}">
-            @if (data.length > 0) {
+            @if (data?.length > 0) {
               <div
                 class="k-list-content"
                 >
@@ -1449,14 +1486,18 @@ class ListBoxComponent {
                 </ul>
               </div>
             }
-            @if (data.length === 0) {
-              <span
-                class="k-nodata"
-              >{{ messageFor('noDataText') }}</span>
+            @if (!data?.length) {
+            <span class="k-nodata">
+              @if (noDataTemplate?.templateRef) {
+                <ng-template [ngTemplateOutlet]="noDataTemplate.templateRef"></ng-template>
+              } @else {
+                {{ messageFor('noDataText') }}
+              }
+              </span>
             }
           </div>
         </div>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,
@@ -1470,6 +1511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             provide: L10N_PREFIX,
                             useValue: 'kendo.listbox'
                         },
+                        { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => ListBoxComponent) }
                     ],
                     template: `
         <ng-container kendoListBoxLocalizedMessages
@@ -1523,7 +1565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }
         <div class="k-list-scroller k-selectable">
           <div class="{{ listClasses }}">
-            @if (data.length > 0) {
+            @if (data?.length > 0) {
               <div
                 class="k-list-content"
                 >
@@ -1562,16 +1604,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 </ul>
               </div>
             }
-            @if (data.length === 0) {
-              <span
-                class="k-nodata"
-              >{{ messageFor('noDataText') }}</span>
+            @if (!data?.length) {
+            <span class="k-nodata">
+              @if (noDataTemplate?.templateRef) {
+                <ng-template [ngTemplateOutlet]="noDataTemplate.templateRef"></ng-template>
+              } @else {
+                {{ messageFor('noDataText') }}
+              }
+              </span>
             }
           </div>
         </div>
         `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, ButtonComponent, ItemSelectableDirective, TemplateContextDirective]
+                    imports: [LocalizedMessagesDirective, ButtonComponent, ItemSelectableDirective, TemplateContextDirective, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listboxClassName: [{
                 type: HostBinding,
@@ -1582,6 +1628,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], itemTemplate: [{
                 type: ContentChild,
                 args: [ItemTemplateDirective]
+            }], noDataTemplate: [{
+                type: ContentChild,
+                args: [NoDataTemplateDirective, { static: false }]
             }], listboxElement: [{
                 type: ViewChild,
                 args: ['listbox']
@@ -1958,6 +2007,7 @@ const KENDO_LISTBOX = [
     ListBoxComponent,
     ItemTemplateDirective,
     ItemSelectableDirective,
+    NoDataTemplateDirective,
     DataBindingDirective,
     CustomMessagesComponent,
 ];
@@ -1968,7 +2018,7 @@ const KENDO_LISTBOX = [
  */
 class ListBoxModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ListBoxModule, imports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective, CustomMessagesComponent], exports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective, CustomMessagesComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ListBoxModule, imports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, NoDataTemplateDirective, DataBindingDirective, CustomMessagesComponent], exports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, NoDataTemplateDirective, DataBindingDirective, CustomMessagesComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListBoxModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [ListBoxComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListBoxModule, decorators: [{
@@ -1984,5 +2034,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CustomMessagesComponent, DataBindingDirective, ItemSelectableDirective, ItemTemplateDirective, KENDO_LISTBOX, ListBoxComponent, ListBoxModule, LocalizedMessagesDirective };
+export { CustomMessagesComponent, DataBindingDirective, ItemSelectableDirective, ItemTemplateDirective, KENDO_LISTBOX, ListBoxComponent, ListBoxModule, LocalizedMessagesDirective, NoDataTemplateDirective };
 

package/index.d.ts

@@ -6,6 +6,7 @@ export { ListBoxComponent } from './listbox.component';
 export { ListBoxModule } from './listbox.module';
 export { DataBindingDirective } from './data-binding.directive';
 export { ItemTemplateDirective } from './item-template.directive';
+export { NoDataTemplateDirective } from './no-data-template.directive';
 export { ItemSelectableDirective } from './item-selectable.directive';
 export { ListBoxSize } from './size';
 export { ActionName } from './toolbar';

package/listbox.component.d.ts

@@ -5,6 +5,7 @@
 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 { NoDataTemplateDirective } from './no-data-template.directive';
 import { Direction } from './util';
 import { ListBoxSize } from './size';
 import { ActionName, ListBoxToolbarConfig, Tool } from './toolbar';
@@ -62,6 +63,10 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
      * @hidden
      */
     itemTemplate: ItemTemplateDirective;
+    /**
+     * @hidden
+     */
+    noDataTemplate: NoDataTemplateDirective;
     /**
      * @hidden
      */
@@ -233,5 +238,5 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
     private setToolbarClass;
     private setSizingClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListBoxComponent, "kendo-listbox", never, { "textField": { "alias": "textField"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "toolbar": { "alias": "toolbar"; "required": false; }; "listboxLabel": { "alias": "listboxLabel"; "required": false; }; "listboxToolbarLabel": { "alias": "listboxToolbarLabel"; "required": false; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "action": "action"; "getChildListbox": "getChildListbox"; }, ["itemTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListBoxComponent, "kendo-listbox", never, { "textField": { "alias": "textField"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "toolbar": { "alias": "toolbar"; "required": false; }; "listboxLabel": { "alias": "listboxLabel"; "required": false; }; "listboxToolbarLabel": { "alias": "listboxToolbarLabel"; "required": false; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; }; }, { "selectionChange": "selectionChange"; "action": "action"; "getChildListbox": "getChildListbox"; }, ["itemTemplate", "noDataTemplate"], never, true, never>;
 }

package/listbox.module.d.ts

@@ -6,13 +6,14 @@ import * as i0 from "@angular/core";
 import * as i1 from "./listbox.component";
 import * as i2 from "./item-template.directive";
 import * as i3 from "./item-selectable.directive";
-import * as i4 from "./data-binding.directive";
-import * as i5 from "./localization/custom-messages.component";
+import * as i4 from "./no-data-template.directive";
+import * as i5 from "./data-binding.directive";
+import * as i6 from "./localization/custom-messages.component";
 /**
  * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the ListBox component.
  */
 export declare class ListBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ListBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ListBoxModule, never, [typeof i1.ListBoxComponent, typeof i2.ItemTemplateDirective, typeof i3.ItemSelectableDirective, typeof i4.DataBindingDirective, typeof i5.CustomMessagesComponent], [typeof i1.ListBoxComponent, typeof i2.ItemTemplateDirective, typeof i3.ItemSelectableDirective, typeof i4.DataBindingDirective, typeof i5.CustomMessagesComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ListBoxModule, never, [typeof i1.ListBoxComponent, typeof i2.ItemTemplateDirective, typeof i3.ItemSelectableDirective, typeof i4.NoDataTemplateDirective, typeof i5.DataBindingDirective, typeof i6.CustomMessagesComponent], [typeof i1.ListBoxComponent, typeof i2.ItemTemplateDirective, typeof i3.ItemSelectableDirective, typeof i4.NoDataTemplateDirective, typeof i5.DataBindingDirective, typeof i6.CustomMessagesComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ListBoxModule>;
 }

package/no-data-template.directive.d.ts

@@ -0,0 +1,27 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2026 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Lets you customize the content shown when the ListBox has no data to display.
+ * To define a no-data template, nest an `<ng-template>` tag
+ * with the `kendoListBoxNoDataTemplate` directive inside the `<kendo-listbox>` tag
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listbox/templates#no-data-template)).
+ *
+ * @example
+ * ```html
+ * <kendo-listbox [data]="[]">
+ *   <ng-template kendoListBoxNoDataTemplate>
+ *     No items to display.
+ *   </ng-template>
+ * </kendo-listbox>
+ * ```
+ */
+export declare class NoDataTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NoDataTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NoDataTemplateDirective, "[kendoListBoxNoDataTemplate]", never, {}, {}, never, never, true, never>;
+}

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1779120576,
-  "version": "24.0.0-develop.36",
+  "publishDate": 1779192095,
+  "version": "24.0.0-develop.38",
   "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-listbox",
-  "version": "24.0.0-develop.36",
+  "version": "24.0.0-develop.38",
   "description": "Kendo UI for Angular ListBox",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -41,7 +41,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1779120576,
+      "publishDate": 1779192095,
       "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"
     }
   },
@@ -51,14 +51,14 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.36",
-    "@progress/kendo-angular-common": "24.0.0-develop.36",
-    "@progress/kendo-angular-popup": "24.0.0-develop.36",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.38",
+    "@progress/kendo-angular-common": "24.0.0-develop.38",
+    "@progress/kendo-angular-popup": "24.0.0-develop.38",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.36",
+    "@progress/kendo-angular-schematics": "24.0.0-develop.38",
     "@progress/kendo-common": "^1.0.1"
   },
   "schematics": "./schematics/collection.json",

package/schematics/ngAdd/index.js

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