@progress/kendo-angular-scrollview 4.1.1-dev.202110290741 → 4.1.3-dev.202201190926

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("@angular/core"),require("tslib"),require("@progress/kendo-angular-common"),require("@angular/animations"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-l10n"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","tslib","@progress/kendo-angular-common","@angular/animations","@progress/kendo-licensing","@progress/kendo-angular-l10n","@angular/common"],t):"object"==typeof exports?exports.KendoAngularScrollview=t(require("@angular/core"),require("tslib"),require("@progress/kendo-angular-common"),require("@angular/animations"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-l10n"),require("@angular/common")):e.KendoAngularScrollview=t(e["@angular/core"],e.tslib,e["@progress/kendo-angular-common"],e["@angular/animations"],e["@progress/kendo-licensing"],e["@progress/kendo-angular-l10n"],e["@angular/common"])}(window,(function(e,t,n,i,a,r,o){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=5)}([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(1),a=n(0),r=n(6),o=n(7),s=n(3),l=n(8),d=n(9),c=n(10),p=n(11),u=function(){function e(e,t,n,i){var r=this;this.element=e,this.application=t,this.localization=n,this.ngZone=i,this.data=[],this.endless=!1,this.pagerOverlay="none",this.animate=!0,this.pageable=!1,this.arrows=!1,this.itemChanged=new a.EventEmitter,this.activeIndexChange=new a.EventEmitter,this.touchAction="pan-y pinch-zoom",this.animationState=null,this.transitionStyle=null,this.view=new c.DataCollection((function(){return new c.DataResultIterator(r.data,r.activeIndex,r.endless,r.pageIndex,r.isRTL)})),this.isDataSourceEmpty=!1,this._activeIndex=0,this.index=0,this.pageIndex=null,this.transforms=["translateX(-100%)","translateX(0%)","translateX(100%)"],l.validatePackage(d.packageMetadata)}return Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this._activeIndex},set:function(e){this.index=this._activeIndex=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"widgetClass",{get:function(){return!0},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollViewClass",{get:function(){return!0},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollViewLightOverlayClass",{get:function(){return"light"===this.pagerOverlay},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollViewDarkOverlayClass",{get:function(){return"dark"===this.pagerOverlay},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"hostWidth",{get:function(){return this.width},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"hostHeight",{get:function(){return this.height},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"tabIndex",{get:function(){return 1},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"ariaLive",{get:function(){return"assertive"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"dir",{get:function(){return this.direction},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"direction",{get:function(){return this.localization.rtl?"rtl":"ltr"},enumerable:!0,configurable:!0}),e.prototype.keyDown=function(e){e.keyCode===s.Keys.ArrowLeft&&(this.isRTL?this.next():this.prev()),e.keyCode===s.Keys.ArrowRight&&(this.isRTL?this.prev():this.next())},e.prototype.ngOnChanges=function(e){this.activeIndex=Math.max(Math.min(this.activeIndex,this.view.total-1),0)},e.prototype.prev=function(){this.navigate(o.Dir.Prev)},e.prototype.next=function(){this.navigate(o.Dir.Next)},e.prototype.transitionEndHandler=function(e){this.animationState=null,this.transitionStyle=null,"left"!==e.toState&&"right"!==e.toState||(null!==this.pageIndex&&(this.activeIndex=this.pageIndex,this.pageIndex=null),this.activeIndex=this.index,this.activeIndexChange.emit(this.activeIndex),this.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)}),this.application.tick())},e.prototype.handlePress=function(e){this.initialTouchCoordinate=e.pageX},e.prototype.handleDrag=function(e){var t=this,n=e.pageX-this.initialTouchCoordinate;this.animationState||this.isDragForbidden(n)||!this.draggedInsideBounds(n)||this.ngZone.run((function(){t.transitionStyle="translateX("+n+"px)"}))},e.prototype.handleRelease=function(e){var t=this,n=e.pageX-this.initialTouchCoordinate;this.isDragForbidden(n)||this.ngZone.run((function(){t.draggedEnoughToNavigate(n)?(t.isRTL?t.changeIndex(n<0?o.Dir.Prev:o.Dir.Next):t.changeIndex(n>0?o.Dir.Prev:o.Dir.Next),t.animate||(t.transitionStyle=null,t.activeIndexChange.emit(t.activeIndex),t.itemChanged.emit({index:t.activeIndex,item:t.view.item(1)}))):Math.abs(n)>0&&(t.animate?t.animationState="center":t.transitionStyle=null)}))},e.prototype.pageChange=function(e){this.animationState||this.activeIndex===e||(this.animate?(this.pageIndex=e,this.isRTL?this.animationState=this.pageIndex>this.index?"right":"left":this.animationState=this.pageIndex>this.index?"left":"right"):this.activeIndex=e)},e.prototype.inlineListItemStyles=function(e){return{height:this.height,transform:this.transforms[e],width:"100%"}},e.prototype.displayLeftArrow=function(){var e;return e=this.isRTL?this.activeIndex+1<this.view.total:this.activeIndex>0,(this.endless||e)&&this.view.total>0},e.prototype.leftArrowClick=function(){this.isRTL?this.next():this.prev()},e.prototype.displayRightArrow=function(){var e;return e=this.isRTL?this.activeIndex>0:this.activeIndex+1<this.view.total,(this.endless||e)&&this.view.total>0},e.prototype.rightArrowClick=function(){this.isRTL?this.prev():this.next()},e.prototype.draggedInsideBounds=function(e){return Math.abs(e)<=this.element.nativeElement.offsetWidth},e.prototype.draggedEnoughToNavigate=function(e){return Math.abs(e)>this.element.nativeElement.offsetWidth/2},e.prototype.isDragForbidden=function(e){var t,n;return t=this.isRTL?e<0&&0!==e:e>0&&0!==e,n=0===this.activeIndex&&t||this.activeIndex===this.view.total-1&&!t,!this.endless&&n},e.prototype.navigate=function(e){this.isDataSourceEmpty||this.animationState||(this.changeIndex(e),this.animate||(this.activeIndexChange.emit(this.activeIndex),this.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)})))},e.prototype.changeIndex=function(e){e===o.Dir.Next&&this.view.canMoveNext()?(this.index=(this.index+1)%this.view.total,this.animate?this.animationState=this.isRTL?"right":"left":this.activeIndex=this.index):e===o.Dir.Prev&&this.view.canMovePrev()&&(this.index=0===this.index?this.view.total-1:this.index-1,this.animate?this.animationState=this.isRTL?"left":"right":this.activeIndex=this.index)},Object.defineProperty(e.prototype,"isRTL",{get:function(){return"rtl"===this.direction},enumerable:!0,configurable:!0}),i.__decorate([a.Input(),i.__metadata("design:type",Array)],e.prototype,"data",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Number),i.__metadata("design:paramtypes",[Number])],e.prototype,"activeIndex",null),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"width",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"height",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"endless",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"pagerOverlay",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"animate",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"pageable",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"arrows",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"itemChanged",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"activeIndexChange",void 0),i.__decorate([a.ContentChild(a.TemplateRef,{static:!1}),i.__metadata("design:type",a.TemplateRef)],e.prototype,"itemTemplateRef",void 0),i.__decorate([a.HostBinding("class.k-widget"),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[])],e.prototype,"widgetClass",null),i.__decorate([a.HostBinding("class.k-scrollview"),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[])],e.prototype,"scrollViewClass",null),i.__decorate([a.HostBinding("class.k-scrollview-light"),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[])],e.prototype,"scrollViewLightOverlayClass",null),i.__decorate([a.HostBinding("class.k-scrollview-dark"),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[])],e.prototype,"scrollViewDarkOverlayClass",null),i.__decorate([a.HostBinding("style.width"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],e.prototype,"hostWidth",null),i.__decorate([a.HostBinding("style.height"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],e.prototype,"hostHeight",null),i.__decorate([a.HostBinding("attr.tabindex"),i.__metadata("design:type",Number),i.__metadata("design:paramtypes",[])],e.prototype,"tabIndex",null),i.__decorate([a.HostBinding("attr.aria-live"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],e.prototype,"ariaLive",null),i.__decorate([a.HostBinding("attr.dir"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],e.prototype,"dir",null),i.__decorate([a.HostBinding("style.touch-action"),i.__metadata("design:type",String)],e.prototype,"touchAction",void 0),i.__decorate([a.HostListener("keydown",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],e.prototype,"keyDown",null),e=i.__decorate([a.Component({animations:[r.trigger("animateTo",[r.state("center, left, right",r.style({transform:"translateX(0)"})),r.transition("* => right",[r.animate("300ms ease-out",r.style({transform:"translateX(100%)"}))]),r.transition("* => left",[r.animate("300ms ease-out",r.style({transform:"translateX(-100%)"}))]),r.transition("* => center",[r.animate("300ms ease-out")])])],exportAs:"kendoScrollView",providers:[p.LocalizationService,{provide:p.L10N_PREFIX,useValue:"kendo.scrollview"}],selector:"kendo-scrollview",template:'\n        <ul class=\'k-scrollview-wrap\'\n            [ngStyle]="{ transform: transitionStyle }"\n            [@animateTo]="animationState"\n            (@animateTo.done)="transitionEndHandler($event)"\n            kendoDraggable\n            (kendoDrag)="handleDrag($event)"\n            (kendoPress)="handlePress($event)"\n            (kendoRelease)="handleRelease($event)"\n        >\n            <li\n                *ngFor="let item of view;let i=index"\n                [ngStyle]="inlineListItemStyles(i)"\n                [attr.aria-hidden]="i !== 1"\n            >\n                <ng-template\n                    [ngTemplateOutlet]="itemTemplateRef"\n                    [ngTemplateOutletContext]="{ item: item }">\n                </ng-template>\n            </li>\n      </ul>\n        <div class=\'k-scrollview-elements\'\n            [ngStyle]="{\'height\': height}"\n            *ngIf="!isDataSourceEmpty && (pageable||arrows)">\n\n            <a class="k-scrollview-prev"\n                aria-label="previous"\n                *ngIf="arrows && displayLeftArrow()"\n                (click)="leftArrowClick()">\n                <span class="k-icon k-i-arrowhead-w"></span>\n            </a>\n            <a class="k-scrollview-next"\n                aria-label="next"\n                *ngIf="arrows && displayRightArrow()"\n                (click)="rightArrowClick()">\n                <span class="k-icon k-i-arrowhead-e"></span>\n            </a>\n            <kendo-scrollview-pager\n                class=\'k-scrollview-nav-wrap\'\n                *ngIf="pageable"\n                (pagerIndexChange)="pageChange($event)"\n                [data]="data"\n                [activeIndex]="activeIndex">\n            </kendo-scrollview-pager>\n        </div>\n    '}),i.__metadata("design:paramtypes",[a.ElementRef,a.ApplicationRef,p.LocalizationService,a.NgZone])],e)}();t.ScrollViewComponent=u},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),a=n(0),r=n(0),o=function(){function e(){this.pagerIndexChange=new r.EventEmitter}return e.prototype.itemClass=function(e){return{"k-primary":e===this.activeIndex}},e.prototype.indexChange=function(e){this.pagerIndexChange.emit(e)},i.__decorate([a.Input(),i.__metadata("design:type",Number)],e.prototype,"activeIndex",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Array)],e.prototype,"data",void 0),i.__decorate([a.Output(),i.__metadata("design:type",r.EventEmitter)],e.prototype,"pagerIndexChange",void 0),e=i.__decorate([a.Component({selector:"kendo-scrollview-pager",template:'\n      <ul class="k-scrollview-pageable k-scrollview-nav">\n        <li class="k-button" *ngFor="let item of data; let i = index"\n            [ngClass]="itemClass(i)"\n            (click)="indexChange(i)">\n        </li>\n      </ul>\n    '})],e)}();t.ScrollViewPagerComponent=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);t.ScrollViewComponent=i.ScrollViewComponent;var a=n(12);t.ScrollViewModule=a.ScrollViewModule;var r=n(4);t.ScrollViewPagerComponent=r.ScrollViewPagerComponent},function(e,t){e.exports=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){e[e.Next=1]="Next",e[e.Prev=-1]="Prev"}(t.Dir||(t.Dir={}))},function(e,t){e.exports=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.packageMetadata={name:"@progress/kendo-angular-scrollview",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1635493249,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,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){if("function"==typeof Symbol&&Symbol.iterator)return Symbol.iterator;for(var e=Object.getOwnPropertyNames(Map.prototype),t=Map.prototype,n=0;n<e.length;++n){var i=e[n];if("entries"!==i&&"size"!==i&&t[i]===t.entries)return i}}();var a={},r=function(){function e(e,t,n,i,a){this.rtl=!1,this.source=e||[],this.index=t||0,this.endless=n,this.pageIndex=i,this.rtl=a}return Object.defineProperty(e.prototype,"data",{get:function(){var e,t=this.total;this.endless?e=[this.source[(this.index-1+t)%t],this.source[this.index%t],this.source[(this.index+1+t)%t]]:e=[a].concat(this.source,[a]).slice(this.index,this.index+3);null!==this.pageIndex&&(e[this.pageIndex>this.index?2:0]=this.source[this.pageIndex]);return this.rtl?e.reverse():e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"total",{get:function(){return this.source.length},enumerable:!0,configurable:!0}),e.prototype.canMoveNext=function(){return this.endless||this.index<this.total-1},e.prototype.canMovePrev=function(){return this.endless||this.index>0},e.prototype[i]=function(){return this.data[i]()},e}();t.DataResultIterator=r;var o=function(){function e(e){this.accessor=e}return Object.defineProperty(e.prototype,"length",{get:function(){return this.accessor().data.length},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"total",{get:function(){return this.accessor().total},enumerable:!0,configurable:!0}),e.prototype.item=function(e){return this.accessor().data[e]},e.prototype.canMoveNext=function(){return this.accessor().canMoveNext()},e.prototype.canMovePrev=function(){return this.accessor().canMovePrev()},e.prototype[Symbol.iterator]=function(){return this.accessor()[Symbol.iterator]()},e}();t.DataCollection=o},function(e,t){e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),a=n(0),r=n(13),o=n(2),s=n(4),l=n(3),d=[o.ScrollViewComponent,s.ScrollViewPagerComponent],c=[o.ScrollViewComponent],p=function(){function e(){}return e=i.__decorate([a.NgModule({declarations:[d],exports:[c],imports:[r.CommonModule,l.DraggableModule]})],e)}();t.ScrollViewModule=p},function(e,t){e.exports=o}])}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("tslib"),require("@progress/kendo-angular-common"),require("@angular/animations"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-l10n"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","tslib","@progress/kendo-angular-common","@angular/animations","@progress/kendo-licensing","@progress/kendo-angular-l10n","@angular/common"],t):"object"==typeof exports?exports.KendoAngularScrollview=t(require("@angular/core"),require("tslib"),require("@progress/kendo-angular-common"),require("@angular/animations"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-l10n"),require("@angular/common")):e.KendoAngularScrollview=t(e["@angular/core"],e.tslib,e["@progress/kendo-angular-common"],e["@angular/animations"],e["@progress/kendo-licensing"],e["@progress/kendo-angular-l10n"],e["@angular/common"])}(window,(function(e,t,n,i,a,r,o){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=5)}([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(1),a=n(0),r=n(6),o=n(7),s=n(3),l=n(8),d=n(9),p=n(10),c=n(11),u=function(){function e(e,t,n,i){var r=this;this.element=e,this.localization=t,this.ngZone=n,this.renderer=i,this.data=[],this.endless=!1,this.pagerOverlay="none",this.animate=!0,this.pageable=!1,this.arrows=!1,this.itemChanged=new a.EventEmitter,this.activeIndexChange=new a.EventEmitter,this.scrollViewClass=!0,this.tabIndex=1,this.ariaLive="assertive",this.touchAction="pan-y pinch-zoom",this.animationState=null,this.view=new p.DataCollection((function(){return new p.DataResultIterator(r.data,r.activeIndex,r.endless,r.pageIndex,r.isRTL)})),this.isDataSourceEmpty=!1,this._activeIndex=0,this.index=0,this.pageIndex=null,this.transforms=["translateX(-100%)","translateX(0%)","translateX(100%)"],l.validatePackage(d.packageMetadata)}return Object.defineProperty(e.prototype,"activeIndex",{get:function(){return this._activeIndex},set:function(e){this.index=this._activeIndex=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollViewLightOverlayClass",{get:function(){return"light"===this.pagerOverlay},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollViewDarkOverlayClass",{get:function(){return"dark"===this.pagerOverlay},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"hostWidth",{get:function(){return this.width},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"hostHeight",{get:function(){return this.height},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"dir",{get:function(){return this.direction},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"direction",{get:function(){return this.localization.rtl?"rtl":"ltr"},enumerable:!0,configurable:!0}),e.prototype.keyDown=function(e){e.keyCode===s.Keys.ArrowLeft&&(this.isRTL?this.next():this.prev()),e.keyCode===s.Keys.ArrowRight&&(this.isRTL?this.prev():this.next())},e.prototype.ngOnChanges=function(e){this.activeIndex=Math.max(Math.min(this.activeIndex,this.view.total-1),0)},e.prototype.prev=function(){this.navigate(o.Dir.Prev)},e.prototype.next=function(){this.navigate(o.Dir.Next)},e.prototype.transitionEndHandler=function(e){this.animationState=null,"left"!==e.toState&&"right"!==e.toState||(null!==this.pageIndex&&(this.activeIndex=this.pageIndex,this.pageIndex=null),this.activeIndex=this.index,this.activeIndexChange.emit(this.activeIndex),this.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)}))},e.prototype.handlePress=function(e){this.initialTouchCoordinate=e.pageX},e.prototype.handleDrag=function(e){var t=e.pageX-this.initialTouchCoordinate;this.animationState||this.isDragForbidden(t)||!this.draggedInsideBounds(t)||this.renderer.setStyle(this.itemWrapper.nativeElement,"transform","translateX("+t+"px)")},e.prototype.handleRelease=function(e){var t=this,n=e.pageX-this.initialTouchCoordinate;this.isDragForbidden(n)||this.ngZone.run((function(){t.draggedEnoughToNavigate(n)?(t.isRTL?t.changeIndex(n<0?o.Dir.Prev:o.Dir.Next):t.changeIndex(n>0?o.Dir.Prev:o.Dir.Next),t.animate||(t.renderer.removeStyle(t.itemWrapper.nativeElement,"transform"),t.activeIndexChange.emit(t.activeIndex),t.itemChanged.emit({index:t.activeIndex,item:t.view.item(1)}))):t.animate&&n?t.animationState="center":t.renderer.removeStyle(t.itemWrapper.nativeElement,"transform")}))},e.prototype.pageChange=function(e){this.animationState||this.activeIndex===e||(this.animate?(this.pageIndex=e,this.isRTL?this.animationState=this.pageIndex>this.index?"right":"left":this.animationState=this.pageIndex>this.index?"left":"right"):this.activeIndex=e)},e.prototype.inlineListItemStyles=function(e){return{height:this.height,transform:this.transforms[e],width:"100%"}},e.prototype.displayLeftArrow=function(){var e;return e=this.isRTL?this.activeIndex+1<this.view.total:this.activeIndex>0,(this.endless||e)&&this.view.total>0},e.prototype.leftArrowClick=function(){this.isRTL?this.next():this.prev()},e.prototype.displayRightArrow=function(){var e;return e=this.isRTL?this.activeIndex>0:this.activeIndex+1<this.view.total,(this.endless||e)&&this.view.total>0},e.prototype.rightArrowClick=function(){this.isRTL?this.prev():this.next()},e.prototype.draggedInsideBounds=function(e){return Math.abs(e)<=this.element.nativeElement.offsetWidth},e.prototype.draggedEnoughToNavigate=function(e){return Math.abs(e)>this.element.nativeElement.offsetWidth/2},e.prototype.isDragForbidden=function(e){var t,n;return t=this.isRTL?e<0&&0!==e:e>0&&0!==e,n=0===this.activeIndex&&t||this.activeIndex===this.view.total-1&&!t,!this.endless&&n},e.prototype.navigate=function(e){this.isDataSourceEmpty||this.animationState||(this.changeIndex(e),this.animate||(this.activeIndexChange.emit(this.activeIndex),this.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)})))},e.prototype.changeIndex=function(e){e===o.Dir.Next&&this.view.canMoveNext()?(this.index=(this.index+1)%this.view.total,this.animate?this.animationState=this.isRTL?"right":"left":this.activeIndex=this.index):e===o.Dir.Prev&&this.view.canMovePrev()&&(this.index=0===this.index?this.view.total-1:this.index-1,this.animate?this.animationState=this.isRTL?"left":"right":this.activeIndex=this.index)},Object.defineProperty(e.prototype,"isRTL",{get:function(){return"rtl"===this.direction},enumerable:!0,configurable:!0}),i.__decorate([a.Input(),i.__metadata("design:type",Array)],e.prototype,"data",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Number),i.__metadata("design:paramtypes",[Number])],e.prototype,"activeIndex",null),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"width",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"height",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"endless",void 0),i.__decorate([a.Input(),i.__metadata("design:type",String)],e.prototype,"pagerOverlay",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"animate",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"pageable",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Boolean)],e.prototype,"arrows",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"itemChanged",void 0),i.__decorate([a.Output(),i.__metadata("design:type",a.EventEmitter)],e.prototype,"activeIndexChange",void 0),i.__decorate([a.ContentChild(a.TemplateRef,{static:!1}),i.__metadata("design:type",a.TemplateRef)],e.prototype,"itemTemplateRef",void 0),i.__decorate([a.ViewChild("itemWrapper",{static:!1}),i.__metadata("design:type",a.ElementRef)],e.prototype,"itemWrapper",void 0),i.__decorate([a.HostBinding("class.k-scrollview"),i.__metadata("design:type",Boolean)],e.prototype,"scrollViewClass",void 0),i.__decorate([a.HostBinding("class.k-scrollview-light"),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[])],e.prototype,"scrollViewLightOverlayClass",null),i.__decorate([a.HostBinding("class.k-scrollview-dark"),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[])],e.prototype,"scrollViewDarkOverlayClass",null),i.__decorate([a.HostBinding("style.width"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],e.prototype,"hostWidth",null),i.__decorate([a.HostBinding("style.height"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],e.prototype,"hostHeight",null),i.__decorate([a.HostBinding("attr.tabindex"),i.__metadata("design:type",Number)],e.prototype,"tabIndex",void 0),i.__decorate([a.HostBinding("attr.aria-live"),i.__metadata("design:type",String)],e.prototype,"ariaLive",void 0),i.__decorate([a.HostBinding("attr.dir"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],e.prototype,"dir",null),i.__decorate([a.HostBinding("style.touch-action"),i.__metadata("design:type",String)],e.prototype,"touchAction",void 0),i.__decorate([a.HostListener("keydown",["$event"]),i.__metadata("design:type",Function),i.__metadata("design:paramtypes",[Object]),i.__metadata("design:returntype",void 0)],e.prototype,"keyDown",null),e=i.__decorate([a.Component({animations:[r.trigger("animateTo",[r.state("center, left, right",r.style({transform:"translateX(0)"})),r.transition("* => right",[r.animate("300ms ease-out",r.style({transform:"translateX(100%)"}))]),r.transition("* => left",[r.animate("300ms ease-out",r.style({transform:"translateX(-100%)"}))]),r.transition("* => center",[r.animate("300ms ease-out")])])],exportAs:"kendoScrollView",providers:[c.LocalizationService,{provide:c.L10N_PREFIX,useValue:"kendo.scrollview"}],selector:"kendo-scrollview",template:'\n        <ul class=\'k-scrollview-wrap\'\n            #itemWrapper\n            [@animateTo]="animationState"\n            (@animateTo.done)="transitionEndHandler($event)"\n            kendoDraggable\n            (kendoDrag)="handleDrag($event)"\n            (kendoPress)="handlePress($event)"\n            (kendoRelease)="handleRelease($event)"\n        >\n            <li\n                *ngFor="let item of view;let i=index"\n                [ngStyle]="inlineListItemStyles(i)"\n                [attr.aria-hidden]="i !== 1"\n            >\n                <ng-template\n                    [ngTemplateOutlet]="itemTemplateRef"\n                    [ngTemplateOutletContext]="{ item: item }">\n                </ng-template>\n            </li>\n      </ul>\n        <div class=\'k-scrollview-elements\'\n            [ngStyle]="{\'height\': height}"\n            *ngIf="!isDataSourceEmpty && (pageable||arrows)">\n\n            <a class="k-scrollview-prev"\n                aria-label="previous"\n                *ngIf="arrows && displayLeftArrow()"\n                (click)="leftArrowClick()">\n                <span class="k-icon k-i-arrowhead-w"></span>\n            </a>\n            <a class="k-scrollview-next"\n                aria-label="next"\n                *ngIf="arrows && displayRightArrow()"\n                (click)="rightArrowClick()">\n                <span class="k-icon k-i-arrowhead-e"></span>\n            </a>\n            <kendo-scrollview-pager\n                class=\'k-scrollview-nav-wrap\'\n                *ngIf="pageable"\n                (pagerIndexChange)="pageChange($event)"\n                [data]="data"\n                [activeIndex]="activeIndex">\n            </kendo-scrollview-pager>\n        </div>\n    '}),i.__metadata("design:paramtypes",[a.ElementRef,c.LocalizationService,a.NgZone,a.Renderer2])],e)}();t.ScrollViewComponent=u},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),a=n(0),r=n(0),o=function(){function e(){this.pagerIndexChange=new r.EventEmitter}return e.prototype.itemClass=function(e){return{"k-primary":e===this.activeIndex}},e.prototype.indexChange=function(e){this.pagerIndexChange.emit(e)},i.__decorate([a.Input(),i.__metadata("design:type",Number)],e.prototype,"activeIndex",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Array)],e.prototype,"data",void 0),i.__decorate([a.Output(),i.__metadata("design:type",r.EventEmitter)],e.prototype,"pagerIndexChange",void 0),e=i.__decorate([a.Component({selector:"kendo-scrollview-pager",template:'\n      <ul class="k-scrollview-pageable k-scrollview-nav">\n        <li class="k-button" *ngFor="let item of data; let i = index"\n            [ngClass]="itemClass(i)"\n            (click)="indexChange(i)">\n        </li>\n      </ul>\n    '})],e)}();t.ScrollViewPagerComponent=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2);t.ScrollViewComponent=i.ScrollViewComponent;var a=n(12);t.ScrollViewModule=a.ScrollViewModule;var r=n(4);t.ScrollViewPagerComponent=r.ScrollViewPagerComponent},function(e,t){e.exports=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){e[e.Next=1]="Next",e[e.Prev=-1]="Prev"}(t.Dir||(t.Dir={}))},function(e,t){e.exports=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.packageMetadata={name:"@progress/kendo-angular-scrollview",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1642584306,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,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){if("function"==typeof Symbol&&Symbol.iterator)return Symbol.iterator;for(var e=Object.getOwnPropertyNames(Map.prototype),t=Map.prototype,n=0;n<e.length;++n){var i=e[n];if("entries"!==i&&"size"!==i&&t[i]===t.entries)return i}}();var a={},r=function(){function e(e,t,n,i,a){this.rtl=!1,this.source=e||[],this.index=t||0,this.endless=n,this.pageIndex=i,this.rtl=a}return Object.defineProperty(e.prototype,"data",{get:function(){var e,t=this.total;this.endless?e=[this.source[(this.index-1+t)%t],this.source[this.index%t],this.source[(this.index+1+t)%t]]:e=[a].concat(this.source,[a]).slice(this.index,this.index+3);null!==this.pageIndex&&(e[this.pageIndex>this.index?2:0]=this.source[this.pageIndex]);return this.rtl?e.reverse():e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"total",{get:function(){return this.source.length},enumerable:!0,configurable:!0}),e.prototype.canMoveNext=function(){return this.endless||this.index<this.total-1},e.prototype.canMovePrev=function(){return this.endless||this.index>0},e.prototype[i]=function(){return this.data[i]()},e}();t.DataResultIterator=r;var o=function(){function e(e){this.accessor=e}return Object.defineProperty(e.prototype,"length",{get:function(){return this.accessor().data.length},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"total",{get:function(){return this.accessor().total},enumerable:!0,configurable:!0}),e.prototype.item=function(e){return this.accessor().data[e]},e.prototype.canMoveNext=function(){return this.accessor().canMoveNext()},e.prototype.canMovePrev=function(){return this.accessor().canMovePrev()},e.prototype[Symbol.iterator]=function(){return this.accessor()[Symbol.iterator]()},e}();t.DataCollection=o},function(e,t){e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),a=n(0),r=n(13),o=n(2),s=n(4),l=n(3),d=[o.ScrollViewComponent,s.ScrollViewPagerComponent],p=[o.ScrollViewComponent],c=function(){function e(){}return e=i.__decorate([a.NgModule({declarations:[d],exports:[p],imports:[r.CommonModule,l.DraggableModule]})],e)}();t.ScrollViewModule=c},function(e,t){e.exports=o}])}));

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-scrollview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635493249,
+    publishDate: 1642584306,
     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/es/scrollview.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { ApplicationRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, NgZone } from '@angular/core';
