@progress/kendo-angular-listview 24.2.2-develop.9 → 25.0.0-develop.1

package/index.d.ts

@@ -2,30 +2,1039 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-export { ListViewComponent } from './listview.component';
-export { ItemTemplateDirective } from './templates/item-template.directive';
-export { HeaderTemplateDirective } from './templates/header-template.directive';
-export { FooterTemplateDirective } from './templates/footer-template.directive';
-export { LoaderTemplateDirective } from './templates/loader-template.directive';
-export { NoDataTemplateDirective } from './templates/no-data-template.directive';
-export { DataBindingDirective } from './data-binding/data-binding.directive';
-export { EditTemplateDirective } from './editing/edit-template.directive';
-export { AddEvent } from './editing/events/add-event-args.interface';
-export { CancelEvent } from './editing/events/cancel-event-args.interface';
-export { EditEvent } from './editing/events/edit-event-args.interface';
-export { RemoveEvent } from './editing/events/remove-event-args.interface';
-export { SaveEvent } from './editing/events/save-event-args.interface';
-export { PagerSettings } from './models/pager-settings';
-export { PageChangeEvent } from './models/page-change-event';
-export { PageSizeChangeEvent } from './models/page-size-change-event';
-export { PageSizeItem } from './models/page-size-item';
-export { PagerType } from './models/pager-type';
-export { PagerPosition } from './models/pager-position';
-export { ListViewDataResult } from './models/listview-data-result';
-export { EditCommandDirective } from './editing/commands/edit-command.directive';
-export { AddCommandDirective } from './editing/commands/add-command.directive';
-export { SaveCommandDirective } from './editing/commands/save-command.directive';
-export { CancelCommandDirective } from './editing/commands/cancel-command.directive';
-export { RemoveCommandDirective } from './editing/commands/remove-command.directive';
-export { ListViewModule } from './listview.module';
-export * from './directives';
+import * as i0 from '@angular/core';
+import { OnChanges, ElementRef, Renderer2, TemplateRef, NgZone, EventEmitter, AfterViewInit, OnDestroy, QueryList, ChangeDetectorRef, SimpleChanges } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+import { PageChangeEvent as PageChangeEvent$1, PageSizeChangeEvent as PageSizeChangeEvent$1, PagerType as PagerType$1, PageSizeItem as PageSizeItem$1 } from '@progress/kendo-angular-pager';
+import { FormGroup } from '@angular/forms';
+import { Button } from '@progress/kendo-angular-buttons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+
+/**
+ * @hidden
+ *
+ * Provided per ListView instance. Keeps the availability, active index and focused state of the current ListView.
+ * Emits `changes` when any of the aforementioned states changes.
+ */
+declare class NavigationService {
+    /**
+     * Emits every time a change in active index/focus/blur/navigation availability occurs.
+     */
+    changes: Subject<any>;
+    /**
+     * Sets or gets if the navigation is enabled.
+     * When no activeIndex is present, the navigation is inferred as disabled.
+     * Toggling the service availability clears the current active index or activates the first one.
+     */
+    get isEnabled(): boolean;
+    set isEnabled(enabled: boolean);
+    /**
+     * Specifies if a ListView item currently holds focus.
+     */
+    isFocused: boolean;
+    /**
+     * Keeps track of the index of the items that should be the current focus target (tabindex="0").
+     * When set to `null`/`undefined`, the navigation is disabled and the items should not render a tabindex.
+     */
+    activeIndex: number;
+    /**
+     * Shows if the checked index should be the current available focus target (tabindex="0").
+     */
+    isActive(index: number): boolean;
+    handleKeyDown(event: KeyboardEvent, totalItemsCount: number): void;
+    handleFocusIn(event: FocusEvent): void;
+    handleFocusOut(event: FocusEvent): void;
+    /**
+     * Sets the `activeIndex` and triggers changes without focusing the corresponding ListView item.
+     */
+    setActiveIndex(index: number): void;
+    /**
+     * Focuses item at the targeted index. If no index is passed, the current `activeIndex` is used.
+     * The passed target index is normalized to fit the min/max available indices bounds.
+     */
+    focusIndex(index: any, totalItemsCount: number): void;
+    private navigateTo;
+    private navigateToPrevious;
+    private navigateToNext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NavigationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NavigationService>;
+}
+
+/**
+ * @hidden
+ */
+declare class ListViewNavigableItemDirective implements OnChanges {
+    private hostElement;
+    private renderer;
+    private navigationService;
+    /**
+     * The current item index. Used to track which navigation changes apply to this item.
+     */
+    index: number;
+    private navigationSubscription;
+    constructor(hostElement: ElementRef<HTMLElement>, renderer: Renderer2, navigationService: NavigationService);
+    ngOnChanges(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private updateNavigationState;
+    private updateFocusedState;
+    private updateTabIndex;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListViewNavigableItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ListViewNavigableItemDirective, "[kendoListViewNavigableItem]", never, { "index": { "alias": "index"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Allows customizing the list item content. To define an item template, nest an `<ng-template>` tag
+ * with the `kendoListViewItemTemplate` directive inside the `<kendo-listview>` tag
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/templates#item-template)).
+ *
+ * The following values are available as context variables:
+ * - `let-dataItem="dataItem"` (`any`)&mdashThe current data item. Also available as implicit context variable.
+ * - `let-index="index"` (`number`)&mdashThe current item index.
+ * - `let-isFirst="isFirst"` (`boolean`)&mdashIndicates whether the current data item renders as the first item on the list.
+ * - `let-isLast="isLast"` (`boolean`)&mdashIndicates whether the current data item renders as the last item on the list.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items">
+ *       <ng-template kendoListViewItemTemplate let-dataItem let-index="index">
+ *         <div class="item-wrapper">
+ *           <h4>{{ dataItem.name }}</h4>
+ *           <p>Item #{{ index + 1 }}: {{ dataItem.description }}</p>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
+ */
+declare class ItemTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ItemTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ItemTemplateDirective, "[kendoListViewItemTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Allows customizing the header content of the ListView. To define a header template, nest an `<ng-template>` tag
+ * with the `kendoListViewHeaderTemplate` directive inside the `<kendo-listview>` tag
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/templates#header-template)).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items">
+ *       <ng-template kendoListViewHeaderTemplate>
+ *         <div class="header-content">
+ *           <h3>Product List</h3>
+ *           <button kendoListViewAddCommand>Add New Item</button>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
+ */
+declare class HeaderTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HeaderTemplateDirective, "[kendoListViewHeaderTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Allows customizing the footer content of the ListView. To define a footer template, nest an `<ng-template>` tag
+ * with the `kendoListViewFooterTemplate` directive inside the `<kendo-listview>` tag
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/templates#footer-template)).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items">
+ *       <ng-template kendoListViewFooterTemplate>
+ *         <div class="footer-content">
+ *           <p>Total items: {{ items.length }}</p>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
+ */
+declare class FooterTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<FooterTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FooterTemplateDirective, "[kendoListViewFooterTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Overrides the default loader content of the ListView. To define a loader template, nest an `<ng-template>` tag
+ * with the `kendoListViewLoaderTemplate` directive inside the `<kendo-listview>` tag
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/templates#loader-template)).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items" [loading]="isLoading">
+ *       <ng-template kendoListViewLoaderTemplate>
+ *         <div class="custom-loader">
+ *           <kendo-loader></kendo-loader>
+ *           <p>Loading data, please wait...</p>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
+ */
+declare class LoaderTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoaderTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LoaderTemplateDirective, "[kendoListViewLoaderTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Lets you customize the content shown when the ListView has no data to display.
+ * To define a no-data template, nest an `<ng-template>` tag
+ * with the `kendoListViewNoDataTemplate` directive inside the `<kendo-listview>` tag
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/templates#no-data-template)).
+ *
+ * @example
+ * ```html
+ * <kendo-listview [data]="[]">
+ *   <ng-template kendoListViewNoDataTemplate>
+ *     No items to display.
+ *   </ng-template>
+ * </kendo-listview>
+ * ```
+ */
+declare class NoDataTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NoDataTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NoDataTemplateDirective, "[kendoListViewNoDataTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Defines the arguments of the [`scrollBottom`](https://www.telerik.com/kendo-angular-ui/components/listview/api/listviewcomponent#scrollbottom) event of the ListView.
+ */
+interface ScrollBottomEvent {
+    /**
+     * Specifies the instance of the `ListViewComponent`.
+     */
+    sender: ListViewComponent;
+}
+
+/**
+ * Defines the arguments of the [`pageChange`](https://www.telerik.com/kendo-angular-ui/components/listview/api/listviewcomponent#pagechange) event of the ListView
+ * ([more details](https://www.telerik.com/kendo-angular-ui/components/listview/paging)).
+ *
+ */
+type PageChangeEvent = PageChangeEvent$1;
+
+/**
+ * Defines the arguments of the [`pageSizeChange`](https://www.telerik.com/kendo-angular-ui/components/listview/api/listviewcomponent#pagesizechange) event of the ListView
+ * ([more details](https://www.telerik.com/kendo-angular-ui/components/listview/paging)).
+ */
+declare class PageSizeChangeEvent extends PageSizeChangeEvent$1 {
+}
+
+/**
+ * Defines the type that the pager [`type`](https://www.telerik.com/kendo-angular-ui/components/listview/api/pagersettings#type) property accepts.
+ * Specifies whether the pager renders a set of buttons for page control or a single HTML `input` element
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/paging#pager-options)).
+ *
+ */
+declare type PagerType = Partial<PagerType$1>;
+
+/**
+ * Defines the type that the pager [`pageSizeValues`](https://www.telerik.com/kendo-angular-ui/components/listview/api/pagersettings#pagesizevalues) property accepts.
+ * Specifies the text and value of each page size item
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/paging#pager-options)).
+ */
+interface PageSizeItem extends PageSizeItem$1 {
+}
+
+/**
+ * Defines the type that the pager [`position`](https://www.telerik.com/kendo-angular-ui/components/listview/api/pagersettings#position) property accepts.
+ * Specifies whether the pager appears above the content container, beneath it, or in both places
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/paging#pager-options)).
+ *
+ * @default 'bottom'
+ */
+type PagerPosition = 'bottom' | 'top' | 'both';
+
+/**
+ * Defines the pager settings of the ListView
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/paging#pager-options)).
+ */
+interface PagerSettings {
+    /**
+     * Specifies the position of the pager.
+     */
+    position?: PagerPosition;
+    /**
+     * Specifies the maximum count of numeric buttons before the buttons collapse.
+     */
+    buttonCount?: number;
+    /**
+     * Toggles the information about the current page and the total number of records.
+     */
+    info?: boolean;
+    /**
+     * Toggles the Previous and Next buttons.
+     */
+    previousNext?: boolean;
+    /**
+     * Specifies the type of the pager.
+     */
+    type?: PagerType;
+    /**
+     * Shows a dropdown for selecting the page size. When you set this to `true`, the dropdown contains the default list of options: 5, 10, 20.
+     * To customize the list of options, set `pageSizeValues` to an array of the desired values.
+     * The array can contain numbers and `PageSizeItem` objects.
+     */
+    pageSizeValues?: boolean | number[] | PageSizeItem[];
+}
+
+/**
+ * Defines the data type that the ListView expects
+ * ([see data binding examples](https://www.telerik.com/kendo-angular-ui/components/listview/paging)).
+ */
+interface ListViewDataResult {
+    /**
+     * Specifies the data that the ListView renders.
+     */
+    data: any[];
+    /**
+     * Specifies the total number of available records.
+     */
+    total: number;
+}
+
+/**
+ * Defines the edit template of the ListView ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing/editing-template-forms)).
+ * Helps you customize the content of the edited items. To define the template, nest an `<ng-template>`
+ * tag with the `kendoListViewEditTemplate` directive inside a `<kendo-listview>` tag.
+ *
+ * The template context contains the following fields:
+ * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']). When you use the ListView inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
+ * - `itemIndex`&mdash;The current item index. When inside a new item, `itemIndex` is `-1`.
+ * - `dataItem`&mdash;The current data item.
+ * - `isNew`&mdash;The state of the current item.
+ *
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items">
+ *       <ng-template kendoListViewEditTemplate let-dataItem let-formGroup="formGroup">
+ *         <div class="edit-form">
+ *           <input [(ngModel)]="dataItem.name" [formControl]="formGroup.get('name')" />
+ *           <button kendoListViewSaveCommand>Save</button>
+ *           <button kendoListViewCancelCommand>Cancel</button>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
+ */
+declare class EditTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditTemplateDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EditTemplateDirective, "[kendoListViewEditTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @hidden
+ */
+type Entity = {
+    index: number;
+    group: any;
+};
+/**
+ * @hidden
+ */
+type CommandAction = 'edit' | 'remove' | 'cancel' | 'save' | 'add';
+/**
+ * @hidden
+ */
+type CommandEvent = {
+    action: CommandAction;
+    formGroup?: FormGroup;
+    isNew?: boolean;
+    itemIndex?: number;
+};
+/**
+ * @hidden
+ */
+declare class EditService {
+    ngZone: NgZone;
+    changes: EventEmitter<CommandEvent>;
+    changed: Observable<any>;
+    private editedIndices;
+    private newItem;
+    private changedSource;
+    constructor(ngZone: NgZone);
+    editItem(index: number, group?: any): void;
+    addItem(group: any): void;
+    isEditing(): boolean;
+    get hasNewItem(): boolean;
+    get newDataItem(): any;
+    get newItemGroup(): FormGroup;
+    editGroup(index: number): any;
+    close(index?: number): void;
+    context(index?: number): Entity;
+    isEdited(index: number): boolean;
+    hasEdited(index: number): boolean;
+    beginEdit(itemIndex: number): void;
+    beginAdd(): void;
+    endEdit(itemIndex?: number): void;
+    save(itemIndex?: number): void;
+    remove(itemIndex: number): void;
+    private findByIndex;
+    private onChanged;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<EditService>;
+}
+
+/**
+ * Defines the arguments for the `edit` event.
+ *
+ */
+interface EditEvent {
+    /**
+     * Specifies the data item.
+     */
+    dataItem: any;
+    /**
+     * Indicates whether the data item is new or existing.
+     */
+    isNew: boolean;
+    /**
+     * Specifies the item index for the operation.
+     */
+    itemIndex: number;
+    /**
+     * Specifies the `ListViewComponent` instance.
+     */
+    sender: ListViewComponent;
+}
+
+/**
+ * Defines the arguments for the `remove` event.
+ *
+ */
+interface RemoveEvent extends EditEvent {
+}
+
+/**
+ * Defines the arguments for the `save` event.
+ *
+ */
+interface SaveEvent extends EditEvent {
+    /**
+     * Specifies the edited `FormGroup` instance.
+     */
+    formGroup: FormGroup;
+}
+
+/**
+ * Defines the arguments for the `cancel` event.
+ *
+ */
+type CancelEvent = SaveEvent;
+
+/**
+ * Defines the arguments for the `add` event.
+ *
+ */
+interface AddEvent extends EditEvent {
+}
+
+/**
+ * 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: `
+ *     <kendo-listview
+ *       [data]="items"
+ *       [pageable]="true"
+ *       [pageSize]="5">
+ *       <ng-template kendoListViewItemTemplate let-dataItem>
+ *         <div class="item">
+ *           <h3>{{ dataItem.name }}</h3>
+ *           <p>{{ dataItem.description }}</p>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent {
+ *   items = [
+ *     { name: 'Item 1', description: 'First item' },
+ *     { name: 'Item 2', description: 'Second item' }
+ *   ];
+ * }
+ * ```
+ */
+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<HTMLElement>;
+    /**
+     * @hidden
+     */
+    noDataTemplate: NoDataTemplateDirective;
+    /**
+     * @hidden
+     */
+    editTemplate: EditTemplateDirective;
+    /**
+     * @hidden
+     */
+    listViewItems: QueryList<ListViewNavigableItemDirective>;
+    /**
+     * 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<string> | {
+        [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<string> | {
+        [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<ScrollBottomEvent>;
+    /**
+     * 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<PageChangeEvent>;
+    /**
+     * 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<PageSizeChangeEvent>;
+    /**
+     * 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<EditEvent>;
+    /**
+     * 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<CancelEvent>;
+    /**
+     * 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<SaveEvent>;
+    /**
+     * 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<RemoveEvent>;
+    /**
+     * 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<AddEvent>;
+    /**
+     * @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<ListViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListViewComponent, "kendo-listview", ["kendoListView"], { "bordered": { "alias": "bordered"; "required": false; }; "data": { "alias": "data"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "containerStyle": { "alias": "containerStyle"; "required": false; }; "itemStyle": { "alias": "itemStyle"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "itemClass": { "alias": "itemClass"; "required": false; }; "containerLabel": { "alias": "containerLabel"; "required": false; }; "containerRole": { "alias": "containerRole"; "required": false; }; "listItemRole": { "alias": "listItemRole"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "skip": { "alias": "skip"; "required": false; }; "pageable": { "alias": "pageable"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "scrollBottom": "scrollBottom"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "edit": "edit"; "cancel": "cancel"; "save": "save"; "remove": "remove"; "add": "add"; }, ["itemTemplate", "headerTemplate", "footerTemplate", "loaderTemplate", "noDataTemplate", "editTemplate"], never, true, never>;
+}
+
+/**
+ * Encapsulates the in-memory handling of paging for the ListView component
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/paging#binding-directive)).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-listview [kendoListViewBinding]="listItems">
+ *       <ng-template kendoListViewItemTemplate let-dataItem>
+ *         <div>{{ dataItem.name }}</div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent {
+ *   listItems = [{ name: 'Item 1' }, { name: 'Item 2' }];
+ * }
+ * ```
+ * @remarks
+ * Applied to: {@link ListViewComponent}.
+ */
+declare class DataBindingDirective {
+    private listView;
+    /**
+     * Specifies the array of data that populates the ListView.
+     */
+    set data(data: any[]);
+    get data(): any[];
+    private _data;
+    private subscriptions;
+    constructor(listView: ListViewComponent);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    private handlePageChange;
+    private handlePageSizeChange;
+    private updateListViewData;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataBindingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoListViewBinding]", never, { "data": { "alias": "kendoListViewBinding"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Represents the edit command button directive of the Kendo UI ListView for Angular.
+ * Provides the `edit` command of the ListView. You can apply this directive to any `button`
+ * element inside a [`EditTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/listview/api/edittemplatedirective) template.
+ * When you click an associated button with the directive, the
+ * [`edit`](https://www.telerik.com/kendo-angular-ui/components/listview/api/listviewcomponent#edit) event
+ * triggers ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing)).
+ *
+ * @example
+ * ```html
+ * <kendo-listview>
+ *   <ng-template kendoListViewEditTemplate>
+ *     <button kendoListViewEditCommand class="k-primary">Edit</button>
+ *   </ng-template>
+ * </kendo-listview>
+ * ```
+ */
+declare class EditCommandDirective extends Button {
+    private editService;
+    private elementRef;
+    /**
+     * @hidden
+     */
+    clickHandler(e: any): void;
+    constructor(editService: EditService, element: ElementRef, renderer: Renderer2, localization: LocalizationService, ngZone: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditCommandDirective, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditCommandDirective, "[kendoListViewEditCommand]", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Represents the add command button directive of the Kendo UI ListView for Angular.
+ * Provides the command for adding a new item to the ListView. You can apply this directive to any
+ * `button` element inside a [`HeaderTemplate`](https://www.telerik.com/kendo-angular-ui/components/listview/api/headertemplatedirective).
+ * When you click an associated button with the directive, the
+ * [`add`](https://www.telerik.com/kendo-angular-ui/components/listview/api/listviewcomponent#add) event triggers
+ * ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing)).
+ *
+ * @example
+ * ```html
+ * <kendo-listview>
+ *    <ng-template kendoListViewHeaderTemplate>
+ *       <button kendoListViewAddCommand>Add new</button>
+ *    </ng-template>
+ * </kendo-listview>
+ * ```
+ */
+declare class AddCommandDirective extends Button {
+    private editService;
+    /**
+     * @hidden
+     */
+    clickHandler(e: any): void;
+    constructor(editService: EditService, element: ElementRef, renderer: Renderer2, localization: LocalizationService, ngZone: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AddCommandDirective, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AddCommandDirective, "[kendoListViewAddCommand]", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Represents the save command button directive of the Kendo UI ListView for Angular.
+ * Provides the `save` command of the ListView. You can apply this directive to any `button`
+ * element inside a [`EditTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/listview/api/edittemplatedirective) template.
+ * When you click an associated button with the directive, the
+ * [`save`](https://www.telerik.com/kendo-angular-ui/components/listview/api/listviewcomponent#save) event
+ * triggers ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing)).
+ *
+ * @example
+ * ```html
+ * <kendo-listview>
+ *   <ng-template kendoListViewEditTemplate>
+ *     <button kendoListViewSaveCommand>Save changes</button>
+ *   </ng-template>
+ * </kendo-listview>
+ * ```
+ *
+ * You can control the content of the button based on the state of the item.
+ *
+ * @example
+ * ```html
+ * <kendo-listview>
+ *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
+ *     <button kendoListViewSaveCommand>{{isNew ? 'Add' : 'Update'}}</button>
+ *   </ng-template>
+ * </kendo-listview>
+ * ```
+ */
+declare class SaveCommandDirective extends Button {
+    private editService;
+    private elementRef;
+    /**
+     * @hidden
+     */
+    clickHandler(e: any): void;
+    constructor(editService: EditService, element: ElementRef, renderer: Renderer2, localization: LocalizationService, ngZone: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SaveCommandDirective, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SaveCommandDirective, "[kendoListViewSaveCommand]", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Represents the cancel command button directive of the Kendo UI ListView for Angular.
+ * Provides the `cancel` command of the ListView. You can apply this directive to any `button`
+ * element inside a [`EditTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/listview/api/edittemplatedirective) template.
+ * When you click an associated button with the directive, the
+ * [`cancel`](https://www.telerik.com/kendo-angular-ui/components/listview/api/listviewcomponent#cancel) event
+ * triggers ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing)).
+ *
+ * @example
+ * ```html
+ * <kendo-listview>
+ *   <ng-template kendoListViewEditTemplate>
+ *     <button kendoListViewCancelCommand>Cancel changes</button>
+ *   </ng-template>
+ * </kendo-listview>
+ * ```
+ *
+ * You can control the content of the button based on the state of the item.
+ *
+ * @example
+ * ```html
+ * <kendo-listview>
+ *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
+ *     <button kendoListViewCancelCommand>{{isNew ? 'Discard' : 'Cancel changes'}}</button>
+ *   </ng-template>
+ * </kendo-listview>
+ * ```
+ */
+declare class CancelCommandDirective extends Button {
+    private editService;
+    private elementRef;
+    /**
+     * @hidden
+     */
+    clickHandler(e: any): void;
+    constructor(editService: EditService, element: ElementRef, renderer: Renderer2, localization: LocalizationService, ngZone: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<CancelCommandDirective, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CancelCommandDirective, "[kendoListViewCancelCommand]", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Represents the remove command button directive of the Kendo UI ListView for Angular.
+ * Provides the `remove` command of the ListView. You can apply this directive to any `button` element
+ * inside a [`EditTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/listview/api/edittemplatedirective) template.
+ * When you click an associated button with the directive, the
+ * [`remove`](https://www.telerik.com/kendo-angular-ui/components/listview/api/listviewcomponent#remove) event
+ * triggers ([see example](https://www.telerik.com/kendo-angular-ui/components/listview/editing)).
+ *
+ * @example
+ * ```html
+ * <kendo-listview>
+ *   <ng-template kendoListViewEditTemplate>
+ *     <button kendoListViewRemoveCommand>Remove item</button>
+ *   </ng-template>
+ * </kendo-listview>
+ * ```
+ */
+declare class RemoveCommandDirective extends Button {
+    private editService;
+    private elementRef;
+    /**
+     * @hidden
+     */
+    clickHandler(e: any): void;
+    constructor(editService: EditService, element: ElementRef, renderer: Renderer2, localization: LocalizationService, ngZone: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RemoveCommandDirective, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RemoveCommandDirective, "[kendoListViewRemoveCommand]", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the ListView component.
+ * @example
+ *
+ * ```ts
+ * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+ * import { BrowserModule } from '@angular/platform-browser';
+ * import { NgModule } from '@angular/core';
+ * import { ListViewModule } from '@progress/kendo-angular-listview';
+ * import { AppComponent } from './app.component';
+ *
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, BrowserAnimationsModule, ListViewModule],
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *```
+ */
+declare class ListViewModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListViewModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ListViewModule, never, [typeof ListViewComponent, typeof ItemTemplateDirective, typeof HeaderTemplateDirective, typeof FooterTemplateDirective, typeof LoaderTemplateDirective, typeof NoDataTemplateDirective, typeof DataBindingDirective, typeof EditTemplateDirective, typeof EditCommandDirective, typeof CancelCommandDirective, typeof SaveCommandDirective, typeof RemoveCommandDirective, typeof AddCommandDirective], [typeof ListViewComponent, typeof ItemTemplateDirective, typeof HeaderTemplateDirective, typeof FooterTemplateDirective, typeof LoaderTemplateDirective, typeof NoDataTemplateDirective, typeof DataBindingDirective, typeof EditTemplateDirective, typeof EditCommandDirective, typeof CancelCommandDirective, typeof SaveCommandDirective, typeof RemoveCommandDirective, typeof AddCommandDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ListViewModule>;
+}
+
+/**
+ * Utility array that contains all `@progress/kendo-angular-listview` related components and directives
+ */
+declare const KENDO_LISTVIEW: readonly [typeof ListViewComponent, typeof ItemTemplateDirective, typeof HeaderTemplateDirective, typeof FooterTemplateDirective, typeof LoaderTemplateDirective, typeof NoDataTemplateDirective, typeof DataBindingDirective, typeof EditTemplateDirective, typeof EditCommandDirective, typeof CancelCommandDirective, typeof SaveCommandDirective, typeof RemoveCommandDirective, typeof AddCommandDirective];
+
+export { AddCommandDirective, CancelCommandDirective, DataBindingDirective, EditCommandDirective, EditTemplateDirective, FooterTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, KENDO_LISTVIEW, ListViewComponent, ListViewModule, LoaderTemplateDirective, NoDataTemplateDirective, PageSizeChangeEvent, RemoveCommandDirective, SaveCommandDirective };
+export type { AddEvent, CancelEvent, EditEvent, ListViewDataResult, PageChangeEvent, PageSizeItem, PagerPosition, PagerSettings, PagerType, RemoveEvent, SaveEvent };