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

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

@@ -9,11 +9,10 @@ import { Subscription } from 'rxjs';
 import { getter } from '@progress/kendo-common';
 import { caretAltUpIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, caretDoubleAltRightIcon, caretDoubleAltLeftIcon, xIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { normalizeNumpadKeys, Keys, isPresent as isPresent$1, TemplateContextDirective, isChanged, ResizeBatchService } from '@progress/kendo-angular-common';
+import { normalizeKeys, Keys, isPresent as isPresent$1, TemplateContextDirective, 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 { NgIf, NgFor } from '@angular/common';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
 
@@ -25,8 +24,8 @@ 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'
 };
 
@@ -39,8 +38,12 @@ 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;
@@ -94,7 +97,9 @@ 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));
@@ -137,13 +142,18 @@ 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];
         }
@@ -153,11 +163,17 @@ 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;
@@ -337,7 +353,7 @@ 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);
@@ -421,6 +437,9 @@ 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({
@@ -451,8 +470,10 @@ 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();
@@ -482,6 +503,9 @@ 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;
         }
@@ -610,7 +634,17 @@ 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,
@@ -624,7 +658,13 @@ 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);
         }
     }
@@ -632,10 +672,38 @@ 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 });
 }
@@ -981,6 +1049,9 @@ 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
@@ -1271,7 +1342,7 @@ 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: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.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,
@@ -1281,41 +1352,41 @@ 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"
@@ -1325,53 +1396,59 @@ 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,
@@ -1388,41 +1465,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"
@@ -1432,55 +1509,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: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listboxClassName: [{
                 type: HostBinding,
@@ -1750,12 +1833,24 @@ 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/keyboard-navigation.service.d.ts

@@ -50,6 +50,9 @@ export declare class KeyboardNavigationService {
     private onShiftArrow;
     private onArrowDown;
     private onArrowUp;
+    private isItemDisabled;
+    private findNextEnabledIndex;
+    private calculateNextActiveItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardNavigationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KeyboardNavigationService>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-listbox",
-  "version": "21.1.1-develop.2",
+  "version": "21.2.0-develop.10",
   "description": "Kendo UI for Angular ListBox",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -44,7 +44,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1763729377,
+      "publishDate": 1764593179,
       "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"
     }
   },
@@ -54,16 +54,15 @@
     "@angular/core": "18 - 21",
     "@angular/platform-browser": "18 - 21",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "21.1.1-develop.2",
-    "@progress/kendo-angular-common": "21.1.1-develop.2",
-    "@progress/kendo-angular-popup": "21.1.1-develop.2",
+    "@progress/kendo-angular-buttons": "21.2.0-develop.10",
+    "@progress/kendo-angular-common": "21.2.0-develop.10",
+    "@progress/kendo-angular-popup": "21.2.0-develop.10",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.1.1-develop.2",
-    "@progress/kendo-common": "^1.0.1",
-    "node-html-parser": "^7.0.1"
+    "@progress/kendo-angular-schematics": "21.2.0-develop.10",
+    "@progress/kendo-common": "^1.0.1"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-listbox.mjs",