@progress/kendo-angular-listview 3.0.2 → 4.0.0-next.202204010900

package/{dist/fesm2015/index.js → fesm2015/kendo-angular-listview.js}

@@ -2,15 +2,19 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { __decorate, __metadata, __param } from 'tslib';
-import { Injectable, Input, Directive, ElementRef, Renderer2, TemplateRef, Optional, EventEmitter, NgZone, HostBinding, ContentChild, ViewChild, ViewChildren, QueryList, Output, Component, ChangeDetectionStrategy, ViewContainerRef, HostListener, NgModule } from '@angular/core';
+import * as i0 from '@angular/core';
+import { Injectable, Directive, Input, Optional, EventEmitter, Component, ChangeDetectionStrategy, HostBinding, ContentChild, ViewChild, ViewChildren, Output, HostListener, NgModule } from '@angular/core';
+import * as i5 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isChanged, hasObservers, EventsModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
+import * as i2 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { Subject, Subscription } from 'rxjs';
 import { FormGroup, FormControl } from '@angular/forms';
 import { switchMap, take } from 'rxjs/operators';
-import { PageSizeChangeEvent, PagerModule } from '@progress/kendo-angular-pager';
+import * as i3 from '@progress/kendo-angular-pager';
+import { PageSizeChangeEvent as PageSizeChangeEvent$1, PagerModule } from '@progress/kendo-angular-pager';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Button } from '@progress/kendo-angular-buttons';
 
@@ -21,7 +25,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646219074,
+    publishDate: 1648803587,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -31,6 +35,10 @@ const LISTVIEW_ITEM_SELECTOR = '.k-listview-item';
  * @hidden
  */
 const isPresent = (item) => item !== null && item !== undefined;
+/**
+ * @hidden
+ */
+const isObject = (item) => isPresent(item) && typeof item === 'object';
 /**
  * @hidden
  *
@@ -127,13 +135,7 @@ const getClosestListItemIndex = (element) => {
  * 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.
  */
-let NavigationService = class NavigationService {
-    /**
-     * @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.
-     */
+class NavigationService {
     constructor() {
         /**
          * Emits every time a change in active index/focus/blur/navigation availability occurs.
@@ -270,15 +272,17 @@ let NavigationService = class NavigationService {
         const nextIndex = Math.min(this.activeIndex + 1, lastAvailableIndex);
         this.navigateTo(nextIndex);
     }
-};
-NavigationService = __decorate([
-    Injectable()
-], NavigationService);
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }] });
 
 /**
  * @hidden
  */
-let ListViewNavigableItemDirective = class ListViewNavigableItemDirective {
+class ListViewNavigableItemDirective {
     constructor(hostElement, renderer, navigationService) {
         this.hostElement = hostElement;
         this.renderer = renderer;
@@ -322,19 +326,17 @@ let ListViewNavigableItemDirective = class ListViewNavigableItemDirective {
             this.renderer.setAttribute(this.hostElement.nativeElement, 'tabindex', '-1');
         }
     }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], ListViewNavigableItemDirective.prototype, "index", void 0);
-ListViewNavigableItemDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewNavigableItem]'
-    }),
-    __metadata("design:paramtypes", [ElementRef,
-        Renderer2,
-        NavigationService])
-], ListViewNavigableItemDirective);
+}
+ListViewNavigableItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewNavigableItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
+ListViewNavigableItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: { index: "index" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewNavigableItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewNavigableItem]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: NavigationService }]; }, propDecorators: { index: [{
+                type: Input
+            }] } });
 
 /**
  * Renders the list item content. To define an item template, nest an `<ng-template>` tag
@@ -347,68 +349,76 @@ ListViewNavigableItemDirective = __decorate([
  * - `let-isFirst="isFirst"` (`boolean`) - Indicates whether the current data item will be rendered as the first item on the list.
  * - `let-isLast="isLast"` (`boolean`)- Indicates whether the current data item will be rendered as the last item on the list.
  */
