@progress/kendo-angular-listview 2.0.2 → 3.0.0-dev.202201181431

package/dist/cdn/main.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&&"object"==typeof module?module.exports=t(require("tslib"),require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-angular-buttons"),require("@progress/kendo-angular-common"),require("rxjs"),require("@angular/forms"),require("@progress/kendo-angular-pager"),require("@progress/kendo-licensing"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define(["tslib","@angular/core","@progress/kendo-angular-l10n","@progress/kendo-angular-buttons","@progress/kendo-angular-common","rxjs","@angular/forms","@progress/kendo-angular-pager","@progress/kendo-licensing","rxjs/operators","@angular/common"],t):"object"==typeof exports?exports.KendoAngularListview=t(require("tslib"),require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-angular-buttons"),require("@progress/kendo-angular-common"),require("rxjs"),require("@angular/forms"),require("@progress/kendo-angular-pager"),require("@progress/kendo-licensing"),require("rxjs/operators"),require("@angular/common")):e.KendoAngularListview=t(e.tslib,e["@angular/core"],e["@progress/kendo-angular-l10n"],e["@progress/kendo-angular-buttons"],e["@progress/kendo-angular-common"],e.rxjs,e["@angular/forms"],e["@progress/kendo-angular-pager"],e["@progress/kendo-licensing"],e["rxjs/operators"],e["@angular/common"])}(window,(function(e,t,n,i,a,r,o,s,d,c,p){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var a=t[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(i,a,function(t){return e[t]}.bind(null,a));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=19)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(6);t.isPresent=function(e){return null!=e},t.isObject=function(e){return t.isPresent(e)&&"object"==typeof e},t.match=function(e,n){var i=e.matches||e.msMatchesSelector||e.webkitMatchesSelector;return!!t.isPresent(i)&&i.call(e,n)},t.isListViewItem=function(e){return!!t.isPresent(e)&&t.match(e,".k-listview-item")},t.getListItemIndex=function(e){return t.isPresent(e)?Number(e.getAttribute("data-kendo-listview-item-index")):null},t.relatedTarget=function(e){return t.isPresent(e.relatedTarget)&&i.isDocumentAvailable()?e.relatedTarget||document.activeElement:null},t.fitIntoRange=function(e,n,i){return!t.isPresent(e)||e<=n?n:e>=i?i:e},t.closestWithMatch=function(e,n){for(var i=e;null!==i&&1===i.nodeType;){if(t.match(i,n))return i;i=i.parentElement||i.parentNode}return null},t.getClosestListItemIndex=function(e){if(!t.isPresent(e))return null;var n=t.closestWithMatch(e,".k-listview-item");return t.getListItemIndex(n)}},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(16),o=n(2),s=n(8),d=n(22),c=function(e){return-1===e||void 0===e},p=function(){function e(e){var t=this;this.ngZone=e,this.changes=new a.EventEmitter,this.editedIndices=[],this.changedSource=new s.Subject,this.changed=this.changedSource.asObservable().pipe(d.switchMap((function(){return t.ngZone.onStable.asObservable().pipe(d.take(1))})))}return e.prototype.editItem=function(e,t){void 0===t&&(t=void 0),this.editedIndices.push({index:e,group:t}),this.onChanged()},e.prototype.addItem=function(e){this.newItem={group:e},this.onChanged()},e.prototype.isEditing=function(){return this.editedIndices.length>0},Object.defineProperty(e.prototype,"hasNewItem",{get:function(){return o.isPresent(this.newItem)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"newDataItem",{get:function(){return this.hasNewItem?this.newItem.group.value:{}},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"newItemGroup",{get:function(){return this.hasNewItem?this.newItem.group:new r.FormGroup({})},enumerable:!0,configurable:!0}),e.prototype.editGroup=function(e){return this.context(e).group},e.prototype.close=function(e){c(e)?this.newItem=void 0:(this.editedIndices=this.editedIndices.filter(function(e){return function(t){return t.index!==e}}(e)),this.onChanged())},e.prototype.context=function(e){return c(e)?this.newItem:this.findByIndex(e)},e.prototype.isEdited=function(e){return!(!c(e)||!o.isPresent(this.newItem))||o.isPresent(this.findByIndex(e))},e.prototype.hasEdited=function(e){return o.isPresent(this.context(e))},e.prototype.beginEdit=function(e){this.changes.emit({action:"edit",itemIndex:e})},e.prototype.beginAdd=function(){this.changes.emit({action:"add"})},e.prototype.endEdit=function(e){var t=this.context(e).group;this.changes.emit({action:"cancel",itemIndex:e,formGroup:t,isNew:c(e)})},e.prototype.save=function(e){var t=this.context(e).group;this.changes.emit({action:"save",itemIndex:e,formGroup:t,isNew:c(e)})},e.prototype.remove=function(e){this.changes.emit({action:"remove",itemIndex:e})},e.prototype.findByIndex=function(e){return this.editedIndices.find(function(e){return function(t){return t.index===e}}(e))},e.prototype.onChanged=function(){var e=this;this.ngZone.runOutsideAngular((function(){e.changedSource.next()}))},e=i.__decorate([a.Injectable(),i.__metadata("design:paramtypes",[a.NgZone])],e)}();t.EditService=p},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(6),o=n(20),s=n(21),d=n(3),c=n(14),p=n(15),l=n(9),u=n(10),m=n(11),g=n(12),v=n(13),h=n(4),f=n(2),_=n(16),y={position:"bottom",buttonCount:5,info:!0,previousNext:!0,type:"numeric",pageSizeValues:[5,10,20]},b=function(){function e(e,t,n,i,r){this.ngZone=e,this.element=t,this.renderer=n,this.editService=i,this.navigationService=r,this.className=!0,this.loading=!1,this.containerRole="listbox",this.listItemRole="option",this.scrollBottom=new a.EventEmitter,this.pageChange=new a.EventEmitter,this.pageSizeChange=new a.EventEmitter,this.edit=new a.EventEmitter,this.cancel=new a.EventEmitter,this.save=new a.EventEmitter,this.remove=new a.EventEmitter,this.add=new a.EventEmitter,this._skip=0,this._navigable=!1,o.validatePackage(s.packageMetadata),this.attachEditHandlers()}return Object.defineProperty(e.prototype,"navigable",{get:function(){return this._navigable},set:function(e){!e&&f.isPresent(this.removeNavigationListeners)?(this.removeNavigationListeners(),this.removeNavigationListeners=null,this.navigationService.isEnabled=!1):e&&!f.isPresent(this.removeNavigationListeners)&&(this.addNavigationListeners(),this.navigationService.isEnabled=!0),this._navigable=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"skip",{get:function(){return this._skip},set:function(e){var t=parseInt(e,10);this._skip=isNaN(t)?0:t},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"pageable",{get:function(){return this._pageable},set:function(e){this._pageable=e,this.pagerSettings=e?Object.assign({},y,e):null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"items",{get:function(){return f.isPresent(this.data)?Array.isArray(this.data)?this.data:this.data.data:[]},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"total",{get:function(){return f.isPresent(this.data)?Array.isArray(this.data)?this.data.length:this.data.total:0},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"containerTabindex",{get:function(){return this.navigable?-1:null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this.navigationService.activeIndex},enumerable:!0,configurable:!0}),e.prototype.ngOnChanges=function(e){r.isChanged("height",e,!1)&&this.renderer.setStyle(this.element.nativeElement,"height",this.height+"px")},e.prototype.ngOnDestroy=function(){f.isPresent(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;if(!(e instanceof _.FormGroup)){var n=Object.keys(e).reduce((t=e,function(e,n){return e[n]=new _.FormControl(t[n]),e}),{});e=new _.FormGroup(n)}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=this;if(r.hasObservers(this.scrollBottom)){var t=this.contentContainer.nativeElement,n=t.scrollHeight,i=t.scrollTop;n-t.clientHeight-i<=2&&this.ngZone.run((function(){var t={sender:e};e.scrollBottom.emit(t)}))}},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 e=this;this.ngZone.runOutsideAngular((function(){var t=e.renderer.listen(e.contentContainer.nativeElement,"keydown",(function(t){return e.navigationService.handleKeyDown(t,e.listViewItems.length)})),n=e.renderer.listen(e.contentContainer.nativeElement,"focusin",(function(t){return e.navigationService.handleFocusIn(t)})),i=e.renderer.listen(e.contentContainer.nativeElement,"focusout",(function(t){return e.navigationService.handleFocusOut(t)}));e.removeNavigationListeners=function(){t(),n(),i()}}))},e.prototype.attachEditHandlers=function(){f.isPresent(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,a=this.items[n];"add"!==t&&i&&(a=i.value),Object.assign(e,{dataItem:a,sender:this}),this[t].emit(e)},i.__decorate([a.HostBinding("class.k-widget"),a.HostBinding("class.k-listview"),a.HostBinding("class.k-d-flex"),i.__metadata("design:type",Boolean)],e.prototype,"className",void 0),i.__decorate([a.ContentChild(l.ItemTemplateDirective,{static:!1}),i.__metadata("design:type",l.ItemTemplateDirective)],e.prototype,"itemTemplate",void 0),i.__decorate([a.ContentChild(u.HeaderTemplateDirective,{static:!1}),i.__metadata("design:type",u.HeaderTemplateDirective)],e.prototype,"headerTemplate",void 0),i.__decorate([a.ContentChild(m.FooterTemplateDirective,{static:!1}),i.__metadata("design:type",m.FooterTemplateDirective)],e.prototype,"footerTemplate",void 0),i.__decorate([a.ContentChild(g.LoaderTemplateDirective,{static:!1}),i.__metadata("design:type",g.LoaderTemplateDirective)],e.prototype,"loaderTemplate",void 0),i.__decorate([a.ViewChild("contentContainer",{static:!0}),i.__metadata("design:type",a.ElementRef)],e.prototype,"contentContainer",void 0),i.__decorate([a.ContentChild(v.EditTemplateDirective,{static:!1}),i.__metadata("design:type",v.EditTemplateDirective)],e.prototype,"editTemplate",void 0),i.__decorate([a.ViewChildren(p.ListViewNavigableItemDirective),i.__metadata("design:type",a.QueryList)],e.prototype,"listViewItems",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"data",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"loading",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"containerStyle",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"itemStyle",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"containerClass",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"itemClass",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"containerLabel",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"containerRole",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"listItemRole",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[Boolean])],e.prototype,"navigable",null),i.__decorate([a.Input(),i.__metadata("design:type",Number)],e.prototype,"pageSize",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Number),i.__metadata("design:paramtypes",[Number])],e.prototype,"skip",null),i.__decorate([a.Input(),i.__metadata("design:type",Object),i.__metadata("design:paramtypes",[Object])],e.prototype,"pageable",null),i.__decorate([a.Input(),i.__metadata("design:type",Number)],e.prototype,"height",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"scrollBottom",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"pageChange",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"pageSizeChange",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"edit",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"cancel",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"save",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"remove",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"add",void 0),e=i.__decorate([a.Component({changeDetection:a.ChangeDetectionStrategy.OnPush,exportAs:"kendoListView",selector:"kendo-listview",providers:[h.EditService,c.NavigationService,d.LocalizationService,{provide:d.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            [attr.aria-setsize]="total"\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                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    '}),i.__metadata("design:paramtypes",[a.NgZone,a.ElementRef,a.Renderer2,h.EditService,c.NavigationService])],e)}();t.ListViewComponent=b},function(e,t){e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewItemTemplate]"}),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.ItemTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewHeaderTemplate]"}),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.HeaderTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewFooterTemplate]"}),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.FooterTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewLoaderTemplate]"}),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.LoaderTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewEditTemplate]"}),i.__param(0,a.Optional()),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.EditTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(8),o=n(6),s=n(2),d=function(){function e(){this.changes=new r.Subject,this.isFocused=!1,this.activeIndex=null}return Object.defineProperty(e.prototype,"isEnabled",{get:function(){return s.isPresent(this.activeIndex)},set:function(e){this.activeIndex=e?0:null,this.changes.next()},enumerable:!0,configurable:!0}),e.prototype.isActive=function(e){return e===this.activeIndex},e.prototype.handleKeyDown=function(e,t){switch(e.keyCode){case o.Keys.ArrowLeft:case o.Keys.ArrowUp:this.navigateToPrevious();break;case o.Keys.ArrowRight:case o.Keys.ArrowDown:this.navigateToNext(t);break;case o.Keys.Home:this.navigateTo(0);break;case o.Keys.End:var n=t-1;this.navigateTo(n);break;default:return}e.preventDefault()},e.prototype.handleFocusIn=function(e){var t=e.target;if(s.isListViewItem(t)){var n=s.getListItemIndex(t);this.isFocused&&n===this.activeIndex||(this.activeIndex=n,this.isFocused=!0,this.changes.next())}else{var i=s.closestWithMatch(t,".k-listview-item");if(s.isPresent(i)){var a=s.getListItemIndex(i);this.setActiveIndex(a)}}},e.prototype.handleFocusOut=function(e){s.isListViewItem(e.target)&&!s.isListViewItem(s.relatedTarget(e))&&(this.isFocused=!1,this.changes.next())},e.prototype.setActiveIndex=function(e){this.isEnabled&&e!==this.activeIndex&&(this.activeIndex=e,this.changes.next())},e.prototype.focusIndex=function(e,t){if(this.isEnabled){var n=parseInt(e,10),i=t-1,a=isNaN(n)?this.activeIndex:s.fitIntoRange(n,0,i);this.navigateTo(a)}},e.prototype.navigateTo=function(e){this.isFocused&&this.activeIndex===e||(this.isFocused=!0,this.activeIndex=e,this.changes.next())},e.prototype.navigateToPrevious=function(){var e=Math.max(this.activeIndex-1,0);this.navigateTo(e)},e.prototype.navigateToNext=function(e){var t=e-1,n=Math.min(this.activeIndex+1,t);this.navigateTo(n)},e=i.__decorate([a.Injectable()],e)}();t.NavigationService=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(14),o=n(2),s=function(){function e(e,t,n){this.hostElement=e,this.renderer=t,this.navigationService=n}return e.prototype.ngOnChanges=function(){this.updateNavigationState()},e.prototype.ngOnInit=function(){this.navigationSubscription=this.navigationService.changes.subscribe(this.updateNavigationState.bind(this))},e.prototype.ngOnDestroy=function(){o.isPresent(this.navigationSubscription)&&this.navigationSubscription.unsubscribe()},e.prototype.updateNavigationState=function(){this.updateTabIndex(),this.updateFocusedState()},e.prototype.updateFocusedState=function(){this.navigationService.isActive(this.index)&&this.navigationService.isFocused?(this.renderer.addClass(this.hostElement.nativeElement,"k-state-focused"),this.hostElement.nativeElement.focus()):this.renderer.removeClass(this.hostElement.nativeElement,"k-state-focused")},e.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")},i.__decorate([a.Input(),i.__metadata("design:type",Number)],e.prototype,"index",void 0),e=i.__decorate([a.Directive({selector:"[kendoListViewNavigableItem]"}),i.__metadata("design:paramtypes",[a.ElementRef,a.Renderer2,r.NavigationService])],e)}();t.ListViewNavigableItemDirective=s},function(e,t){e.exports=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(8),o=n(7),s=function(){function e(e){this.listView=e,this.subscriptions=new r.Subscription}return Object.defineProperty(e.prototype,"data",{get:function(){return this._data},set:function(e){this._data=e||[],this.updateListViewData()},enumerable:!0,configurable:!0}),e.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()},e.prototype.ngOnDestroy=function(){this.subscriptions.unsubscribe()},e.prototype.handlePageChange=function(e){this.listView.skip=e.skip,this.listView.pageSize=e.take,this.updateListViewData()},e.prototype.handlePageSizeChange=function(e){this.listView.pageSize=Number(e.newPageSize)},e.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}},i.__decorate([a.Input("kendoListViewBinding"),i.__metadata("design:type",Array),i.__metadata("design:paramtypes",[Array])],e.prototype,"data",null),e=i.__decorate([a.Directive({selector:"[kendoListViewBinding]"}),i.__metadata("design:paramtypes",[o.ListViewComponent])],e)}();t.DataBindingDirective=s},function(e,t){e.exports=s},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(7);t.ListViewComponent=i.ListViewComponent;var a=n(9);t.ItemTemplateDirective=a.ItemTemplateDirective;var r=n(10);t.HeaderTemplateDirective=r.HeaderTemplateDirective;var o=n(11);t.FooterTemplateDirective=o.FooterTemplateDirective;var s=n(12);t.LoaderTemplateDirective=s.LoaderTemplateDirective;var d=n(17);t.DataBindingDirective=d.DataBindingDirective;var c=n(13);t.EditTemplateDirective=c.EditTemplateDirective;var p=n(23);t.PageSizeChangeEvent=p.PageSizeChangeEvent;var l=n(24);t.ListViewModule=l.ListViewModule},function(e,t){e.exports=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.packageMetadata={name:"@progress/kendo-angular-listview",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1635940870,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"}},function(e,t){e.exports=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return i.__extends(t,e),t}(n(18).PageSizeChangeEvent);t.PageSizeChangeEvent=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(25),o=n(18),s=n(6),d=n(7),c=n(15),p=n(9),l=n(10),u=n(11),m=n(26),g=n(12),v=n(17),h=n(13),f=n(27),_=n(28),y=n(29),b=n(30),x=n(31),I=[p.ItemTemplateDirective,l.HeaderTemplateDirective,u.FooterTemplateDirective,g.LoaderTemplateDirective],w=[v.DataBindingDirective],S=[h.EditTemplateDirective,f.EditCommandDirective,_.CancelCommandDirective,y.SaveCommandDirective,b.RemoveCommandDirective,x.AddCommandDirective],C=function(){function e(){}return e=i.__decorate([a.NgModule({declarations:[I,w,S,d.ListViewComponent,m.TemplateContextDirective,c.ListViewNavigableItemDirective],exports:[I,w,S,d.ListViewComponent,r.CommonModule,s.EventsModule],imports:[r.CommonModule,o.PagerModule,s.EventsModule]})],e)}();t.ListViewModule=C},function(e,t){e.exports=p},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.viewContainerRef=e}return Object.defineProperty(e.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:!0,configurable:!0}),i.__decorate([a.Input(),i.__metadata("design:type",Object),i.__metadata("design:paramtypes",[Object])],e.prototype,"templateContext",null),e=i.__decorate([a.Directive({selector:"[templateContext]"}),i.__metadata("design:paramtypes",[a.ViewContainerRef])],e)}();t.TemplateContextDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=n(2),c=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o.elementRef=n,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault();var t=d.getClosestListItemIndex(this.elementRef.nativeElement);this.editService.beginEdit(t)},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewEditCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.EditCommandDirective=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=n(2),c=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o.elementRef=n,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault();var t=d.getClosestListItemIndex(this.elementRef.nativeElement);this.editService.isEdited(t)&&this.editService.endEdit(t)},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewCancelCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.CancelCommandDirective=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=n(2),c=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o.elementRef=n,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault();var t=d.getClosestListItemIndex(this.elementRef.nativeElement);this.editService.isEdited(t)&&this.editService.save(t)},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewSaveCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.SaveCommandDirective=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=n(2),c=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o.elementRef=n,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault();var t=d.getClosestListItemIndex(this.elementRef.nativeElement);this.editService.remove(t)},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewRemoveCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.RemoveCommandDirective=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault(),this.editService.beginAdd()},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewAddCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.AddCommandDirective=d}])}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("tslib"),require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-angular-buttons"),require("@progress/kendo-angular-common"),require("rxjs"),require("@angular/forms"),require("@progress/kendo-angular-pager"),require("@progress/kendo-licensing"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define(["tslib","@angular/core","@progress/kendo-angular-l10n","@progress/kendo-angular-buttons","@progress/kendo-angular-common","rxjs","@angular/forms","@progress/kendo-angular-pager","@progress/kendo-licensing","rxjs/operators","@angular/common"],t):"object"==typeof exports?exports.KendoAngularListview=t(require("tslib"),require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-angular-buttons"),require("@progress/kendo-angular-common"),require("rxjs"),require("@angular/forms"),require("@progress/kendo-angular-pager"),require("@progress/kendo-licensing"),require("rxjs/operators"),require("@angular/common")):e.KendoAngularListview=t(e.tslib,e["@angular/core"],e["@progress/kendo-angular-l10n"],e["@progress/kendo-angular-buttons"],e["@progress/kendo-angular-common"],e.rxjs,e["@angular/forms"],e["@progress/kendo-angular-pager"],e["@progress/kendo-licensing"],e["rxjs/operators"],e["@angular/common"])}(window,(function(e,t,n,i,a,r,o,s,d,c,p){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var a=t[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(i,a,function(t){return e[t]}.bind(null,a));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=19)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(6);t.isPresent=function(e){return null!=e},t.isObject=function(e){return t.isPresent(e)&&"object"==typeof e},t.match=function(e,n){var i=e.matches||e.msMatchesSelector||e.webkitMatchesSelector;return!!t.isPresent(i)&&i.call(e,n)},t.isListViewItem=function(e){return!!t.isPresent(e)&&t.match(e,".k-listview-item")},t.getListItemIndex=function(e){return t.isPresent(e)?Number(e.getAttribute("data-kendo-listview-item-index")):null},t.relatedTarget=function(e){return t.isPresent(e.relatedTarget)&&i.isDocumentAvailable()?e.relatedTarget||document.activeElement:null},t.fitIntoRange=function(e,n,i){return!t.isPresent(e)||e<=n?n:e>=i?i:e},t.closestWithMatch=function(e,n){for(var i=e;null!==i&&1===i.nodeType;){if(t.match(i,n))return i;i=i.parentElement||i.parentNode}return null},t.getClosestListItemIndex=function(e){if(!t.isPresent(e))return null;var n=t.closestWithMatch(e,".k-listview-item");return t.getListItemIndex(n)}},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(16),o=n(2),s=n(8),d=n(22),c=function(e){return-1===e||void 0===e},p=function(){function e(e){var t=this;this.ngZone=e,this.changes=new a.EventEmitter,this.editedIndices=[],this.changedSource=new s.Subject,this.changed=this.changedSource.asObservable().pipe(d.switchMap((function(){return t.ngZone.onStable.asObservable().pipe(d.take(1))})))}return e.prototype.editItem=function(e,t){void 0===t&&(t=void 0),this.editedIndices.push({index:e,group:t}),this.onChanged()},e.prototype.addItem=function(e){this.newItem={group:e},this.onChanged()},e.prototype.isEditing=function(){return this.editedIndices.length>0},Object.defineProperty(e.prototype,"hasNewItem",{get:function(){return o.isPresent(this.newItem)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"newDataItem",{get:function(){return this.hasNewItem?this.newItem.group.value:{}},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"newItemGroup",{get:function(){return this.hasNewItem?this.newItem.group:new r.FormGroup({})},enumerable:!0,configurable:!0}),e.prototype.editGroup=function(e){return this.context(e).group},e.prototype.close=function(e){c(e)?this.newItem=void 0:(this.editedIndices=this.editedIndices.filter(function(e){return function(t){return t.index!==e}}(e)),this.onChanged())},e.prototype.context=function(e){return c(e)?this.newItem:this.findByIndex(e)},e.prototype.isEdited=function(e){return!(!c(e)||!o.isPresent(this.newItem))||o.isPresent(this.findByIndex(e))},e.prototype.hasEdited=function(e){return o.isPresent(this.context(e))},e.prototype.beginEdit=function(e){this.changes.emit({action:"edit",itemIndex:e})},e.prototype.beginAdd=function(){this.changes.emit({action:"add"})},e.prototype.endEdit=function(e){var t=this.context(e).group;this.changes.emit({action:"cancel",itemIndex:e,formGroup:t,isNew:c(e)})},e.prototype.save=function(e){var t=this.context(e).group;this.changes.emit({action:"save",itemIndex:e,formGroup:t,isNew:c(e)})},e.prototype.remove=function(e){this.changes.emit({action:"remove",itemIndex:e})},e.prototype.findByIndex=function(e){return this.editedIndices.find(function(e){return function(t){return t.index===e}}(e))},e.prototype.onChanged=function(){var e=this;this.ngZone.runOutsideAngular((function(){e.changedSource.next()}))},e=i.__decorate([a.Injectable(),i.__metadata("design:paramtypes",[a.NgZone])],e)}();t.EditService=p},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(6),o=n(20),s=n(21),d=n(3),c=n(14),p=n(15),l=n(9),u=n(10),m=n(11),g=n(12),v=n(13),h=n(4),f=n(2),_=n(16),y={position:"bottom",buttonCount:5,info:!0,previousNext:!0,type:"numeric",pageSizeValues:[5,10,20]},b=function(){function e(e,t,n,i,r){this.ngZone=e,this.element=t,this.renderer=n,this.editService=i,this.navigationService=r,this.className=!0,this.loading=!1,this.containerRole="listbox",this.listItemRole="option",this.scrollBottom=new a.EventEmitter,this.pageChange=new a.EventEmitter,this.pageSizeChange=new a.EventEmitter,this.edit=new a.EventEmitter,this.cancel=new a.EventEmitter,this.save=new a.EventEmitter,this.remove=new a.EventEmitter,this.add=new a.EventEmitter,this._skip=0,this._navigable=!1,o.validatePackage(s.packageMetadata),this.attachEditHandlers()}return Object.defineProperty(e.prototype,"navigable",{get:function(){return this._navigable},set:function(e){!e&&f.isPresent(this.removeNavigationListeners)?(this.removeNavigationListeners(),this.removeNavigationListeners=null,this.navigationService.isEnabled=!1):e&&!f.isPresent(this.removeNavigationListeners)&&(this.addNavigationListeners(),this.navigationService.isEnabled=!0),this._navigable=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"skip",{get:function(){return this._skip},set:function(e){var t=parseInt(e,10);this._skip=isNaN(t)?0:t},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"pageable",{get:function(){return this._pageable},set:function(e){this._pageable=e,this.pagerSettings=e?Object.assign({},y,e):null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"items",{get:function(){return f.isPresent(this.data)?Array.isArray(this.data)?this.data:this.data.data:[]},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"total",{get:function(){return f.isPresent(this.data)?Array.isArray(this.data)?this.data.length:this.data.total:0},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"containerTabindex",{get:function(){return this.navigable?-1:null},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this.navigationService.activeIndex},enumerable:!0,configurable:!0}),e.prototype.ngOnChanges=function(e){r.isChanged("height",e,!1)&&this.renderer.setStyle(this.element.nativeElement,"height",this.height+"px")},e.prototype.ngOnDestroy=function(){f.isPresent(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;if(!(e instanceof _.FormGroup)){var n=Object.keys(e).reduce((t=e,function(e,n){return e[n]=new _.FormControl(t[n]),e}),{});e=new _.FormGroup(n)}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=this;if(r.hasObservers(this.scrollBottom)){var t=this.contentContainer.nativeElement,n=t.scrollHeight,i=t.scrollTop;n-t.clientHeight-i<=2&&this.ngZone.run((function(){var t={sender:e};e.scrollBottom.emit(t)}))}},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 e=this;this.ngZone.runOutsideAngular((function(){var t=e.renderer.listen(e.contentContainer.nativeElement,"keydown",(function(t){return e.navigationService.handleKeyDown(t,e.listViewItems.length)})),n=e.renderer.listen(e.contentContainer.nativeElement,"focusin",(function(t){return e.navigationService.handleFocusIn(t)})),i=e.renderer.listen(e.contentContainer.nativeElement,"focusout",(function(t){return e.navigationService.handleFocusOut(t)}));e.removeNavigationListeners=function(){t(),n(),i()}}))},e.prototype.attachEditHandlers=function(){f.isPresent(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,a=this.items[n];"add"!==t&&i&&(a=i.value),Object.assign(e,{dataItem:a,sender:this}),this[t].emit(e)},i.__decorate([a.HostBinding("class.k-widget"),a.HostBinding("class.k-listview"),a.HostBinding("class.k-listview-bordered"),a.HostBinding("class.k-d-flex"),i.__metadata("design:type",Boolean)],e.prototype,"className",void 0),i.__decorate([a.ContentChild(l.ItemTemplateDirective,{static:!1}),i.__metadata("design:type",l.ItemTemplateDirective)],e.prototype,"itemTemplate",void 0),i.__decorate([a.ContentChild(u.HeaderTemplateDirective,{static:!1}),i.__metadata("design:type",u.HeaderTemplateDirective)],e.prototype,"headerTemplate",void 0),i.__decorate([a.ContentChild(m.FooterTemplateDirective,{static:!1}),i.__metadata("design:type",m.FooterTemplateDirective)],e.prototype,"footerTemplate",void 0),i.__decorate([a.ContentChild(g.LoaderTemplateDirective,{static:!1}),i.__metadata("design:type",g.LoaderTemplateDirective)],e.prototype,"loaderTemplate",void 0),i.__decorate([a.ViewChild("contentContainer",{static:!0}),i.__metadata("design:type",a.ElementRef)],e.prototype,"contentContainer",void 0),i.__decorate([a.ContentChild(v.EditTemplateDirective,{static:!1}),i.__metadata("design:type",v.EditTemplateDirective)],e.prototype,"editTemplate",void 0),i.__decorate([a.ViewChildren(p.ListViewNavigableItemDirective),i.__metadata("design:type",a.QueryList)],e.prototype,"listViewItems",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"data",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"loading",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"containerStyle",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"itemStyle",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"containerClass",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Object)],e.prototype,"itemClass",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"containerLabel",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"containerRole",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"listItemRole",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[Boolean])],e.prototype,"navigable",null),i.__decorate([a.Input(),i.__metadata("design:type",Number)],e.prototype,"pageSize",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Number),i.__metadata("design:paramtypes",[Number])],e.prototype,"skip",null),i.__decorate([a.Input(),i.__metadata("design:type",Object),i.__metadata("design:paramtypes",[Object])],e.prototype,"pageable",null),i.__decorate([a.Input(),i.__metadata("design:type",Number)],e.prototype,"height",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"scrollBottom",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"pageChange",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"pageSizeChange",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"edit",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"cancel",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"save",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"remove",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"add",void 0),e=i.__decorate([a.Component({changeDetection:a.ChangeDetectionStrategy.OnPush,exportAs:"kendoListView",selector:"kendo-listview",providers:[h.EditService,c.NavigationService,d.LocalizationService,{provide:d.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    '}),i.__metadata("design:paramtypes",[a.NgZone,a.ElementRef,a.Renderer2,h.EditService,c.NavigationService])],e)}();t.ListViewComponent=b},function(e,t){e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewItemTemplate]"}),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.ItemTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewHeaderTemplate]"}),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.HeaderTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewFooterTemplate]"}),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.FooterTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewLoaderTemplate]"}),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.LoaderTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.templateRef=e}return e=i.__decorate([a.Directive({selector:"[kendoListViewEditTemplate]"}),i.__param(0,a.Optional()),i.__metadata("design:paramtypes",[a.TemplateRef])],e)}();t.EditTemplateDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(8),o=n(6),s=n(2),d=function(){function e(){this.changes=new r.Subject,this.isFocused=!1,this.activeIndex=null}return Object.defineProperty(e.prototype,"isEnabled",{get:function(){return s.isPresent(this.activeIndex)},set:function(e){this.activeIndex=e?0:null,this.changes.next()},enumerable:!0,configurable:!0}),e.prototype.isActive=function(e){return e===this.activeIndex},e.prototype.handleKeyDown=function(e,t){switch(e.keyCode){case o.Keys.ArrowLeft:case o.Keys.ArrowUp:this.navigateToPrevious();break;case o.Keys.ArrowRight:case o.Keys.ArrowDown:this.navigateToNext(t);break;case o.Keys.Home:this.navigateTo(0);break;case o.Keys.End:var n=t-1;this.navigateTo(n);break;default:return}e.preventDefault()},e.prototype.handleFocusIn=function(e){var t=e.target;if(s.isListViewItem(t)){var n=s.getListItemIndex(t);this.isFocused&&n===this.activeIndex||(this.activeIndex=n,this.isFocused=!0,this.changes.next())}else{var i=s.closestWithMatch(t,".k-listview-item");if(s.isPresent(i)){var a=s.getListItemIndex(i);this.setActiveIndex(a)}}},e.prototype.handleFocusOut=function(e){s.isListViewItem(e.target)&&!s.isListViewItem(s.relatedTarget(e))&&(this.isFocused=!1,this.changes.next())},e.prototype.setActiveIndex=function(e){this.isEnabled&&e!==this.activeIndex&&(this.activeIndex=e,this.changes.next())},e.prototype.focusIndex=function(e,t){if(this.isEnabled){var n=parseInt(e,10),i=t-1,a=isNaN(n)?this.activeIndex:s.fitIntoRange(n,0,i);this.navigateTo(a)}},e.prototype.navigateTo=function(e){this.isFocused&&this.activeIndex===e||(this.isFocused=!0,this.activeIndex=e,this.changes.next())},e.prototype.navigateToPrevious=function(){var e=Math.max(this.activeIndex-1,0);this.navigateTo(e)},e.prototype.navigateToNext=function(e){var t=e-1,n=Math.min(this.activeIndex+1,t);this.navigateTo(n)},e=i.__decorate([a.Injectable()],e)}();t.NavigationService=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(14),o=n(2),s=function(){function e(e,t,n){this.hostElement=e,this.renderer=t,this.navigationService=n}return e.prototype.ngOnChanges=function(){this.updateNavigationState()},e.prototype.ngOnInit=function(){this.navigationSubscription=this.navigationService.changes.subscribe(this.updateNavigationState.bind(this))},e.prototype.ngOnDestroy=function(){o.isPresent(this.navigationSubscription)&&this.navigationSubscription.unsubscribe()},e.prototype.updateNavigationState=function(){this.updateTabIndex(),this.updateFocusedState()},e.prototype.updateFocusedState=function(){this.navigationService.isActive(this.index)&&this.navigationService.isFocused?(this.renderer.addClass(this.hostElement.nativeElement,"k-state-focused"),this.hostElement.nativeElement.focus()):this.renderer.removeClass(this.hostElement.nativeElement,"k-state-focused")},e.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")},i.__decorate([a.Input(),i.__metadata("design:type",Number)],e.prototype,"index",void 0),e=i.__decorate([a.Directive({selector:"[kendoListViewNavigableItem]"}),i.__metadata("design:paramtypes",[a.ElementRef,a.Renderer2,r.NavigationService])],e)}();t.ListViewNavigableItemDirective=s},function(e,t){e.exports=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(8),o=n(7),s=function(){function e(e){this.listView=e,this.subscriptions=new r.Subscription}return Object.defineProperty(e.prototype,"data",{get:function(){return this._data},set:function(e){this._data=e||[],this.updateListViewData()},enumerable:!0,configurable:!0}),e.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()},e.prototype.ngOnDestroy=function(){this.subscriptions.unsubscribe()},e.prototype.handlePageChange=function(e){this.listView.skip=e.skip,this.listView.pageSize=e.take,this.updateListViewData()},e.prototype.handlePageSizeChange=function(e){this.listView.pageSize=Number(e.newPageSize)},e.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}},i.__decorate([a.Input("kendoListViewBinding"),i.__metadata("design:type",Array),i.__metadata("design:paramtypes",[Array])],e.prototype,"data",null),e=i.__decorate([a.Directive({selector:"[kendoListViewBinding]"}),i.__metadata("design:paramtypes",[o.ListViewComponent])],e)}();t.DataBindingDirective=s},function(e,t){e.exports=s},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(7);t.ListViewComponent=i.ListViewComponent;var a=n(9);t.ItemTemplateDirective=a.ItemTemplateDirective;var r=n(10);t.HeaderTemplateDirective=r.HeaderTemplateDirective;var o=n(11);t.FooterTemplateDirective=o.FooterTemplateDirective;var s=n(12);t.LoaderTemplateDirective=s.LoaderTemplateDirective;var d=n(17);t.DataBindingDirective=d.DataBindingDirective;var c=n(13);t.EditTemplateDirective=c.EditTemplateDirective;var p=n(23);t.PageSizeChangeEvent=p.PageSizeChangeEvent;var l=n(24);t.ListViewModule=l.ListViewModule},function(e,t){e.exports=d},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.packageMetadata={name:"@progress/kendo-angular-listview",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1642516161,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"}},function(e,t){e.exports=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return i.__extends(t,e),t}(n(18).PageSizeChangeEvent);t.PageSizeChangeEvent=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(25),o=n(18),s=n(6),d=n(7),c=n(15),p=n(9),l=n(10),u=n(11),m=n(26),g=n(12),v=n(17),h=n(13),f=n(27),_=n(28),y=n(29),b=n(30),x=n(31),I=[p.ItemTemplateDirective,l.HeaderTemplateDirective,u.FooterTemplateDirective,g.LoaderTemplateDirective],w=[v.DataBindingDirective],S=[h.EditTemplateDirective,f.EditCommandDirective,_.CancelCommandDirective,y.SaveCommandDirective,b.RemoveCommandDirective,x.AddCommandDirective],C=function(){function e(){}return e=i.__decorate([a.NgModule({declarations:[I,w,S,d.ListViewComponent,m.TemplateContextDirective,c.ListViewNavigableItemDirective],exports:[I,w,S,d.ListViewComponent,r.CommonModule,s.EventsModule],imports:[r.CommonModule,o.PagerModule,s.EventsModule]})],e)}();t.ListViewModule=C},function(e,t){e.exports=p},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=function(){function e(e){this.viewContainerRef=e}return Object.defineProperty(e.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:!0,configurable:!0}),i.__decorate([a.Input(),i.__metadata("design:type",Object),i.__metadata("design:paramtypes",[Object])],e.prototype,"templateContext",null),e=i.__decorate([a.Directive({selector:"[templateContext]"}),i.__metadata("design:paramtypes",[a.ViewContainerRef])],e)}();t.TemplateContextDirective=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=n(2),c=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o.elementRef=n,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault();var t=d.getClosestListItemIndex(this.elementRef.nativeElement);this.editService.beginEdit(t)},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewEditCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.EditCommandDirective=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=n(2),c=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o.elementRef=n,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault();var t=d.getClosestListItemIndex(this.elementRef.nativeElement);this.editService.isEdited(t)&&this.editService.endEdit(t)},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewCancelCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.CancelCommandDirective=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=n(2),c=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o.elementRef=n,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault();var t=d.getClosestListItemIndex(this.elementRef.nativeElement);this.editService.isEdited(t)&&this.editService.save(t)},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewSaveCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.SaveCommandDirective=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=n(2),c=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o.elementRef=n,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault();var t=d.getClosestListItemIndex(this.elementRef.nativeElement);this.editService.remove(t)},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewRemoveCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.RemoveCommandDirective=c},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),a=n(1),r=n(5),o=n(3),s=n(4),d=function(e){function t(t,n,i,a,r){var o=e.call(this,n,i,null,a,r)||this;return o.editService=t,o}return i.__extends(t,e),t.prototype.clickHandler=function(e){e.preventDefault(),this.editService.beginAdd()},i.__decorate([a.HostListener("click",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],t.prototype,"clickHandler",null),t=i.__decorate([a.Directive({selector:"[kendoListViewAddCommand]"}),i.__metadata("design:paramtypes",[s.EditService,a.ElementRef,a.Renderer2,o.LocalizationService,a.NgZone])],t)}(r.Button);t.AddCommandDirective=d}])}));

