@progress/kendo-angular-listview 19.0.0-develop.2 → 19.0.0-develop.21

package/esm2022/listview.component.mjs

@@ -86,7 +86,13 @@ export class ListViewComponent {
      * The data collection that will be used to populate the ListView
      * ([see data binding examples]({% slug paging_listview %})).
      */
-    data;
+    set data(value) {
+        this.lastScrollTop = this.contentContainer?.nativeElement.scrollTop ?? 0;
+        this._data = value;
+    }
+    get data() {
+        return this._data;
+    }
     /**
      * Specifies if the loading indicator of the ListView will be displayed
      * ([see example]({% slug paging_listview %}#toc-remote-binding)).
@@ -132,7 +138,7 @@ export class ListViewComponent {
     /**
      * Specifies whether the keyboard navigation is enabled
      * ([see example]({% slug keyboard_navigation_listview %})).
-     * By default, the navigation is disabled.
+     * By default, the navigation is enabled.
      */
     set navigable(navigable) {
         if (!navigable && isPresent(this.removeNavigationListeners)) {
@@ -275,8 +281,10 @@ export class ListViewComponent {
     }
     removeNavigationListeners;
     _skip = 0;
-    _navigable = false;
+    _navigable = true;
     _pageable;
+    lastScrollTop;
+    _data;
     editServiceSubscription;
     constructor(ngZone, element, renderer, changeDetectorRef, editService, navigationService) {
         this.ngZone = ngZone;
@@ -288,6 +296,9 @@ export class ListViewComponent {
         validatePackage(packageMetadata);
         this.attachEditHandlers();
     }
+    ngAfterViewInit() {
+        this.lastScrollTop = this.contentContainer?.nativeElement.scrollTop;
+    }
     ngOnChanges(changes) {
         if (isChanged('height', changes, false)) {
             this.renderer.setStyle(this.element.nativeElement, 'height', `${this.height}px`);
@@ -391,12 +402,17 @@ export class ListViewComponent {
     /**
      * @hidden
      */
-    handleContentScroll() {
+    handleContentScroll = () => {
         if (!hasObservers(this.scrollBottom)) {
             return;
         }
         const THRESHOLD = 2;
         const { scrollHeight, scrollTop, clientHeight } = this.contentContainer.nativeElement;
+        const isScrollUp = this.lastScrollTop > scrollTop;
+        this.lastScrollTop = scrollTop;
+        if (isScrollUp) {
+            return;
+        }
         const atBottom = scrollHeight - clientHeight - scrollTop <= THRESHOLD;
         if (atBottom) {
             this.ngZone.run(() => {
@@ -404,7 +420,7 @@ export class ListViewComponent {
                 this.scrollBottom.emit(event);
             });
         }
-    }
+    };
     /**
      * @hidden
      */
@@ -587,7 +603,7 @@ export class ListViewComponent {
             >
             </kendo-datapager>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: ["index"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: ["index"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745321906,
-    version: '19.0.0-develop.2',
+    publishDate: 1747412075,
+    version: '19.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -25,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745321906,
-    version: '19.0.0-develop.2',
+    publishDate: 1747412075,
+    version: '19.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -641,7 +641,13 @@ class ListViewComponent {
      * The data collection that will be used to populate the ListView
      * ([see data binding examples]({% slug paging_listview %})).
      */
-    data;
+    set data(value) {
+        this.lastScrollTop = this.contentContainer?.nativeElement.scrollTop ?? 0;
+        this._data = value;
+    }
+    get data() {
+        return this._data;
+    }
     /**
      * Specifies if the loading indicator of the ListView will be displayed
      * ([see example]({% slug paging_listview %}#toc-remote-binding)).
@@ -687,7 +693,7 @@ class ListViewComponent {
     /**
      * Specifies whether the keyboard navigation is enabled
      * ([see example]({% slug keyboard_navigation_listview %})).
-     * By default, the navigation is disabled.
+     * By default, the navigation is enabled.
      */
     set navigable(navigable) {
         if (!navigable && isPresent(this.removeNavigationListeners)) {
@@ -830,8 +836,10 @@ class ListViewComponent {
     }
     removeNavigationListeners;
     _skip = 0;
-    _navigable = false;
+    _navigable = true;
     _pageable;
+    lastScrollTop;
+    _data;
     editServiceSubscription;
     constructor(ngZone, element, renderer, changeDetectorRef, editService, navigationService) {
         this.ngZone = ngZone;
@@ -843,6 +851,9 @@ class ListViewComponent {
         validatePackage(packageMetadata);
         this.attachEditHandlers();
     }
+    ngAfterViewInit() {
+        this.lastScrollTop = this.contentContainer?.nativeElement.scrollTop;
+    }
     ngOnChanges(changes) {
         if (isChanged('height', changes, false)) {
             this.renderer.setStyle(this.element.nativeElement, 'height', `${this.height}px`);
@@ -946,12 +957,17 @@ class ListViewComponent {
     /**
      * @hidden
      */
-    handleContentScroll() {
+    handleContentScroll = () => {
         if (!hasObservers(this.scrollBottom)) {
             return;
         }
         const THRESHOLD = 2;
         const { scrollHeight, scrollTop, clientHeight } = this.contentContainer.nativeElement;
+        const isScrollUp = this.lastScrollTop > scrollTop;
+        this.lastScrollTop = scrollTop;
+        if (isScrollUp) {
+            return;
+        }
         const atBottom = scrollHeight - clientHeight - scrollTop <= THRESHOLD;
         if (atBottom) {
             this.ngZone.run(() => {
@@ -959,7 +975,7 @@ class ListViewComponent {
                 this.scrollBottom.emit(event);
             });
         }
-    }
+    };
     /**
      * @hidden
      */
@@ -1142,7 +1158,7 @@ class ListViewComponent {
             >
             </kendo-datapager>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: ["index"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: ["index"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,

package/listview.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, NgZone, Renderer2, ElementRef, SimpleChanges, QueryList, ChangeDetectorRef } from '@angular/core';
+import { EventEmitter, NgZone, Renderer2, ElementRef, SimpleChanges, QueryList, ChangeDetectorRef, AfterViewInit, OnDestroy, OnChanges } from '@angular/core';
 import { NavigationService } from './navigation/navigation.service';
 import { ListViewNavigableItemDirective } from './navigation/listview-navigable-item.directive';
 import { ItemTemplateDirective } from './templates/item-template.directive';
@@ -25,7 +25,7 @@ import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI ListView component for Angular.
  */
-export declare class ListViewComponent {
+export declare class ListViewComponent implements AfterViewInit, OnChanges, OnDestroy {
     ngZone: NgZone;
     element: ElementRef;
     renderer: Renderer2;
@@ -74,7 +74,8 @@ export declare class ListViewComponent {
      * The data collection that will be used to populate the ListView
      * ([see data binding examples]({% slug paging_listview %})).
      */
-    data: any[] | ListViewDataResult;
+    set data(value: any[] | ListViewDataResult | undefined);
+    get data(): any[] | ListViewDataResult | undefined;
     /**
      * Specifies if the loading indicator of the ListView will be displayed
      * ([see example]({% slug paging_listview %}#toc-remote-binding)).
@@ -84,35 +85,35 @@ export declare class ListViewComponent {
      * The CSS styles that will be rendered on the content container element of the ListView.
      * Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
-    containerStyle: {
+    containerStyle?: {
         [key: string]: string;
     };
     /**
      * The CSS styles that will be rendered on each item element wrapper of the ListView.
      * Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
-    itemStyle: {
+    itemStyle?: {
         [key: string]: string;
     };
     /**
      * The CSS class that will be rendered on the content container element of the ListView.
      * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
-    containerClass: string | string[] | Set<string> | {
+    containerClass?: string | string[] | Set<string> | {
         [key: string]: boolean;
     };
     /**
      * The CSS class that will be rendered on each item element wrapper of the ListView.
      * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
-    itemClass: string | string[] | Set<string> | {
+    itemClass?: string | string[] | Set<string> | {
         [key: string]: boolean;
     };
     /**
      * Specifies the content container `aria-label` attribute
      * ([see example]({% slug accessibility_listview %}#toc-accessible-names)).
      */
-    containerLabel: string;
+    containerLabel?: string;
     /**
      * Specifies the content container `role` attribute
      * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
@@ -128,7 +129,7 @@ export declare class ListViewComponent {
     /**
      * Specifies whether the keyboard navigation is enabled
      * ([see example]({% slug keyboard_navigation_listview %})).
-     * By default, the navigation is disabled.
+     * By default, the navigation is enabled.
      */
     set navigable(navigable: boolean);
     get navigable(): boolean;
@@ -136,7 +137,7 @@ export declare class ListViewComponent {
      * Defines the page size used by the ListView pager
      * ([more details]({% slug paging_listview %})).
      */
-    pageSize: number;
+    pageSize?: number;
     /**
      * Defines the number of records to be skipped by the pager
      * ([more details]({% slug paging_listview %})).
@@ -156,7 +157,7 @@ export declare class ListViewComponent {
      * To set the height of the ListView, you can also use `style.height`. The `style.height`
      * option supports units such as `px`, `%`, `em`, `rem`, and others.
      */
-    height: number;
+    height?: number;
     /**
      * Fires when the user scrolls to the last record on the page
      * ([see endless scrolling example]({% slug scrollmodes_listview %}#toc-endless-scrolling)).
@@ -230,8 +231,11 @@ export declare class ListViewComponent {
     private _skip;
     private _navigable;
     private _pageable;
+    private lastScrollTop;
+    private _data;
     private editServiceSubscription;
     constructor(ngZone: NgZone, element: ElementRef, renderer: Renderer2, changeDetectorRef: ChangeDetectorRef, editService: EditService, navigationService: NavigationService);
+    ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /**
@@ -286,7 +290,7 @@ export declare class ListViewComponent {
     /**
      * @hidden
      */
-    handleContentScroll(): void;
+    handleContentScroll: () => void;
     /**
      * @hidden
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-listview",
-  "version": "19.0.0-develop.2",
+  "version": "19.0.0-develop.21",
   "description": "Kendo UI Angular listview component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1745321906,
+      "publishDate": 1747412075,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -30,16 +30,16 @@
     "@angular/forms": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-buttons": "19.0.0-develop.2",
-    "@progress/kendo-angular-common": "19.0.0-develop.2",
-    "@progress/kendo-angular-icons": "19.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "19.0.0-develop.2",
-    "@progress/kendo-angular-pager": "19.0.0-develop.2",
+    "@progress/kendo-angular-buttons": "19.0.0-develop.21",
+    "@progress/kendo-angular-common": "19.0.0-develop.21",
+    "@progress/kendo-angular-icons": "19.0.0-develop.21",
+    "@progress/kendo-angular-l10n": "19.0.0-develop.21",
+    "@progress/kendo-angular-pager": "19.0.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.0.0-develop.2"
+    "@progress/kendo-angular-schematics": "19.0.0-develop.21"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-listview.mjs",

package/schematics/ngAdd/index.js

@@ -4,12 +4,12 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'ListViewModule', package: 'listview', peerDependencies: {
             // Peers of pager
-            '@progress/kendo-angular-dropdowns': '19.0.0-develop.2',
-            '@progress/kendo-angular-treeview': '19.0.0-develop.2',
-            '@progress/kendo-angular-inputs': '19.0.0-develop.2',
-            '@progress/kendo-angular-intl': '19.0.0-develop.2',
-            '@progress/kendo-angular-l10n': '19.0.0-develop.2',
-            '@progress/kendo-angular-popup': '19.0.0-develop.2',
+            '@progress/kendo-angular-dropdowns': '19.0.0-develop.21',
+            '@progress/kendo-angular-treeview': '19.0.0-develop.21',
+            '@progress/kendo-angular-inputs': '19.0.0-develop.21',
+            '@progress/kendo-angular-intl': '19.0.0-develop.21',
+            '@progress/kendo-angular-l10n': '19.0.0-develop.21',
+            '@progress/kendo-angular-popup': '19.0.0-develop.21',
             '@progress/kendo-drawing': '^1.17.2',
             // Peer of icons
             '@progress/kendo-svg-icons': '^4.0.0'