-let ItemTemplateDirective = class ItemTemplateDirective {
+class ItemTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-ItemTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewItemTemplate]'
-    }),
-    __metadata("design:paramtypes", [TemplateRef])
-], ItemTemplateDirective);
+}
+ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ItemTemplateDirective, selector: "[kendoListViewItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
  * Renders 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]({% slug templates_listview %}#toc-header-template).
  */
-let HeaderTemplateDirective = class HeaderTemplateDirective {
+class HeaderTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-HeaderTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewHeaderTemplate]'
-    }),
-    __metadata("design:paramtypes", [TemplateRef])
-], HeaderTemplateDirective);
+}
+HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: HeaderTemplateDirective, selector: "[kendoListViewHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewHeaderTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
  * Renders 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]({% slug templates_listview %}#toc-footer-template).
  */
-let FooterTemplateDirective = class FooterTemplateDirective {
+class FooterTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-FooterTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewFooterTemplate]'
-    }),
-    __metadata("design:paramtypes", [TemplateRef])
-], FooterTemplateDirective);
+}
+FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FooterTemplateDirective, selector: "[kendoListViewFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewFooterTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
  * 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]({% slug templates_listview %}#toc-loader-template).
  */
-let LoaderTemplateDirective = class LoaderTemplateDirective {
+class LoaderTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-LoaderTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewLoaderTemplate]'
-    }),
-    __metadata("design:paramtypes", [TemplateRef])
-], LoaderTemplateDirective);
+}
+LoaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LoaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LoaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LoaderTemplateDirective, selector: "[kendoListViewLoaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LoaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewLoaderTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
  * Represents the edit template of the ListView ([see example]({% slug editing_template_forms_listview %})).
@@ -422,18 +432,21 @@ LoaderTemplateDirective = __decorate([
  * - `dataItem`&mdash;The current data item.
  * - `isNew`&mdash;The state of the current item.
  */
-let EditTemplateDirective = class EditTemplateDirective {
+class EditTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-};
-EditTemplateDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewEditTemplate]'
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [TemplateRef])
-], EditTemplateDirective);
+}
+EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditTemplateDirective, selector: "[kendoListViewEditTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewEditTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 /**
  * @hidden
@@ -450,7 +463,7 @@ const isNewItem = (index) => index === -1 || index === undefined;
 /**
  * @hidden
  */
