*
*
* `
* })
* 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;
}