@progress/kendo-angular-listbox 15.0.2-develop.12 → 15.0.2-develop.13

package/esm2020/listbox.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, NgZone, Output, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subscription } from 'rxjs';
 import { packageMetadata } from './package-metadata';
@@ -30,13 +30,14 @@ let idx = 0;
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
 export class ListBoxComponent {
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
+    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization, changeDetector) {
         this.keyboardNavigationService = keyboardNavigationService;
         this.selectionService = selectionService;
         this.hostElement = hostElement;
         this.renderer = renderer;
         this.zone = zone;
         this.localization = localization;
+        this.changeDetector = changeDetector;
         /**
          * @hidden
          */
@@ -270,6 +271,7 @@ export class ListBoxComponent {
             const { prevIndex, index } = indexes;
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex });
+            this.changeDetector.markForCheck();
         }));
     }
     onFocusIn(event) {
@@ -277,6 +279,9 @@ export class ListBoxComponent {
         if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
             const items = this.listboxItems.toArray();
             const index = items.findIndex(elem => elem.nativeElement === event.target);
+            if (index === -1) {
+                return;
+            }
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex: null });
             const previousItem = items[navService.selectedListboxItemIndex]?.nativeElement;
@@ -343,7 +348,7 @@ export class ListBoxComponent {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
 }
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: i1.KeyboardNavigationService }, { token: i2.ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
         ListBoxSelectionService,
         KeyboardNavigationService,
@@ -532,7 +537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `,
                 }]
-        }], ctorParameters: function () { return [{ type: i1.KeyboardNavigationService }, { type: i2.ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.LocalizationService }]; }, propDecorators: { listboxClassName: [{
+        }], ctorParameters: function () { return [{ type: i1.KeyboardNavigationService }, { type: i2.ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1708348838,
-    version: '15.0.2-develop.12',
+    publishDate: 1708353413,
+    version: '15.0.2-develop.13',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

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

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1708348838,
-    version: '15.0.2-develop.12',
+    publishDate: 1708353413,
+    version: '15.0.2-develop.13',
     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'
 };
 
@@ -566,13 +566,14 @@ let idx = 0;
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
 class ListBoxComponent {
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
+    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization, changeDetector) {
         this.keyboardNavigationService = keyboardNavigationService;
         this.selectionService = selectionService;
         this.hostElement = hostElement;
         this.renderer = renderer;
         this.zone = zone;
         this.localization = localization;
+        this.changeDetector = changeDetector;
         /**
          * @hidden
          */
@@ -807,6 +808,7 @@ class ListBoxComponent {
             const { prevIndex, index } = indexes;
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex });
+            this.changeDetector.markForCheck();
         }));
     }
     onFocusIn(event) {
@@ -815,6 +817,9 @@ class ListBoxComponent {
         if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
             const items = this.listboxItems.toArray();
             const index = items.findIndex(elem => elem.nativeElement === event.target);
+            if (index === -1) {
+                return;
+            }
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex: null });
             const previousItem = (_a = items[navService.selectedListboxItemIndex]) === null || _a === void 0 ? void 0 : _a.nativeElement;
@@ -883,7 +888,7 @@ class ListBoxComponent {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
 }
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
         ListBoxSelectionService,
         KeyboardNavigationService,
@@ -1072,7 +1077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `,
                 }]
-        }], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { listboxClassName: [{
+        }], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{

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

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1708348838,
-    version: '15.0.2-develop.12',
+    publishDate: 1708353413,
+    version: '15.0.2-develop.13',
     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'
 };
 
@@ -561,13 +561,14 @@ let idx = 0;
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
 class ListBoxComponent {
-    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization) {
+    constructor(keyboardNavigationService, selectionService, hostElement, renderer, zone, localization, changeDetector) {
         this.keyboardNavigationService = keyboardNavigationService;
         this.selectionService = selectionService;
         this.hostElement = hostElement;
         this.renderer = renderer;
         this.zone = zone;
         this.localization = localization;
+        this.changeDetector = changeDetector;
         /**
          * @hidden
          */
@@ -801,6 +802,7 @@ class ListBoxComponent {
             const { prevIndex, index } = indexes;
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex });
+            this.changeDetector.markForCheck();
         }));
     }
     onFocusIn(event) {
@@ -808,6 +810,9 @@ class ListBoxComponent {
         if (navService.focusedListboxItemIndex === navService.selectedListboxItemIndex && this.shouldFireFocusIn) {
             const items = this.listboxItems.toArray();
             const index = items.findIndex(elem => elem.nativeElement === event.target);
+            if (index === -1) {
+                return;
+            }
             this.selectionService.selectedIndex = index;
             this.selectionChange.next({ index, prevIndex: null });
             const previousItem = items[navService.selectedListboxItemIndex]?.nativeElement;
@@ -874,7 +879,7 @@ class ListBoxComponent {
         this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
     }
 }
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListBoxComponent, deps: [{ token: KeyboardNavigationService }, { token: ListBoxSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListBoxComponent, selector: "kendo-listbox", inputs: { textField: "textField", data: "data", size: "size", toolbar: "toolbar", listboxLabel: "listboxLabel", listboxToolbarLabel: "listboxToolbarLabel", itemDisabled: "itemDisabled" }, outputs: { selectionChange: "selectionChange", actionClick: "actionClick", getChildListbox: "getChildListbox" }, host: { properties: { "class.k-listbox": "this.listboxClassName", "attr.dir": "this.direction" } }, providers: [
         ListBoxSelectionService,
         KeyboardNavigationService,
@@ -1063,7 +1068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
     `,
                 }]
-        }], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { listboxClassName: [{
+        }], ctorParameters: function () { return [{ type: KeyboardNavigationService }, { type: ListBoxSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxClassName: [{
                 type: HostBinding,
                 args: ['class.k-listbox']
             }], direction: [{

package/listbox.component.d.ts

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

package/package.json

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

package/schematics/ngAdd/index.js

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