-let EditService = class EditService {
+class EditService {
     constructor(ngZone) {
         this.ngZone = ngZone;
         this.changes = new EventEmitter();
@@ -535,11 +548,12 @@ let EditService = class EditService {
             this.changedSource.next();
         });
     }
-};
-EditService = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [NgZone])
-], EditService);
+}
+EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
 const DEFAULT_PAGER_SETTINGS = {
     position: 'bottom',
@@ -556,7 +570,7 @@ const createControl = (source) => (acc, key) => {
 /**
  * Represents the Kendo UI ListView component for Angular.
  */
-let ListViewComponent = class ListViewComponent {
+class ListViewComponent {
     constructor(ngZone, element, renderer, editService, navigationService) {
         this.ngZone = ngZone;
         this.element = element;
@@ -872,148 +886,160 @@ let ListViewComponent = class ListViewComponent {
         });
         this[action].emit(args);
     }
-};
-__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-listview'),
-    HostBinding('class.k-listview-bordered'),
-    HostBinding('class.k-d-flex'),
-    __metadata("design:type", Boolean)
-], ListViewComponent.prototype, "className", void 0);
-__decorate([
-    ContentChild(ItemTemplateDirective, { static: false }),
-    __metadata("design:type", ItemTemplateDirective)
-], ListViewComponent.prototype, "itemTemplate", void 0);
-__decorate([
-    ContentChild(HeaderTemplateDirective, { static: false }),
-    __metadata("design:type", HeaderTemplateDirective)
-], ListViewComponent.prototype, "headerTemplate", void 0);
-__decorate([
-    ContentChild(FooterTemplateDirective, { static: false }),
-    __metadata("design:type", FooterTemplateDirective)
-], ListViewComponent.prototype, "footerTemplate", void 0);
-__decorate([
-    ContentChild(LoaderTemplateDirective, { static: false }),
-    __metadata("design:type", LoaderTemplateDirective)
-], ListViewComponent.prototype, "loaderTemplate", void 0);
-__decorate([
-    ViewChild('contentContainer', { static: true }),
-    __metadata("design:type", ElementRef)
-], ListViewComponent.prototype, "contentContainer", void 0);
-__decorate([
-    ContentChild(EditTemplateDirective, { static: false }),
-    __metadata("design:type", EditTemplateDirective)
-], ListViewComponent.prototype, "editTemplate", void 0);
-__decorate([
-    ViewChildren(ListViewNavigableItemDirective),
-    __metadata("design:type", QueryList)
-], ListViewComponent.prototype, "listViewItems", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ListViewComponent.prototype, "data", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ListViewComponent.prototype, "loading", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ListViewComponent.prototype, "containerStyle", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ListViewComponent.prototype, "itemStyle", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ListViewComponent.prototype, "containerClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ListViewComponent.prototype, "itemClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ListViewComponent.prototype, "containerLabel", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ListViewComponent.prototype, "containerRole", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ListViewComponent.prototype, "listItemRole", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [Boolean])
-], ListViewComponent.prototype, "navigable", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], ListViewComponent.prototype, "pageSize", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], ListViewComponent.prototype, "skip", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], ListViewComponent.prototype, "pageable", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], ListViewComponent.prototype, "height", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListViewComponent.prototype, "scrollBottom", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListViewComponent.prototype, "pageChange", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListViewComponent.prototype, "pageSizeChange", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListViewComponent.prototype, "edit", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListViewComponent.prototype, "cancel", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListViewComponent.prototype, "save", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListViewComponent.prototype, "remove", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ListViewComponent.prototype, "add", void 0);
-ListViewComponent = __decorate([
-    Component({
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        exportAs: 'kendoListView',
-        selector: 'kendo-listview',
-        providers: [
-            EditService,
-            NavigationService,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.listview'
-            }
-        ],
-        template: `
+}
+ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: EditService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListViewComponent, selector: "kendo-listview", inputs: { 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-widget": "this.className", "class.k-listview": "this.className", "class.k-listview-bordered": "this.className", "class.k-d-flex": "this.className" } }, 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'"
+            [ngTemplateOutlet]="pagerTemplate"
+            [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager k-listview-pager-top' }"
+        >
+        </ng-template>
+
+        <!-- header -->
+        <div
+            *ngIf="headerTemplate"
+            class="k-listview-header"
+        >
+            <ng-template
+                [ngTemplateOutlet]="headerTemplate?.templateRef"
+            >
+            </ng-template>
+        </div>
+
+        <!-- content -->
+        <div
+            #contentContainer
+            [attr.tabindex]="containerTabindex"
+            class="k-listview-content"
+            [ngClass]="containerClass"
+            [ngStyle]="containerStyle"
+            [kendoEventsOutsideAngular]="{
+                scroll: handleContentScroll
+            }"
+            [scope]="this"
+            [attr.role]="containerRole"
+            [attr.aria-label]="containerLabel"
+        >
+            <!-- new item edit template -->
+            <div
+                *ngIf="editService.hasNewItem"
+                class="k-listview-item"
+                [attr.role]="listItemRole"
+                kendoListViewNavigableItem
+                [index]="-1"
+                [attr.data-kendo-listview-item-index]="-1"
+                [ngClass]="itemClass"
+                [ngStyle]="itemStyle"
+            >
+                <ng-template
+                    *ngIf="editTemplate"
+                    [ngTemplateOutlet]="editTemplate?.templateRef"
+                    [ngTemplateOutletContext]="editTemplateContext(-1)"
+                >
+                </ng-template>
+            </div>
+
+            <!-- items -->
+            <div
+                *ngFor="let dataItem of items; let index = index; let first = first; let last = last;"
+                class="k-listview-item"
+                [attr.role]="listItemRole"
+                [attr.aria-posinset]="itemPosInSet(index)"
+                [attr.aria-setsize]="total"
+                kendoListViewNavigableItem
+                [index]="index"
+                [attr.data-kendo-listview-item-index]="index"
+                [ngClass]="itemClass"
+                [ngStyle]="itemStyle"
+            >
+                <ng-template
+                    [ngTemplateOutlet]="isEdited(index) ? editTemplate?.templateRef : itemTemplate?.templateRef"
+                    [ngTemplateOutletContext]="isEdited(index) ? editTemplateContext(index) : templateContext(index)"
+                >
+                </ng-template>
+            </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>
+        </div>
+
+        <!-- footer -->
+        <div
+            *ngIf="footerTemplate"
+            class="k-listview-footer"
+        >
+            <ng-template
+                [ngTemplateOutlet]="footerTemplate?.templateRef"
+            >
+            </ng-template>
+        </div>
+
+        <!-- bottom pager -->
+        <ng-template
+            *ngIf="pagerSettings?.position !== 'top'"
+            [ngTemplateOutlet]="pagerTemplate"
+            [ngTemplateOutletContext]="{ pagerClass: 'k-listview-pager' }"
+        >
+        </ng-template>
+
+        <!-- pager template -->
+        <ng-template #pagerTemplate let-pagerClass="pagerClass">
+            <kendo-datapager
+                *ngIf="pageable"
+                [class]="pagerClass"
+                [total]="total"
+                [pageSize]="pageSize"
+                [skip]="skip"
+                [buttonCount]="pagerSettings.buttonCount"
+                [info]="pagerSettings.info"
+                [previousNext]="pagerSettings.previousNext"
+                [type]="pagerSettings.type"
+                [pageSizeValues]="pagerSettings.pageSizeValues"
+                (pageChange)="handlePageChange($event)"
+                (pageSizeChange)="pageSizeChange.emit($event)"
+            >
+            </kendo-datapager>
+        </ng-template>
+    `, isInline: true, components: [{ type: i3.PagerComponent, selector: "kendo-datapager", inputs: ["total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: ["index"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'kendoListView',
+                    selector: 'kendo-listview',
+                    providers: [
+                        EditService,
+                        NavigationService,
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.listview'
+                        }
+                    ],
+                    template: `
         <!-- top pager -->
         <ng-template
             *ngIf="pagerSettings?.position !== 'bottom'"
@@ -1141,19 +1167,91 @@ ListViewComponent = __decorate([
             </kendo-datapager>
         </ng-template>
     `
-    }),
-    __metadata("design:paramtypes", [NgZone,
-        ElementRef,
-        Renderer2,
-        EditService,
-        NavigationService])
-], ListViewComponent);
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: EditService }, { type: NavigationService }]; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class.k-widget']
+            }, {
+                type: HostBinding,
+                args: ['class.k-listview']
+            }, {
+                type: HostBinding,
+                args: ['class.k-listview-bordered']
+            }, {
+                type: HostBinding,
+                args: ['class.k-d-flex']
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [ItemTemplateDirective, { static: false }]
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [HeaderTemplateDirective, { static: false }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [FooterTemplateDirective, { static: false }]
+            }], loaderTemplate: [{
+                type: ContentChild,
+                args: [LoaderTemplateDirective, { static: false }]
+            }], contentContainer: [{
+                type: ViewChild,
+                args: ['contentContainer', { static: true }]
+            }], editTemplate: [{
+                type: ContentChild,
+                args: [EditTemplateDirective, { static: false }]
+            }], listViewItems: [{
+                type: ViewChildren,
+                args: [ListViewNavigableItemDirective]
+            }], data: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], containerStyle: [{
+                type: Input
+            }], itemStyle: [{
+                type: Input
+            }], containerClass: [{
+                type: Input
+            }], itemClass: [{
+                type: Input
+            }], containerLabel: [{
+                type: Input
+            }], containerRole: [{
+                type: Input
+            }], listItemRole: [{
+                type: Input
+            }], navigable: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], skip: [{
+                type: Input
+            }], pageable: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], scrollBottom: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], save: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], add: [{
+                type: Output
+            }] } });
 
 /**
  * A directive that encapsulates the in-memory handling of paging
  * ([see example]({% slug paging_listview %}#toc-binding-directive)).
  */
