@progress/kendo-angular-listview 4.0.3 → 4.0.4

package/bundles/kendo-angular-listview.umd.js

@@ -2,4 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-angular-common"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-l10n"),require("rxjs"),require("@angular/forms"),require("rxjs/operators"),require("@progress/kendo-angular-pager"),require("@angular/common"),require("@progress/kendo-angular-buttons")):"function"==typeof define&&define.amd?define("KendoAngularListview",["exports","@angular/core","@progress/kendo-angular-common","@progress/kendo-licensing","@progress/kendo-angular-l10n","rxjs","@angular/forms","rxjs/operators","@progress/kendo-angular-pager","@angular/common","@progress/kendo-angular-buttons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularListview={},e.ng.core,e.KendoAngularCommon,e.KendoLicensing,e.KendoAngularL10N,e.rxjs,e.ng.forms,e.rxjs.operators,e.KendoAngularPager,e.ng.common,e.KendoAngularButtons)}(this,function(e,r,a,z,t,n,i,j,o,s,l){"use strict";function p(n){var i;return n&&n.__esModule?n:(i=Object.create(null),n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),i.default=n,Object.freeze(i))}function A(e,t){var n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector;return!!v(n)&&n.call(e,t)}function M(e){return!!v(e)&&A(e,K)}function H(e){return v(e)?Number(e.getAttribute("data-kendo-listview-item-index")):null}function _(e,t){for(var n=e;null!==n&&1===n.nodeType;){if(A(n,t))return n;n=n.parentElement||n.parentNode}return null}function c(e){return v(e)?(e=_(e,K),H(e)):null}var d=p(r),B=p(a),g=p(t),m=p(o),u=p(s),Z={name:"@progress/kendo-angular-listview",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1668698801,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"},K=".k-listview-item",v=function(e){return null!=e},h=(Object.defineProperty(y.prototype,"isEnabled",{get:function(){return v(this.activeIndex)},set:function(e){this.activeIndex=e?0:null,this.changes.next()},enumerable:!1,configurable:!0}),y.prototype.isActive=function(e){return e===this.activeIndex},y.prototype.handleKeyDown=function(e,t){switch(e.keyCode){case a.Keys.ArrowLeft:case a.Keys.ArrowUp:this.navigateToPrevious();break;case a.Keys.ArrowRight:case a.Keys.ArrowDown:this.navigateToNext(t);break;case a.Keys.Home:this.navigateTo(0);break;case a.Keys.End:this.navigateTo(t-1);break;default:return}e.preventDefault()},y.prototype.handleFocusIn=function(e){var t,e=e.target;M(e)?(t=H(e),this.isFocused&&t===this.activeIndex||(this.activeIndex=t,this.isFocused=!0,this.changes.next())):(t=_(e,".k-listview-item"),v(t)&&(e=H(t),this.setActiveIndex(e)))},y.prototype.handleFocusOut=function(e){M(e.target)&&!M(v((e=e).relatedTarget)&&a.isDocumentAvailable()?e.relatedTarget||document.activeElement:null)&&(this.isFocused=!1,this.changes.next())},y.prototype.setActiveIndex=function(e){this.isEnabled&&e!==this.activeIndex&&(this.activeIndex=e,this.changes.next())},y.prototype.focusIndex=function(e,t){var n;this.isEnabled&&(e=parseInt(e,10),t=t-1,n=isNaN(e)?this.activeIndex:(n=0,t=t,!v(e=e)||e<=n?n:t<=e?t:e),this.navigateTo(n))},y.prototype.navigateTo=function(e){this.isFocused&&this.activeIndex===e||(this.isFocused=!0,this.activeIndex=e,this.changes.next())},y.prototype.navigateToPrevious=function(){var e=Math.max(this.activeIndex-1,0);this.navigateTo(e)},y.prototype.navigateToNext=function(e){e=Math.min(this.activeIndex+1,e-1);this.navigateTo(e)},y);function y(){this.changes=new n.Subject,this.isFocused=!1,this.activeIndex=null}h.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:h,deps:[],target:d.ɵɵFactoryTarget.Injectable}),h.ɵprov=d.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:h}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:h,decorators:[{type:r.Injectable}]});I.prototype.ngOnChanges=function(){this.updateNavigationState()},I.prototype.ngOnInit=function(){this.navigationSubscription=this.navigationService.changes.subscribe(this.updateNavigationState.bind(this))},I.prototype.ngOnDestroy=function(){v(this.navigationSubscription)&&this.navigationSubscription.unsubscribe()},I.prototype.updateNavigationState=function(){this.updateTabIndex(),this.updateFocusedState()},I.prototype.updateFocusedState=function(){var e="k-focus";this.navigationService.isActive(this.index)&&this.navigationService.isFocused?(this.renderer.addClass(this.hostElement.nativeElement,e),this.hostElement.nativeElement.focus()):this.renderer.removeClass(this.hostElement.nativeElement,e)},I.prototype.updateTabIndex=function(){this.navigationService.isEnabled?this.navigationService.isActive(this.index)?this.renderer.setAttribute(this.hostElement.nativeElement,"tabindex","0"):this.renderer.setAttribute(this.hostElement.nativeElement,"tabindex","-1"):this.renderer.removeAttribute(this.hostElement.nativeElement,"tabindex")};var f=I;function I(e,t,n){this.hostElement=e,this.renderer=t,this.navigationService=n}f.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:f,deps:[{token:d.ElementRef},{token:d.Renderer2},{token:h}],target:d.ɵɵFactoryTarget.Directive}),f.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:f,selector:"[kendoListViewNavigableItem]",inputs:{index:"index"},usesOnChanges:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:f,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewNavigableItem]"}]}],ctorParameters:function(){return[{type:d.ElementRef},{type:d.Renderer2},{type:h}]},propDecorators:{index:[{type:r.Input}]}});function k(e){return-1===e||void 0===e}var C=function(e){this.templateRef=e},b=(C.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:C,deps:[{token:d.TemplateRef}],target:d.ɵɵFactoryTarget.Directive}),C.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:C,selector:"[kendoListViewItemTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:C,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewItemTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef}]}}),function(e){this.templateRef=e}),w=(b.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:b,deps:[{token:d.TemplateRef}],target:d.ɵɵFactoryTarget.Directive}),b.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:b,selector:"[kendoListViewHeaderTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:b,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewHeaderTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef}]}}),function(e){this.templateRef=e}),S=(w.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:w,deps:[{token:d.TemplateRef}],target:d.ɵɵFactoryTarget.Directive}),w.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:w,selector:"[kendoListViewFooterTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:w,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewFooterTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef}]}}),function(e){this.templateRef=e}),D=(S.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:S,deps:[{token:d.TemplateRef}],target:d.ɵɵFactoryTarget.Directive}),S.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:S,selector:"[kendoListViewLoaderTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:S,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewLoaderTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef}]}}),function(e){this.templateRef=e}),T=(D.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:D,deps:[{token:d.TemplateRef,optional:!0}],target:d.ɵɵFactoryTarget.Directive}),D.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:D,selector:"[kendoListViewEditTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:D,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewEditTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef,decorators:[{type:r.Optional}]}]}}),x.prototype.editItem=function(e,t){this.editedIndices.push({index:e,group:t=void 0===t?void 0:t}),this.onChanged()},x.prototype.addItem=function(e){this.newItem={group:e},this.onChanged()},x.prototype.isEditing=function(){return 0<this.editedIndices.length},Object.defineProperty(x.prototype,"hasNewItem",{get:function(){return v(this.newItem)},enumerable:!1,configurable:!0}),Object.defineProperty(x.prototype,"newDataItem",{get:function(){return this.hasNewItem?this.newItem.group.value:{}},enumerable:!1,configurable:!0}),Object.defineProperty(x.prototype,"newItemGroup",{get:function(){return this.hasNewItem?this.newItem.group:new i.FormGroup({})},enumerable:!1,configurable:!0}),x.prototype.editGroup=function(e){return this.context(e).group},x.prototype.close=function(e){var t;k(e)?this.newItem=void 0:(this.editedIndices=this.editedIndices.filter((t=e,function(e){return e.index!==t})),this.onChanged())},x.prototype.context=function(e){return k(e)?this.newItem:this.findByIndex(e)},x.prototype.isEdited=function(e){return!(!k(e)||!v(this.newItem))||v(this.findByIndex(e))},x.prototype.hasEdited=function(e){return v(this.context(e))},x.prototype.beginEdit=function(e){this.changes.emit({action:"edit",itemIndex:e})},x.prototype.beginAdd=function(){this.changes.emit({action:"add"})},x.prototype.endEdit=function(e){var t=this.context(e).group;this.changes.emit({action:"cancel",itemIndex:e,formGroup:t,isNew:k(e)})},x.prototype.save=function(e){var t=this.context(e).group;this.changes.emit({action:"save",itemIndex:e,formGroup:t,isNew:k(e)})},x.prototype.remove=function(e){this.changes.emit({action:"remove",itemIndex:e})},x.prototype.findByIndex=function(e){return this.editedIndices.find((t=e,function(e){return e.index===t}));var t},x.prototype.onChanged=function(){var e=this;this.ngZone.runOutsideAngular(function(){e.changedSource.next()})},x);function x(e){var t=this;this.ngZone=e,this.changes=new r.EventEmitter,this.editedIndices=[],this.changedSource=new n.Subject,this.changed=this.changedSource.asObservable().pipe(j.switchMap(function(){return t.ngZone.onStable.asObservable().pipe(j.take(1))}))}T.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:T,deps:[{token:d.NgZone}],target:d.ɵɵFactoryTarget.Injectable}),T.ɵprov=d.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:T}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:T,decorators:[{type:r.Injectable}],ctorParameters:function(){return[{type:d.NgZone}]}});var $={position:"bottom",buttonCount:5,info:!0,previousNext:!0,type:"numeric",pageSizeValues:[5,10,20]},V=(Object.defineProperty(E.prototype,"navigable",{get:function(){return this._navigable},set:function(e){!e&&v(this.removeNavigationListeners)?(this.removeNavigationListeners(),this.removeNavigationListeners=null,this.navigationService.isEnabled=!1):e&&!v(this.removeNavigationListeners)&&(this.addNavigationListeners(),this.navigationService.isEnabled=!0),this._navigable=e},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"skip",{get:function(){return this._skip},set:function(e){e=parseInt(e,10);this._skip=isNaN(e)?0:e},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"pageable",{get:function(){return this._pageable},set:function(e){this._pageable=e,this.pagerSettings=e?Object.assign({},$,e):null},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"items",{get:function(){return v(this.data)?(Array.isArray(this.data)?this:this.data).data:[]},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"total",{get:function(){return v(this.data)?Array.isArray(this.data)?this.data.length:this.data.total:0},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"containerTabindex",{get:function(){return this.navigable?-1:null},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"activeIndex",{get:function(){return this.navigationService.activeIndex},enumerable:!1,configurable:!0}),E.prototype.ngOnChanges=function(e){a.isChanged("height",e,!1)&&this.renderer.setStyle(this.element.nativeElement,"height",this.height+"px")},E.prototype.ngOnDestroy=function(){v(this.editServiceSubscription)&&this.editServiceSubscription.unsubscribe()},E.prototype.templateContext=function(e){return{$implicit:this.items[e],isLast:e===this.items.length-1,isFirst:0===e,dataItem:this.items[e],index:e}},E.prototype.editTemplateContext=function(e){var t=-1===e,n=t?this.editService.newItemGroup:this.editService.editGroup(e);return{$implicit:n,formGroup:n,dataItem:t?this.editService.newDataItem:this.items[e],isNew:t,index:e}},E.prototype.focus=function(e){var t=this.listViewItems.length;this.navigationService.focusIndex(e,t)},E.prototype.addItem=function(e){var t,n;e instanceof i.FormGroup||(t=Object.keys(e).reduce((n=e,function(e,t){return e[t]=new i.FormControl(n[t]),e}),{}),e=new i.FormGroup(t)),this.editService.addItem(e)},E.prototype.editItem=function(e,t){this.editService.editItem(e,t)},E.prototype.closeItem=function(e){this.editService.close(e)},E.prototype.isEdited=function(e){return this.editService.isEdited(e)},E.prototype.handlePageChange=function(e){this.scrollToContainerTop();this.navigationService.setActiveIndex(0),this.pageChange.emit(e)},E.prototype.handleContentScroll=function(){var e,t,n,i=this;a.hasObservers(this.scrollBottom)&&(t=(e=this.contentContainer.nativeElement).scrollHeight,n=e.scrollTop,t-e.clientHeight-n<=2)&&this.ngZone.run(function(){i.scrollBottom.emit({sender:i})})},E.prototype.itemPosInSet=function(e){return this.skip+e+1},E.prototype.scrollToContainerTop=function(){var e=this.contentContainer.nativeElement;e.scrollTop=0,e.scrollLeft=0},E.prototype.addNavigationListeners=function(){var i=this;this.ngZone.runOutsideAngular(function(){var e=i.renderer.listen(i.contentContainer.nativeElement,"keydown",function(e){return i.navigationService.handleKeyDown(e,i.listViewItems.length)}),t=i.renderer.listen(i.contentContainer.nativeElement,"focusin",function(e){return i.navigationService.handleFocusIn(e)}),n=i.renderer.listen(i.contentContainer.nativeElement,"focusout",function(e){return i.navigationService.handleFocusOut(e)});i.removeNavigationListeners=function(){e(),t(),n()}})},E.prototype.attachEditHandlers=function(){v(this.editService)&&(this.editServiceSubscription=this.editService.changes.subscribe(this.emitCRUDEvent.bind(this)))},E.prototype.emitCRUDEvent=function(e){var t=e.action,n=e.itemIndex,i=e.formGroup,n=this.items[n];"add"!==t&&i&&(n=i.value),Object.assign(e,{dataItem:n,sender:this}),this[t].emit(e)},E);function E(e,t,n,i,a){this.ngZone=e,this.element=t,this.renderer=n,this.editService=i,this.navigationService=a,this.className=!0,this.loading=!1,this.containerRole="listbox",this.listItemRole="option",this.scrollBottom=new r.EventEmitter,this.pageChange=new r.EventEmitter,this.pageSizeChange=new r.EventEmitter,this.edit=new r.EventEmitter,this.cancel=new r.EventEmitter,this.save=new r.EventEmitter,this.remove=new r.EventEmitter,this.add=new r.EventEmitter,this._skip=0,this._navigable=!1,z.validatePackage(Z),this.attachEditHandlers()}V.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:V,deps:[{token:d.NgZone},{token:d.ElementRef},{token:d.Renderer2},{token:T},{token:h}],target:d.ɵɵFactoryTarget.Component}),V.ɵcmp=d.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:V,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:[T,h,t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.listview"}],queries:[{propertyName:"itemTemplate",first:!0,predicate:C,descendants:!0},{propertyName:"headerTemplate",first:!0,predicate:b,descendants:!0},{propertyName:"footerTemplate",first:!0,predicate:w,descendants:!0},{propertyName:"loaderTemplate",first:!0,predicate:S,descendants:!0},{propertyName:"editTemplate",first:!0,predicate:D,descendants:!0}],viewQueries:[{propertyName:"contentContainer",first:!0,predicate:["contentContainer"],descendants:!0,static:!0},{propertyName:"listViewItems",predicate:f,descendants:!0}],exportAs:["kendoListView"],usesOnChanges:!0,ngImport:d,template:'\n        \x3c!-- top pager --\x3e\n        <ng-template\n            *ngIf="pagerSettings?.position !== \'bottom\'"\n            [ngTemplateOutlet]="pagerTemplate"\n            [ngTemplateOutletContext]="{ pagerClass: \'k-listview-pager k-listview-pager-top\' }"\n        >\n        </ng-template>\n\n        \x3c!-- header --\x3e\n        <div\n            *ngIf="headerTemplate"\n            class="k-listview-header"\n        >\n            <ng-template\n                [ngTemplateOutlet]="headerTemplate?.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- content --\x3e\n        <div\n            #contentContainer\n            [attr.tabindex]="containerTabindex"\n            class="k-listview-content"\n            [ngClass]="containerClass"\n            [ngStyle]="containerStyle"\n            [kendoEventsOutsideAngular]="{\n                scroll: handleContentScroll\n            }"\n            [scope]="this"\n            [attr.role]="containerRole"\n            [attr.aria-label]="containerLabel"\n        >\n            \x3c!-- new item edit template --\x3e\n            <div\n                *ngIf="editService.hasNewItem"\n                class="k-listview-item"\n                [attr.role]="listItemRole"\n                kendoListViewNavigableItem\n                [index]="-1"\n                [attr.data-kendo-listview-item-index]="-1"\n                [ngClass]="itemClass"\n                [ngStyle]="itemStyle"\n            >\n                <ng-template\n                    *ngIf="editTemplate"\n                    [ngTemplateOutlet]="editTemplate?.templateRef"\n                    [ngTemplateOutletContext]="editTemplateContext(-1)"\n                >\n                </ng-template>\n            </div>\n\n            \x3c!-- items --\x3e\n            <div\n                *ngFor="let dataItem of items; let index = index; let first = first; let last = last;"\n                class="k-listview-item"\n                [attr.role]="listItemRole"\n                [attr.aria-posinset]="itemPosInSet(index)"\n                [attr.aria-setsize]="total"\n                kendoListViewNavigableItem\n                [index]="index"\n                [attr.data-kendo-listview-item-index]="index"\n                [ngClass]="itemClass"\n                [ngStyle]="itemStyle"\n            >\n                <ng-template\n                    [ngTemplateOutlet]="isEdited(index) ? editTemplate?.templateRef : itemTemplate?.templateRef"\n                    [ngTemplateOutletContext]="isEdited(index) ? editTemplateContext(index) : templateContext(index)"\n                >\n                </ng-template>\n            </div>\n\n            \x3c!-- loading indicator --\x3e\n            <div\n                *ngIf="loading && !loaderTemplate"\n                class="k-loading-mask"\n            >\n                \x3c!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case --\x3e\n                <span class="k-loading-text">Loading</span>\n                <div class="k-loading-image"></div>\n                <div class="k-loading-color"></div>\n            </div>\n            <ng-template\n                *ngIf="loading && loaderTemplate"\n                [ngTemplateOutlet]="loaderTemplate.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- footer --\x3e\n        <div\n            *ngIf="footerTemplate"\n            class="k-listview-footer"\n        >\n            <ng-template\n                [ngTemplateOutlet]="footerTemplate?.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- bottom pager --\x3e\n        <ng-template\n            *ngIf="pagerSettings?.position !== \'top\'"\n            [ngTemplateOutlet]="pagerTemplate"\n            [ngTemplateOutletContext]="{ pagerClass: \'k-listview-pager\' }"\n        >\n        </ng-template>\n\n        \x3c!-- pager template --\x3e\n        <ng-template #pagerTemplate let-pagerClass="pagerClass">\n            <kendo-datapager\n                *ngIf="pageable"\n                [class]="pagerClass"\n                [total]="total"\n                [pageSize]="pageSize"\n                [skip]="skip"\n                [buttonCount]="pagerSettings.buttonCount"\n                [info]="pagerSettings.info"\n                [previousNext]="pagerSettings.previousNext"\n                [type]="pagerSettings.type"\n                [pageSizeValues]="pagerSettings.pageSizeValues"\n                (pageChange)="handlePageChange($event)"\n                (pageSizeChange)="pageSizeChange.emit($event)"\n            >\n            </kendo-datapager>\n        </ng-template>\n    ',isInline:!0,components:[{type:m.PagerComponent,selector:"kendo-datapager",inputs:["total","skip","pageSize","buttonCount","info","type","pageSizeValues","previousNext"],outputs:["pageChange","pageSizeChange"],exportAs:["kendoDataPager"]}],directives:[{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:u.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{type:u.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:B.EventsOutsideAngularDirective,selector:"[kendoEventsOutsideAngular]",inputs:["kendoEventsOutsideAngular","scope"]},{type:f,selector:"[kendoListViewNavigableItem]",inputs:["index"]},{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]}],changeDetection:d.ChangeDetectionStrategy.OnPush}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:V,decorators:[{type:r.Component,args:[{changeDetection:r.ChangeDetectionStrategy.OnPush,exportAs:"kendoListView",selector:"kendo-listview",providers:[T,h,t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.listview"}],template:'\n        \x3c!-- top pager --\x3e\n        <ng-template\n            *ngIf="pagerSettings?.position !== \'bottom\'"\n            [ngTemplateOutlet]="pagerTemplate"\n            [ngTemplateOutletContext]="{ pagerClass: \'k-listview-pager k-listview-pager-top\' }"\n        >\n        </ng-template>\n\n        \x3c!-- header --\x3e\n        <div\n            *ngIf="headerTemplate"\n            class="k-listview-header"\n        >\n            <ng-template\n                [ngTemplateOutlet]="headerTemplate?.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- content --\x3e\n        <div\n            #contentContainer\n            [attr.tabindex]="containerTabindex"\n            class="k-listview-content"\n            [ngClass]="containerClass"\n            [ngStyle]="containerStyle"\n            [kendoEventsOutsideAngular]="{\n                scroll: handleContentScroll\n            }"\n            [scope]="this"\n            [attr.role]="containerRole"\n            [attr.aria-label]="containerLabel"\n        >\n            \x3c!-- new item edit template --\x3e\n            <div\n                *ngIf="editService.hasNewItem"\n                class="k-listview-item"\n                [attr.role]="listItemRole"\n                kendoListViewNavigableItem\n                [index]="-1"\n                [attr.data-kendo-listview-item-index]="-1"\n                [ngClass]="itemClass"\n                [ngStyle]="itemStyle"\n            >\n                <ng-template\n                    *ngIf="editTemplate"\n                    [ngTemplateOutlet]="editTemplate?.templateRef"\n                    [ngTemplateOutletContext]="editTemplateContext(-1)"\n                >\n                </ng-template>\n            </div>\n\n            \x3c!-- items --\x3e\n            <div\n                *ngFor="let dataItem of items; let index = index; let first = first; let last = last;"\n                class="k-listview-item"\n                [attr.role]="listItemRole"\n                [attr.aria-posinset]="itemPosInSet(index)"\n                [attr.aria-setsize]="total"\n                kendoListViewNavigableItem\n                [index]="index"\n                [attr.data-kendo-listview-item-index]="index"\n                [ngClass]="itemClass"\n                [ngStyle]="itemStyle"\n            >\n                <ng-template\n                    [ngTemplateOutlet]="isEdited(index) ? editTemplate?.templateRef : itemTemplate?.templateRef"\n                    [ngTemplateOutletContext]="isEdited(index) ? editTemplateContext(index) : templateContext(index)"\n                >\n                </ng-template>\n            </div>\n\n            \x3c!-- loading indicator --\x3e\n            <div\n                *ngIf="loading && !loaderTemplate"\n                class="k-loading-mask"\n            >\n                \x3c!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case --\x3e\n                <span class="k-loading-text">Loading</span>\n                <div class="k-loading-image"></div>\n                <div class="k-loading-color"></div>\n            </div>\n            <ng-template\n                *ngIf="loading && loaderTemplate"\n                [ngTemplateOutlet]="loaderTemplate.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- footer --\x3e\n        <div\n            *ngIf="footerTemplate"\n            class="k-listview-footer"\n        >\n            <ng-template\n                [ngTemplateOutlet]="footerTemplate?.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- bottom pager --\x3e\n        <ng-template\n            *ngIf="pagerSettings?.position !== \'top\'"\n            [ngTemplateOutlet]="pagerTemplate"\n            [ngTemplateOutletContext]="{ pagerClass: \'k-listview-pager\' }"\n        >\n        </ng-template>\n\n        \x3c!-- pager template --\x3e\n        <ng-template #pagerTemplate let-pagerClass="pagerClass">\n            <kendo-datapager\n                *ngIf="pageable"\n                [class]="pagerClass"\n                [total]="total"\n                [pageSize]="pageSize"\n                [skip]="skip"\n                [buttonCount]="pagerSettings.buttonCount"\n                [info]="pagerSettings.info"\n                [previousNext]="pagerSettings.previousNext"\n                [type]="pagerSettings.type"\n                [pageSizeValues]="pagerSettings.pageSizeValues"\n                (pageChange)="handlePageChange($event)"\n                (pageSizeChange)="pageSizeChange.emit($event)"\n            >\n            </kendo-datapager>\n        </ng-template>\n    '}]}],ctorParameters:function(){return[{type:d.NgZone},{type:d.ElementRef},{type:d.Renderer2},{type:T},{type:h}]},propDecorators:{className:[{type:r.HostBinding,args:["class.k-widget"]},{type:r.HostBinding,args:["class.k-listview"]},{type:r.HostBinding,args:["class.k-listview-bordered"]},{type:r.HostBinding,args:["class.k-d-flex"]}],itemTemplate:[{type:r.ContentChild,args:[C,{static:!1}]}],headerTemplate:[{type:r.ContentChild,args:[b,{static:!1}]}],footerTemplate:[{type:r.ContentChild,args:[w,{static:!1}]}],loaderTemplate:[{type:r.ContentChild,args:[S,{static:!1}]}],contentContainer:[{type:r.ViewChild,args:["contentContainer",{static:!0}]}],editTemplate:[{type:r.ContentChild,args:[D,{static:!1}]}],listViewItems:[{type:r.ViewChildren,args:[f]}],data:[{type:r.Input}],loading:[{type:r.Input}],containerStyle:[{type:r.Input}],itemStyle:[{type:r.Input}],containerClass:[{type:r.Input}],itemClass:[{type:r.Input}],containerLabel:[{type:r.Input}],containerRole:[{type:r.Input}],listItemRole:[{type:r.Input}],navigable:[{type:r.Input}],pageSize:[{type:r.Input}],skip:[{type:r.Input}],pageable:[{type:r.Input}],height:[{type:r.Input}],scrollBottom:[{type:r.Output}],pageChange:[{type:r.Output}],pageSizeChange:[{type:r.Output}],edit:[{type:r.Output}],cancel:[{type:r.Output}],save:[{type:r.Output}],remove:[{type:r.Output}],add:[{type:r.Output}]}});Object.defineProperty(O.prototype,"data",{get:function(){return this._data},set:function(e){this._data=e||[],this.updateListViewData()},enumerable:!1,configurable:!0}),O.prototype.ngOnInit=function(){this.subscriptions.add(this.listView.pageChange.subscribe(this.handlePageChange.bind(this))),this.subscriptions.add(this.listView.pageSizeChange.subscribe(this.handlePageSizeChange.bind(this))),this.updateListViewData()},O.prototype.ngOnDestroy=function(){this.subscriptions.unsubscribe()},O.prototype.handlePageChange=function(e){this.listView.skip=e.skip,this.listView.pageSize=e.take,this.updateListViewData()},O.prototype.handlePageSizeChange=function(e){this.listView.pageSize=Number(e.newPageSize)},O.prototype.updateListViewData=function(){var e=this.listView.skip||0,t=e+(this.listView.pageSize||this.data.length);this.listView.data={data:this.data.slice(e,t),total:this.data.length}};m=O;function O(e){this.listView=e,this.subscriptions=new n.Subscription}m.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:m,deps:[{token:V}],target:d.ɵɵFactoryTarget.Directive}),m.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:m,selector:"[kendoListViewBinding]",inputs:{data:["kendoListViewBinding","data"]},ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:m,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewBinding]"}]}],ctorParameters:function(){return[{type:V}]},propDecorators:{data:[{type:r.Input,args:["kendoListViewBinding"]}]}});var G=function(e,t){return(G=Object.setPrototypeOf||({__proto__:[]}instanceof Array?function(e,t){e.__proto__=t}:function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}))(e,t)};function R(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}G(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;Object.create;R(U,q=o.PageSizeChangeEvent);var q,B=U;function U(){return null!==q&&q.apply(this,arguments)||this}R(Q,X=l.Button),Q.prototype.clickHandler=function(e){e.preventDefault();e=c(this.elementRef.nativeElement);this.editService.beginEdit(e)};var X,u=Q;function Q(e,t,n,i,a){n=X.call(this,t,n,null,i,a)||this;return n.editService=e,n.elementRef=t,n}u.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:u,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),u.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:u,selector:"[kendoListViewEditCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:u,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewEditCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});R(W,J=l.Button),W.prototype.clickHandler=function(e){e.preventDefault(),this.editService.beginAdd()};var J,t=W;function W(e,t,n,i,a){t=J.call(this,t,n,null,i,a)||this;return t.editService=e,t}t.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:t,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),t.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:t,selector:"[kendoListViewAddCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:t,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewAddCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});R(ee,Y=l.Button),ee.prototype.clickHandler=function(e){e.preventDefault();e=c(this.elementRef.nativeElement);this.editService.isEdited(e)&&this.editService.save(e)};var Y,L=ee;function ee(e,t,n,i,a){n=Y.call(this,t,n,null,i,a)||this;return n.editService=e,n.elementRef=t,n}L.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:L,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),L.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:L,selector:"[kendoListViewSaveCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:L,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewSaveCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});R(ne,te=l.Button),ne.prototype.clickHandler=function(e){e.preventDefault();e=c(this.elementRef.nativeElement);this.editService.isEdited(e)&&this.editService.endEdit(e)};var te,N=ne;function ne(e,t,n,i,a){n=te.call(this,t,n,null,i,a)||this;return n.editService=e,n.elementRef=t,n}N.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:N,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),N.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:N,selector:"[kendoListViewCancelCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:N,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewCancelCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});R(ae,ie=l.Button),ae.prototype.clickHandler=function(e){e.preventDefault();e=c(this.elementRef.nativeElement);this.editService.remove(e)};var ie,l=ae;function ae(e,t,n,i,a){n=ie.call(this,t,n,null,i,a)||this;return n.editService=e,n.elementRef=t,n}l.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:l,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),l.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:l,selector:"[kendoListViewRemoveCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:l,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewRemoveCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});Object.defineProperty(re.prototype,"templateContext",{set:function(e){this.insertedViewRef&&(this.viewContainerRef.remove(this.viewContainerRef.indexOf(this.insertedViewRef)),this.insertedViewRef=void 0),e.templateRef&&(this.insertedViewRef=this.viewContainerRef.createEmbeddedView(e.templateRef,e))},enumerable:!1,configurable:!0});var F=re;function re(e){this.viewContainerRef=e}F.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:F,deps:[{token:d.ViewContainerRef}],target:d.ɵɵFactoryTarget.Directive}),F.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:F,selector:"[templateContext]",inputs:{templateContext:"templateContext"},ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:F,decorators:[{type:r.Directive,args:[{selector:"[templateContext]"}]}],ctorParameters:function(){return[{type:d.ViewContainerRef}]},propDecorators:{templateContext:[{type:r.Input}]}});var oe=[C,b,w,S],se=[m],le=[D,u,N,L,l,t],P=function(){};P.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:P,deps:[],target:d.ɵɵFactoryTarget.NgModule}),P.ɵmod=d.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:P,declarations:[C,b,w,S,m,D,u,N,L,l,t,V,F,f],imports:[s.CommonModule,o.PagerModule,a.EventsModule],exports:[C,b,w,S,m,D,u,N,L,l,t,V,s.CommonModule,a.EventsModule]}),P.ɵinj=d.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:P,imports:[[s.CommonModule,o.PagerModule,a.EventsModule],s.CommonModule,a.EventsModule]}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:d,type:P,decorators:[{type:r.NgModule,args:[{declarations:[oe,se,le,V,F,f],exports:[oe,se,le,V,s.CommonModule,a.EventsModule],imports:[s.CommonModule,o.PagerModule,a.EventsModule]}]}]}),e.AddCommandDirective=t,e.CancelCommandDirective=N,e.DataBindingDirective=m,e.EditCommandDirective=u,e.EditTemplateDirective=D,e.FooterTemplateDirective=w,e.HeaderTemplateDirective=b,e.ItemTemplateDirective=C,e.ListViewComponent=V,e.ListViewModule=P,e.LoaderTemplateDirective=S,e.PageSizeChangeEvent=B,e.RemoveCommandDirective=l,e.SaveCommandDirective=L,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-angular-common"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-l10n"),require("rxjs"),require("@angular/forms"),require("rxjs/operators"),require("@progress/kendo-angular-pager"),require("@angular/common"),require("@progress/kendo-angular-buttons")):"function"==typeof define&&define.amd?define("KendoAngularListview",["exports","@angular/core","@progress/kendo-angular-common","@progress/kendo-licensing","@progress/kendo-angular-l10n","rxjs","@angular/forms","rxjs/operators","@progress/kendo-angular-pager","@angular/common","@progress/kendo-angular-buttons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularListview={},e.ng.core,e.KendoAngularCommon,e.KendoLicensing,e.KendoAngularL10N,e.rxjs,e.ng.forms,e.rxjs.operators,e.KendoAngularPager,e.ng.common,e.KendoAngularButtons)}(this,function(e,r,a,z,t,n,i,j,o,s,l){"use strict";function p(n){var i;return n&&n.__esModule?n:(i=Object.create(null),n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),i.default=n,Object.freeze(i))}function A(e,t){var n=e.matches||e.msMatchesSelector||e.webkitMatchesSelector;return!!v(n)&&n.call(e,t)}function M(e){return!!v(e)&&A(e,K)}function H(e){return v(e)?Number(e.getAttribute("data-kendo-listview-item-index")):null}function _(e,t){for(var n=e;null!==n&&1===n.nodeType;){if(A(n,t))return n;n=n.parentElement||n.parentNode}return null}function c(e){return v(e)?(e=_(e,K),H(e)):null}var d=p(r),B=p(a),g=p(t),m=p(o),u=p(s),Z={name:"@progress/kendo-angular-listview",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1669715421,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"},K=".k-listview-item",v=function(e){return null!=e},h=(Object.defineProperty(y.prototype,"isEnabled",{get:function(){return v(this.activeIndex)},set:function(e){this.activeIndex=e?0:null,this.changes.next()},enumerable:!1,configurable:!0}),y.prototype.isActive=function(e){return e===this.activeIndex},y.prototype.handleKeyDown=function(e,t){switch(e.keyCode){case a.Keys.ArrowLeft:case a.Keys.ArrowUp:this.navigateToPrevious();break;case a.Keys.ArrowRight:case a.Keys.ArrowDown:this.navigateToNext(t);break;case a.Keys.Home:this.navigateTo(0);break;case a.Keys.End:this.navigateTo(t-1);break;default:return}e.preventDefault()},y.prototype.handleFocusIn=function(e){var t,e=e.target;M(e)?(t=H(e),this.isFocused&&t===this.activeIndex||(this.activeIndex=t,this.isFocused=!0,this.changes.next())):(t=_(e,".k-listview-item"),v(t)&&(e=H(t),this.setActiveIndex(e)))},y.prototype.handleFocusOut=function(e){M(e.target)&&!M(v((e=e).relatedTarget)&&a.isDocumentAvailable()?e.relatedTarget||document.activeElement:null)&&(this.isFocused=!1,this.changes.next())},y.prototype.setActiveIndex=function(e){this.isEnabled&&e!==this.activeIndex&&(this.activeIndex=e,this.changes.next())},y.prototype.focusIndex=function(e,t){var n;this.isEnabled&&(e=parseInt(e,10),t=t-1,n=isNaN(e)?this.activeIndex:(n=0,t=t,!v(e=e)||e<=n?n:t<=e?t:e),this.navigateTo(n))},y.prototype.navigateTo=function(e){this.isFocused&&this.activeIndex===e||(this.isFocused=!0,this.activeIndex=e,this.changes.next())},y.prototype.navigateToPrevious=function(){var e=Math.max(this.activeIndex-1,0);this.navigateTo(e)},y.prototype.navigateToNext=function(e){e=Math.min(this.activeIndex+1,e-1);this.navigateTo(e)},y);function y(){this.changes=new n.Subject,this.isFocused=!1,this.activeIndex=null}h.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:h,deps:[],target:d.ɵɵFactoryTarget.Injectable}),h.ɵprov=d.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:h}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:h,decorators:[{type:r.Injectable}]});I.prototype.ngOnChanges=function(){this.updateNavigationState()},I.prototype.ngOnInit=function(){this.navigationSubscription=this.navigationService.changes.subscribe(this.updateNavigationState.bind(this))},I.prototype.ngOnDestroy=function(){v(this.navigationSubscription)&&this.navigationSubscription.unsubscribe()},I.prototype.updateNavigationState=function(){this.updateTabIndex(),this.updateFocusedState()},I.prototype.updateFocusedState=function(){var e="k-focus";this.navigationService.isActive(this.index)&&this.navigationService.isFocused?(this.renderer.addClass(this.hostElement.nativeElement,e),this.hostElement.nativeElement.focus()):this.renderer.removeClass(this.hostElement.nativeElement,e)},I.prototype.updateTabIndex=function(){this.navigationService.isEnabled?this.navigationService.isActive(this.index)?this.renderer.setAttribute(this.hostElement.nativeElement,"tabindex","0"):this.renderer.setAttribute(this.hostElement.nativeElement,"tabindex","-1"):this.renderer.removeAttribute(this.hostElement.nativeElement,"tabindex")};var f=I;function I(e,t,n){this.hostElement=e,this.renderer=t,this.navigationService=n}f.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:f,deps:[{token:d.ElementRef},{token:d.Renderer2},{token:h}],target:d.ɵɵFactoryTarget.Directive}),f.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:f,selector:"[kendoListViewNavigableItem]",inputs:{index:"index"},usesOnChanges:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:f,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewNavigableItem]"}]}],ctorParameters:function(){return[{type:d.ElementRef},{type:d.Renderer2},{type:h}]},propDecorators:{index:[{type:r.Input}]}});function k(e){return-1===e||void 0===e}var b=function(e){this.templateRef=e},C=(b.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:b,deps:[{token:d.TemplateRef}],target:d.ɵɵFactoryTarget.Directive}),b.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:b,selector:"[kendoListViewItemTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:b,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewItemTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef}]}}),function(e){this.templateRef=e}),w=(C.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:C,deps:[{token:d.TemplateRef}],target:d.ɵɵFactoryTarget.Directive}),C.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:C,selector:"[kendoListViewHeaderTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:C,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewHeaderTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef}]}}),function(e){this.templateRef=e}),S=(w.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:w,deps:[{token:d.TemplateRef}],target:d.ɵɵFactoryTarget.Directive}),w.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:w,selector:"[kendoListViewFooterTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:w,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewFooterTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef}]}}),function(e){this.templateRef=e}),D=(S.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:S,deps:[{token:d.TemplateRef}],target:d.ɵɵFactoryTarget.Directive}),S.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:S,selector:"[kendoListViewLoaderTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:S,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewLoaderTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef}]}}),function(e){this.templateRef=e}),T=(D.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:D,deps:[{token:d.TemplateRef,optional:!0}],target:d.ɵɵFactoryTarget.Directive}),D.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:D,selector:"[kendoListViewEditTemplate]",ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:D,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewEditTemplate]"}]}],ctorParameters:function(){return[{type:d.TemplateRef,decorators:[{type:r.Optional}]}]}}),x.prototype.editItem=function(e,t){this.editedIndices.push({index:e,group:t=void 0===t?void 0:t}),this.onChanged()},x.prototype.addItem=function(e){this.newItem={group:e},this.onChanged()},x.prototype.isEditing=function(){return 0<this.editedIndices.length},Object.defineProperty(x.prototype,"hasNewItem",{get:function(){return v(this.newItem)},enumerable:!1,configurable:!0}),Object.defineProperty(x.prototype,"newDataItem",{get:function(){return this.hasNewItem?this.newItem.group.value:{}},enumerable:!1,configurable:!0}),Object.defineProperty(x.prototype,"newItemGroup",{get:function(){return this.hasNewItem?this.newItem.group:new i.FormGroup({})},enumerable:!1,configurable:!0}),x.prototype.editGroup=function(e){return this.context(e).group},x.prototype.close=function(e){var t;k(e)?this.newItem=void 0:(this.editedIndices=this.editedIndices.filter((t=e,function(e){return e.index!==t})),this.onChanged())},x.prototype.context=function(e){return k(e)?this.newItem:this.findByIndex(e)},x.prototype.isEdited=function(e){return!(!k(e)||!v(this.newItem))||v(this.findByIndex(e))},x.prototype.hasEdited=function(e){return v(this.context(e))},x.prototype.beginEdit=function(e){this.changes.emit({action:"edit",itemIndex:e})},x.prototype.beginAdd=function(){this.changes.emit({action:"add"})},x.prototype.endEdit=function(e){var t=this.context(e).group;this.changes.emit({action:"cancel",itemIndex:e,formGroup:t,isNew:k(e)})},x.prototype.save=function(e){var t=this.context(e).group;this.changes.emit({action:"save",itemIndex:e,formGroup:t,isNew:k(e)})},x.prototype.remove=function(e){this.changes.emit({action:"remove",itemIndex:e})},x.prototype.findByIndex=function(e){return this.editedIndices.find((t=e,function(e){return e.index===t}));var t},x.prototype.onChanged=function(){var e=this;this.ngZone.runOutsideAngular(function(){e.changedSource.next()})},x);function x(e){var t=this;this.ngZone=e,this.changes=new r.EventEmitter,this.editedIndices=[],this.changedSource=new n.Subject,this.changed=this.changedSource.asObservable().pipe(j.switchMap(function(){return t.ngZone.onStable.asObservable().pipe(j.take(1))}))}T.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:T,deps:[{token:d.NgZone}],target:d.ɵɵFactoryTarget.Injectable}),T.ɵprov=d.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:T}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:T,decorators:[{type:r.Injectable}],ctorParameters:function(){return[{type:d.NgZone}]}});var $={position:"bottom",buttonCount:5,info:!0,previousNext:!0,type:"numeric",pageSizeValues:[5,10,20]},V=(Object.defineProperty(E.prototype,"navigable",{get:function(){return this._navigable},set:function(e){!e&&v(this.removeNavigationListeners)?(this.removeNavigationListeners(),this.removeNavigationListeners=null,this.navigationService.isEnabled=!1):e&&!v(this.removeNavigationListeners)&&(this.addNavigationListeners(),this.navigationService.isEnabled=!0),this._navigable=e},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"skip",{get:function(){return this._skip},set:function(e){e=parseInt(e,10);this._skip=isNaN(e)?0:e},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"pageable",{get:function(){return this._pageable},set:function(e){this._pageable=e,this.pagerSettings=e?Object.assign({},$,e):null},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"items",{get:function(){return v(this.data)?(Array.isArray(this.data)?this:this.data).data:[]},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"total",{get:function(){if(this.pageable)return v(this.data)?Array.isArray(this.data)?this.data.length:this.data.total:0},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"containerTabindex",{get:function(){return this.navigable?-1:null},enumerable:!1,configurable:!0}),Object.defineProperty(E.prototype,"activeIndex",{get:function(){return this.navigationService.activeIndex},enumerable:!1,configurable:!0}),E.prototype.ngOnChanges=function(e){a.isChanged("height",e,!1)&&this.renderer.setStyle(this.element.nativeElement,"height",this.height+"px")},E.prototype.ngOnDestroy=function(){v(this.editServiceSubscription)&&this.editServiceSubscription.unsubscribe()},E.prototype.templateContext=function(e){return{$implicit:this.items[e],isLast:e===this.items.length-1,isFirst:0===e,dataItem:this.items[e],index:e}},E.prototype.editTemplateContext=function(e){var t=-1===e,n=t?this.editService.newItemGroup:this.editService.editGroup(e);return{$implicit:n,formGroup:n,dataItem:t?this.editService.newDataItem:this.items[e],isNew:t,index:e}},E.prototype.focus=function(e){var t=this.listViewItems.length;this.navigationService.focusIndex(e,t)},E.prototype.addItem=function(e){var t,n;e instanceof i.FormGroup||(t=Object.keys(e).reduce((n=e,function(e,t){return e[t]=new i.FormControl(n[t]),e}),{}),e=new i.FormGroup(t)),this.editService.addItem(e)},E.prototype.editItem=function(e,t){this.editService.editItem(e,t)},E.prototype.closeItem=function(e){this.editService.close(e)},E.prototype.isEdited=function(e){return this.editService.isEdited(e)},E.prototype.handlePageChange=function(e){this.scrollToContainerTop();this.navigationService.setActiveIndex(0),this.pageChange.emit(e)},E.prototype.handleContentScroll=function(){var e,t,n,i=this;a.hasObservers(this.scrollBottom)&&(t=(e=this.contentContainer.nativeElement).scrollHeight,n=e.scrollTop,t-e.clientHeight-n<=2)&&this.ngZone.run(function(){i.scrollBottom.emit({sender:i})})},E.prototype.itemPosInSet=function(e){if(this.pageable)return this.skip+e+1},E.prototype.scrollToContainerTop=function(){var e=this.contentContainer.nativeElement;e.scrollTop=0,e.scrollLeft=0},E.prototype.addNavigationListeners=function(){var i=this;this.ngZone.runOutsideAngular(function(){var e=i.renderer.listen(i.contentContainer.nativeElement,"keydown",function(e){return i.navigationService.handleKeyDown(e,i.listViewItems.length)}),t=i.renderer.listen(i.contentContainer.nativeElement,"focusin",function(e){return i.navigationService.handleFocusIn(e)}),n=i.renderer.listen(i.contentContainer.nativeElement,"focusout",function(e){return i.navigationService.handleFocusOut(e)});i.removeNavigationListeners=function(){e(),t(),n()}})},E.prototype.attachEditHandlers=function(){v(this.editService)&&(this.editServiceSubscription=this.editService.changes.subscribe(this.emitCRUDEvent.bind(this)))},E.prototype.emitCRUDEvent=function(e){var t=e.action,n=e.itemIndex,i=e.formGroup,n=this.items[n];"add"!==t&&i&&(n=i.value),Object.assign(e,{dataItem:n,sender:this}),this[t].emit(e)},E);function E(e,t,n,i,a){this.ngZone=e,this.element=t,this.renderer=n,this.editService=i,this.navigationService=a,this.className=!0,this.loading=!1,this.containerRole="list",this.listItemRole="listitem",this.scrollBottom=new r.EventEmitter,this.pageChange=new r.EventEmitter,this.pageSizeChange=new r.EventEmitter,this.edit=new r.EventEmitter,this.cancel=new r.EventEmitter,this.save=new r.EventEmitter,this.remove=new r.EventEmitter,this.add=new r.EventEmitter,this._skip=0,this._navigable=!1,z.validatePackage(Z),this.attachEditHandlers()}V.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:V,deps:[{token:d.NgZone},{token:d.ElementRef},{token:d.Renderer2},{token:T},{token:h}],target:d.ɵɵFactoryTarget.Component}),V.ɵcmp=d.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.17",type:V,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:[T,h,t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.listview"}],queries:[{propertyName:"itemTemplate",first:!0,predicate:b,descendants:!0},{propertyName:"headerTemplate",first:!0,predicate:C,descendants:!0},{propertyName:"footerTemplate",first:!0,predicate:w,descendants:!0},{propertyName:"loaderTemplate",first:!0,predicate:S,descendants:!0},{propertyName:"editTemplate",first:!0,predicate:D,descendants:!0}],viewQueries:[{propertyName:"contentContainer",first:!0,predicate:["contentContainer"],descendants:!0,static:!0},{propertyName:"listViewItems",predicate:f,descendants:!0}],exportAs:["kendoListView"],usesOnChanges:!0,ngImport:d,template:'\n        \x3c!-- top pager --\x3e\n        <ng-template\n            *ngIf="pagerSettings?.position !== \'bottom\'"\n            [ngTemplateOutlet]="pagerTemplate"\n            [ngTemplateOutletContext]="{ pagerClass: \'k-listview-pager k-listview-pager-top\' }"\n        >\n        </ng-template>\n\n        \x3c!-- header --\x3e\n        <div\n            *ngIf="headerTemplate"\n            class="k-listview-header"\n        >\n            <ng-template\n                [ngTemplateOutlet]="headerTemplate?.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- content --\x3e\n        <div\n            #contentContainer\n            [attr.tabindex]="containerTabindex"\n            class="k-listview-content"\n            [ngClass]="containerClass"\n            [ngStyle]="containerStyle"\n            [kendoEventsOutsideAngular]="{\n                scroll: handleContentScroll\n            }"\n            [scope]="this"\n            [attr.role]="containerRole"\n            [attr.aria-label]="containerLabel"\n        >\n            \x3c!-- new item edit template --\x3e\n            <div\n                *ngIf="editService.hasNewItem"\n                class="k-listview-item"\n                [attr.role]="listItemRole"\n                kendoListViewNavigableItem\n                [index]="-1"\n                [attr.data-kendo-listview-item-index]="-1"\n                [ngClass]="itemClass"\n                [ngStyle]="itemStyle"\n            >\n                <ng-template\n                    *ngIf="editTemplate"\n                    [ngTemplateOutlet]="editTemplate?.templateRef"\n                    [ngTemplateOutletContext]="editTemplateContext(-1)"\n                >\n                </ng-template>\n            </div>\n\n            \x3c!-- items --\x3e\n            <div\n                *ngFor="let dataItem of items; let index = index; let first = first; let last = last;"\n                class="k-listview-item"\n                [attr.role]="listItemRole"\n                [attr.aria-posinset]="itemPosInSet(index)"\n                [attr.aria-setsize]="total"\n                kendoListViewNavigableItem\n                [index]="index"\n                [attr.data-kendo-listview-item-index]="index"\n                [ngClass]="itemClass"\n                [ngStyle]="itemStyle"\n            >\n                <ng-template\n                    [ngTemplateOutlet]="isEdited(index) ? editTemplate?.templateRef : itemTemplate?.templateRef"\n                    [ngTemplateOutletContext]="isEdited(index) ? editTemplateContext(index) : templateContext(index)"\n                >\n                </ng-template>\n            </div>\n\n            \x3c!-- loading indicator --\x3e\n            <div\n                *ngIf="loading && !loaderTemplate"\n                class="k-loading-mask"\n            >\n                \x3c!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case --\x3e\n                <span class="k-loading-text">Loading</span>\n                <div class="k-loading-image"></div>\n                <div class="k-loading-color"></div>\n            </div>\n            <ng-template\n                *ngIf="loading && loaderTemplate"\n                [ngTemplateOutlet]="loaderTemplate.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- footer --\x3e\n        <div\n            *ngIf="footerTemplate"\n            class="k-listview-footer"\n        >\n            <ng-template\n                [ngTemplateOutlet]="footerTemplate?.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- bottom pager --\x3e\n        <ng-template\n            *ngIf="pagerSettings?.position !== \'top\'"\n            [ngTemplateOutlet]="pagerTemplate"\n            [ngTemplateOutletContext]="{ pagerClass: \'k-listview-pager\' }"\n        >\n        </ng-template>\n\n        \x3c!-- pager template --\x3e\n        <ng-template #pagerTemplate let-pagerClass="pagerClass">\n            <kendo-datapager\n                *ngIf="pageable"\n                [class]="pagerClass"\n                [total]="total"\n                [pageSize]="pageSize"\n                [skip]="skip"\n                [buttonCount]="pagerSettings.buttonCount"\n                [info]="pagerSettings.info"\n                [previousNext]="pagerSettings.previousNext"\n                [type]="pagerSettings.type"\n                [pageSizeValues]="pagerSettings.pageSizeValues"\n                (pageChange)="handlePageChange($event)"\n                (pageSizeChange)="pageSizeChange.emit($event)"\n            >\n            </kendo-datapager>\n        </ng-template>\n    ',isInline:!0,components:[{type:m.PagerComponent,selector:"kendo-datapager",inputs:["total","skip","pageSize","buttonCount","info","type","pageSizeValues","previousNext","navigable"],outputs:["pageChange","pageSizeChange"],exportAs:["kendoDataPager"]}],directives:[{type:u.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:u.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]},{type:u.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{type:u.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:B.EventsOutsideAngularDirective,selector:"[kendoEventsOutsideAngular]",inputs:["kendoEventsOutsideAngular","scope"]},{type:f,selector:"[kendoListViewNavigableItem]",inputs:["index"]},{type:u.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]}],changeDetection:d.ChangeDetectionStrategy.OnPush}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:V,decorators:[{type:r.Component,args:[{changeDetection:r.ChangeDetectionStrategy.OnPush,exportAs:"kendoListView",selector:"kendo-listview",providers:[T,h,t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.listview"}],template:'\n        \x3c!-- top pager --\x3e\n        <ng-template\n            *ngIf="pagerSettings?.position !== \'bottom\'"\n            [ngTemplateOutlet]="pagerTemplate"\n            [ngTemplateOutletContext]="{ pagerClass: \'k-listview-pager k-listview-pager-top\' }"\n        >\n        </ng-template>\n\n        \x3c!-- header --\x3e\n        <div\n            *ngIf="headerTemplate"\n            class="k-listview-header"\n        >\n            <ng-template\n                [ngTemplateOutlet]="headerTemplate?.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- content --\x3e\n        <div\n            #contentContainer\n            [attr.tabindex]="containerTabindex"\n            class="k-listview-content"\n            [ngClass]="containerClass"\n            [ngStyle]="containerStyle"\n            [kendoEventsOutsideAngular]="{\n                scroll: handleContentScroll\n            }"\n            [scope]="this"\n            [attr.role]="containerRole"\n            [attr.aria-label]="containerLabel"\n        >\n            \x3c!-- new item edit template --\x3e\n            <div\n                *ngIf="editService.hasNewItem"\n                class="k-listview-item"\n                [attr.role]="listItemRole"\n                kendoListViewNavigableItem\n                [index]="-1"\n                [attr.data-kendo-listview-item-index]="-1"\n                [ngClass]="itemClass"\n                [ngStyle]="itemStyle"\n            >\n                <ng-template\n                    *ngIf="editTemplate"\n                    [ngTemplateOutlet]="editTemplate?.templateRef"\n                    [ngTemplateOutletContext]="editTemplateContext(-1)"\n                >\n                </ng-template>\n            </div>\n\n            \x3c!-- items --\x3e\n            <div\n                *ngFor="let dataItem of items; let index = index; let first = first; let last = last;"\n                class="k-listview-item"\n                [attr.role]="listItemRole"\n                [attr.aria-posinset]="itemPosInSet(index)"\n                [attr.aria-setsize]="total"\n                kendoListViewNavigableItem\n                [index]="index"\n                [attr.data-kendo-listview-item-index]="index"\n                [ngClass]="itemClass"\n                [ngStyle]="itemStyle"\n            >\n                <ng-template\n                    [ngTemplateOutlet]="isEdited(index) ? editTemplate?.templateRef : itemTemplate?.templateRef"\n                    [ngTemplateOutletContext]="isEdited(index) ? editTemplateContext(index) : templateContext(index)"\n                >\n                </ng-template>\n            </div>\n\n            \x3c!-- loading indicator --\x3e\n            <div\n                *ngIf="loading && !loaderTemplate"\n                class="k-loading-mask"\n            >\n                \x3c!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case --\x3e\n                <span class="k-loading-text">Loading</span>\n                <div class="k-loading-image"></div>\n                <div class="k-loading-color"></div>\n            </div>\n            <ng-template\n                *ngIf="loading && loaderTemplate"\n                [ngTemplateOutlet]="loaderTemplate.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- footer --\x3e\n        <div\n            *ngIf="footerTemplate"\n            class="k-listview-footer"\n        >\n            <ng-template\n                [ngTemplateOutlet]="footerTemplate?.templateRef"\n            >\n            </ng-template>\n        </div>\n\n        \x3c!-- bottom pager --\x3e\n        <ng-template\n            *ngIf="pagerSettings?.position !== \'top\'"\n            [ngTemplateOutlet]="pagerTemplate"\n            [ngTemplateOutletContext]="{ pagerClass: \'k-listview-pager\' }"\n        >\n        </ng-template>\n\n        \x3c!-- pager template --\x3e\n        <ng-template #pagerTemplate let-pagerClass="pagerClass">\n            <kendo-datapager\n                *ngIf="pageable"\n                [class]="pagerClass"\n                [total]="total"\n                [pageSize]="pageSize"\n                [skip]="skip"\n                [buttonCount]="pagerSettings.buttonCount"\n                [info]="pagerSettings.info"\n                [previousNext]="pagerSettings.previousNext"\n                [type]="pagerSettings.type"\n                [pageSizeValues]="pagerSettings.pageSizeValues"\n                (pageChange)="handlePageChange($event)"\n                (pageSizeChange)="pageSizeChange.emit($event)"\n            >\n            </kendo-datapager>\n        </ng-template>\n    '}]}],ctorParameters:function(){return[{type:d.NgZone},{type:d.ElementRef},{type:d.Renderer2},{type:T},{type:h}]},propDecorators:{className:[{type:r.HostBinding,args:["class.k-widget"]},{type:r.HostBinding,args:["class.k-listview"]},{type:r.HostBinding,args:["class.k-listview-bordered"]},{type:r.HostBinding,args:["class.k-d-flex"]}],itemTemplate:[{type:r.ContentChild,args:[b,{static:!1}]}],headerTemplate:[{type:r.ContentChild,args:[C,{static:!1}]}],footerTemplate:[{type:r.ContentChild,args:[w,{static:!1}]}],loaderTemplate:[{type:r.ContentChild,args:[S,{static:!1}]}],contentContainer:[{type:r.ViewChild,args:["contentContainer",{static:!0}]}],editTemplate:[{type:r.ContentChild,args:[D,{static:!1}]}],listViewItems:[{type:r.ViewChildren,args:[f]}],data:[{type:r.Input}],loading:[{type:r.Input}],containerStyle:[{type:r.Input}],itemStyle:[{type:r.Input}],containerClass:[{type:r.Input}],itemClass:[{type:r.Input}],containerLabel:[{type:r.Input}],containerRole:[{type:r.Input}],listItemRole:[{type:r.Input}],navigable:[{type:r.Input}],pageSize:[{type:r.Input}],skip:[{type:r.Input}],pageable:[{type:r.Input}],height:[{type:r.Input}],scrollBottom:[{type:r.Output}],pageChange:[{type:r.Output}],pageSizeChange:[{type:r.Output}],edit:[{type:r.Output}],cancel:[{type:r.Output}],save:[{type:r.Output}],remove:[{type:r.Output}],add:[{type:r.Output}]}});Object.defineProperty(O.prototype,"data",{get:function(){return this._data},set:function(e){this._data=e||[],this.updateListViewData()},enumerable:!1,configurable:!0}),O.prototype.ngOnInit=function(){this.subscriptions.add(this.listView.pageChange.subscribe(this.handlePageChange.bind(this))),this.subscriptions.add(this.listView.pageSizeChange.subscribe(this.handlePageSizeChange.bind(this))),this.updateListViewData()},O.prototype.ngOnDestroy=function(){this.subscriptions.unsubscribe()},O.prototype.handlePageChange=function(e){this.listView.skip=e.skip,this.listView.pageSize=e.take,this.updateListViewData()},O.prototype.handlePageSizeChange=function(e){this.listView.pageSize=Number(e.newPageSize)},O.prototype.updateListViewData=function(){var e=this.listView.skip||0,t=e+(this.listView.pageSize||this.data.length);this.listView.data={data:this.data.slice(e,t),total:this.data.length}};m=O;function O(e){this.listView=e,this.subscriptions=new n.Subscription}m.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:m,deps:[{token:V}],target:d.ɵɵFactoryTarget.Directive}),m.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:m,selector:"[kendoListViewBinding]",inputs:{data:["kendoListViewBinding","data"]},ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:m,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewBinding]"}]}],ctorParameters:function(){return[{type:V}]},propDecorators:{data:[{type:r.Input,args:["kendoListViewBinding"]}]}});var G=function(e,t){return(G=Object.setPrototypeOf||({__proto__:[]}instanceof Array?function(e,t){e.__proto__=t}:function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}))(e,t)};function R(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}G(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;Object.create;R(U,q=o.PageSizeChangeEvent);var q,B=U;function U(){return null!==q&&q.apply(this,arguments)||this}R(Q,X=l.Button),Q.prototype.clickHandler=function(e){e.preventDefault();e=c(this.elementRef.nativeElement);this.editService.beginEdit(e)};var X,u=Q;function Q(e,t,n,i,a){n=X.call(this,t,n,null,i,a)||this;return n.editService=e,n.elementRef=t,n}u.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:u,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),u.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:u,selector:"[kendoListViewEditCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:u,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewEditCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});R(W,J=l.Button),W.prototype.clickHandler=function(e){e.preventDefault(),this.editService.beginAdd()};var J,t=W;function W(e,t,n,i,a){t=J.call(this,t,n,null,i,a)||this;return t.editService=e,t}t.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:t,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),t.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:t,selector:"[kendoListViewAddCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:t,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewAddCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});R(ee,Y=l.Button),ee.prototype.clickHandler=function(e){e.preventDefault();e=c(this.elementRef.nativeElement);this.editService.isEdited(e)&&this.editService.save(e)};var Y,L=ee;function ee(e,t,n,i,a){n=Y.call(this,t,n,null,i,a)||this;return n.editService=e,n.elementRef=t,n}L.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:L,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),L.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:L,selector:"[kendoListViewSaveCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:L,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewSaveCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});R(ne,te=l.Button),ne.prototype.clickHandler=function(e){e.preventDefault();e=c(this.elementRef.nativeElement);this.editService.isEdited(e)&&this.editService.endEdit(e)};var te,N=ne;function ne(e,t,n,i,a){n=te.call(this,t,n,null,i,a)||this;return n.editService=e,n.elementRef=t,n}N.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:N,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),N.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:N,selector:"[kendoListViewCancelCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:N,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewCancelCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});R(ae,ie=l.Button),ae.prototype.clickHandler=function(e){e.preventDefault();e=c(this.elementRef.nativeElement);this.editService.remove(e)};var ie,l=ae;function ae(e,t,n,i,a){n=ie.call(this,t,n,null,i,a)||this;return n.editService=e,n.elementRef=t,n}l.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:l,deps:[{token:T},{token:d.ElementRef},{token:d.Renderer2},{token:g.LocalizationService},{token:d.NgZone}],target:d.ɵɵFactoryTarget.Directive}),l.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:l,selector:"[kendoListViewRemoveCommand]",host:{listeners:{click:"clickHandler($event)"}},usesInheritance:!0,ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:l,decorators:[{type:r.Directive,args:[{selector:"[kendoListViewRemoveCommand]"}]}],ctorParameters:function(){return[{type:T},{type:d.ElementRef},{type:d.Renderer2},{type:g.LocalizationService},{type:d.NgZone}]},propDecorators:{clickHandler:[{type:r.HostListener,args:["click",["$event"]]}]}});Object.defineProperty(re.prototype,"templateContext",{set:function(e){this.insertedViewRef&&(this.viewContainerRef.remove(this.viewContainerRef.indexOf(this.insertedViewRef)),this.insertedViewRef=void 0),e.templateRef&&(this.insertedViewRef=this.viewContainerRef.createEmbeddedView(e.templateRef,e))},enumerable:!1,configurable:!0});var F=re;function re(e){this.viewContainerRef=e}F.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:F,deps:[{token:d.ViewContainerRef}],target:d.ɵɵFactoryTarget.Directive}),F.ɵdir=d.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.17",type:F,selector:"[templateContext]",inputs:{templateContext:"templateContext"},ngImport:d}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:F,decorators:[{type:r.Directive,args:[{selector:"[templateContext]"}]}],ctorParameters:function(){return[{type:d.ViewContainerRef}]},propDecorators:{templateContext:[{type:r.Input}]}});var oe=[b,C,w,S],se=[m],le=[D,u,N,L,l,t],P=function(){};P.ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:P,deps:[],target:d.ɵɵFactoryTarget.NgModule}),P.ɵmod=d.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:P,declarations:[b,C,w,S,m,D,u,N,L,l,t,V,F,f],imports:[s.CommonModule,o.PagerModule,a.EventsModule],exports:[b,C,w,S,m,D,u,N,L,l,t,V,s.CommonModule,a.EventsModule]}),P.ɵinj=d.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:P,imports:[[s.CommonModule,o.PagerModule,a.EventsModule],s.CommonModule,a.EventsModule]}),d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.17",ngImport:d,type:P,decorators:[{type:r.NgModule,args:[{declarations:[oe,se,le,V,F,f],exports:[oe,se,le,V,s.CommonModule,a.EventsModule],imports:[s.CommonModule,o.PagerModule,a.EventsModule]}]}]}),e.AddCommandDirective=t,e.CancelCommandDirective=N,e.DataBindingDirective=m,e.EditCommandDirective=u,e.EditTemplateDirective=D,e.FooterTemplateDirective=w,e.HeaderTemplateDirective=C,e.ItemTemplateDirective=b,e.ListViewComponent=V,e.ListViewModule=P,e.LoaderTemplateDirective=S,e.PageSizeChangeEvent=B,e.RemoveCommandDirective=l,e.SaveCommandDirective=L,Object.defineProperty(e,"__esModule",{value:!0})});