+import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, NgZone, ViewChild, Renderer2 } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Dir } from './enums';
 import { Keys } from '@progress/kendo-angular-common';
@@ -65,12 +65,12 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
  * ```
  */
 var ScrollViewComponent = /** @class */ (function () {
-    function ScrollViewComponent(element, application, localization, ngZone) {
+    function ScrollViewComponent(element, localization, ngZone, renderer) {
         var _this = this;
         this.element = element;
-        this.application = application;
         this.localization = localization;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         /**
          * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
          */
@@ -109,9 +109,11 @@ var ScrollViewComponent = /** @class */ (function () {
          * Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
          */
         this.activeIndexChange = new EventEmitter();
+        this.scrollViewClass = true;
+        this.tabIndex = 1;
+        this.ariaLive = 'assertive';
         this.touchAction = 'pan-y pinch-zoom';
         this.animationState = null;
-        this.transitionStyle = null;
         this.view = new DataCollection(function () {
             return new DataResultIterator(_this.data, _this.activeIndex, _this.endless, _this.pageIndex, _this.isRTL);
         });
@@ -135,20 +137,6 @@ var ScrollViewComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ScrollViewComponent.prototype, "widgetClass", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewComponent.prototype, "scrollViewClass", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(ScrollViewComponent.prototype, "scrollViewLightOverlayClass", {
         get: function () {
             return this.pagerOverlay === 'light';
@@ -173,16 +161,6 @@ var ScrollViewComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ScrollViewComponent.prototype, "tabIndex", {
-        get: function () { return 1; },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewComponent.prototype, "ariaLive", {
-        get: function () { return 'assertive'; },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(ScrollViewComponent.prototype, "dir", {
         get: function () {
             return this.direction;
@@ -218,9 +196,6 @@ var ScrollViewComponent = /** @class */ (function () {
             }
         }
     };
-    /**
-     * @hidden
-     */
     ScrollViewComponent.prototype.ngOnChanges = function (_) {
         this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
     };
@@ -241,7 +216,6 @@ var ScrollViewComponent = /** @class */ (function () {
      */
     ScrollViewComponent.prototype.transitionEndHandler = function (e) {
         this.animationState = null;
-        this.transitionStyle = null;
         if (e.toState === 'left' || e.toState === 'right') {
             if (this.pageIndex !== null) {
                 this.activeIndex = this.pageIndex;
@@ -250,7 +224,6 @@ var ScrollViewComponent = /** @class */ (function () {
             this.activeIndex = this.index;
             this.activeIndexChange.emit(this.activeIndex);
             this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
-            this.application.tick();
         }
     };
     /**
@@ -263,13 +236,9 @@ var ScrollViewComponent = /** @class */ (function () {
      * @hidden
      */
     ScrollViewComponent.prototype.handleDrag = function (e) {
-        var _this = this;
         var deltaX = e.pageX - this.initialTouchCoordinate;
         if (!this.animationState && !this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
-            // TO DO: refactor to apply style without triggering the change detection
-            this.ngZone.run(function () {
-                _this.transitionStyle = "translateX(" + deltaX + "px)";
-            });
+            this.renderer.setStyle(this.itemWrapper.nativeElement, 'transform', "translateX(" + deltaX + "px)");
         }
     };
     /**
@@ -290,17 +259,17 @@ var ScrollViewComponent = /** @class */ (function () {
                     _this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
                 }
                 if (!_this.animate) {
-                    _this.transitionStyle = null;
+                    _this.renderer.removeStyle(_this.itemWrapper.nativeElement, 'transform');
                     _this.activeIndexChange.emit(_this.activeIndex);
                     _this.itemChanged.emit({ index: _this.activeIndex, item: _this.view.item(1) });
                 }
             }
-            else if (Math.abs(deltaX) > 0) {
-                if (_this.animate) {
+            else {
+                if (_this.animate && deltaX) {
                     _this.animationState = 'center';
                 }
                 else {
-                    _this.transitionStyle = null;
+                    _this.renderer.removeStyle(_this.itemWrapper.nativeElement, 'transform');
                 }
             }
         });
@@ -487,15 +456,13 @@ var ScrollViewComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", TemplateRef)
     ], ScrollViewComponent.prototype, "itemTemplateRef", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-widget'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ScrollViewComponent.prototype, "widgetClass", null);
+        ViewChild('itemWrapper', { static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], ScrollViewComponent.prototype, "itemWrapper", void 0);
     tslib_1.__decorate([
         HostBinding('class.k-scrollview'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ScrollViewComponent.prototype, "scrollViewClass", null);
+        tslib_1.__metadata("design:type", Boolean)
+    ], ScrollViewComponent.prototype, "scrollViewClass", void 0);
     tslib_1.__decorate([
         HostBinding('class.k-scrollview-light'),
         tslib_1.__metadata("design:type", Boolean),
@@ -518,14 +485,12 @@ var ScrollViewComponent = /** @class */ (function () {
     ], ScrollViewComponent.prototype, "hostHeight", null);
     tslib_1.__decorate([
         HostBinding('attr.tabindex'),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ScrollViewComponent.prototype, "tabIndex", null);
+        tslib_1.__metadata("design:type", Number)
+    ], ScrollViewComponent.prototype, "tabIndex", void 0);
     tslib_1.__decorate([
         HostBinding('attr.aria-live'),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ScrollViewComponent.prototype, "ariaLive", null);
+        tslib_1.__metadata("design:type", String)
+    ], ScrollViewComponent.prototype, "ariaLive", void 0);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String),
@@ -566,12 +531,12 @@ var ScrollViewComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-scrollview',
-            template: "\n        <ul class='k-scrollview-wrap'\n            [ngStyle]=\"{ transform: transitionStyle }\"\n            [@animateTo]=\"animationState\"\n            (@animateTo.done)=\"transitionEndHandler($event)\"\n            kendoDraggable\n            (kendoDrag)=\"handleDrag($event)\"\n            (kendoPress)=\"handlePress($event)\"\n            (kendoRelease)=\"handleRelease($event)\"\n        >\n            <li\n                *ngFor=\"let item of view;let i=index\"\n                [ngStyle]=\"inlineListItemStyles(i)\"\n                [attr.aria-hidden]=\"i !== 1\"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"itemTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n            </li>\n      </ul>\n        <div class='k-scrollview-elements'\n            [ngStyle]=\"{'height': height}\"\n            *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n            <a class=\"k-scrollview-prev\"\n                aria-label=\"previous\"\n                *ngIf=\"arrows && displayLeftArrow()\"\n                (click)=\"leftArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-w\"></span>\n            </a>\n            <a class=\"k-scrollview-next\"\n                aria-label=\"next\"\n                *ngIf=\"arrows && displayRightArrow()\"\n                (click)=\"rightArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-e\"></span>\n            </a>\n            <kendo-scrollview-pager\n                class='k-scrollview-nav-wrap'\n                *ngIf=\"pageable\"\n                (pagerIndexChange)=\"pageChange($event)\"\n                [data]=\"data\"\n                [activeIndex]=\"activeIndex\">\n            </kendo-scrollview-pager>\n        </div>\n    "
+            template: "\n        <ul class='k-scrollview-wrap'\n            #itemWrapper\n            [@animateTo]=\"animationState\"\n            (@animateTo.done)=\"transitionEndHandler($event)\"\n            kendoDraggable\n            (kendoDrag)=\"handleDrag($event)\"\n            (kendoPress)=\"handlePress($event)\"\n            (kendoRelease)=\"handleRelease($event)\"\n        >\n            <li\n                *ngFor=\"let item of view;let i=index\"\n                [ngStyle]=\"inlineListItemStyles(i)\"\n                [attr.aria-hidden]=\"i !== 1\"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"itemTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n            </li>\n      </ul>\n        <div class='k-scrollview-elements'\n            [ngStyle]=\"{'height': height}\"\n            *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n            <a class=\"k-scrollview-prev\"\n                aria-label=\"previous\"\n                *ngIf=\"arrows && displayLeftArrow()\"\n                (click)=\"leftArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-w\"></span>\n            </a>\n            <a class=\"k-scrollview-next\"\n                aria-label=\"next\"\n                *ngIf=\"arrows && displayRightArrow()\"\n                (click)=\"rightArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-e\"></span>\n            </a>\n            <kendo-scrollview-pager\n                class='k-scrollview-nav-wrap'\n                *ngIf=\"pageable\"\n                (pagerIndexChange)=\"pageChange($event)\"\n                [data]=\"data\"\n                [activeIndex]=\"activeIndex\">\n            </kendo-scrollview-pager>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [ElementRef,
-            ApplicationRef,
             LocalizationService,
-            NgZone])
+            NgZone,
+            Renderer2])
     ], ScrollViewComponent);
     return ScrollViewComponent;
 }());

package/dist/es2015/index.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":86,"character":1},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":88,"character":8},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":89,"character":12},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":89,"character":41},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":90,"character":12},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":91,"character":16},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":91,"character":42},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":93,"character":12},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":94,"character":16},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":94,"character":42},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":96,"character":12},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":97,"character":16},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":103,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":105,"character":21},"useValue":"kendo.scrollview"}],"selector":"kendo-scrollview","template":"\n        <ul class='k-scrollview-wrap'\n            [ngStyle]=\"{ transform: transitionStyle }\"\n            [@animateTo]=\"animationState\"\n            (@animateTo.done)=\"transitionEndHandler($event)\"\n            kendoDraggable\n            (kendoDrag)=\"handleDrag($event)\"\n            (kendoPress)=\"handlePress($event)\"\n            (kendoRelease)=\"handleRelease($event)\"\n        >\n            <li\n                *ngFor=\"let item of view;let i=index\"\n                [ngStyle]=\"inlineListItemStyles(i)\"\n                [attr.aria-hidden]=\"i !== 1\"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"itemTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n            </li>\n      </ul>\n        <div class='k-scrollview-elements'\n            [ngStyle]=\"{'height': height}\"\n            *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n            <a class=\"k-scrollview-prev\"\n                aria-label=\"previous\"\n                *ngIf=\"arrows && displayLeftArrow()\"\n                (click)=\"leftArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-w\"></span>\n            </a>\n            <a class=\"k-scrollview-next\"\n                aria-label=\"next\"\n                *ngIf=\"arrows && displayRightArrow()\"\n                (click)=\"rightArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-e\"></span>\n            </a>\n            <kendo-scrollview-pager\n                class='k-scrollview-nav-wrap'\n                *ngIf=\"pageable\"\n                (pagerIndexChange)=\"pageChange($event)\"\n                [data]=\"data\"\n                [activeIndex]=\"activeIndex\">\n            </kendo-scrollview-pager>\n        </div>\n    "}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":5}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":167,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":185,"character":5}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":5}}]}],"pagerOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":5}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":5}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":5}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":216,"character":5}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":221,"character":5}}]}],"activeIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":226,"character":5}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":228,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":228,"character":18},{"static":false}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":231,"character":5},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":235,"character":5},"arguments":["class.k-scrollview"]}]}],"scrollViewLightOverlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":239,"character":5},"arguments":["class.k-scrollview-light"]}]}],"scrollViewDarkOverlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":243,"character":5},"arguments":["class.k-scrollview-dark"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":247,"character":5},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":248,"character":5},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":249,"character":5},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":250,"character":5},"arguments":["attr.aria-live"]}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":252,"character":5},"arguments":["attr.dir"]}]}],"touchAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":256,"character":5},"arguments":["style.touch-action"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":277,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":278,"character":31},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":279,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":280,"character":24}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":288,"character":5},"arguments":["keydown",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"transitionEndHandler":[{"__symbolic":"method"}],"handlePress":[{"__symbolic":"method"}],"handleDrag":[{"__symbolic":"method"}],"handleRelease":[{"__symbolic":"method"}],"pageChange":[{"__symbolic":"method"}],"inlineListItemStyles":[{"__symbolic":"method"}],"displayLeftArrow":[{"__symbolic":"method"}],"leftArrowClick":[{"__symbolic":"method"}],"displayRightArrow":[{"__symbolic":"method"}],"rightArrowClick":[{"__symbolic":"method"}],"draggedInsideBounds":[{"__symbolic":"method"}],"draggedEnoughToNavigate":[{"__symbolic":"method"}],"isDragForbidden":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"changeIndex":[{"__symbolic":"method"}]}},"ScrollViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":46,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"ScrollViewComponent"},{"__symbolic":"reference","name":"ScrollViewPagerComponent"}]],"exports":[[{"__symbolic":"reference","name":"ScrollViewComponent"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":49,"character":14},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"DraggableModule","line":49,"character":28}]}]}],"members":{}},"ScrollViewPagerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"kendo-scrollview-pager","template":"\n      <ul class=\"k-scrollview-pageable k-scrollview-nav\">\n        <li class=\"k-button\" *ngFor=\"let item of data; let i = index\"\n            [ngClass]=\"itemClass(i)\"\n            (click)=\"indexChange(i)\">\n        </li>\n      </ul>\n    "}]}],"members":{"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"pagerIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"itemClass":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}},"ItemChangedEvent":{"__symbolic":"interface"},"ScrollViewPagerOverlay":{"__symbolic":"interface"}},"origins":{"ScrollViewComponent":"./scrollview.component","ScrollViewModule":"./scrollview.module","ScrollViewPagerComponent":"./scrollview-pager.component","ItemChangedEvent":"./change-event-args","ScrollViewPagerOverlay":"./enums"},"importAs":"@progress/kendo-angular-scrollview"}
+{"__symbolic":"module","version":4,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":87,"character":1},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":89,"character":8},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":90,"character":12},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":90,"character":41},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":91,"character":12},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":92,"character":16},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":92,"character":42},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":94,"character":12},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":95,"character":16},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":95,"character":42},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":97,"character":12},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":98,"character":16},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":104,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":106,"character":21},"useValue":"kendo.scrollview"}],"selector":"kendo-scrollview","template":"\n        <ul class='k-scrollview-wrap'\n            #itemWrapper\n            [@animateTo]=\"animationState\"\n            (@animateTo.done)=\"transitionEndHandler($event)\"\n            kendoDraggable\n            (kendoDrag)=\"handleDrag($event)\"\n            (kendoPress)=\"handlePress($event)\"\n            (kendoRelease)=\"handleRelease($event)\"\n        >\n            <li\n                *ngFor=\"let item of view;let i=index\"\n                [ngStyle]=\"inlineListItemStyles(i)\"\n                [attr.aria-hidden]=\"i !== 1\"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"itemTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n            </li>\n      </ul>\n        <div class='k-scrollview-elements'\n            [ngStyle]=\"{'height': height}\"\n            *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n            <a class=\"k-scrollview-prev\"\n                aria-label=\"previous\"\n                *ngIf=\"arrows && displayLeftArrow()\"\n                (click)=\"leftArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-w\"></span>\n            </a>\n            <a class=\"k-scrollview-next\"\n                aria-label=\"next\"\n                *ngIf=\"arrows && displayRightArrow()\"\n                (click)=\"rightArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-e\"></span>\n            </a>\n            <kendo-scrollview-pager\n                class='k-scrollview-nav-wrap'\n                *ngIf=\"pageable\"\n                (pagerIndexChange)=\"pageChange($event)\"\n                [data]=\"data\"\n                [activeIndex]=\"activeIndex\">\n            </kendo-scrollview-pager>\n        </div>\n    "}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":163,"character":5}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":168,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":5}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":193,"character":5}}]}],"pagerOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":199,"character":5}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":205,"character":5}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":211,"character":5}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":217,"character":5}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":5}}]}],"activeIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":227,"character":5}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":229,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":229,"character":18},{"static":false}]}]}],"itemWrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":232,"character":5},"arguments":["itemWrapper",{"static":false}]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":235,"character":5},"arguments":["class.k-scrollview"]}]}],"scrollViewLightOverlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":237,"character":5},"arguments":["class.k-scrollview-light"]}]}],"scrollViewDarkOverlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":241,"character":5},"arguments":["class.k-scrollview-dark"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":245,"character":5},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":246,"character":5},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":247,"character":5},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":248,"character":5},"arguments":["attr.aria-live"]}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":250,"character":5},"arguments":["attr.dir"]}]}],"touchAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":254,"character":5},"arguments":["style.touch-action"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":273,"character":27},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":274,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":275,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":276,"character":26}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":284,"character":5},"arguments":["keydown",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"transitionEndHandler":[{"__symbolic":"method"}],"handlePress":[{"__symbolic":"method"}],"handleDrag":[{"__symbolic":"method"}],"handleRelease":[{"__symbolic":"method"}],"pageChange":[{"__symbolic":"method"}],"inlineListItemStyles":[{"__symbolic":"method"}],"displayLeftArrow":[{"__symbolic":"method"}],"leftArrowClick":[{"__symbolic":"method"}],"displayRightArrow":[{"__symbolic":"method"}],"rightArrowClick":[{"__symbolic":"method"}],"draggedInsideBounds":[{"__symbolic":"method"}],"draggedEnoughToNavigate":[{"__symbolic":"method"}],"isDragForbidden":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"changeIndex":[{"__symbolic":"method"}]}},"ScrollViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":46,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"ScrollViewComponent"},{"__symbolic":"reference","name":"ScrollViewPagerComponent"}]],"exports":[[{"__symbolic":"reference","name":"ScrollViewComponent"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":49,"character":14},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"DraggableModule","line":49,"character":28}]}]}],"members":{}},"ScrollViewPagerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"kendo-scrollview-pager","template":"\n      <ul class=\"k-scrollview-pageable k-scrollview-nav\">\n        <li class=\"k-button\" *ngFor=\"let item of data; let i = index\"\n            [ngClass]=\"itemClass(i)\"\n            (click)=\"indexChange(i)\">\n        </li>\n      </ul>\n    "}]}],"members":{"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"pagerIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"itemClass":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}},"ItemChangedEvent":{"__symbolic":"interface"},"ScrollViewPagerOverlay":{"__symbolic":"interface"}},"origins":{"ScrollViewComponent":"./scrollview.component","ScrollViewModule":"./scrollview.module","ScrollViewPagerComponent":"./scrollview-pager.component","ItemChangedEvent":"./change-event-args","ScrollViewPagerOverlay":"./enums"},"importAs":"@progress/kendo-angular-scrollview"}

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-scrollview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635493249,
+    publishDate: 1642584306,
     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/scrollview.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ApplicationRef, ElementRef, EventEmitter, OnChanges, TemplateRef, NgZone } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges, TemplateRef, NgZone, Renderer2 } from '@angular/core';
 import { AnimationEvent } from '@angular/animations';
 import { AnimationState, ScrollViewPagerOverlay } from './enums';
 import { ItemChangedEvent } from './change-event-args';
@@ -64,9 +64,9 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
  */
 export declare class ScrollViewComponent implements OnChanges {
     protected element: ElementRef;
-    protected application: ApplicationRef;
     private localization;
     private ngZone;
+    private renderer;
     /**
      * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
      */
@@ -120,18 +120,17 @@ export declare class ScrollViewComponent implements OnChanges {
      */
     activeIndexChange: EventEmitter<number>;
     itemTemplateRef: TemplateRef<any>;
-    readonly widgetClass: boolean;
-    readonly scrollViewClass: boolean;
+    itemWrapper: ElementRef;
+    scrollViewClass: boolean;
     readonly scrollViewLightOverlayClass: boolean;
     readonly scrollViewDarkOverlayClass: boolean;
     readonly hostWidth: string;
     readonly hostHeight: string;
-    readonly tabIndex: number;
-    readonly ariaLive: string;
+    tabIndex: number;
+    ariaLive: string;
     readonly dir: Direction;
     touchAction: string;
     animationState: AnimationState;
-    transitionStyle: string;
     view: DataCollection;
     isDataSourceEmpty: boolean;
     private _activeIndex;
@@ -140,14 +139,11 @@ export declare class ScrollViewComponent implements OnChanges {
     private pageIndex;
     private transforms;
     private readonly direction;
-    constructor(element: ElementRef, application: ApplicationRef, localization: LocalizationService, ngZone: NgZone);
+    constructor(element: ElementRef, localization: LocalizationService, ngZone: NgZone, renderer: Renderer2);
     /**
      * @hidden
      */
     keyDown(e: any): void;
-    /**
-     * @hidden
-     */
     ngOnChanges(_: any): void;
     /**
      * Navigates the ScrollView to the previous item.