-let DataBindingDirective = class DataBindingDirective {
+class DataBindingDirective {
     constructor(listView) {
         this.listView = listView;
         this.subscriptions = new Subscription();
@@ -1192,55 +1290,26 @@ let DataBindingDirective = class DataBindingDirective {
             total: this.data.length
         };
     }
-};
-__decorate([
-    Input('kendoListViewBinding'),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
-], DataBindingDirective.prototype, "data", null);
-DataBindingDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewBinding]'
-    }),
-    __metadata("design:paramtypes", [ListViewComponent])
-], DataBindingDirective);
+}
+DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
+DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DataBindingDirective, selector: "[kendoListViewBinding]", inputs: { data: ["kendoListViewBinding", "data"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewBinding]'
+                }]
+        }], ctorParameters: function () { return [{ type: ListViewComponent }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['kendoListViewBinding']
+            }] } });
 
 /**
  * The arguments of the [`pageSizeChange`]({% slug api_listview_listviewcomponent %}#toc-pagesizechange) event of the ListView
  * ([more details]({% slug paging_listview %}).
  */
-class PageSizeChangeEvent$1 extends PageSizeChangeEvent {
+class PageSizeChangeEvent extends PageSizeChangeEvent$1 {
 }
 
-/**
- * @hidden
- */
-let TemplateContextDirective = class TemplateContextDirective {
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-    }
-    set templateContext(context) {
-        if (this.insertedViewRef) {
-            this.viewContainerRef.remove(this.viewContainerRef.indexOf(this.insertedViewRef));
-            this.insertedViewRef = undefined;
-        }
-        if (context.templateRef) {
-            this.insertedViewRef = this.viewContainerRef.createEmbeddedView(context.templateRef, context);
-        }
-    }
-};
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], TemplateContextDirective.prototype, "templateContext", null);
-TemplateContextDirective = __decorate([
-    Directive({
-        selector: '[templateContext]' // tslint:disable-line
-    }),
-    __metadata("design:paramtypes", [ViewContainerRef])
-], TemplateContextDirective);
-
 /**
  * Represents the `edit` command of the ListView. You can apply this directive to any `button`
  * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
@@ -1258,7 +1327,7 @@ TemplateContextDirective = __decorate([
  * ```
  *
  */