package/esm2015/data-binding/data-binding.directive.js

@@ -50,9 +50,9 @@ export class DataBindingDirective {
         };
     }
 }
-DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.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: [{
+DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
+DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DataBindingDirective, selector: "[kendoListViewBinding]", inputs: { data: ["kendoListViewBinding", "data"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewBinding]'

package/esm2015/editing/commands/add-command.directive.js

@@ -36,9 +36,9 @@ export class AddCommandDirective extends Button {
         this.editService.beginAdd();
     }
 }
-AddCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AddCommandDirective, deps: [{ token: i1.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: [{
+AddCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddCommandDirective, deps: [{ token: i1.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.17", type: AddCommandDirective, selector: "[kendoListViewAddCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewAddCommand]'

package/esm2015/editing/commands/cancel-command.directive.js

@@ -52,9 +52,9 @@ export class CancelCommandDirective extends Button {
         }
     }
 }
-CancelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CancelCommandDirective, deps: [{ token: i1.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: [{
+CancelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CancelCommandDirective, deps: [{ token: i1.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.17", type: CancelCommandDirective, selector: "[kendoListViewCancelCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CancelCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewCancelCommand]'

package/esm2015/editing/commands/edit-command.directive.js

@@ -40,9 +40,9 @@ export class EditCommandDirective extends Button {
         this.editService.beginEdit(index);
     }
 }
-EditCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditCommandDirective, deps: [{ token: i1.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: [{
+EditCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditCommandDirective, deps: [{ token: i1.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.17", type: EditCommandDirective, selector: "[kendoListViewEditCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewEditCommand]'

package/esm2015/editing/commands/remove-command.directive.js

@@ -39,9 +39,9 @@ export class RemoveCommandDirective extends Button {
         this.editService.remove(index);
     }
 }
-RemoveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: i1.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: [{
+RemoveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: i1.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.17", type: RemoveCommandDirective, selector: "[kendoListViewRemoveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewRemoveCommand]'

package/esm2015/editing/commands/save-command.directive.js

@@ -52,9 +52,9 @@ export class SaveCommandDirective extends Button {
         }
     }
 }
-SaveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SaveCommandDirective, deps: [{ token: i1.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: [{
+SaveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SaveCommandDirective, deps: [{ token: i1.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.17", type: SaveCommandDirective, selector: "[kendoListViewSaveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SaveCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewSaveCommand]'

package/esm2015/editing/edit-template.directive.js

@@ -21,9 +21,9 @@ export class EditTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: EditTemplateDirective, selector: "[kendoListViewEditTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewEditTemplate]'

package/esm2015/editing/edit.service.js

@@ -109,8 +109,8 @@ export class 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: [{
+EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

package/esm2015/listview.component.js

@@ -58,15 +58,15 @@ export class ListViewComponent {
         /**
          * Specifies the content container `role` attribute
          * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-         * By default, the container `role` is set to `listbox`.
+         * By default, the container `role` is set to `list`.
          */
-        this.containerRole = 'listbox';
+        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 `option`.
+         * By default, the list item `role` is set to `listitem`.
          */
-        this.listItemRole = 'option';
+        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)).
@@ -176,6 +176,9 @@ export class ListViewComponent {
      * If a ListViewDataResult is passed, the total value is used. If an array is passed - its length is used.
      */
     get total() {
+        if (!this.pageable) {
+            return;
+        }
         if (!isPresent(this.data)) {
             return 0;
         }
@@ -316,6 +319,9 @@ export class ListViewComponent {
      * @hidden
      */
     itemPosInSet(index) {
+        if (!this.pageable) {
+            return;
+        }
         // adds 1 as the aria-posinset is not zero-based and the counting starts from 1
         return this.skip + index + 1;
     }
@@ -356,8 +362,8 @@ export class ListViewComponent {
         this[action].emit(args);
     }
 }
-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: i1.EditService }, { token: i2.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: [
+ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.EditService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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,
@@ -492,8 +498,8 @@ ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             >
             </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: i6.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: [{
+    `, isInline: true, components: [{ type: i3.PagerComponent, selector: "kendo-datapager", inputs: ["total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable"], 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: i6.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.17", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,

package/esm2015/listview.module.js

@@ -52,8 +52,8 @@ const EDITING_DIRECTIVES = [
  */
 export 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,
+ListViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ListViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewModule, declarations: [ItemTemplateDirective,
         HeaderTemplateDirective,
         FooterTemplateDirective,
         LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective,
@@ -76,13 +76,13 @@ ListViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AddCommandDirective, ListViewComponent,
         CommonModule,
         EventsModule] });
-ListViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewModule, imports: [[
+ListViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewModule, imports: [[
             CommonModule,
             PagerModule,
             EventsModule
         ], CommonModule,
         EventsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2015/navigation/listview-navigable-item.directive.js

@@ -54,9 +54,9 @@ export class 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: i1.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: [{
+ListViewNavigableItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewNavigableItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
+ListViewNavigableItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: { index: "index" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewNavigableItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewNavigableItem]'

package/esm2015/navigation/navigation.service.js

@@ -151,8 +151,8 @@ export class NavigationService {
         this.navigateTo(nextIndex);
     }
 }
-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: [{
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }] });

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-listview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668698801,
+    publishDate: 1669715421,
     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'
 };

package/esm2015/templates/footer-template.directive.js

@@ -14,9 +14,9 @@ export class FooterTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FooterTemplateDirective, selector: "[kendoListViewFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewFooterTemplate]'

package/esm2015/templates/header-template.directive.js

@@ -14,9 +14,9 @@ export class HeaderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: HeaderTemplateDirective, selector: "[kendoListViewHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewHeaderTemplate]'

package/esm2015/templates/item-template.directive.js

@@ -20,9 +20,9 @@ export class ItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ItemTemplateDirective, selector: "[kendoListViewItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewItemTemplate]'

package/esm2015/templates/loader-template.directive.js

@@ -14,9 +14,9 @@ export class LoaderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+LoaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LoaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LoaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: LoaderTemplateDirective, selector: "[kendoListViewLoaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LoaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewLoaderTemplate]'

package/esm2015/templates/template-context.directive.js

@@ -21,9 +21,9 @@ export class TemplateContextDirective {
         }
     }
 }
-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: [{
+TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[templateContext]' // eslint-disable-line

package/fesm2015/kendo-angular-listview.js

@@ -25,7 +25,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668698801,
+    publishDate: 1669715421,
     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'
 };
@@ -273,9 +273,9 @@ class NavigationService {
         this.navigateTo(nextIndex);
     }
 }
-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: [{
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }] });
 
@@ -327,9 +327,9 @@ class 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: [{
+ListViewNavigableItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: { index: "index" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewNavigableItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewNavigableItem]'
@@ -354,9 +354,9 @@ class ItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: ItemTemplateDirective, selector: "[kendoListViewItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewItemTemplate]'
@@ -373,9 +373,9 @@ class HeaderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: HeaderTemplateDirective, selector: "[kendoListViewHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewHeaderTemplate]'
@@ -392,9 +392,9 @@ class FooterTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: FooterTemplateDirective, selector: "[kendoListViewFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: FooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewFooterTemplate]'
@@ -411,9 +411,9 @@ class LoaderTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+LoaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LoaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LoaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: LoaderTemplateDirective, selector: "[kendoListViewLoaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LoaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewLoaderTemplate]'
@@ -437,9 +437,9 @@ class EditTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-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: [{
+EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: EditTemplateDirective, selector: "[kendoListViewEditTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewEditTemplate]'
@@ -549,9 +549,9 @@ class 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: [{
+EditService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+EditService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -589,15 +589,15 @@ class ListViewComponent {
         /**
          * Specifies the content container `role` attribute
          * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-         * By default, the container `role` is set to `listbox`.
+         * By default, the container `role` is set to `list`.
          */
-        this.containerRole = 'listbox';
+        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 `option`.
+         * By default, the list item `role` is set to `listitem`.
          */
-        this.listItemRole = 'option';
+        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)).
@@ -707,6 +707,9 @@ class ListViewComponent {
      * If a ListViewDataResult is passed, the total value is used. If an array is passed - its length is used.
      */
     get total() {
+        if (!this.pageable) {
+            return;
+        }
         if (!isPresent(this.data)) {
             return 0;
         }
@@ -847,6 +850,9 @@ class ListViewComponent {
      * @hidden
      */
     itemPosInSet(index) {
+        if (!this.pageable) {
+            return;
+        }
         // adds 1 as the aria-posinset is not zero-based and the counting starts from 1
         return this.skip + index + 1;
     }
@@ -887,8 +893,8 @@ class ListViewComponent {
         this[action].emit(args);
     }
 }
-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: [
+ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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,
@@ -1023,8 +1029,8 @@ ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             >
             </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: [{
+    `, isInline: true, components: [{ type: i3.PagerComponent, selector: "kendo-datapager", inputs: ["total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable"], 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.17", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1291,9 +1297,9 @@ class 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: [{
+DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
+DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: DataBindingDirective, selector: "[kendoListViewBinding]", inputs: { data: ["kendoListViewBinding", "data"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: DataBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewBinding]'
@@ -1342,9 +1348,9 @@ class EditCommandDirective extends Button {
         this.editService.beginEdit(index);
     }
 }
-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: [{
+EditCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: EditCommandDirective, selector: "[kendoListViewEditCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EditCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewEditCommand]'
@@ -1383,9 +1389,9 @@ class AddCommandDirective extends Button {
         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: [{
+AddCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: AddCommandDirective, selector: "[kendoListViewAddCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewAddCommand]'
@@ -1439,9 +1445,9 @@ class SaveCommandDirective extends Button {
         }
     }
 }
-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: [{
+SaveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: SaveCommandDirective, selector: "[kendoListViewSaveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: SaveCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewSaveCommand]'
@@ -1495,9 +1501,9 @@ class CancelCommandDirective extends Button {
         }
     }
 }
-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: [{
+CancelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: CancelCommandDirective, selector: "[kendoListViewCancelCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CancelCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewCancelCommand]'
@@ -1538,9 +1544,9 @@ class RemoveCommandDirective extends Button {
         this.editService.remove(index);
     }
 }
-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: [{
+RemoveCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: RemoveCommandDirective, selector: "[kendoListViewRemoveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RemoveCommandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListViewRemoveCommand]'
@@ -1567,9 +1573,9 @@ class TemplateContextDirective {
         }
     }
 }
-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: [{
+TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TemplateContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[templateContext]' // eslint-disable-line
@@ -1609,8 +1615,8 @@ const EDITING_DIRECTIVES = [
  */
 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,
+ListViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ListViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewModule, declarations: [ItemTemplateDirective,
         HeaderTemplateDirective,
         FooterTemplateDirective,
         LoaderTemplateDirective, DataBindingDirective, EditTemplateDirective,
@@ -1633,13 +1639,13 @@ ListViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         AddCommandDirective, ListViewComponent,
         CommonModule,
         EventsModule] });
-ListViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewModule, imports: [[
+ListViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewModule, imports: [[
             CommonModule,
             PagerModule,
             EventsModule
         ], CommonModule,
         EventsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ListViewModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/listview.component.d.ts

@@ -109,13 +109,13 @@ export declare class ListViewComponent {
     /**
      * Specifies the content container `role` attribute
      * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-     * By default, the container `role` is set to `listbox`.
+     * By default, the container `role` is set to `list`.
      */
     containerRole: string;
     /**
      * Specifies the list item `role` attribute
      * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-     * By default, the list item `role` is set to `option`.
+     * By default, the list item `role` is set to `listitem`.
      */
     listItemRole: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-listview",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "Kendo UI ListView component for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",