@progress/kendo-angular-listbox 24.0.0-develop.8 → 24.0.0

package/codemods/libs/common/src/codemods/utils.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tsInterfaceTransformer = exports.tsPropertyValueTransformer = exports.tsPropertyTransformer = exports.tsComponentPropertyRemoval = exports.attributeRemoval = exports.attributeValueUpdate = exports.attributeNameValueUpdate = exports.attributeNameUpdate = exports.eventUpdate = exports.htmlTransformer = exports.blockTextElements = void 0;
+exports.tsInterfaceTransformer = exports.tsPropertyValueTransformer = exports.tsPropertyTransformer = exports.tsComponentPropertyRemoval = exports.attributeConditionalRemoval = exports.attributeRemoval = exports.attributeValueUpdate = exports.attributeNameValueUpdate = exports.attributeNameUpdate = exports.eventUpdate = exports.htmlTransformer = exports.blockTextElements = void 0;
 exports.hasKendoInTemplate = hasKendoInTemplate;
 exports.isImportedFromPackage = isImportedFromPackage;
 exports.tsPropertyRemoval = tsPropertyRemoval;
@@ -345,6 +345,34 @@ const attributeRemoval = (templateContent, tagName, attributeName, propertyToRem
     });
 };
 exports.attributeRemoval = attributeRemoval;
+/**
+ * Removes an attribute from a tag only when its value matches one of the specified values.
+ * Handles both static (`attr="value"`) and bound (`[attr]="'value'"`) forms.
+ *
+ * @param templateContent - The template string content to transform
+ * @param tagName - The HTML tag name to target (e.g., 'kendo-button')
+ * @param attributeName - The attribute name to conditionally remove
+ * @param values - The attribute values that trigger removal
+ * @returns The transformed template content
+ */
+const attributeConditionalRemoval = (templateContent, tagName, attributeName, values) => {
+    const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const escapedTag = escapeRegex(tagName);
+    const escapedAttr = escapeRegex(attributeName);
+    // Remove bound attributes [attribute]="value"
+    const boundAttributePattern = new RegExp(`(<${escapedTag}[^>]*?)\\s+\\[${escapedAttr}\\]\\s*=\\s*("(?:[^"\\\\]|\\\\.)*?"|'(?:[^'\\\\]|\\\\.)*?'|[^\\s>]+)([^>]*?>)`, 'gi');
+    // Remove static attributes attribute="value"
+    const staticAttributePattern = new RegExp(`(<${escapedTag}[^>]*?)\\s+${escapedAttr}\\s*=\\s*("(?:[^"\\\\]|\\\\.)*?"|'(?:[^'\\\\]|\\\\.)*?'|[^\\s>]+)([^>]*?>)`, 'gi');
+    // Strip outer and inner quotes to extract the raw value for comparison
+    const matchesValue = (raw) => {
+        const inner = raw.replace(/^["']|["']$/g, '').replace(/^['"]|['"]$/g, '');
+        return values.includes(inner);
+    };
+    let result = templateContent.replace(boundAttributePattern, (match, prefix, value, suffix) => matchesValue(value) ? prefix + suffix : match);
+    result = result.replace(staticAttributePattern, (match, prefix, value, suffix) => matchesValue(value) ? prefix + suffix : match);
+    return result;
+};
+exports.attributeConditionalRemoval = attributeConditionalRemoval;
 function tsPropertyRemoval(source, rootSource, j, packageName, typeName, propertyName) {
     if (source.includes(typeName)) {
         if (!isImportedFromPackage(rootSource, j, packageName, typeName)) {
@@ -441,8 +469,31 @@ function tsPropertyRemoval(source, rootSource, j, packageName, typeName, propert
                 }
             }
         });
-        // Handle return statements with object literals
+        // Handle return statements with object literals, but only when the enclosing
+        // function's declared return type matches typeName. This prevents removing
+        // unrelated propertyName keys from object literals returned in other functions.
+        const enclosingFunctionReturnsType = (nodePath) => {
+            let current = nodePath.parent;
+            while (current) {
+                const node = current.node;
+                if (node.type === 'FunctionDeclaration' ||
+                    node.type === 'FunctionExpression' ||
+                    node.type === 'ArrowFunctionExpression' ||
+                    node.type === 'ClassMethod' ||
+                    node.type === 'ObjectMethod') {
+                    return !!(node.returnType &&
+                        node.returnType.typeAnnotation?.type === 'TSTypeReference' &&
+                        node.returnType.typeAnnotation.typeName?.type === 'Identifier' &&
+                        node.returnType.typeAnnotation.typeName.name === typeName);
+                }
+                current = current.parent;
+            }
+            return false;
+        };
         rootSource.find(j.ReturnStatement).forEach((path) => {
+            if (!enclosingFunctionReturnsType(path)) {
+                return;
+            }
             if (path.node.argument && path.node.argument.type === 'ObjectExpression') {
                 const properties = path.node.argument.properties;
                 const propIndex = properties.findIndex((p) => p.type === 'ObjectProperty' &&
@@ -491,22 +542,6 @@ function tsPropertyRemoval(source, rootSource, j, packageName, typeName, propert
                 statement.remove();
             }
         });
-        // Handle nested member expressions like chatConfig.chat.modelFields.pinnedByField
-        rootSource
-            .find(j.AssignmentExpression, {
-            left: {
-                type: 'MemberExpression',
-                object: {
-                    type: 'MemberExpression',
-                },
-                property: {
-                    name: propertyName,
-                },
-            },
-        })
-            .forEach((path) => {
-            j(path).closest(j.ExpressionStatement).remove();
-        });
         return rootSource;
     }
 }

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