-let EditCommandDirective = class EditCommandDirective extends Button {
+class EditCommandDirective extends Button {
     constructor(editService, element, renderer, localization, ngZone) {
         super(element, renderer, null, localization, ngZone);
         this.editService = editService;
@@ -1272,36 +1341,72 @@ let EditCommandDirective = class EditCommandDirective extends Button {
         const index = getClosestListItemIndex(this.elementRef.nativeElement);
         this.editService.beginEdit(index);
     }
-};
-__decorate([
-    HostListener('click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], EditCommandDirective.prototype, "clickHandler", null);
-EditCommandDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewEditCommand]'
-    }),
-    __metadata("design:paramtypes", [EditService,
-        ElementRef,
-        Renderer2,
-        LocalizationService,
-        NgZone])
-], EditCommandDirective);
+}
+EditCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+EditCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: EditCommandDirective, selector: "[kendoListViewEditCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewEditCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 /**
- * Represents the `cancel` command of the ListView. You can apply this directive to any `button`
+ * Represents the command for adding a new item to the ListView. You can apply this directive to any
+ * `button` element inside a [`HeaderTemplate`]({% slug api_listview_headertemplatedirective %}).
+ * When an associated button with the directive is clicked, the
+ * [`add`]({% slug api_listview_listviewcomponent %}#toc-add) event is triggered
+ * ([see example]({% slug editing_listview %})).
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-listview>
+ *    <ng-template kendoListViewHeaderTemplate>
+ *       <button kendoListViewAddCommand>Add new</button>
+ *    </ng-template>
+ * </kendo-listview>
+ * ```
+ */
+class AddCommandDirective extends Button {
+    constructor(editService, element, renderer, localization, ngZone) {
+        super(element, renderer, null, localization, ngZone);
+        this.editService = editService;
+    }
+    /**
+     * @hidden
+     */
+    clickHandler(e) {
+        e.preventDefault();
+        this.editService.beginAdd();
+    }
+}
+AddCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AddCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+AddCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: AddCommandDirective, selector: "[kendoListViewAddCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AddCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewAddCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * Represents the `save` command of the ListView. You can apply this directive to any `button`
  * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
  * When an associated button with the directive is clicked, the
- * [`cancel`]({% slug api_listview_listviewcomponent %}#toc-cancel) event
+ * [`save`]({% slug api_listview_listviewcomponent %}#toc-save) event
  * is triggered ([see example]({% slug editing_listview %})).
  *
  * @example
  * ```html-no-run
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
- *     <button kendoListViewCancelCommand>Cancel changes</button>
+ *     <button kendoListViewSaveCommand>Save changes</button>
  *   </ng-template>
  * </kendo-listview>
  * ```
@@ -1312,12 +1417,12 @@ EditCommandDirective = __decorate([
  * ```html-no-run
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
- *     <button kendoListViewCancelCommand>{{isNew ? 'Discard' : 'Cancel changes'}}</button>
+ *     <button kendoListViewSaveCommand>{{isNew ? 'Add' : 'Update'}}</button>
  *   </ng-template>
  * </kendo-listview>
  * ```
  */
-let CancelCommandDirective = class CancelCommandDirective extends Button {
+class SaveCommandDirective extends Button {
     constructor(editService, element, renderer, localization, ngZone) {
         super(element, renderer, null, localization, ngZone);
         this.editService = editService;
@@ -1330,39 +1435,34 @@ let CancelCommandDirective = class CancelCommandDirective extends Button {
         e.preventDefault();
         const index = getClosestListItemIndex(this.elementRef.nativeElement);
         if (this.editService.isEdited(index)) {
-            this.editService.endEdit(index);
+            this.editService.save(index);
         }
     }
-};
-__decorate([
-    HostListener('click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CancelCommandDirective.prototype, "clickHandler", null);
-CancelCommandDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewCancelCommand]'
-    }),
-    __metadata("design:paramtypes", [EditService,
-        ElementRef,
-        Renderer2,
-        LocalizationService,
-        NgZone])
-], CancelCommandDirective);
+}
+SaveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SaveCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SaveCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SaveCommandDirective, selector: "[kendoListViewSaveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SaveCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewSaveCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 /**
- * Represents the `save` command of the ListView. You can apply this directive to any `button`
+ * Represents the `cancel` command of the ListView. You can apply this directive to any `button`
  * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
  * When an associated button with the directive is clicked, the
- * [`save`]({% slug api_listview_listviewcomponent %}#toc-save) event
+ * [`cancel`]({% slug api_listview_listviewcomponent %}#toc-cancel) event
  * is triggered ([see example]({% slug editing_listview %})).
  *
  * @example
  * ```html-no-run
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
- *     <button kendoListViewSaveCommand>Save changes</button>
+ *     <button kendoListViewCancelCommand>Cancel changes</button>
  *   </ng-template>
  * </kendo-listview>
  * ```
@@ -1373,12 +1473,12 @@ CancelCommandDirective = __decorate([
  * ```html-no-run
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
- *     <button kendoListViewSaveCommand>{{isNew ? 'Add' : 'Update'}}</button>
+ *     <button kendoListViewCancelCommand>{{isNew ? 'Discard' : 'Cancel changes'}}</button>
  *   </ng-template>
  * </kendo-listview>
  * ```
  */
-let SaveCommandDirective = class SaveCommandDirective extends Button {
+class CancelCommandDirective extends Button {
     constructor(editService, element, renderer, localization, ngZone) {
         super(element, renderer, null, localization, ngZone);
         this.editService = editService;
@@ -1391,26 +1491,21 @@ let SaveCommandDirective = class SaveCommandDirective extends Button {
         e.preventDefault();
         const index = getClosestListItemIndex(this.elementRef.nativeElement);
         if (this.editService.isEdited(index)) {
-            this.editService.save(index);
+            this.editService.endEdit(index);
         }
     }
-};
-__decorate([
-    HostListener('click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], SaveCommandDirective.prototype, "clickHandler", null);
-SaveCommandDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewSaveCommand]'
-    }),
-    __metadata("design:paramtypes", [EditService,
-        ElementRef,
-        Renderer2,
-        LocalizationService,
-        NgZone])
-], SaveCommandDirective);
+}
+CancelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CancelCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+CancelCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CancelCommandDirective, selector: "[kendoListViewCancelCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CancelCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewCancelCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 /**
  * Represents the `remove` command of the ListView. You can apply this directive to any `button` element
@@ -1428,7 +1523,7 @@ SaveCommandDirective = __decorate([
  * </kendo-listview>
  * ```
  */
-let RemoveCommandDirective = class RemoveCommandDirective extends Button {
+class RemoveCommandDirective extends Button {
     constructor(editService, element, renderer, localization, ngZone) {
         super(element, renderer, null, localization, ngZone);
         this.editService = editService;
@@ -1442,69 +1537,46 @@ let RemoveCommandDirective = class RemoveCommandDirective extends Button {
         const index = getClosestListItemIndex(this.elementRef.nativeElement);
         this.editService.remove(index);
     }
-};
-__decorate([
-    HostListener('click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], RemoveCommandDirective.prototype, "clickHandler", null);
-RemoveCommandDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewRemoveCommand]'
-    }),
-    __metadata("design:paramtypes", [EditService,
-        ElementRef,
-        Renderer2,
-        LocalizationService,
-        NgZone])
-], RemoveCommandDirective);
+}
+RemoveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+RemoveCommandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: RemoveCommandDirective, selector: "[kendoListViewRemoveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoveCommandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoListViewRemoveCommand]'
+                }]
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
 /**
- * Represents the command for adding a new item to the ListView. You can apply this directive to any
- * `button` element inside a [`HeaderTemplate`]({% slug api_listview_headertemplatedirective %}).
- * When an associated button with the directive is clicked, the
- * [`add`]({% slug api_listview_listviewcomponent %}#toc-add) event is triggered
- * ([see example]({% slug editing_listview %})).
- *
- * @example
- * ```html-no-run
- * <kendo-listview>
- *    <ng-template kendoListViewHeaderTemplate>
- *       <button kendoListViewAddCommand>Add new</button>
- *    </ng-template>
- * </kendo-listview>
- * ```
+ * @hidden
  */