package/dist/es/listview.component.js

@@ -383,6 +383,7 @@ var ListViewComponent = /** @class */ (function () {
     tslib_1.__decorate([
         HostBinding('class.k-widget'),
         HostBinding('class.k-listview'),
+        HostBinding('class.k-listview-bordered'),
         HostBinding('class.k-d-flex'),
         tslib_1.__metadata("design:type", Boolean)
     ], ListViewComponent.prototype, "className", void 0);
@@ -519,7 +520,7 @@ var ListViewComponent = /** @class */ (function () {
                     useValue: 'kendo.listview'
                 }
             ],
-            template: "\n        <!-- top pager -->\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        <!-- header -->\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        <!-- content -->\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            [attr.aria-setsize]=\"total\"\n        >\n            <!-- new item edit template -->\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            <!-- items -->\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                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            <!-- loading indicator -->\n            <div\n                *ngIf=\"loading && !loaderTemplate\"\n                class=\"k-loading-mask\"\n            >\n                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->\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        <!-- footer -->\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        <!-- bottom pager -->\n        <ng-template\n            *ngIf=\"pagerSettings?.position !== 'top'\"\n            [ngTemplateOutlet]=\"pagerTemplate\"\n            [ngTemplateOutletContext]=\"{ pagerClass: 'k-listview-pager' }\"\n        >\n        </ng-template>\n\n        <!-- pager template -->\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    "
+            template: "\n        <!-- top pager -->\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        <!-- header -->\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        <!-- content -->\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            <!-- new item edit template -->\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            <!-- items -->\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            <!-- loading indicator -->\n            <div\n                *ngIf=\"loading && !loaderTemplate\"\n                class=\"k-loading-mask\"\n            >\n                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->\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        <!-- footer -->\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        <!-- bottom pager -->\n        <ng-template\n            *ngIf=\"pagerSettings?.position !== 'top'\"\n            [ngTemplateOutlet]=\"pagerTemplate\"\n            [ngTemplateOutletContext]=\"{ pagerClass: 'k-listview-pager' }\"\n        >\n        </ng-template>\n\n        <!-- pager template -->\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    "
         }),
         tslib_1.__metadata("design:paramtypes", [NgZone,
             ElementRef,

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-listview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635940870,
+    publishDate: 1642516161,
     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/dist/es2015/index.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"ListViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":67,"character":1},"arguments":[{"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":68,"character":21},"member":"OnPush"},"exportAs":"kendoListView","selector":"kendo-listview","providers":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","name":"NavigationService"},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":74,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":76,"character":21},"useValue":"kendo.listview"}],"template":"\n        <!-- top pager -->\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        <!-- header -->\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        <!-- content -->\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            [attr.aria-setsize]=\"total\"\n        >\n            <!-- new item edit template -->\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            <!-- items -->\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                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            <!-- loading indicator -->\n            <div\n                *ngIf=\"loading && !loaderTemplate\"\n                class=\"k-loading-mask\"\n            >\n                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->\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        <!-- footer -->\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        <!-- bottom pager -->\n        <ng-template\n            *ngIf=\"pagerSettings?.position !== 'top'\"\n            [ngTemplateOutlet]=\"pagerTemplate\"\n            [ngTemplateOutletContext]=\"{ pagerClass: 'k-listview-pager' }\"\n        >\n        </ng-template>\n\n        <!-- pager template -->\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    "}]}],"members":{"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":213,"character":5},"arguments":["class.k-widget"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":214,"character":5},"arguments":["class.k-listview"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":215,"character":5},"arguments":["class.k-d-flex"]}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":221,"character":5},"arguments":[{"__symbolic":"reference","name":"ItemTemplateDirective"},{"static":false}]}]}],"headerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":227,"character":5},"arguments":[{"__symbolic":"reference","name":"HeaderTemplateDirective"},{"static":false}]}]}],"footerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":233,"character":5},"arguments":[{"__symbolic":"reference","name":"FooterTemplateDirective"},{"static":false}]}]}],"loaderTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":239,"character":5},"arguments":[{"__symbolic":"reference","name":"LoaderTemplateDirective"},{"static":false}]}]}],"contentContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":245,"character":5},"arguments":["contentContainer",{"static":true}]}]}],"editTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":251,"character":5},"arguments":[{"__symbolic":"reference","name":"EditTemplateDirective"},{"static":false}]}]}],"listViewItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":257,"character":5},"arguments":[{"__symbolic":"reference","name":"ListViewNavigableItemDirective"}]}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":264,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":270,"character":5}}]}],"containerStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":276,"character":5}}]}],"itemStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":283,"character":5}}]}],"containerClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":289,"character":5}}]}],"itemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":295,"character":5}}]}],"containerLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":301,"character":5}}]}],"containerRole":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":308,"character":5}}]}],"listItemRole":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":315,"character":5}}]}],"navigable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":322,"character":5}}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":344,"character":5}}]}],"skip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":350,"character":5}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":365,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":379,"character":5}}]}],"scrollBottom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":385,"character":5}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":393,"character":5}}]}],"pageSizeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":399,"character":5}}]}],"edit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":405,"character":5}}]}],"cancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":411,"character":5}}]}],"save":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":417,"character":5}}]}],"remove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":423,"character":5}}]}],"add":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":429,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":491,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":492,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":493,"character":25},{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","name":"NavigationService"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"templateContext":[{"__symbolic":"method"}],"editTemplateContext":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"editItem":[{"__symbolic":"method"}],"closeItem":[{"__symbolic":"method"}],"isEdited":[{"__symbolic":"method"}],"handlePageChange":[{"__symbolic":"method"}],"handleContentScroll":[{"__symbolic":"method"}],"itemPosInSet":[{"__symbolic":"method"}],"scrollToContainerTop":[{"__symbolic":"method"}],"addNavigationListeners":[{"__symbolic":"method"}],"attachEditHandlers":[{"__symbolic":"method"}],"emitCRUDEvent":[{"__symbolic":"method"}]}},"ItemTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":13,"character":1},"arguments":[{"selector":"[kendoListViewItemTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"HeaderTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[kendoListViewHeaderTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"FooterTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[kendoListViewFooterTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"LoaderTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[kendoListViewLoaderTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"DataBindingDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[kendoListViewBinding]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5},"arguments":["kendoListViewBinding"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ListViewComponent"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"handlePageChange":[{"__symbolic":"method"}],"handlePageSizeChange":[{"__symbolic":"method"}],"updateListViewData":[{"__symbolic":"method"}]}},"EditTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":15,"character":1},"arguments":[{"selector":"[kendoListViewEditTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":19,"character":15}}]],"parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"AddEvent":{"__symbolic":"interface"},"CancelEvent":{"__symbolic":"interface"},"EditEvent":{"__symbolic":"interface"},"RemoveEvent":{"__symbolic":"interface"},"SaveEvent":{"__symbolic":"interface"},"PagerSettings":{"__symbolic":"interface"},"PageChangeEvent":{"__symbolic":"interface"},"PageSizeChangeEvent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-pager","name":"PageSizeChangeEvent","line":6,"character":41},"members":{}},"PageSizeItem":{"__symbolic":"interface"},"PagerType":{"__symbolic":"interface"},"PagerPosition":{"__symbolic":"interface"},"ListViewDataResult":{"__symbolic":"interface"},"ListViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":57,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"ItemTemplateDirective"},{"__symbolic":"reference","name":"HeaderTemplateDirective"},{"__symbolic":"reference","name":"FooterTemplateDirective"},{"__symbolic":"reference","name":"LoaderTemplateDirective"}],[{"__symbolic":"reference","name":"DataBindingDirective"}],[{"__symbolic":"reference","name":"EditTemplateDirective"},{"__symbolic":"reference","name":"EditCommandDirective"},{"__symbolic":"reference","name":"CancelCommandDirective"},{"__symbolic":"reference","name":"SaveCommandDirective"},{"__symbolic":"reference","name":"RemoveCommandDirective"},{"__symbolic":"reference","name":"AddCommandDirective"}],{"__symbolic":"reference","name":"ListViewComponent"},{"__symbolic":"reference","name":"TemplateContextDirective"},{"__symbolic":"reference","name":"ListViewNavigableItemDirective"}],"exports":[[{"__symbolic":"reference","name":"ItemTemplateDirective"},{"__symbolic":"reference","name":"HeaderTemplateDirective"},{"__symbolic":"reference","name":"FooterTemplateDirective"},{"__symbolic":"reference","name":"LoaderTemplateDirective"}],[{"__symbolic":"reference","name":"DataBindingDirective"}],[{"__symbolic":"reference","name":"EditTemplateDirective"},{"__symbolic":"reference","name":"EditCommandDirective"},{"__symbolic":"reference","name":"CancelCommandDirective"},{"__symbolic":"reference","name":"SaveCommandDirective"},{"__symbolic":"reference","name":"RemoveCommandDirective"},{"__symbolic":"reference","name":"AddCommandDirective"}],{"__symbolic":"reference","name":"ListViewComponent"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":71,"character":8},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"EventsModule","line":72,"character":8}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":75,"character":8},{"__symbolic":"reference","module":"@progress/kendo-angular-pager","name":"PagerModule","line":76,"character":8},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"EventsModule","line":77,"character":8}]}]}],"members":{}},"EditService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":47,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":57,"character":31}]}],"editItem":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"isEditing":[{"__symbolic":"method"}],"editGroup":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"context":[{"__symbolic":"method"}],"isEdited":[{"__symbolic":"method"}],"hasEdited":[{"__symbolic":"method"}],"beginEdit":[{"__symbolic":"method"}],"beginAdd":[{"__symbolic":"method"}],"endEdit":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"findByIndex":[{"__symbolic":"method"}],"onChanged":[{"__symbolic":"method"}]}},"NavigationService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":12,"character":1}}],"members":{"isActive":[{"__symbolic":"method"}],"handleKeyDown":[{"__symbolic":"method"}],"handleFocusIn":[{"__symbolic":"method"}],"handleFocusOut":[{"__symbolic":"method"}],"setActiveIndex":[{"__symbolic":"method"}],"focusIndex":[{"__symbolic":"method"}],"navigateTo":[{"__symbolic":"method"}],"navigateToPrevious":[{"__symbolic":"method"}],"navigateToNext":[{"__symbolic":"method"}]}},"ListViewNavigableItemDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":9,"character":1},"arguments":[{"selector":"[kendoListViewNavigableItem]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":21,"character":40,"context":{"typeName":"HTMLElement"},"module":"./navigation/listview-navigable-item.directive"}]},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":22,"character":26},{"__symbolic":"reference","name":"NavigationService"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateNavigationState":[{"__symbolic":"method"}],"updateFocusedState":[{"__symbolic":"method"}],"updateTabIndex":[{"__symbolic":"method"}]}},"EditCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":34,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":31,"character":1},"arguments":[{"selector":"[kendoListViewEditCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":41,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":53,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":54,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":55,"character":16}]}]}},"CancelCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":44,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":41,"character":1},"arguments":[{"selector":"[kendoListViewCancelCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":51,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":65,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":66,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":67,"character":16}]}]}},"SaveCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":44,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":41,"character":1},"arguments":[{"selector":"[kendoListViewSaveCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":51,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":65,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":66,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":67,"character":16}]}]}},"RemoveCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":33,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":30,"character":1},"arguments":[{"selector":"[kendoListViewRemoveCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":40,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":51,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":52,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":53,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":54,"character":16}]}]}},"AddCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":32,"character":41},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":29,"character":1},"arguments":[{"selector":"[kendoListViewAddCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":36,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":45,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":46,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":47,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":48,"character":16}]}]}},"TemplateContextDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[templateContext]"}]}],"members":{"templateContext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":22,"character":42}]}]}}},"origins":{"ListViewComponent":"./listview.component","ItemTemplateDirective":"./templates/item-template.directive","HeaderTemplateDirective":"./templates/header-template.directive","FooterTemplateDirective":"./templates/footer-template.directive","LoaderTemplateDirective":"./templates/loader-template.directive","DataBindingDirective":"./data-binding/data-binding.directive","EditTemplateDirective":"./editing/edit-template.directive","AddEvent":"./editing/events/add-event-args.interface","CancelEvent":"./editing/events/cancel-event-args.interface","EditEvent":"./editing/events/edit-event-args.interface","RemoveEvent":"./editing/events/remove-event-args.interface","SaveEvent":"./editing/events/save-event-args.interface","PagerSettings":"./models/pager-settings","PageChangeEvent":"./models/page-change-event","PageSizeChangeEvent":"./models/page-size-change-event","PageSizeItem":"./models/page-size-item","PagerType":"./models/pager-type","PagerPosition":"./models/pager-position","ListViewDataResult":"./models/listview-data-result","ListViewModule":"./listview.module","EditService":"./editing/edit.service","NavigationService":"./navigation/navigation.service","ListViewNavigableItemDirective":"./navigation/listview-navigable-item.directive","EditCommandDirective":"./editing/commands/edit-command.directive","CancelCommandDirective":"./editing/commands/cancel-command.directive","SaveCommandDirective":"./editing/commands/save-command.directive","RemoveCommandDirective":"./editing/commands/remove-command.directive","AddCommandDirective":"./editing/commands/add-command.directive","TemplateContextDirective":"./templates/template-context.directive"},"importAs":"@progress/kendo-angular-listview"}
+{"__symbolic":"module","version":4,"metadata":{"ListViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":67,"character":1},"arguments":[{"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":68,"character":21},"member":"OnPush"},"exportAs":"kendoListView","selector":"kendo-listview","providers":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","name":"NavigationService"},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":74,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":76,"character":21},"useValue":"kendo.listview"}],"template":"\n        <!-- top pager -->\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        <!-- header -->\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        <!-- content -->\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            <!-- new item edit template -->\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            <!-- items -->\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            <!-- loading indicator -->\n            <div\n                *ngIf=\"loading && !loaderTemplate\"\n                class=\"k-loading-mask\"\n            >\n                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->\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        <!-- footer -->\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        <!-- bottom pager -->\n        <ng-template\n            *ngIf=\"pagerSettings?.position !== 'top'\"\n            [ngTemplateOutlet]=\"pagerTemplate\"\n            [ngTemplateOutletContext]=\"{ pagerClass: 'k-listview-pager' }\"\n        >\n        </ng-template>\n\n        <!-- pager template -->\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    "}]}],"members":{"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":213,"character":5},"arguments":["class.k-widget"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":214,"character":5},"arguments":["class.k-listview"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":215,"character":5},"arguments":["class.k-listview-bordered"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":216,"character":5},"arguments":["class.k-d-flex"]}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":222,"character":5},"arguments":[{"__symbolic":"reference","name":"ItemTemplateDirective"},{"static":false}]}]}],"headerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":228,"character":5},"arguments":[{"__symbolic":"reference","name":"HeaderTemplateDirective"},{"static":false}]}]}],"footerTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":234,"character":5},"arguments":[{"__symbolic":"reference","name":"FooterTemplateDirective"},{"static":false}]}]}],"loaderTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":240,"character":5},"arguments":[{"__symbolic":"reference","name":"LoaderTemplateDirective"},{"static":false}]}]}],"contentContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":246,"character":5},"arguments":["contentContainer",{"static":true}]}]}],"editTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":252,"character":5},"arguments":[{"__symbolic":"reference","name":"EditTemplateDirective"},{"static":false}]}]}],"listViewItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":258,"character":5},"arguments":[{"__symbolic":"reference","name":"ListViewNavigableItemDirective"}]}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":265,"character":5}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":271,"character":5}}]}],"containerStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":277,"character":5}}]}],"itemStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":284,"character":5}}]}],"containerClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":290,"character":5}}]}],"itemClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":296,"character":5}}]}],"containerLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":302,"character":5}}]}],"containerRole":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":309,"character":5}}]}],"listItemRole":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":316,"character":5}}]}],"navigable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":323,"character":5}}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":345,"character":5}}]}],"skip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":351,"character":5}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":366,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":380,"character":5}}]}],"scrollBottom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":386,"character":5}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":394,"character":5}}]}],"pageSizeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":400,"character":5}}]}],"edit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":406,"character":5}}]}],"cancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":412,"character":5}}]}],"save":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":418,"character":5}}]}],"remove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":424,"character":5}}]}],"add":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":430,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":492,"character":23},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":493,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":494,"character":25},{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","name":"NavigationService"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"templateContext":[{"__symbolic":"method"}],"editTemplateContext":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"editItem":[{"__symbolic":"method"}],"closeItem":[{"__symbolic":"method"}],"isEdited":[{"__symbolic":"method"}],"handlePageChange":[{"__symbolic":"method"}],"handleContentScroll":[{"__symbolic":"method"}],"itemPosInSet":[{"__symbolic":"method"}],"scrollToContainerTop":[{"__symbolic":"method"}],"addNavigationListeners":[{"__symbolic":"method"}],"attachEditHandlers":[{"__symbolic":"method"}],"emitCRUDEvent":[{"__symbolic":"method"}]}},"ItemTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":13,"character":1},"arguments":[{"selector":"[kendoListViewItemTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"HeaderTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[kendoListViewHeaderTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"FooterTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[kendoListViewFooterTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"LoaderTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[kendoListViewLoaderTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"DataBindingDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[kendoListViewBinding]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5},"arguments":["kendoListViewBinding"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ListViewComponent"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"handlePageChange":[{"__symbolic":"method"}],"handlePageSizeChange":[{"__symbolic":"method"}],"updateListViewData":[{"__symbolic":"method"}]}},"EditTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":15,"character":1},"arguments":[{"selector":"[kendoListViewEditTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":19,"character":15}}]],"parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"AddEvent":{"__symbolic":"interface"},"CancelEvent":{"__symbolic":"interface"},"EditEvent":{"__symbolic":"interface"},"RemoveEvent":{"__symbolic":"interface"},"SaveEvent":{"__symbolic":"interface"},"PagerSettings":{"__symbolic":"interface"},"PageChangeEvent":{"__symbolic":"interface"},"PageSizeChangeEvent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-pager","name":"PageSizeChangeEvent","line":6,"character":41},"members":{}},"PageSizeItem":{"__symbolic":"interface"},"PagerType":{"__symbolic":"interface"},"PagerPosition":{"__symbolic":"interface"},"ListViewDataResult":{"__symbolic":"interface"},"ListViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":57,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"ItemTemplateDirective"},{"__symbolic":"reference","name":"HeaderTemplateDirective"},{"__symbolic":"reference","name":"FooterTemplateDirective"},{"__symbolic":"reference","name":"LoaderTemplateDirective"}],[{"__symbolic":"reference","name":"DataBindingDirective"}],[{"__symbolic":"reference","name":"EditTemplateDirective"},{"__symbolic":"reference","name":"EditCommandDirective"},{"__symbolic":"reference","name":"CancelCommandDirective"},{"__symbolic":"reference","name":"SaveCommandDirective"},{"__symbolic":"reference","name":"RemoveCommandDirective"},{"__symbolic":"reference","name":"AddCommandDirective"}],{"__symbolic":"reference","name":"ListViewComponent"},{"__symbolic":"reference","name":"TemplateContextDirective"},{"__symbolic":"reference","name":"ListViewNavigableItemDirective"}],"exports":[[{"__symbolic":"reference","name":"ItemTemplateDirective"},{"__symbolic":"reference","name":"HeaderTemplateDirective"},{"__symbolic":"reference","name":"FooterTemplateDirective"},{"__symbolic":"reference","name":"LoaderTemplateDirective"}],[{"__symbolic":"reference","name":"DataBindingDirective"}],[{"__symbolic":"reference","name":"EditTemplateDirective"},{"__symbolic":"reference","name":"EditCommandDirective"},{"__symbolic":"reference","name":"CancelCommandDirective"},{"__symbolic":"reference","name":"SaveCommandDirective"},{"__symbolic":"reference","name":"RemoveCommandDirective"},{"__symbolic":"reference","name":"AddCommandDirective"}],{"__symbolic":"reference","name":"ListViewComponent"},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":71,"character":8},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"EventsModule","line":72,"character":8}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":75,"character":8},{"__symbolic":"reference","module":"@progress/kendo-angular-pager","name":"PagerModule","line":76,"character":8},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"EventsModule","line":77,"character":8}]}]}],"members":{}},"EditService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":47,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":57,"character":31}]}],"editItem":[{"__symbolic":"method"}],"addItem":[{"__symbolic":"method"}],"isEditing":[{"__symbolic":"method"}],"editGroup":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"context":[{"__symbolic":"method"}],"isEdited":[{"__symbolic":"method"}],"hasEdited":[{"__symbolic":"method"}],"beginEdit":[{"__symbolic":"method"}],"beginAdd":[{"__symbolic":"method"}],"endEdit":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"findByIndex":[{"__symbolic":"method"}],"onChanged":[{"__symbolic":"method"}]}},"NavigationService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":12,"character":1}}],"members":{"isActive":[{"__symbolic":"method"}],"handleKeyDown":[{"__symbolic":"method"}],"handleFocusIn":[{"__symbolic":"method"}],"handleFocusOut":[{"__symbolic":"method"}],"setActiveIndex":[{"__symbolic":"method"}],"focusIndex":[{"__symbolic":"method"}],"navigateTo":[{"__symbolic":"method"}],"navigateToPrevious":[{"__symbolic":"method"}],"navigateToNext":[{"__symbolic":"method"}]}},"ListViewNavigableItemDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":9,"character":1},"arguments":[{"selector":"[kendoListViewNavigableItem]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":21,"character":40,"context":{"typeName":"HTMLElement"},"module":"./navigation/listview-navigable-item.directive"}]},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":22,"character":26},{"__symbolic":"reference","name":"NavigationService"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"updateNavigationState":[{"__symbolic":"method"}],"updateFocusedState":[{"__symbolic":"method"}],"updateTabIndex":[{"__symbolic":"method"}]}},"EditCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":34,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":31,"character":1},"arguments":[{"selector":"[kendoListViewEditCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":41,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":53,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":54,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":55,"character":16}]}]}},"CancelCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":44,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":41,"character":1},"arguments":[{"selector":"[kendoListViewCancelCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":51,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":65,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":66,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":67,"character":16}]}]}},"SaveCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":44,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":41,"character":1},"arguments":[{"selector":"[kendoListViewSaveCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":51,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":65,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":66,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":67,"character":16}]}]}},"RemoveCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":33,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":30,"character":1},"arguments":[{"selector":"[kendoListViewRemoveCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":40,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":51,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":52,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":53,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":54,"character":16}]}]}},"AddCommandDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"Button","line":32,"character":41},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":29,"character":1},"arguments":[{"selector":"[kendoListViewAddCommand]"}]}],"members":{"clickHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":36,"character":5},"arguments":["click",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"EditService"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":45,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":46,"character":18},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":47,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":48,"character":16}]}]}},"TemplateContextDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[templateContext]"}]}],"members":{"templateContext":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":22,"character":42}]}]}}},"origins":{"ListViewComponent":"./listview.component","ItemTemplateDirective":"./templates/item-template.directive","HeaderTemplateDirective":"./templates/header-template.directive","FooterTemplateDirective":"./templates/footer-template.directive","LoaderTemplateDirective":"./templates/loader-template.directive","DataBindingDirective":"./data-binding/data-binding.directive","EditTemplateDirective":"./editing/edit-template.directive","AddEvent":"./editing/events/add-event-args.interface","CancelEvent":"./editing/events/cancel-event-args.interface","EditEvent":"./editing/events/edit-event-args.interface","RemoveEvent":"./editing/events/remove-event-args.interface","SaveEvent":"./editing/events/save-event-args.interface","PagerSettings":"./models/pager-settings","PageChangeEvent":"./models/page-change-event","PageSizeChangeEvent":"./models/page-size-change-event","PageSizeItem":"./models/page-size-item","PagerType":"./models/pager-type","PagerPosition":"./models/pager-position","ListViewDataResult":"./models/listview-data-result","ListViewModule":"./listview.module","EditService":"./editing/edit.service","NavigationService":"./navigation/navigation.service","ListViewNavigableItemDirective":"./navigation/listview-navigable-item.directive","EditCommandDirective":"./editing/commands/edit-command.directive","CancelCommandDirective":"./editing/commands/cancel-command.directive","SaveCommandDirective":"./editing/commands/save-command.directive","RemoveCommandDirective":"./editing/commands/remove-command.directive","AddCommandDirective":"./editing/commands/add-command.directive","TemplateContextDirective":"./templates/template-context.directive"},"importAs":"@progress/kendo-angular-listview"}

package/dist/es2015/listview.component.js

@@ -354,6 +354,7 @@ let ListViewComponent = class ListViewComponent {
 tslib_1.__decorate([
     HostBinding('class.k-widget'),
     HostBinding('class.k-listview'),
+    HostBinding('class.k-listview-bordered'),
     HostBinding('class.k-d-flex'),
     tslib_1.__metadata("design:type", Boolean)
 ], ListViewComponent.prototype, "className", void 0);
@@ -523,7 +524,6 @@ ListViewComponent = tslib_1.__decorate([
             [scope]="this"
             [attr.role]="containerRole"
             [attr.aria-label]="containerLabel"
-            [attr.aria-setsize]="total"
         >
             <!-- new item edit template -->
             <div
@@ -550,6 +550,7 @@ ListViewComponent = tslib_1.__decorate([
                 class="k-listview-item"
                 [attr.role]="listItemRole"
                 [attr.aria-posinset]="itemPosInSet(index)"
+                [attr.aria-setsize]="total"
                 kendoListViewNavigableItem
                 [index]="index"
                 [attr.data-kendo-listview-item-index]="index"

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-listview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635940870,
+    publishDate: 1642516161,
     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/dist/fesm2015/index.js

@@ -21,7 +21,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635940870,
+    publishDate: 1642516161,
     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'
 };
@@ -876,6 +876,7 @@ let ListViewComponent = class ListViewComponent {
 __decorate([
     HostBinding('class.k-widget'),
     HostBinding('class.k-listview'),
+    HostBinding('class.k-listview-bordered'),
     HostBinding('class.k-d-flex'),
     __metadata("design:type", Boolean)
 ], ListViewComponent.prototype, "className", void 0);
@@ -1045,7 +1046,6 @@ ListViewComponent = __decorate([
             [scope]="this"
             [attr.role]="containerRole"
             [attr.aria-label]="containerLabel"
-            [attr.aria-setsize]="total"
         >
             <!-- new item edit template -->
             <div
@@ -1072,6 +1072,7 @@ ListViewComponent = __decorate([
                 class="k-listview-item"
                 [attr.role]="listItemRole"
                 [attr.aria-posinset]="itemPosInSet(index)"
+                [attr.aria-setsize]="total"
                 kendoListViewNavigableItem
                 [index]="index"
                 [attr.data-kendo-listview-item-index]="index"

package/dist/fesm5/index.js

@@ -21,7 +21,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-listview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635940870,
+    publishDate: 1642516161,
     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'
 };
@@ -926,6 +926,7 @@ var ListViewComponent = /** @class */ (function () {
     __decorate([
         HostBinding('class.k-widget'),
         HostBinding('class.k-listview'),
+        HostBinding('class.k-listview-bordered'),
         HostBinding('class.k-d-flex'),
         __metadata("design:type", Boolean)
     ], ListViewComponent.prototype, "className", void 0);
@@ -1062,7 +1063,7 @@ var ListViewComponent = /** @class */ (function () {
                     useValue: 'kendo.listview'
                 }
             ],
-            template: "\n        <!-- top pager -->\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        <!-- header -->\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        <!-- content -->\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            [attr.aria-setsize]=\"total\"\n        >\n            <!-- new item edit template -->\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            <!-- items -->\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                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            <!-- loading indicator -->\n            <div\n                *ngIf=\"loading && !loaderTemplate\"\n                class=\"k-loading-mask\"\n            >\n                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->\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        <!-- footer -->\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        <!-- bottom pager -->\n        <ng-template\n            *ngIf=\"pagerSettings?.position !== 'top'\"\n            [ngTemplateOutlet]=\"pagerTemplate\"\n            [ngTemplateOutletContext]=\"{ pagerClass: 'k-listview-pager' }\"\n        >\n        </ng-template>\n\n        <!-- pager template -->\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    "
+            template: "\n        <!-- top pager -->\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        <!-- header -->\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        <!-- content -->\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            <!-- new item edit template -->\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            <!-- items -->\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            <!-- loading indicator -->\n            <div\n                *ngIf=\"loading && !loaderTemplate\"\n                class=\"k-loading-mask\"\n            >\n                <!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->\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        <!-- footer -->\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        <!-- bottom pager -->\n        <ng-template\n            *ngIf=\"pagerSettings?.position !== 'top'\"\n            [ngTemplateOutlet]=\"pagerTemplate\"\n            [ngTemplateOutletContext]=\"{ pagerClass: 'k-listview-pager' }\"\n        >\n        </ng-template>\n\n        <!-- pager template -->\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    "
         }),
         __metadata("design:paramtypes", [NgZone,
             ElementRef,