@progress/kendo-angular-listview 17.0.0-develop.4 → 17.0.0-develop.40

package/{fesm2020 → fesm2022}/progress-kendo-angular-listview.mjs

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728985232,
-    version: '17.0.0-develop.4',
+    publishDate: 1730799142,
+    version: '17.0.0-develop.40',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -135,21 +135,10 @@ const getClosestListItemIndex = (element) => {
  * Emits `changes` when any of the aforementioned states changes.
  */
 class NavigationService {
-    constructor() {
-        /**
-         * Emits every time a change in active index/focus/blur/navigation availability occurs.
-         */
-        this.changes = new Subject();
-        /**
-         * Specifies if a ListView item currently holds focus.
-         */
-        this.isFocused = false;
-        /**
-         * 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.
-         */
-        this.activeIndex = null;
-    }
+    /**
+     * Emits every time a change in active index/focus/blur/navigation availability occurs.
+     */
+    changes = new Subject();
     /**
      * Sets or gets if the navigation is enabled.
      * When no activeIndex is present, the navigation is inferred as disabled.
@@ -167,6 +156,15 @@ class NavigationService {
         }
         this.changes.next();
     }
+    /**
+     * Specifies if a ListView item currently holds focus.
+     */
+    isFocused = false;
+    /**
+     * 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 = null;
     /**
      * Shows if the checked index should be the current available focus target (tabindex="0").
      */
@@ -273,10 +271,10 @@ class NavigationService {
         const nextIndex = Math.min(this.activeIndex + 1, lastAvailableIndex);
         this.navigateTo(nextIndex);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }] });
 
@@ -284,6 +282,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * @hidden
  */
 class ListViewNavigableItemDirective {
+    hostElement;
+    renderer;
+    navigationService;
+    /**
+     * The current item index. Used to track which navigation changes apply to this item.
+     */
+    index;
+    navigationSubscription;
     constructor(hostElement, renderer, navigationService) {
         this.hostElement = hostElement;
         this.renderer = renderer;
@@ -327,10 +333,10 @@ class ListViewNavigableItemDirective {
             this.renderer.setAttribute(this.hostElement.nativeElement, 'tabindex', '-1');
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewNavigableItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ListViewNavigableItemDirective, isStandalone: true, selector: "[kendoListViewNavigableItem]", inputs: { index: "index" }, usesOnChanges: true, ngImport: i0 });
 }
-ListViewNavigableItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewNavigableItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-ListViewNavigableItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ListViewNavigableItemDirective, isStandalone: true, selector: "[kendoListViewNavigableItem]", inputs: { index: "index" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewNavigableItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewNavigableItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewNavigableItem]',
@@ -352,13 +358,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * - `let-isLast="isLast"` (`boolean`)- Indicates whether the current data item will be rendered as the last item on the list.
  */
 class ItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoListViewItemTemplate]", ngImport: i0 });
 }
-ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoListViewItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewItemTemplate]',
@@ -372,13 +379,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * [see example]({% slug templates_listview %}#toc-header-template).
  */
 class HeaderTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoListViewHeaderTemplate]", ngImport: i0 });
 }
-HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoListViewHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewHeaderTemplate]',
@@ -392,13 +400,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * [see example]({% slug templates_listview %}#toc-footer-template).
  */
 class FooterTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoListViewFooterTemplate]", ngImport: i0 });
 }
-FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoListViewFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewFooterTemplate]',
@@ -412,13 +421,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * [see example]({% slug templates_listview %}#toc-loader-template).
  */
 class LoaderTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LoaderTemplateDirective, isStandalone: true, selector: "[kendoListViewLoaderTemplate]", ngImport: i0 });
 }
-LoaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-LoaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LoaderTemplateDirective, isStandalone: true, selector: "[kendoListViewLoaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewLoaderTemplate]',
@@ -439,13 +449,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * - `isNew`—The state of the current item.
  */
 class EditTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditTemplateDirective, isStandalone: true, selector: "[kendoListViewEditTemplate]", ngImport: i0 });
 }
-EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: EditTemplateDirective, isStandalone: true, selector: "[kendoListViewEditTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewEditTemplate]',
@@ -471,11 +482,14 @@ const isNewItem = (index) => index === -1 || index === undefined;
  * @hidden
  */
 class EditService {
+    ngZone;
+    changes = new EventEmitter();
+    changed;
+    editedIndices = [];
+    newItem;
+    changedSource = new Subject();
     constructor(ngZone) {
         this.ngZone = ngZone;
-        this.changes = new EventEmitter();
-        this.editedIndices = [];
-        this.changedSource = new Subject();
         this.changed = this.changedSource.asObservable().pipe(switchMap(() => this.ngZone.onStable.asObservable().pipe(take(1))));
     }
     editItem(index, group = undefined) {
@@ -555,10 +569,10 @@ class EditService {
             this.changedSource.next();
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditService });
 }
-EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -578,86 +592,97 @@ const createControl = (source) => (acc, key) => {
  * Represents the Kendo UI ListView component for Angular.
  */
 class ListViewComponent {
-    constructor(ngZone, element, renderer, changeDetectorRef, editService, navigationService) {
-        this.ngZone = ngZone;
-        this.element = element;
-        this.renderer = renderer;
-        this.changeDetectorRef = changeDetectorRef;
-        this.editService = editService;
-        this.navigationService = navigationService;
-        /**
-         * @hidden
-         */
-        this.className = true;
-        /**
-         * Specifies if a border should be rendered around the listview element.
-         *
-         * @default false
-         */
-        this.bordered = false;
-        /**
-         * Specifies if the loading indicator of the ListView will be displayed
-         * ([see example]({% slug paging_listview %}#toc-remote-binding)).
-         */
-        this.loading = false;
-        /**
-         * Specifies the content container `role` attribute
-         * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-         * By default, the container `role` is set to `list`.
-         */
-        this.containerRole = 'list';
-        /**
-         * Specifies the list item `role` attribute
-         * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-         * By default, the list item `role` is set to `listitem`.
-         */
-        this.listItemRole = 'listitem';
-        /**
-         * Fires when the user scrolls to the last record on the page
-         * ([see endless scrolling example]({% slug scrollmodes_listview %}#toc-endless-scrolling)).
-         */
-        this.scrollBottom = new EventEmitter();
-        /**
-         * Fires when the page or the page size of the ListView is changed
-         * ([see example]({% slug paging_listview %}#toc-remote-binding)).
-         * You have to handle the event yourself and page the data.
-         */
-        this.pageChange = new EventEmitter();
-        /**
-         * Fires when the page size of the ListView is changed. This event can be prevented (`$event.preventDefault()`).
-         * If not prevented, the `pageChange` event will be fired subsequently.
-         */
-        this.pageSizeChange = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Edit** command button to edit an item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-editing-records)).
-         */
-        this.edit = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Cancel** command button to close an item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-cancelling-editing)).
-         */
-        this.cancel = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Save** command button to save changes in an item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-saving-records)).
-         */
-        this.save = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Remove** command button to remove an item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-removing-records)).
-         */
-        this.remove = new EventEmitter();
-        /**
-         * Fires when the user clicks the **Add** command button to add a new item
-         * ([see example]({% slug editing_template_forms_listview %}#toc-adding-records)).
-         */
-        this.add = new EventEmitter();
-        this._skip = 0;
-        this._navigable = false;
-        validatePackage(packageMetadata);
-        this.attachEditHandlers();
-    }
+    ngZone;
+    element;
+    renderer;
+    changeDetectorRef;
+    editService;
+    navigationService;
+    /**
+     * @hidden
+     */
+    className = true;
+    /**
+     * @hidden
+     */
+    itemTemplate;
+    /**
+     * @hidden
+     */
+    headerTemplate;
+    /**
+     * @hidden
+     */
+    footerTemplate;
+    /**
+     * @hidden
+     */
+    loaderTemplate;
+    /**
+     * @hidden
+     */
+    contentContainer;
+    /**
+     * @hidden
+     */
+    editTemplate;
+    /**
+     * @hidden
+     */
+    listViewItems;
+    /**
+     * Specifies if a border should be rendered around the listview element.
+     *
+     * @default false
+     */
+    bordered = false;
+    /**
+     * The data collection that will be used to populate the ListView
+     * ([see data binding examples]({% slug paging_listview %})).
+     */
+    data;
+    /**
+     * Specifies if the loading indicator of the ListView will be displayed
+     * ([see example]({% slug paging_listview %}#toc-remote-binding)).
+     */
+    loading = false;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Specifies the content container `aria-label` attribute
+     * ([see example]({% slug accessibility_listview %}#toc-accessible-names)).
+     */
+    containerLabel;
+    /**
+     * Specifies the content container `role` attribute
+     * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
+     * By default, the container `role` is set to `list`.
+     */
+    containerRole = 'list';
+    /**
+     * Specifies the list item `role` attribute
+     * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
+     * By default, the list item `role` is set to `listitem`.
+     */
+    listItemRole = 'listitem';
     /**
      * Specifies whether the keyboard navigation is enabled
      * ([see example]({% slug keyboard_navigation_listview %})).
@@ -678,6 +703,11 @@ class ListViewComponent {
     get navigable() {
         return this._navigable;
     }
+    /**
+     * Defines the page size used by the ListView pager
+     * ([more details]({% slug paging_listview %})).
+     */
+    pageSize;
     /**
      * Defines the number of records to be skipped by the pager
      * ([more details]({% slug paging_listview %})).
@@ -702,6 +732,58 @@ class ListViewComponent {
     get pageable() {
         return this._pageable;
     }
+    /**
+     * Defines the height (in pixels) of the ListView component.
+     * If the content height exceeds the component height, a vertical scrollbar will be rendered.
+     * 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;
+    /**
+     * Fires when the user scrolls to the last record on the page
+     * ([see endless scrolling example]({% slug scrollmodes_listview %}#toc-endless-scrolling)).
+     */
+    scrollBottom = new EventEmitter();
+    /**
+     * Fires when the page or the page size of the ListView is changed
+     * ([see example]({% slug paging_listview %}#toc-remote-binding)).
+     * You have to handle the event yourself and page the data.
+     */
+    pageChange = new EventEmitter();
+    /**
+     * Fires when the page size of the ListView is changed. This event can be prevented (`$event.preventDefault()`).
+     * If not prevented, the `pageChange` event will be fired subsequently.
+     */
+    pageSizeChange = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Edit** command button to edit an item
+     * ([see example]({% slug editing_template_forms_listview %}#toc-editing-records)).
+     */
+    edit = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Cancel** command button to close an item
+     * ([see example]({% slug editing_template_forms_listview %}#toc-cancelling-editing)).
+     */
+    cancel = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Save** command button to save changes in an item
+     * ([see example]({% slug editing_template_forms_listview %}#toc-saving-records)).
+     */
+    save = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Remove** command button to remove an item
+     * ([see example]({% slug editing_template_forms_listview %}#toc-removing-records)).
+     */
+    remove = new EventEmitter();
+    /**
+     * Fires when the user clicks the **Add** command button to add a new item
+     * ([see example]({% slug editing_template_forms_listview %}#toc-adding-records)).
+     */
+    add = new EventEmitter();
+    /**
+     * @hidden
+     */
+    pagerSettings;
     /**
      * @hidden
      *
@@ -745,6 +827,21 @@ class ListViewComponent {
     get activeIndex() {
         return this.navigationService.activeIndex;
     }
+    removeNavigationListeners;
+    _skip = 0;
+    _navigable = false;
+    _pageable;
+    editServiceSubscription;
+    constructor(ngZone, element, renderer, changeDetectorRef, editService, navigationService) {
+        this.ngZone = ngZone;
+        this.element = element;
+        this.renderer = renderer;
+        this.changeDetectorRef = changeDetectorRef;
+        this.editService = editService;
+        this.navigationService = navigationService;
+        validatePackage(packageMetadata);
+        this.attachEditHandlers();
+    }
     ngOnChanges(changes) {
         if (isChanged('height', changes, false)) {
             this.renderer.setStyle(this.element.nativeElement, 'height', `${this.height}px`);
@@ -908,17 +1005,16 @@ class ListViewComponent {
         });
         this[action].emit(args);
     }
-}
-ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: EditService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ListViewComponent, isStandalone: true, selector: "kendo-listview", inputs: { bordered: "bordered", data: "data", loading: "loading", containerStyle: "containerStyle", itemStyle: "itemStyle", containerClass: "containerClass", itemClass: "itemClass", containerLabel: "containerLabel", containerRole: "containerRole", listItemRole: "listItemRole", navigable: "navigable", pageSize: "pageSize", skip: "skip", pageable: "pageable", height: "height" }, outputs: { scrollBottom: "scrollBottom", pageChange: "pageChange", pageSizeChange: "pageSizeChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add" }, host: { properties: { "class.k-listview": "this.className", "class.k-d-flex": "this.className", "class.k-listview-bordered": "this.bordered" } }, providers: [
-        EditService,
-        NavigationService,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.listview'
-        }
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: LoaderTemplateDirective, descendants: true }, { propertyName: "editTemplate", first: true, predicate: EditTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, static: true }, { propertyName: "listViewItems", predicate: ListViewNavigableItemDirective, descendants: true }], exportAs: ["kendoListView"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: EditService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListViewComponent, isStandalone: true, selector: "kendo-listview", inputs: { bordered: "bordered", data: "data", loading: "loading", containerStyle: "containerStyle", itemStyle: "itemStyle", containerClass: "containerClass", itemClass: "itemClass", containerLabel: "containerLabel", containerRole: "containerRole", listItemRole: "listItemRole", navigable: "navigable", pageSize: "pageSize", skip: "skip", pageable: "pageable", height: "height" }, outputs: { scrollBottom: "scrollBottom", pageChange: "pageChange", pageSizeChange: "pageSizeChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add" }, host: { properties: { "class.k-listview": "this.className", "class.k-listview-bordered": "this.bordered" } }, providers: [
+            EditService,
+            NavigationService,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.listview'
+            }
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: LoaderTemplateDirective, descendants: true }, { propertyName: "editTemplate", first: true, predicate: EditTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, static: true }, { propertyName: "listViewItems", predicate: ListViewNavigableItemDirective, descendants: true }], exportAs: ["kendoListView"], usesOnChanges: true, ngImport: i0, template: `
         <!-- top pager -->
         <ng-template
             *ngIf="pagerSettings?.position !== 'bottom'"
@@ -990,23 +1086,23 @@ ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                 >
                 </ng-template>
             </div>
+        </div>
 
-            <!-- loading indicator -->
-            <div
-                *ngIf="loading && !loaderTemplate"
-                class="k-loading-mask"
-            >
-                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->
-                <span class="k-loading-text">Loading</span>
-                <div class="k-loading-image"></div>
-                <div class="k-loading-color"></div>
-            </div>
-            <ng-template
-                *ngIf="loading && loaderTemplate"
-                [ngTemplateOutlet]="loaderTemplate.templateRef"
-            >
-            </ng-template>
+        <!-- loading indicator -->
+        <div
+            *ngIf="loading && !loaderTemplate"
+            class="k-loading-mask"
+        >
+            <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->
+            <span class="k-loading-text">Loading</span>
+            <div class="k-loading-image"></div>
+            <div class="k-loading-color"></div>
         </div>
+        <ng-template
+            *ngIf="loading && loaderTemplate"
+            [ngTemplateOutlet]="loaderTemplate.templateRef"
+        >
+        </ng-template>
 
         <!-- footer -->
         <div
@@ -1045,8 +1141,9 @@ ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             >
             </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", inputs: ["total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewComponent, decorators: [{
+    `, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1133,23 +1230,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 >
                 </ng-template>
             </div>
+        </div>
 
-            <!-- loading indicator -->
-            <div
-                *ngIf="loading && !loaderTemplate"
-                class="k-loading-mask"
-            >
-                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->
-                <span class="k-loading-text">Loading</span>
-                <div class="k-loading-image"></div>
-                <div class="k-loading-color"></div>
-            </div>
-            <ng-template
-                *ngIf="loading && loaderTemplate"
-                [ngTemplateOutlet]="loaderTemplate.templateRef"
-            >
-            </ng-template>
+        <!-- loading indicator -->
+        <div
+            *ngIf="loading && !loaderTemplate"
+            class="k-loading-mask"
+        >
+            <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->
+            <span class="k-loading-text">Loading</span>
+            <div class="k-loading-image"></div>
+            <div class="k-loading-color"></div>
         </div>
+        <ng-template
+            *ngIf="loading && loaderTemplate"
+            [ngTemplateOutlet]="loaderTemplate.templateRef"
+        >
+        </ng-template>
 
         <!-- footer -->
         <div
@@ -1195,9 +1292,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: EditService }, { type: NavigationService }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class.k-listview']
-            }, {
-                type: HostBinding,
-                args: ['class.k-d-flex']
             }], itemTemplate: [{
                 type: ContentChild,
                 args: [ItemTemplateDirective, { static: false }]
@@ -1275,10 +1369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ([see example]({% slug paging_listview %}#toc-binding-directive)).
  */
 class DataBindingDirective {
-    constructor(listView) {
-        this.listView = listView;
-        this.subscriptions = new Subscription();
-    }
+    listView;
     /**
      * The array of data which will be used to populate the ListView.
      */
@@ -1289,6 +1380,11 @@ class DataBindingDirective {
     get data() {
         return this._data;
     }
+    _data;
+    subscriptions = new Subscription();
+    constructor(listView) {
+        this.listView = listView;
+    }
     ngOnInit() {
         this.subscriptions.add(this.listView.pageChange.subscribe(this.handlePageChange.bind(this)));
         this.subscriptions.add(this.listView.pageSizeChange.subscribe(this.handlePageSizeChange.bind(this)));
@@ -1313,10 +1409,10 @@ class DataBindingDirective {
             total: this.data.length
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DataBindingDirective, isStandalone: true, selector: "[kendoListViewBinding]", inputs: { data: ["kendoListViewBinding", "data"] }, ngImport: i0 });
 }
-DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DataBindingDirective, isStandalone: true, selector: "[kendoListViewBinding]", inputs: { data: ["kendoListViewBinding", "data"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataBindingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewBinding]',
@@ -1352,11 +1448,8 @@ class PageSizeChangeEvent extends PageSizeChangeEvent$1 {
  *
  */
 class EditCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-        this.elementRef = element;
-    }
+    editService;
+    elementRef;
     /**
      * @hidden
      */
@@ -1365,9 +1458,13 @@ class EditCommandDirective extends Button {
         const index = getClosestListItemIndex(this.elementRef.nativeElement);
         this.editService.beginEdit(index);
     }
-}
-EditCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditCommandDirective, isStandalone: true, selector: "[kendoListViewEditCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(element, renderer, null, localization, ngZone);
+        this.editService = editService;
+        this.elementRef = element;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditCommandDirective, isStandalone: true, selector: "[kendoListViewEditCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
             innerCssClass="k-button-icon"
@@ -1379,7 +1476,8 @@ EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditCommandDirective, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoListViewEditCommand]',
@@ -1420,10 +1518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class AddCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-    }
+    editService;
     /**
      * @hidden
      */
@@ -1431,9 +1526,12 @@ class AddCommandDirective extends Button {
         e.preventDefault();
         this.editService.beginAdd();
     }
-}
-AddCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AddCommandDirective, isStandalone: true, selector: "[kendoListViewAddCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(element, renderer, null, localization, ngZone);
+        this.editService = editService;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddCommandDirective, isStandalone: true, selector: "[kendoListViewAddCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
             innerCssClass="k-button-icon"
@@ -1445,7 +1543,8 @@ AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AddCommandDirective, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoListViewAddCommand]',
@@ -1497,11 +1596,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class SaveCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-        this.elementRef = element;
-    }
+    editService;
+    elementRef;
     /**
      * @hidden
      */
@@ -1512,9 +1608,13 @@ class SaveCommandDirective extends Button {
             this.editService.save(index);
         }
     }
-}
-SaveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SaveCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SaveCommandDirective, isStandalone: true, selector: "[kendoListViewSaveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(element, renderer, null, localization, ngZone);
+        this.editService = editService;
+        this.elementRef = element;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SaveCommandDirective, isStandalone: true, selector: "[kendoListViewSaveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
             innerCssClass="k-button-icon"
@@ -1526,7 +1626,8 @@ SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SaveCommandDirective, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaveCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoListViewSaveCommand]',
@@ -1578,11 +1679,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class CancelCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-        this.elementRef = element;
-    }
+    editService;
+    elementRef;
     /**
      * @hidden
      */
@@ -1593,9 +1691,13 @@ class CancelCommandDirective extends Button {
             this.editService.endEdit(index);
         }
     }
-}
-CancelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CancelCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CancelCommandDirective, isStandalone: true, selector: "[kendoListViewCancelCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(element, renderer, null, localization, ngZone);
+        this.editService = editService;
+        this.elementRef = element;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CancelCommandDirective, isStandalone: true, selector: "[kendoListViewCancelCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
             innerCssClass="k-button-icon"