-let AddCommandDirective = class AddCommandDirective extends Button {
-    constructor(editService, element, renderer, localization, ngZone) {
-        super(element, renderer, null, localization, ngZone);
-        this.editService = editService;
+class TemplateContextDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
     }
-    /**
-     * @hidden
-     */
-    clickHandler(e) {
-        e.preventDefault();
-        this.editService.beginAdd();
+    set templateContext(context) {
+        if (this.insertedViewRef) {
+            this.viewContainerRef.remove(this.viewContainerRef.indexOf(this.insertedViewRef));
+            this.insertedViewRef = undefined;
+        }
+        if (context.templateRef) {
+            this.insertedViewRef = this.viewContainerRef.createEmbeddedView(context.templateRef, context);
+        }
     }
-};
-__decorate([
-    HostListener('click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], AddCommandDirective.prototype, "clickHandler", null);
-AddCommandDirective = __decorate([
-    Directive({
-        selector: '[kendoListViewAddCommand]'
-    }),
-    __metadata("design:paramtypes", [EditService,
-        ElementRef,
-        Renderer2,
-        LocalizationService,
-        NgZone])
-], AddCommandDirective);
+}
+TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[templateContext]' // eslint-disable-line
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { templateContext: [{
+                type: Input
+            }] } });
 
 const TEMPLATE_DIRECTIVES = [
     ItemTemplateDirective,
@@ -1535,36 +1607,68 @@ const EDITING_DIRECTIVES = [
  * - [`DataBindingDirective`]({% slug api_listview_databindingdirective %})&mdash;The data binding directive.
  * - [`EditTemplateDirective`]({% slug api_listview_editingdirective %}&mdash;The editing template directive.
  */
-let ListViewModule = class ListViewModule {
-};
-ListViewModule = __decorate([
-    NgModule({
-        declarations: [
-            TEMPLATE_DIRECTIVES,
-            BINDING_DIRECTIVES,
-            EDITING_DIRECTIVES,
-            ListViewComponent,
-            TemplateContextDirective,
-            ListViewNavigableItemDirective
-        ],
-        exports: [
-            TEMPLATE_DIRECTIVES,
-            BINDING_DIRECTIVES,
-            EDITING_DIRECTIVES,
-            ListViewComponent,
-            CommonModule,
-            EventsModule
-        ],
-        imports: [
+class ListViewModule {
+}
+ListViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ListViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewModule, declarations: [ItemTemplateDirective,
+        HeaderTemplateDirective,
+        FooterTemplateDirective,
+        LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective,
+        EditCommandDirective,
+        CancelCommandDirective,
+        SaveCommandDirective,
+        RemoveCommandDirective,
+        AddCommandDirective, ListViewComponent,
+        TemplateContextDirective,
+        ListViewNavigableItemDirective], imports: [CommonModule,
+        PagerModule,
+        EventsModule], exports: [ItemTemplateDirective,
+        HeaderTemplateDirective,
+        FooterTemplateDirective,
+        LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective,
+        EditCommandDirective,
+        CancelCommandDirective,
+        SaveCommandDirective,
+        RemoveCommandDirective,
+        AddCommandDirective, ListViewComponent,
+        CommonModule,
+        EventsModule] });
+ListViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewModule, imports: [[
             CommonModule,
             PagerModule,
             EventsModule
-        ]
-    })
-], ListViewModule);
+        ], CommonModule,
+        EventsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TEMPLATE_DIRECTIVES,
+                        BINDING_DIRECTIVES,
+                        EDITING_DIRECTIVES,
+                        ListViewComponent,
+                        TemplateContextDirective,
+                        ListViewNavigableItemDirective
+                    ],
+                    exports: [
+                        TEMPLATE_DIRECTIVES,
+                        BINDING_DIRECTIVES,
+                        EDITING_DIRECTIVES,
+                        ListViewComponent,
+                        CommonModule,
+                        EventsModule
+                    ],
+                    imports: [
+                        CommonModule,
+                        PagerModule,
+                        EventsModule
+                    ]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, CancelCommandDirective, EditCommandDirective, RemoveCommandDirective, SaveCommandDirective, EditService, ListViewNavigableItemDirective, NavigationService, TemplateContextDirective, ListViewComponent, ItemTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective, PageSizeChangeEvent$1 as PageSizeChangeEvent, ListViewModule };
+export { AddCommandDirective, CancelCommandDirective, DataBindingDirective, EditCommandDirective, EditTemplateDirective, FooterTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ListViewComponent, ListViewModule, LoaderTemplateDirective, PageSizeChangeEvent, RemoveCommandDirective, SaveCommandDirective };
+