@@ -7,12 +7,13 @@ import { EventEmitter, Injectable, Directive, HostListener, HostBinding, Input,
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subscription } from 'rxjs';
 import { getter } from '@progress/kendo-common';
-import { caretAltUpIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, caretDoubleAltRightIcon, caretDoubleAltLeftIcon, xIcon } from '@progress/kendo-svg-icons';
+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: 1777363315,
-    version: '24.0.0-develop.8',
+    publishDate: 1779273575,
+    version: '24.0.0',
     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
  */
@@ -238,38 +270,38 @@ const allTools = [
     {
         name: 'moveUp',
         label: 'Move Up',
-        icon: 'caret-alt-up',
-        svgIcon: caretAltUpIcon
+        icon: 'chevron-up',
+        svgIcon: chevronUpIcon
     },
     {
         name: 'moveDown',
         label: 'Move Down',
-        icon: 'caret-alt-down',
-        svgIcon: caretAltDownIcon
+        icon: 'chevron-down',
+        svgIcon: chevronDownIcon
     },
     {
         name: 'transferTo',
         label: 'Transfer To',
-        icon: 'caret-alt-right',
-        svgIcon: caretAltRightIcon
+        icon: 'chevron-right',
+        svgIcon: chevronRightIcon
     },
     {
         name: 'transferFrom',
         label: 'Transfer From',
-        icon: 'caret-alt-left',
-        svgIcon: caretAltLeftIcon
+        icon: 'chevron-left',
+        svgIcon: chevronLeftIcon
     },
     {
         name: 'transferAllTo',
         label: 'Transfer All To',
-        icon: 'caret-double-alt-right',
-        svgIcon: caretDoubleAltRightIcon
+        icon: 'chevron-double-right',
+        svgIcon: chevronDoubleRightIcon
     },
     {
         name: 'transferAllFrom',
         label: 'Transfer All From',
-        icon: 'caret-double-alt-left',
-        svgIcon: caretDoubleAltLeftIcon
+        icon: 'chevron-double-left',
+        svgIcon: chevronDoubleLeftIcon
     },
     {
         name: 'remove',
@@ -888,6 +920,10 @@ class ListBoxComponent {
      * @hidden
      */
     itemTemplate;
+    /**
+     * @hidden
+     */
+    noDataTemplate;
     /**
      * @hidden
      */
@@ -1027,11 +1063,11 @@ class ListBoxComponent {
     /**
      * @hidden
      */
-    caretAltLeftIcon = caretAltLeftIcon;
+    chevronLeftIcon = chevronLeftIcon;
     /**
      * @hidden
      */
-    caretAltRightIcon = caretAltRightIcon;
+    chevronRightIcon = chevronRightIcon;
     localizationSubscription;
     _size;
     subs = new Subscription();
@@ -1155,25 +1191,31 @@ class ListBoxComponent {
      * @hidden
      */
     toolIcon(icon) {
-        return this.direction === 'ltr' ?
-            icon :
-            icon === 'caret-alt-left' ?
-                'caret-alt-right' :
-                icon === 'caret-alt-right' ?
-                    'caret-alt-left' :
-                    icon;
+        if (this.direction === 'ltr') {
+            return icon;
+        }
+        if (icon === 'chevron-left') {
+            return 'chevron-right';
+        }
+        if (icon === 'chevron-right') {
+            return 'chevron-left';
+        }
+        return icon;
     }
     /**
      * @hidden
      */
     toolSVGIcon(icon) {
-        return this.direction === 'ltr' ?
-            icon :
-            icon === this.caretAltLeftIcon ?
-                this.caretAltRightIcon :
-                icon === this.caretAltRightIcon ?
-                    this.caretAltLeftIcon :
-                    icon;
+        if (this.direction === 'ltr') {
+            return icon;
+        }
+        if (icon === this.chevronLeftIcon) {
+            return this.chevronRightIcon;
+        }
+        if (icon === this.chevronRightIcon) {
+            return this.chevronLeftIcon;
+        }
+        return icon;
     }
     initSubscriptions(navService, hostEl, toolsRef) {
         this.subs.add(navService.onShiftSelectedItem.subscribe((actionToPerform) => this.performAction(actionToPerform)));
@@ -1352,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"
@@ -1395,8 +1438,8 @@ class ListBoxComponent {
                 [icon]="toolIcon(tool.icon)"
                 [svgIcon]="toolSVGIcon(tool.svgIcon)"
                 [attr.title]="messageFor(tool.name)"
+                [attr.aria-label]="messageFor(tool.name)"
                 (click)="performAction(tool.name)"
-                role="button"
                 type="button"
               ></button>
             }
@@ -1404,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"
                 >
@@ -1413,7 +1456,7 @@ class ListBoxComponent {
                   class="k-list-ul"
                   role="listbox"
                   [attr.aria-label]="listboxLabel"
-                  [attr.aria-multiselectable]="selectable === 'multiple'"
+                  [attr.aria-multiselectable]="selectable === 'multiple' ? true : null"
                   >
                   @for (item of data; track item; let i = $index) {
                     <li
@@ -1425,7 +1468,7 @@ class ListBoxComponent {
                       [attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
                       [index]="i"
                       [class.k-disabled]="itemDisabled(item)"
-                      [attr.aria-disabled]="itemDisabled(item)"
+                      [attr.aria-disabled]="itemDisabled(item) ? true : null"
                       >
                       @if (itemTemplate) {
                         <ng-template
@@ -1443,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", "primary", "look"], 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,
@@ -1464,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
@@ -1508,8 +1556,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [icon]="toolIcon(tool.icon)"
                 [svgIcon]="toolSVGIcon(tool.svgIcon)"
                 [attr.title]="messageFor(tool.name)"
+                [attr.aria-label]="messageFor(tool.name)"
                 (click)="performAction(tool.name)"
-                role="button"
                 type="button"
               ></button>
             }
@@ -1517,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"
                 >
@@ -1526,7 +1574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                   class="k-list-ul"
                   role="listbox"
                   [attr.aria-label]="listboxLabel"
-                  [attr.aria-multiselectable]="selectable === 'multiple'"
+                  [attr.aria-multiselectable]="selectable === 'multiple' ? true : null"
                   >
                   @for (item of data; track item; let i = $index) {
                     <li
@@ -1538,7 +1586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                       [attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
                       [index]="i"
                       [class.k-disabled]="itemDisabled(item)"
-                      [attr.aria-disabled]="itemDisabled(item)"
+                      [attr.aria-disabled]="itemDisabled(item) ? true : null"
                       >
                       @if (itemTemplate) {
                         <ng-template
@@ -1556,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,
@@ -1576,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']
@@ -1952,6 +2007,7 @@ const KENDO_LISTBOX = [
     ListBoxComponent,
     ItemTemplateDirective,
     ItemSelectableDirective,
+    NoDataTemplateDirective,
     DataBindingDirective,
     CustomMessagesComponent,
 ];
@@ -1962,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: [{
@@ -1978,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
      */
@@ -174,11 +179,11 @@ export declare class ListBoxComponent implements OnInit, AfterViewInit, OnDestro
     /**
      * @hidden
      */
-    caretAltLeftIcon: SVGIcon;
+    chevronLeftIcon: SVGIcon;
     /**
      * @hidden
      */
-    caretAltRightIcon: SVGIcon;
+    chevronRightIcon: SVGIcon;
     private localizationSubscription;
     private _size;
     private subs;
@@ -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": 1777363315,
-  "version": "24.0.0-develop.8",
+  "publishDate": 1779273575,
+  "version": "24.0.0",
   "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.8",
+  "version": "24.0.0",
   "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": 1777363315,
+      "publishDate": 1779273575,
       "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.8",
-    "@progress/kendo-angular-common": "24.0.0-develop.8",
-    "@progress/kendo-angular-popup": "24.0.0-develop.8",
+    "@progress/kendo-angular-buttons": "24.0.0",
+    "@progress/kendo-angular-common": "24.0.0",
+    "@progress/kendo-angular-popup": "24.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.8",
+    "@progress/kendo-angular-schematics": "24.0.0",
     "@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.8',
-            '@progress/kendo-angular-common': '24.0.0-develop.8',
-            '@progress/kendo-angular-l10n': '24.0.0-develop.8',
+            '@progress/kendo-angular-buttons': '24.0.0',
+            '@progress/kendo-angular-common': '24.0.0',
+            '@progress/kendo-angular-l10n': '24.0.0',
             // Peer of kendo-angular-buttons
-            '@progress/kendo-angular-popup': '24.0.0-develop.8'
+            '@progress/kendo-angular-popup': '24.0.0'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }