/**----------------------------------------------------------------------------------------- * Copyright © 2026 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, 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'; import { HeaderTemplateDirective } from './templates/header-template.directive'; import { FooterTemplateDirective } from './templates/footer-template.directive'; import { LoaderTemplateDirective } from './templates/loader-template.directive'; import { ScrollBottomEvent } from './models/scroll-bottom-event'; import { PageChangeEvent } from './models/page-change-event'; import { PageSizeChangeEvent } from './models/page-size-change-event'; import { PagerSettings } from './models/pager-settings'; import { ListViewDataResult } from './models/listview-data-result'; import { EditTemplateDirective } from './editing/edit-template.directive'; import { EditService } from './editing/edit.service'; import { EditEvent } from "./editing/events/edit-event-args.interface"; import { RemoveEvent } from "./editing/events/remove-event-args.interface"; import { SaveEvent } from "./editing/events/save-event-args.interface"; import { CancelEvent } from "./editing/events/cancel-event-args.interface"; import { AddEvent } from "./editing/events/add-event-args.interface"; import * as i0 from "@angular/core"; /** * Represents the Kendo UI ListView component for Angular. * Displays a list of data items and supports paging, editing, and custom templates * ([see overview](https://www.telerik.com/kendo-angular-ui/components/listview)). * * @example * ```typescript * @Component({ * selector: 'my-app', * template: ` * * *
*

{{ dataItem.name }}

*

{{ dataItem.description }}

*
*
*
* ` * }) * export class AppComponent { * items = [ * { name: 'Item 1', description: 'First item' }, * { name: 'Item 2', description: 'Second item' } * ]; * } * ``` */ export declare class ListViewComponent implements AfterViewInit, OnChanges, OnDestroy { ngZone: NgZone; element: ElementRef; renderer: Renderer2; private changeDetectorRef; editService: EditService; private navigationService; /** * @hidden */ className: boolean; /** * @hidden */ itemTemplate: ItemTemplateDirective; /** * @hidden */ headerTemplate: HeaderTemplateDirective; /** * @hidden */ footerTemplate: FooterTemplateDirective; /** * @hidden */ loaderTemplate: LoaderTemplateDirective; /** * @hidden */ contentContainer: ElementRef; /** * @hidden */ editTemplate: EditTemplateDirective; /** * @hidden */ listViewItems: QueryList; /** * Specifies if a border should be rendered around the listview element. * * @default false */ bordered: boolean; /** * Specifies the data collection that populates the ListView * ([see data binding examples](https://www.telerik.com/kendo-angular-ui/components/listview/paging)). */ set data(value: any[] | ListViewDataResult | undefined); get data(): any[] | ListViewDataResult | undefined; /** * Specifies whether the loading indicator of the ListView displays * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/paging#remote-binding)). * * @default false */ loading: boolean; /** * Specifies the CSS styles that render on the content container element of the ListView. * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports. */ containerStyle?: { [key: string]: string; }; /** * Specifies the CSS styles that render on each item element wrapper of the ListView. * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports. */ itemStyle?: { [key: string]: string; }; /** * Specifies the CSS class that renders on the content container element of the ListView. * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports. */ containerClass?: string | string[] | Set | { [key: string]: boolean; }; /** * Specifies the CSS class that renders on each item element wrapper of the ListView. * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports. */ itemClass?: string | string[] | Set | { [key: string]: boolean; }; /** * Specifies the content container `aria-label` attribute * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/accessibility#accessible-names)). * * @remarks * This property is related to accessibility. */ containerLabel?: string; /** * Specifies the content container `role` attribute * ([more details](https://www.telerik.com/kendo-angular-ui/components/listview/accessibility#wai-aria-support)). * * @default 'list' * * @remarks * This property is related to accessibility. */ containerRole: string; /** * Specifies the list item `role` attribute * ([more details](https://www.telerik.com/kendo-angular-ui/components/listview/accessibility#wai-aria-support)). * * @default 'listitem' * * @remarks * This property is related to accessibility. */ listItemRole: string; /** * Specifies whether keyboard navigation is enabled * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/keyboard-navigation)). * * @default true * * @remarks * This property is related to accessibility. */ set navigable(navigable: boolean); get navigable(): boolean; /** * Specifies the page size used by the ListView pager * ([more details](https://www.telerik.com/kendo-angular-ui/components/listview/paging)). */ pageSize?: number; /** * Defines the number of records to be skipped by the pager * ([more details](https://www.telerik.com/kendo-angular-ui/components/listview/paging)). */ set skip(skip: number); get skip(): number; /** * Configures whether the ListView renders a pager * ([more details](https://www.telerik.com/kendo-angular-ui/components/listview/paging)). * When you provide a boolean value, it renders a pager with the default settings. */ set pageable(pageable: boolean | PagerSettings); get pageable(): boolean | PagerSettings; /** * Specifies the height (in pixels) of the ListView component. * When the content height exceeds the component height, a vertical scrollbar renders. * * 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; /** * Fires when you scroll to the last record on the page * ([see endless scrolling example](https://www.telerik.com/kendo-angular-ui/components/listview/scroll-modes#endless-scrolling)). */ scrollBottom: EventEmitter; /** * Fires when you change the page or the page size of the ListView * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/paging#remote-binding)). * You have to handle the event yourself and page the data. */ pageChange: EventEmitter; /** * Fires when you change the page size of the ListView. You can prevent this event (`$event.preventDefault()`). * When not prevented, the `pageChange` event fires subsequently. */ pageSizeChange: EventEmitter; /** * Fires when you click the **Edit** command button to edit an item * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing/editing-template-forms#editing-records)). */ edit: EventEmitter; /** * Fires when you click the **Cancel** command button to close an item * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing/editing-template-forms#cancelling-editing)). */ cancel: EventEmitter; /** * Fires when you click the **Save** command button to save changes in an item * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing/editing-template-forms#saving-records)). */ save: EventEmitter; /** * Fires when you click the **Remove** command button to remove an item * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing/editing-template-forms#removing-records)). */ remove: EventEmitter; /** * Fires when you click the **Add** command button to add a new item * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing/editing-template-forms#adding-records)). */ add: EventEmitter; /** * @hidden */ pagerSettings: PagerSettings; /** * @hidden * * Gets the data items passed to the ListView. * If a `ListViewDataResult` is passed, the data value is used. If an array is passed - it's directly used. */ get items(): any[]; /** * @hidden * * Gets the total number of records passed to the ListView. * If a `ListViewDataResult` is passed, the total value is used. If an array is passed - its length is used. */ get total(): number; /** * @hidden */ get containerTabindex(): number; /** * Gets the current active item index * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/keyboard-navigation#controlling-the-focus)). * Returns `null` when keyboard navigation is disabled. */ get activeIndex(): number; private removeNavigationListeners; 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; /** * @hidden */ templateContext(index: number): any; /** * @hidden */ editTemplateContext(index: number): any; /** * Focuses the item at the specified index ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/keyboard-navigation#controlling-the-focus)): * - When you specify no index, the current active index receives focus. * - When the passed value is below `0`, the first item receives focus. * - When the passed value is above the last available index, the last item receives focus. * * > The `index` parameter is based on the logical structure of the ListView and does not correspond to the data item index&mdash * > the index `0` corresponds to the first rendered list item. Paging is not taken into account. * > Also, the `navigable` property must first be set to `true` for the method to work as expected. */ focus(index?: number): void; /** * Creates a new item editor ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing/editing-template-forms#adding-records)). * * @param {FormGroup} group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes * the edit form. When called with a data item, it builds the `FormGroup` from the data item fields. */ addItem(group: any): void; /** * Switches the specified item to edit mode ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing/editing-template-forms#editing-records)). * * @param index - The item index that switches to edit mode. * @param group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) * that describes the edit form. */ editItem(index: number, group?: any): void; /** * Closes the editor for a given item ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing/editing-template-forms#cancelling-editing)). * * @param {number} index - The item index that switches out of the edit mode. When you provide no index, the editor of the new item will close. */ closeItem(index?: number): void; /** * @hidden */ isEdited(index: number): boolean; /** * @hidden */ handlePageChange(event: PageChangeEvent): void; /** * @hidden */ handleContentScroll: () => void; /** * @hidden */ itemPosInSet(index: number): number; private scrollToContainerTop; private addNavigationListeners; private attachEditHandlers; private emitCRUDEvent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }