@progress/kendo-angular-listbox 21.1.1-develop.2 → 21.2.0-develop.10

package/codemods/v21/listbox-actionclick.js

@@ -30,23 +30,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
 const utils_1 = require("../utils");
 const fs = __importStar(require("fs"));
-const index_1 = require("../template-transformer/index");
 function default_1(fileInfo, api) {
     const filePath = fileInfo.path;
+    // Handle HTML files and inline templates
+    const htmlResult = (0, utils_1.htmlTransformer)(fileInfo, api, (templateContent) => (0, utils_1.eventUpdate)(templateContent, 'kendo-listbox', 'actionClick', 'action'));
     if (filePath.endsWith('.html')) {
-        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
-            let updatedContent = fileInfo.source;
-            updatedContent = (0, utils_1.htmlEventTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-listbox', 'actionClick', 'action');
-            // Only write to file once after all transformations
-            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        if (htmlResult && htmlResult !== fileInfo.source) {
+            fs.writeFileSync(filePath, htmlResult, 'utf-8');
+            return htmlResult;
         }
-        return;
+        return fileInfo.source; // Return original source if no changes
     }
+    // Handle TypeScript property transformations
     const j = api.jscodeshift;
-    const rootSource = j(fileInfo.source);
-    (0, index_1.templateTransformer)(rootSource, j, (root) => {
-        (0, utils_1.templateEventTransformer)(root, 'kendo-listbox', 'actionClick', 'action');
-    });
-    (0, utils_1.tsPropertyTransformer)(fileInfo.source, rootSource, j, 'ListBoxComponent', 'actionClick', 'action');
+    const rootSource = j(htmlResult || fileInfo.source);
+    (0, utils_1.tsPropertyTransformer)(fileInfo.source, rootSource, j, '@progress/kendo-angular-listbox', 'ListBoxComponent', 'actionClick', 'action');
     return rootSource.toSource();
 }

package/esm2022/data-binding.directive.mjs

@@ -233,12 +233,24 @@ export class DataBindingDirective {
         if (!target || !source || source.data?.length === 0) {
             return;
         }
-        const itemsToTransfer = source.data.splice(0, source.data.length);
+        const itemsToTransfer = source.data.filter((item) => !source.itemDisabled(item));
+        if (itemsToTransfer.length === 0) {
+            return;
+        }
+        source.data = source.data.filter((item) => source.itemDisabled(item));
         target.data.push(...itemsToTransfer);
         source.clearSelection();
         const sourceNavService = source.keyboardNavigationService;
         const sourceSelService = source.selectionService;
-        this.updateListBoxIndices(sourceNavService, sourceSelService, 0);
+        if (source.data.length === 0) {
+            this.updateListBoxIndices(sourceNavService, sourceSelService, 0);
+        }
+        else {
+            sourceNavService.focusedListboxItemIndex = 0;
+            sourceNavService.selectedListboxItemIndex = -1;
+            sourceSelService.rangeSelectionAnchorIndex = null;
+            sourceSelService.lastSelectedOrUnselectedIndex = null;
+        }
         const targetIndex = target.data.length - 1;
         target.select([targetIndex]);
         const targetNavService = target.keyboardNavigationService;

package/esm2022/keyboard-navigation.service.mjs

@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { EventEmitter, Injectable, NgZone, Renderer2 } from "@angular/core";
-import { Keys, normalizeNumpadKeys } from "@progress/kendo-angular-common";
+import { Keys, normalizeKeys } from "@progress/kendo-angular-common";
 import { take } from "rxjs/operators";
 import * as i0 from "@angular/core";
 /**
@@ -30,7 +30,7 @@ export class KeyboardNavigationService {
     }
     onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems, currentListbox) {
         const target = event.target;
-        const keyCode = normalizeNumpadKeys(event);
+        const keyCode = normalizeKeys(event);
         const ctrlOrMetaKey = event.ctrlKey || event.metaKey;
         const parentListboxToolbar = parentListbox?.selectedTools;
         const tool = toolsRef.find(elem => elem.element === target);
@@ -114,6 +114,9 @@ export class KeyboardNavigationService {
         if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
             const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
             const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            if (this.isItemDisabled(currentItem)) {
+                return;
+            }
             this.changeTabindex(previousItem, currentItem);
         }
         this.onSelectionChange.emit({
@@ -144,8 +147,10 @@ export class KeyboardNavigationService {
             return;
         }
         dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
-        this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
-        this.focusedListboxItemIndex = this.selectedListboxItemIndex;
+        if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
+            this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
+            this.focusedListboxItemIndex = this.selectedListboxItemIndex;
+        }
     }
     onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems, currentListbox) {
         event.preventDefault();
@@ -175,6 +180,9 @@ export class KeyboardNavigationService {
         else {
             previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
             currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            if (this.isItemDisabled(currentItem)) {
+                return;
+            }
             prevIndex = this.selectedListboxItemIndex;
             this.selectedListboxItemIndex = this.focusedListboxItemIndex;
         }
@@ -303,7 +311,17 @@ export class KeyboardNavigationService {
         }
         if (previousFocusIndex !== this.focusedListboxItemIndex) {
             const previousItem = listboxItems[previousFocusIndex]?.nativeElement;
-            const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            let currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            if (this.isItemDisabled(currentItem)) {
+                const step = dir === 'moveDown' ? 1 : -1;
+                const nextEnabledIndex = this.findNextEnabledIndex(this.focusedListboxItemIndex, listboxItems, step);
+                if (nextEnabledIndex === -1) {
+                    this.focusedListboxItemIndex = previousFocusIndex;
+                    return;
+                }
+                this.focusedListboxItemIndex = nextEnabledIndex;
+                currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
+            }
             this.changeTabindex(previousItem, currentItem);
             this.onSelectionChange.emit({
                 index: this.focusedListboxItemIndex,
@@ -317,7 +335,13 @@ export class KeyboardNavigationService {
         if (this.focusedListboxItemIndex < listboxItems.length - 1) {
             this.selectedListboxItemIndex = this.focusedListboxItemIndex + 1;
             const previousItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
-            const currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+            let currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+            if (this.isItemDisabled(currentItem)) {
+                currentItem = this.calculateNextActiveItem(listboxItems, 1);
+                if (!currentItem) {
+                    return;
+                }
+            }
             this.changeTabindex(previousItem, currentItem);
         }
     }
@@ -325,10 +349,38 @@ export class KeyboardNavigationService {
         if (this.focusedListboxItemIndex > 0) {
             this.selectedListboxItemIndex = this.focusedListboxItemIndex - 1;
             const previousItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
-            const currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+            let currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+            if (this.isItemDisabled(currentItem)) {
+                currentItem = this.calculateNextActiveItem(listboxItems, -1);
+                if (!currentItem) {
+                    return;
+                }
+            }
             this.changeTabindex(previousItem, currentItem);
         }
     }
+    isItemDisabled(item) {
+        return item.getAttribute('aria-disabled') === 'true';
+    }
+    findNextEnabledIndex(startIndex, listboxItems, step) {
+        let index = startIndex;
+        while (index >= 0 && index < listboxItems.length) {
+            const item = listboxItems[index]?.nativeElement;
+            if (!this.isItemDisabled(item)) {
+                return index;
+            }
+            index += step;
+        }
+        return -1;
+    }
+    calculateNextActiveItem(listboxItems, step) {
+        this.selectedListboxItemIndex = this.findNextEnabledIndex(this.selectedListboxItemIndex, listboxItems, step);
+        if (this.selectedListboxItemIndex === -1) {
+            this.selectedListboxItemIndex = this.focusedListboxItemIndex;
+            return null;
+        }
+        return listboxItems[this.selectedListboxItemIndex]?.nativeElement;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KeyboardNavigationService });
 }

package/esm2022/listbox.component.mjs

@@ -18,7 +18,6 @@ import { take } from 'rxjs/operators';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import { ItemSelectableDirective } from './item-selectable.directive';
-import { NgIf, NgFor } from '@angular/common';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 import { isPresent, TemplateContextDirective } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
@@ -231,6 +230,9 @@ export class ListBoxComponent {
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
         this.setSizingClass(this.size);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.selectionService.isItemDisabled = (index) => {
+            return this.itemDisabled(this.data[index]);
+        };
     }
     ngOnInit() {
         // This event emitter gives us the connectedWith value from the DataBinding directive
@@ -521,7 +523,7 @@ export class ListBoxComponent {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxComponent, deps: [{ token: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", selectable: "selectable", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", action: "action", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListBoxComponent, isStandalone: true, selector: "kendo-listbox", inputs: { textField: "textField", selectable: "selectable", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", action: "action", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
             ListBoxSelectionService,
             KeyboardNavigationService,
             LocalizationService,
@@ -531,41 +533,41 @@ export class ListBoxComponent {
             },
         ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "listboxElement", first: true, predicate: ["listbox"], descendants: true }, { propertyName: "toolbarElement", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "listboxItems", predicate: ["listboxItems"], descendants: true }, { propertyName: "tools", predicate: ["tools"], descendants: true }], ngImport: i0, template: `
         <ng-container kendoListBoxLocalizedMessages
-            i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
-            moveUp="Move Up"
-
-            i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
-            moveDown="Move Down"
-
-            i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
-            transferTo="Transfer To"
-
-            i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
-            transferAllTo="Transfer All To"
-
-            i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
-            transferFrom="Transfer From"
-
-            i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
-            transferAllFrom="Transfer All From"
-
-            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."
-            >
+          i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
+          moveUp="Move Up"
+        
+          i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
+          moveDown="Move Down"
+        
+          i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
+          transferTo="Transfer To"
+        
+          i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
+          transferAllTo="Transfer All To"
+        
+          i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
+          transferFrom="Transfer From"
+        
+          i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
+          transferAllFrom="Transfer All From"
+        
+          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
+        @if (selectedTools.length > 0) {
+          <div
             #toolbar
             class="k-listbox-actions"
-            *ngIf="selectedTools.length > 0"
             role="toolbar"
             [attr.aria-label]="listboxToolbarLabel"
-        >
-            <button
+            >
+            @for (tool of selectedTools; track tool; let i = $index) {
+              <button
                 #tools
-                *ngFor="let tool of selectedTools; let i = index"
                 kendoButton
                 [attr.tabindex]="i === 0 ? '0' : '-1'"
                 [size]="this.size"
@@ -575,53 +577,59 @@ export class ListBoxComponent {
                 (click)="performAction(tool.name)"
                 role="button"
                 type="button"
-            ></button>
-        </div>
+              ></button>
+            }
+          </div>
+        }
         <div class="k-list-scroller k-selectable">
-            <div class="{{ listClasses }}">
-                <div
-                    *ngIf="data.length > 0"
-                    class="k-list-content"
+          <div class="{{ listClasses }}">
+            @if (data.length > 0) {
+              <div
+                class="k-list-content"
                 >
-                    <ul
-                        #listbox
-                        class="k-list-ul"
-                        role="listbox"
-                        [attr.aria-label]="listboxLabel"
-                        [attr.aria-multiselectable]="selectable === 'multiple'"
-                    >
-                        <li
-                            #listboxItems
-                            *ngFor="let item of data; let i = index"
-                            kendoListBoxItemSelectable
-                            class="k-list-item"
-                            [attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
-                            role="option"
-                            [attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
-                            [index]="i"
-                            [class.k-disabled]="itemDisabled(item)"
-                        >
-                            <ng-template
-                                *ngIf="itemTemplate; else defaultItemTemplate"
+                <ul
+                  #listbox
+                  class="k-list-ul"
+                  role="listbox"
+                  [attr.aria-label]="listboxLabel"
+                  [attr.aria-multiselectable]="selectable === 'multiple'"
+                  >
+                  @for (item of data; track item; let i = $index) {
+                    <li
+                      #listboxItems
+                      kendoListBoxItemSelectable
+                      class="k-list-item"
+                      [attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
+                      role="option"
+                      [attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
+                      [index]="i"
+                      [class.k-disabled]="itemDisabled(item)"
+                      [attr.aria-disabled]="itemDisabled(item)"
+                      >
+                      @if (itemTemplate) {
+                        <ng-template
                                 [templateContext]="{
                                     templateRef: itemTemplate.templateRef,
                                     $implicit: item
                                 }"
-                            >
-                            </ng-template>
-                            <ng-template #defaultItemTemplate>
-                                <span class="k-list-item-text">{{ getText(item) }}</span>
-                            </ng-template>
-                        </li>
-                    </ul>
-                </div>
-                <span
-                    *ngIf="data.length === 0"
-                    class="k-nodata"
-                >{{ messageFor('noDataText') }}</span>
-            </div>
+                          >
+                        </ng-template>
+                      } @else {
+                        <span class="k-list-item-text">{{ getText(item) }}</span>
+                      }
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+            @if (data.length === 0) {
+              <span
+                class="k-nodata"
+              >{{ messageFor('noDataText') }}</span>
+            }
+          </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoListBoxLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,
@@ -638,41 +646,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
         <ng-container kendoListBoxLocalizedMessages
-            i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
-            moveUp="Move Up"
-
-            i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
-            moveDown="Move Down"
-
-            i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
-            transferTo="Transfer To"
-
-            i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
-            transferAllTo="Transfer All To"
-
-            i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
-            transferFrom="Transfer From"
-
-            i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
-            transferAllFrom="Transfer All From"
-
-            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."
-            >
+          i18n-moveUp="kendo.listbox.moveUp|The title of the Move Up button"
+          moveUp="Move Up"
+        
+          i18n-moveDown="kendo.listbox.moveDown|The title of the Move Down button"
+          moveDown="Move Down"
+        
+          i18n-transferTo="kendo.listbox.transferTo|The title of the Transfer To button"
+          transferTo="Transfer To"
+        
+          i18n-transferAllTo="kendo.listbox.transferAllTo|The title of the Transfer All To button"
+          transferAllTo="Transfer All To"
+        
+          i18n-transferFrom="kendo.listbox.transferFrom|The title of the Transfer From button"
+          transferFrom="Transfer From"
+        
+          i18n-transferAllFrom="kendo.listbox.transferAllFrom|The title of the Transfer All From button"
+          transferAllFrom="Transfer All From"
+        
+          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
+        @if (selectedTools.length > 0) {
+          <div
             #toolbar
             class="k-listbox-actions"
-            *ngIf="selectedTools.length > 0"
             role="toolbar"
             [attr.aria-label]="listboxToolbarLabel"
-        >
-            <button
+            >
+            @for (tool of selectedTools; track tool; let i = $index) {
+              <button
                 #tools
-                *ngFor="let tool of selectedTools; let i = index"
                 kendoButton
                 [attr.tabindex]="i === 0 ? '0' : '-1'"
                 [size]="this.size"
@@ -682,55 +690,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 (click)="performAction(tool.name)"
                 role="button"
                 type="button"
-            ></button>
-        </div>
+              ></button>
+            }
+          </div>
+        }
         <div class="k-list-scroller k-selectable">
-            <div class="{{ listClasses }}">
-                <div
-                    *ngIf="data.length > 0"
-                    class="k-list-content"
+          <div class="{{ listClasses }}">
+            @if (data.length > 0) {
+              <div
+                class="k-list-content"
                 >
-                    <ul
-                        #listbox
-                        class="k-list-ul"
-                        role="listbox"
-                        [attr.aria-label]="listboxLabel"
-                        [attr.aria-multiselectable]="selectable === 'multiple'"
-                    >
-                        <li
-                            #listboxItems
-                            *ngFor="let item of data; let i = index"
-                            kendoListBoxItemSelectable
-                            class="k-list-item"
-                            [attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
-                            role="option"
-                            [attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
-                            [index]="i"
-                            [class.k-disabled]="itemDisabled(item)"
-                        >
-                            <ng-template
-                                *ngIf="itemTemplate; else defaultItemTemplate"
+                <ul
+                  #listbox
+                  class="k-list-ul"
+                  role="listbox"
+                  [attr.aria-label]="listboxLabel"
+                  [attr.aria-multiselectable]="selectable === 'multiple'"
+                  >
+                  @for (item of data; track item; let i = $index) {
+                    <li
+                      #listboxItems
+                      kendoListBoxItemSelectable
+                      class="k-list-item"
+                      [attr.tabindex]="i === keyboardNavigationService.focusedListboxItemIndex ? '0' : '-1'"
+                      role="option"
+                      [attr.aria-selected]="selectedIndices.indexOf(i) >= 0"
+                      [index]="i"
+                      [class.k-disabled]="itemDisabled(item)"
+                      [attr.aria-disabled]="itemDisabled(item)"
+                      >
+                      @if (itemTemplate) {
+                        <ng-template
                                 [templateContext]="{
                                     templateRef: itemTemplate.templateRef,
                                     $implicit: item
                                 }"
-                            >
-                            </ng-template>
-                            <ng-template #defaultItemTemplate>
-                                <span class="k-list-item-text">{{ getText(item) }}</span>
-                            </ng-template>
-                        </li>
-                    </ul>
-                </div>
-                <span
-                    *ngIf="data.length === 0"
-                    class="k-nodata"
-                >{{ messageFor('noDataText') }}</span>
-            </div>
+                          >
+                        </ng-template>
+                      } @else {
+                        <span class="k-list-item-text">{{ getText(item) }}</span>
+                      }
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+            @if (data.length === 0) {
+              <span
+                class="k-nodata"
+              >{{ messageFor('noDataText') }}</span>
+            }
+          </div>
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgIf, NgFor, ButtonComponent, ItemSelectableDirective, TemplateContextDirective]
+                    imports: [LocalizedMessagesDirective, ButtonComponent, ItemSelectableDirective, TemplateContextDirective]
                 }]
         }], ctorParameters: () => [{ 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,

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729377,
-    version: '21.1.1-develop.2',
+    publishDate: 1764593179,
+    version: '21.2.0-develop.10',
     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/esm2022/selection.service.mjs

@@ -13,8 +13,12 @@ export class ListBoxSelectionService {
     lastSelectedOrUnselectedIndex = null;
     rangeSelectionTargetIndex = null;
     rangeSelectionAnchorIndex = null;
+    isItemDisabled = () => false;
     onSelect = new EventEmitter();
     select(index, ctrlKey = false, shiftKey = false) {
+        if (this.isItemDisabled(index)) {
+            return;
+        }
         const previousSelection = [...this.selectedIndices];
         let selectedIndices = [];
         let deselectedIndices = null;
@@ -68,7 +72,9 @@ export class ListBoxSelectionService {
                     const endIndex = Math.max(anchorIndex, index);
                     this.selectedIndices = [];
                     for (let i = startIndex; i <= endIndex; i++) {
-                        this.selectedIndices.push(i);
+                        if (!this.isItemDisabled(i)) {
+                            this.selectedIndices.push(i);
+                        }
                     }
                     this.rangeSelectionTargetIndex = index;
                     selectedIndices = this.selectedIndices.filter(i => !previousSelection.includes(i));
@@ -111,13 +117,18 @@ export class ListBoxSelectionService {
         const endIndex = Math.max(anchorIndex, targetIndex);
         this.selectedIndices = [];
         for (let i = startIndex; i <= endIndex; i++) {
-            this.selectedIndices.push(i);
+            if (!this.isItemDisabled(i)) {
+                this.selectedIndices.push(i);
+            }
         }
     }
     setSelectedIndices(indices) {
-        this.selectedIndices = [...indices];
+        this.selectedIndices = indices.filter(i => !this.isItemDisabled(i));
     }
     addToSelectedIndices(index) {
+        if (this.isItemDisabled(index)) {
+            return;
+        }
         if (this.selectionMode === 'single') {
             this.selectedIndices = [index];
         }
@@ -127,11 +138,17 @@ export class ListBoxSelectionService {
     }
     selectAll(totalItems) {
         if (this.selectionMode === 'multiple') {
-            this.selectedIndices = Array.from({ length: totalItems }, (_, i) => i);
+            this.selectedIndices = [];
+            for (let i = 0; i < totalItems; i++) {
+                if (!this.isItemDisabled(i)) {
+                    this.selectedIndices.push(i);
+                }
+            }
         }
     }
     areAllSelected(totalItems) {
-        return this.selectedIndices.length === totalItems && totalItems > 0;
+        const allSelectableItems = Array.from({ length: totalItems }, (_, i) => i).filter(i => !this.isItemDisabled(i));
+        return this.selectedIndices.length === allSelectableItems.length && allSelectableItems.length > 0;
     }
     isSelected(index) {
         return this.selectedIndices.indexOf(index) !== -1;