@@ -1607,7 +1709,8 @@ CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CancelCommandDirective, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CancelCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoListViewCancelCommand]',
@@ -1648,11 +1751,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class RemoveCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
-        this.elementRef = element;
-    }
+    editService;
+    elementRef;
     /**
      * @hidden
      */
@@ -1661,9 +1761,13 @@ class RemoveCommandDirective extends Button {
         const index = getClosestListItemIndex(this.elementRef.nativeElement);
         this.editService.remove(index);
     }
-}
-RemoveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RemoveCommandDirective, isStandalone: true, selector: "[kendoListViewRemoveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(element, renderer, null, localization, ngZone);
+        this.editService = editService;
+        this.elementRef = element;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RemoveCommandDirective, isStandalone: true, selector: "[kendoListViewRemoveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
             *ngIf="icon || svgIcon"
             innerCssClass="k-button-icon"
@@ -1675,7 +1779,8 @@ RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RemoveCommandDirective, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RemoveCommandDirective, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoListViewRemoveCommand]',
@@ -1739,15 +1844,15 @@ const KENDO_LISTVIEW = [
  *```
  */
 class ListViewModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ListViewModule, imports: [ListViewComponent, ItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective], exports: [ListViewComponent, ItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewModule, providers: [
+            IconsService,
+            PopupService,
+            ResizeBatchService
+        ], imports: [ListViewComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective] });
 }
-ListViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ListViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, imports: [ListViewComponent, ItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective], exports: [ListViewComponent, ItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective] });
-ListViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, providers: [
-        IconsService,
-        PopupService,
-        ResizeBatchService
-    ], imports: [ListViewComponent, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_LISTVIEW],