@progress/kendo-angular-scrollview - npm Package Compare versions

Comparing version 0.8.5 to 0.9.0

dist/cdn/js/kendo-angular-scrollview.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("rxjs/symbol/iterator"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","rxjs/symbol/iterator","@angular/common"],t):"object"==typeof exports?exports.KendoAngularScrollview=t(require("@angular/core"),require("rxjs/symbol/iterator"),require("@angular/common")):e.KendoAngularScrollview=t(e["@angular/core"],e["rxjs/symbol/iterator"],e["@angular/common"])}(this,function(e,t,n){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";var i=n(1);t.ScrollViewComponent=i.ScrollViewComponent;var o=n(6);t.ScrollViewModule=o.ScrollViewModule;var r=n(8);t.ScrollViewPagerComponent=r.ScrollViewPagerComponent;var a=n(9);t.KendoDraggableDirective=a.KendoDraggableDirective},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,n,a):o(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},r=n(2),a=n(3),s=n(4),l=function(){function e(e,t){var n=this;this.element=e,this.application=t,this.data=[],this.endless=!1,this.animate=!0,this.pageable=!1,this.arrows=!1,this.itemChanged=new r.EventEmitter,this.animationState=null,this.transitionStyle={},this.view=new s.DataCollection(function(){return new s.DataResultIterator(n.data,n.activeIndex,n.endless,n.pageIndex)}),this.isDataSourceEmpty=!1,this._activeIndex=0,this.index=0,this.pageIndex=null,this.transforms=["translateX(-100%)","translateX(0%)","translateX(100%)"]}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,"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}),e.prototype.keyDown=function(e){e.keyCode===a.Keys.LeftArrow&&this.prev(),e.keyCode===a.Keys.RightArrow&&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(a.Dir.Prev)},e.prototype.next=function(){this.navigate(a.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.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=e.pageX-this.initialTouchCoordinate;this.animationState||this.isDragForbidden(t)||!this.draggedInsideBounds(t)||(this.transitionStyle={transform:"translateX("+t+"px)"})},e.prototype.handleRelease=function(e){var t=e.pageX-this.initialTouchCoordinate;this.isDragForbidden(t)||(this.draggedEnoughToNavigate(t)?(this.changeIndex(t>0?a.Dir.Prev:a.Dir.Next),this.animate||(this.transitionStyle=null,this.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)}))):Math.abs(t)>0&&(this.animate?this.animationState="center":this.transitionStyle=null))},e.prototype.pageChange=function(e){this.animationState||this.activeIndex===e||(this.animate?(this.pageIndex=e,this.animationState=this.pageIndex>this.index?"left":"right"):this.activeIndex=e)},e.prototype.inlineStyles=function(e){return{height:this.height,transform:this.transforms[e],width:this.width}},e.prototype.displayPrevArrow=function(){return(this.endless||this.activeIndex>0)&&this.view.total>0},e.prototype.displayNextArrow=function(){return(this.endless||this.activeIndex+1<this.view.total)&&this.view.total>0},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){return!this.endless&&(0===this.activeIndex&&e>0||this.activeIndex===this.view.total-1&&e<0)},e.prototype.navigate=function(e){this.isDataSourceEmpty||this.animationState||(this.changeIndex(e),this.animate||this.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)}))},e.prototype.changeIndex=function(e){e===a.Dir.Next&&this.view.canMoveNext()?(this.index=(this.index+1)%this.view.total,this.animate?this.animationState="left":this.activeIndex=this.index):e===a.Dir.Prev&&this.view.canMovePrev()&&(this.index=0===this.index?this.view.total-1:this.index-1,this.animate?this.animationState="right":this.activeIndex=this.index)},i([r.Input(),o("design:type",Array)],e.prototype,"data",void 0),i([r.Input(),o("design:type",Number),o("design:paramtypes",[Number])],e.prototype,"activeIndex",null),i([r.Input(),o("design:type",String)],e.prototype,"width",void 0),i([r.Input(),o("design:type",String)],e.prototype,"height",void 0),i([r.Input(),o("design:type",Boolean)],e.prototype,"endless",void 0),i([r.Input(),o("design:type",Boolean)],e.prototype,"animate",void 0),i([r.Input(),o("design:type",Boolean)],e.prototype,"pageable",void 0),i([r.Input(),o("design:type",Boolean)],e.prototype,"arrows",void 0),i([r.Output(),o("design:type",r.EventEmitter)],e.prototype,"itemChanged",void 0),i([r.ContentChild(r.TemplateRef),o("design:type",r.TemplateRef)],e.prototype,"itemTemplateRef",void 0),i([r.HostBinding("class.k-widget"),o("design:type",Boolean)],e.prototype,"widgetClass",null),i([r.HostBinding("class.k-scrollview-wrap"),o("design:type",Boolean)],e.prototype,"scrollViewClass",null),i([r.HostBinding("style.width"),o("design:type",String)],e.prototype,"hostWidth",null),i([r.HostBinding("style.height"),o("design:type",String)],e.prototype,"hostHeight",null),i([r.HostBinding("attr.tabindex"),o("design:type",Number)],e.prototype,"tabIndex",null),i([r.HostBinding("attr.aria-live"),o("design:type",String)],e.prototype,"ariaLive",null),i([r.HostListener("keydown",["$event"]),o("design:type",Function),o("design:paramtypes",[Object]),o("design:returntype",void 0)],e.prototype,"keyDown",null),e=i([r.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",selector:"kendo-scrollview",template:'\n      <ul class=\'k-scrollview\'\n        [ngStyle]="transitionStyle"\n        [@animateTo]="animationState"\n        (@animateTo.done)= "transitionEndHandler($event)"\n        (kendo.drag) = "handleDrag($event)"\n        (kendo.press) = "handlePress($event)"\n        (kendo.release) = "handleRelease($event)"\n        kendoDraggable>\n        <li *ngFor="let item of view;let i=index"\n          [ngStyle]="inlineStyles(i)"\n          [attr.aria-hidden]="i !== 1">\n            <template\n              [ngTemplateOutlet]="itemTemplateRef"\n              [ngOutletContext]="{ item: item }">\n            </template>\n        </li>\n      </ul>\n      <div class=\'k-scrollview-elements\'\n        [ngStyle]="{\'height\': height}"\n        *ngIf="!isDataSourceEmpty && (pageable||arrows)">\n        <a class="k-scrollview-prev"\n          aria-label="previous"\n          *ngIf="arrows && displayPrevArrow()"\n          (click)="prev()">\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 && displayNextArrow()"\n          (click)="next()">\n            <span class="k-icon k-i-arrowhead-e"></span>\n        </a>\n        <kendo-scrollview-pager *ngIf="pageable"\n          (pagerIndexChange)="pageChange($event)"\n          [data]="data"\n          [activeIndex]="activeIndex">\n        </kendo-scrollview-pager>\n      </div>\n    '}),o("design:paramtypes",[r.ElementRef,r.ApplicationRef])],e)}();t.ScrollViewComponent=l},function(t,n){t.exports=e},function(e,t){"use strict";!function(e){e[e.LeftArrow=37]="LeftArrow",e[e.RightArrow=39]="RightArrow"}(t.Keys||(t.Keys={}));t.Keys;!function(e){e[e.Next=1]="Next",e[e.Prev=-1]="Prev"}(t.Dir||(t.Dir={}));t.Dir},function(e,t,n){"use strict";var i=n(5),o=function(){function e(e,t,n,i){this.source=e?e:[],this.index=t?t:0,this.endless=n,this.pageIndex=i}return Object.defineProperty(e.prototype,"data",{get:function(){var e,t=this.total;if(this.endless)e=[this.source[(this.index-1+t)%t],this.source[this.index%t],this.source[(this.index+1+t)%t]];else{var n=[{}].concat(this.source.slice(0),[{}]);e=n.slice(this.index,this.index+3)}if(null!==this.pageIndex){var i=this.pageIndex>this.index;e[i?2:0]=this.source[this.pageIndex]}return 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.$$iterator]=function(){return this.data[i.$$iterator]()},e}();t.DataResultIterator=o;var r=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[i.$$iterator]=function(){return this.accessor()[i.$$iterator]()},e}();t.DataCollection=r},function(e,n){e.exports=t},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,n,a):o(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},r=n(2),a=n(7),s=n(1),l=n(8),c=n(9),u=[s.ScrollViewComponent,l.ScrollViewPagerComponent,c.KendoDraggableDirective],d=[s.ScrollViewComponent],p=function(){function e(){}return e=i([r.NgModule({declarations:[u],exports:[d],imports:[a.CommonModule]}),o("design:paramtypes",[])],e)}();t.ScrollViewModule=p},function(e,t){e.exports=n},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,n,a):o(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},r=n(2),a=n(2),s=function(){function e(){this.pagerIndexChange=new a.EventEmitter}return e.prototype.itemClass=function(e){return{"k-primary":e===this.activeIndex}},e.prototype.indexChange=function(e){this.pagerIndexChange.emit(e)},i([r.Input(),o("design:type",Number)],e.prototype,"activeIndex",void 0),i([r.Input(),o("design:type",Array)],e.prototype,"data",void 0),i([r.Output(),o("design:type",a.EventEmitter)],e.prototype,"pagerIndexChange",void 0),e=i([r.Component({selector:"kendo-scrollview-pager",template:'\n      <ul class="k-scrollview-pageable">\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    '}),o("design:paramtypes",[])],e)}();t.ScrollViewPagerComponent=s},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,n,a):o(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},r=n(2),a=n(10),s=function(){function e(e){var t=this;this.kendo={drag:new r.EventEmitter,press:new r.EventEmitter,release:new r.EventEmitter},this.draggable=new a.default({drag:function(e){e.hasOwnProperty("originalEvent")&&e.originalEvent.preventDefault(),t.kendo.drag.next(e)},press:function(e){return t.kendo.press.next(e)},release:function(e){return t.kendo.release.next(e)}}),this.draggable.bindTo(e.nativeElement)}return e.prototype.ngOnDestroy=function(){this.draggable.destroy()},e=i([r.Directive({outputs:["kendo.press","kendo.drag","kendo.release"],selector:"[kendoDraggable]"}),o("design:paramtypes",[r.ElementRef])],e)}();t.KendoDraggableDirective=s},function(e,t){"use strict";function n(e){return e.type.match(a)?{pageX:e.changedTouches[0].pageX,pageY:e.changedTouches[0].pageY,type:e.type,originalEvent:e}:{pageX:e.pageX,pageY:e.pageY,type:e.type,ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,altKey:e.altKey,originalEvent:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t){return function(n){return t(e(n))}},o=function(e,t,n){return e.addEventListener&&e.addEventListener(t,n)},r=function(e,t,n){return e.removeEventListener&&e.removeEventListener(t,n)},a=/touch/,s=function(){},l=2e3,c=function(e){var t=this,a=e.press;void 0===a&&(a=s);var c=e.drag;void 0===c&&(c=s);var u=e.release;void 0===u&&(u=s),this._pressHandler=i(n,a),this._dragHandler=i(n,c),this._releaseHandler=i(n,u),this._ignoreMouse=!1,this._touchstart=function(e){1===e.touches.length&&t._pressHandler(e)},this._touchmove=function(e){1===e.touches.length&&t._dragHandler(e)},this._touchend=function(e){0===e.touches.length&&1===e.changedTouches.length&&(t._releaseHandler(e),t._ignoreMouse=!0,setTimeout(t._restoreMouse,l))},this._restoreMouse=function(){t._ignoreMouse=!1},this._mousedown=function(e){var n=e.which;n&&n>1||t._ignoreMouse||(o(document,"mousemove",t._mousemove),o(document,"mouseup",t._mouseup),t._pressHandler(e))},this._mousemove=function(e){t._dragHandler(e)},this._mouseup=function(e){r(document,"mousemove",t._mousemove),r(document,"mouseup",t._mouseup),t._releaseHandler(e)}};c.prototype.bindTo=function(e){e!==this._element&&(this._element&&this._unbindFromCurrent(),this._element=e,o(e,"mousedown",this._mousedown),o(e,"touchstart",this._touchstart),o(e,"touchmove",this._touchmove),o(e,"touchend",this._touchend))},c.prototype._unbindFromCurrent=function(){r(this._element,"mousedown",this._mousedown),r(this._element,"touchstart",this._touchstart),r(this._element,"touchmove",this._touchmove),r(this._element,"touchend",this._touchend)},c.prototype.destroy=function(){this._unbindFromCurrent(),this._element=null},t.Draggable=c,t.default=c}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("rxjs/symbol/iterator"),require("@progress/kendo-angular-l10n"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","rxjs/symbol/iterator","@progress/kendo-angular-l10n","@angular/common"],t):"object"==typeof exports?exports.KendoAngularScrollview=t(require("@angular/core"),require("rxjs/symbol/iterator"),require("@progress/kendo-angular-l10n"),require("@angular/common")):e.KendoAngularScrollview=t(e["@angular/core"],e["rxjs/symbol/iterator"],e["@progress/kendo-angular-l10n"],e["@angular/common"])}(this,function(e,t,n,i){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";var i=n(1);t.ScrollViewComponent=i.ScrollViewComponent;var o=n(7);t.ScrollViewModule=o.ScrollViewModule;var r=n(9);t.ScrollViewPagerComponent=r.ScrollViewPagerComponent;var a=n(10);t.KendoDraggableDirective=a.KendoDraggableDirective},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,n,a):o(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},r=this&&this.__param||function(e,t){return function(n,i){t(n,i,e)}},a=n(2),s=n(3),l=n(4),c=n(6),d=function(){function e(e,t,n){var i=this;this.element=e,this.application=t,this.data=[],this.endless=!1,this.animate=!0,this.pageable=!1,this.arrows=!1,this.itemChanged=new a.EventEmitter,this.animationState=null,this.transitionStyle={},this.view=new l.DataCollection(function(){return new l.DataResultIterator(i.data,i.activeIndex,i.endless,i.pageIndex,i.isRTLMode())}),this.isDataSourceEmpty=!1,this._activeIndex=0,this.index=0,this.pageIndex=null,this.transforms=["translateX(-100%)","translateX(0%)","translateX(100%)"],this.direction=n?"rtl":"ltr"}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,"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}),e.prototype.keyDown=function(e){e.keyCode===s.Keys.LeftArrow&&(this.isRTLMode()?this.next():this.prev()),e.keyCode===s.Keys.RightArrow&&(this.isRTLMode()?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(s.Dir.Prev)},e.prototype.next=function(){this.navigate(s.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.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=e.pageX-this.initialTouchCoordinate;this.animationState||this.isDragForbidden(t)||!this.draggedInsideBounds(t)||(this.transitionStyle={transform:"translateX("+t+"px)"})},e.prototype.handleRelease=function(e){var t=e.pageX-this.initialTouchCoordinate;this.isDragForbidden(t)||(this.draggedEnoughToNavigate(t)?(this.isRTLMode()?this.changeIndex(t<0?s.Dir.Prev:s.Dir.Next):this.changeIndex(t>0?s.Dir.Prev:s.Dir.Next),this.animate||(this.transitionStyle=null,this.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)}))):Math.abs(t)>0&&(this.animate?this.animationState="center":this.transitionStyle=null))},e.prototype.pageChange=function(e){this.animationState||this.activeIndex===e||(this.animate?(this.pageIndex=e,this.isRTLMode()?this.animationState=this.pageIndex>this.index?"right":"left":this.animationState=this.pageIndex>this.index?"left":"right"):this.activeIndex=e)},e.prototype.inlineStyles=function(e){return{height:this.height,transform:this.transforms[e],width:this.width}},e.prototype.displayLeftArrow=function(){var e;return e=this.isRTLMode()?this.activeIndex+1<this.view.total:this.activeIndex>0,(this.endless||e)&&this.view.total>0},e.prototype.leftArrowClick=function(){this.isRTLMode()?this.next():this.prev()},e.prototype.displayRightArrow=function(){var e;return e=this.isRTLMode()?this.activeIndex>0:this.activeIndex+1<this.view.total,(this.endless||e)&&this.view.total>0},e.prototype.rightArrowClick=function(){this.isRTLMode()?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.isRTLMode()?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.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)}))},e.prototype.changeIndex=function(e){e===s.Dir.Next&&this.view.canMoveNext()?(this.index=(this.index+1)%this.view.total,this.animate?this.animationState=this.isRTLMode()?"right":"left":this.activeIndex=this.index):e===s.Dir.Prev&&this.view.canMovePrev()&&(this.index=0===this.index?this.view.total-1:this.index-1,this.animate?this.animationState=this.isRTLMode()?"left":"right":this.activeIndex=this.index)},e.prototype.isRTLMode=function(){return"rtl"===this.direction},i([a.Input(),o("design:type",Array)],e.prototype,"data",void 0),i([a.Input(),o("design:type",Number),o("design:paramtypes",[Number])],e.prototype,"activeIndex",null),i([a.Input(),o("design:type",String)],e.prototype,"width",void 0),i([a.Input(),o("design:type",String)],e.prototype,"height",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"endless",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"animate",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"pageable",void 0),i([a.Input(),o("design:type",Boolean)],e.prototype,"arrows",void 0),i([a.Output(),o("design:type",a.EventEmitter)],e.prototype,"itemChanged",void 0),i([a.ContentChild(a.TemplateRef),o("design:type",a.TemplateRef)],e.prototype,"itemTemplateRef",void 0),i([a.HostBinding("class.k-widget"),o("design:type",Boolean)],e.prototype,"widgetClass",null),i([a.HostBinding("class.k-scrollview-wrap"),o("design:type",Boolean)],e.prototype,"scrollViewClass",null),i([a.HostBinding("style.width"),o("design:type",String)],e.prototype,"hostWidth",null),i([a.HostBinding("style.height"),o("design:type",String)],e.prototype,"hostHeight",null),i([a.HostBinding("attr.tabindex"),o("design:type",Number)],e.prototype,"tabIndex",null),i([a.HostBinding("attr.aria-live"),o("design:type",String)],e.prototype,"ariaLive",null),i([a.HostBinding("attr.dir"),o("design:type",String)],e.prototype,"dir",null),i([a.HostListener("keydown",["$event"]),o("design:type",Function),o("design:paramtypes",[Object]),o("design:returntype",void 0)],e.prototype,"keyDown",null),e=i([a.Component({animations:[a.trigger("animateTo",[a.state("center, left, right",a.style({transform:"translateX(0)"})),a.transition("* => right",[a.animate("300ms ease-out",a.style({transform:"translateX(100%)"}))]),a.transition("* => left",[a.animate("300ms ease-out",a.style({transform:"translateX(-100%)"}))]),a.transition("* => center",[a.animate("300ms ease-out")])])],exportAs:"kendoScrollView",selector:"kendo-scrollview",template:'\n      <ul class=\'k-scrollview\'\n        [ngStyle]="transitionStyle"\n        [@animateTo]="animationState"\n        (@animateTo.done)= "transitionEndHandler($event)"\n        (kendo.drag) = "handleDrag($event)"\n        (kendo.press) = "handlePress($event)"\n        (kendo.release) = "handleRelease($event)"\n        kendoDraggable>\n        <li *ngFor="let item of view;let i=index"\n          [ngStyle]="inlineStyles(i)"\n          [attr.aria-hidden]="i !== 1">\n            <template\n              [ngTemplateOutlet]="itemTemplateRef"\n              [ngOutletContext]="{ item: item }">\n            </template>\n        </li>\n      </ul>\n      <div class=\'k-scrollview-elements\'\n        [ngStyle]="{\'height\': height}"\n        *ngIf="!isDataSourceEmpty && (pageable||arrows)">\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 *ngIf="pageable"\n          (pagerIndexChange)="pageChange($event)"\n          [data]="data"\n          [activeIndex]="activeIndex">\n        </kendo-scrollview-pager>\n      </div>\n    '}),r(2,a.Optional()),r(2,a.Inject(c.RTL)),o("design:paramtypes",[a.ElementRef,a.ApplicationRef,Boolean])],e)}();t.ScrollViewComponent=d},function(t,n){t.exports=e},function(e,t){"use strict";!function(e){e[e.LeftArrow=37]="LeftArrow",e[e.RightArrow=39]="RightArrow"}(t.Keys||(t.Keys={}));t.Keys;!function(e){e[e.Next=1]="Next",e[e.Prev=-1]="Prev"}(t.Dir||(t.Dir={}));t.Dir},function(e,t,n){"use strict";var i=n(5),o=function(){function e(e,t,n,i,o){this.rtl=!1,this.source=e?e:[],this.index=t?t:0,this.endless=n,this.pageIndex=i,this.rtl=o}return Object.defineProperty(e.prototype,"data",{get:function(){var e,t=this.total;if(this.endless)e=[this.source[(this.index-1+t)%t],this.source[this.index%t],this.source[(this.index+1+t)%t]];else{var n=[{}].concat(this.source.slice(0),[{}]);e=n.slice(this.index,this.index+3)}if(null!==this.pageIndex){var i=this.pageIndex>this.index;e[i?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.$$iterator]=function(){return this.data[i.$$iterator]()},e}();t.DataResultIterator=o;var r=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[i.$$iterator]=function(){return this.accessor()[i.$$iterator]()},e}();t.DataCollection=r},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,n,a):o(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},r=n(2),a=n(8),s=n(1),l=n(9),c=n(10),d=[s.ScrollViewComponent,l.ScrollViewPagerComponent,c.KendoDraggableDirective],u=[s.ScrollViewComponent],h=function(){function e(){}return e=i([r.NgModule({declarations:[d],exports:[u],imports:[a.CommonModule]}),o("design:paramtypes",[])],e)}();t.ScrollViewModule=h},function(e,t){e.exports=i},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,n,a):o(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},r=n(2),a=n(2),s=function(){function e(){this.pagerIndexChange=new a.EventEmitter}return e.prototype.itemClass=function(e){return{"k-primary":e===this.activeIndex}},e.prototype.indexChange=function(e){this.pagerIndexChange.emit(e)},i([r.Input(),o("design:type",Number)],e.prototype,"activeIndex",void 0),i([r.Input(),o("design:type",Array)],e.prototype,"data",void 0),i([r.Output(),o("design:type",a.EventEmitter)],e.prototype,"pagerIndexChange",void 0),e=i([r.Component({selector:"kendo-scrollview-pager",template:'\n      <ul class="k-scrollview-pageable">\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    '}),o("design:paramtypes",[])],e)}();t.ScrollViewPagerComponent=s},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(r<3?o(a):r>3?o(t,n,a):o(t,n))||a);return r>3&&a&&Object.defineProperty(t,n,a),a},o=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},r=n(2),a=n(11),s=function(){function e(e){var t=this;this.kendo={drag:new r.EventEmitter,press:new r.EventEmitter,release:new r.EventEmitter},this.draggable=new a.default({drag:function(e){e.hasOwnProperty("originalEvent")&&e.originalEvent.preventDefault(),t.kendo.drag.next(e)},press:function(e){return t.kendo.press.next(e)},release:function(e){return t.kendo.release.next(e)}}),this.draggable.bindTo(e.nativeElement)}return e.prototype.ngOnDestroy=function(){this.draggable.destroy()},e=i([r.Directive({outputs:["kendo.press","kendo.drag","kendo.release"],selector:"[kendoDraggable]"}),o("design:paramtypes",[r.ElementRef])],e)}();t.KendoDraggableDirective=s},function(e,t){"use strict";function n(e){return e.type.match(a)?{pageX:e.changedTouches[0].pageX,pageY:e.changedTouches[0].pageY,type:e.type,originalEvent:e}:{pageX:e.pageX,pageY:e.pageY,type:e.type,ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,altKey:e.altKey,originalEvent:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t){return function(n){return t(e(n))}},o=function(e,t,n){return e.addEventListener&&e.addEventListener(t,n)},r=function(e,t,n){return e.removeEventListener&&e.removeEventListener(t,n)},a=/touch/,s=function(){},l=2e3,c=function(e){var t=this,a=e.press;void 0===a&&(a=s);var c=e.drag;void 0===c&&(c=s);var d=e.release;void 0===d&&(d=s),this._pressHandler=i(n,a),this._dragHandler=i(n,c),this._releaseHandler=i(n,d),this._ignoreMouse=!1,this._touchstart=function(e){1===e.touches.length&&t._pressHandler(e)},this._touchmove=function(e){1===e.touches.length&&t._dragHandler(e)},this._touchend=function(e){0===e.touches.length&&1===e.changedTouches.length&&(t._releaseHandler(e),t._ignoreMouse=!0,setTimeout(t._restoreMouse,l))},this._restoreMouse=function(){t._ignoreMouse=!1},this._mousedown=function(e){var n=e.which;n&&n>1||t._ignoreMouse||(o(document,"mousemove",t._mousemove),o(document,"mouseup",t._mouseup),t._pressHandler(e))},this._mousemove=function(e){t._dragHandler(e)},this._mouseup=function(e){r(document,"mousemove",t._mousemove),r(document,"mouseup",t._mouseup),t._releaseHandler(e)}};c.prototype.bindTo=function(e){e!==this._element&&(this._element&&this._unbindFromCurrent(),this._element=e,o(e,"mousedown",this._mousedown),o(e,"touchstart",this._touchstart),o(e,"touchmove",this._touchmove),o(e,"touchend",this._touchend))},c.prototype._unbindFromCurrent=function(){r(this._element,"mousedown",this._mousedown),r(this._element,"touchstart",this._touchstart),r(this._element,"touchmove",this._touchmove),r(this._element,"touchend",this._touchend)},c.prototype.destroy=function(){this._unbindFromCurrent(),this._element=null},t.Draggable=c,t.default=c}])});

dist/es/data.collection.d.ts

@@ -9,3 +9,4 @@ /**
     private pageIndex;
-    constructor(source: any[], index: number, endless: boolean, pageIndex: number);
+    private rtl;
+    constructor(source: any[], index: number, endless: boolean, pageIndex: number, rtl: boolean);
     readonly data: any[];
@@ -12,0 +13,0 @@ readonly total: number;

dist/es/data.collection.js

@@ -6,3 +6,4 @@ import { $$iterator } from 'rxjs/symbol/iterator';
 export var DataResultIterator = (function () {
-    function DataResultIterator(source, index, endless, pageIndex) {
+    function DataResultIterator(source, index, endless, pageIndex, rtl) {
+        this.rtl = false;
         this.source = source ? source : [];
@@ -12,2 +13,3 @@ this.index = index ? index : 0;
         this.pageIndex = pageIndex;
+        this.rtl = rtl;
     }
@@ -33,3 +35,3 @@ Object.defineProperty(DataResultIterator.prototype, "data", {
             }
-            return result;
+            return this.rtl ? result.reverse() : result;
         },
@@ -36,0 +38,0 @@ enumerable: true,

dist/es/data.collection.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DataResultIterator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"}]}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}},"DataCollection":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":61,"character":34}]}],"item":[{"__symbolic":"method"}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DataResultIterator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"}]}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}},"DataCollection":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":61,"character":34}]}],"item":[{"__symbolic":"method"}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DataResultIterator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"}]}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}},"DataCollection":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":63,"character":34}]}],"item":[{"__symbolic":"method"}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DataResultIterator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"}]}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}},"DataCollection":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":63,"character":34}]}],"item":[{"__symbolic":"method"}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}}}}]

dist/es/scrollview.component.d.ts

@@ -5,2 +5,3 @@ import { AnimationTransitionEvent, ApplicationRef, EventEmitter, ElementRef, TemplateRef, OnChanges } from "@angular/core";
 import { DataCollection } from './data.collection';
+import { Direction } from './direction';
 /**
@@ -111,2 +112,3 @@ * Represents the Kendo UI ScrollView component for Angular.
     readonly ariaLive: string;
+    readonly dir: Direction;
     animationState: AnimationState;
@@ -123,3 +125,4 @@ transitionStyle: {
     private transforms;
-    constructor(element: ElementRef, application: ApplicationRef);
+    private direction;
+    constructor(element: ElementRef, application: ApplicationRef, rtl: boolean);
     /**
@@ -170,7 +173,15 @@ * @hidden
      */
-    displayPrevArrow(): boolean;
+    displayLeftArrow(): boolean;
     /**
      * @hidden
      */
-    displayNextArrow(): boolean;
+    leftArrowClick(): void;
+    /**
+     * @hidden
+     */
+    displayRightArrow(): boolean;
+    /**
+     * @hidden
+     */
+    rightArrowClick(): void;
     protected draggedInsideBounds(deltaX: number): boolean;
@@ -181,2 +192,3 @@ protected draggedEnoughToNavigate(deltaX: number): boolean;
     private changeIndex(direction);
+    private isRTLMode();
 }

dist/es/scrollview.component.js

@@ -1,4 +0,5 @@
-import { trigger, state, style, transition, animate, Component, Input, Output, ApplicationRef, EventEmitter, ContentChild, ElementRef, TemplateRef, HostBinding, HostListener } from "@angular/core";
+import { trigger, state, style, transition, animate, Component, Input, Output, ApplicationRef, EventEmitter, ContentChild, ElementRef, TemplateRef, HostBinding, HostListener, Optional, Inject } from "@angular/core";
 import { Keys, Dir } from "./enums";
 import { DataCollection, DataResultIterator } from './data.collection';
+import { RTL } from '@progress/kendo-angular-l10n';
 /**
@@ -58,3 +59,3 @@ * Represents the Kendo UI ScrollView component for Angular.
 export var ScrollViewComponent = (function () {
-    function ScrollViewComponent(element, application) {
+    function ScrollViewComponent(element, application, rtl) {
         var _this = this;
@@ -94,3 +95,3 @@ this.element = element;
         this.view = new DataCollection(function () {
-            return new DataResultIterator(_this.data, _this.activeIndex, _this.endless, _this.pageIndex);
+            return new DataResultIterator(_this.data, _this.activeIndex, _this.endless, _this.pageIndex, _this.isRTLMode());
         });
@@ -102,2 +103,3 @@ this.isDataSourceEmpty = false;
         this.transforms = ["translateX(-100%)", "translateX(0%)", "translateX(100%)"];
+        this.direction = rtl ? 'rtl' : 'ltr';
     }
@@ -157,2 +159,8 @@ Object.defineProperty(ScrollViewComponent.prototype, "activeIndex", {
     ;
+    Object.defineProperty(ScrollViewComponent.prototype, "dir", {
+        get: function () { return this.direction; },
+        enumerable: true,
+        configurable: true
+    });
+    ;
     /**
@@ -163,6 +171,16 @@ * @hidden
         if (e.keyCode === Keys.LeftArrow) {
-            this.prev();
+            if (this.isRTLMode()) {
+                this.next();
+            }
+            else {
+                this.prev();
+            }
         }
         if (e.keyCode === Keys.RightArrow) {
-            this.next();
+            if (this.isRTLMode()) {
+                this.prev();
+            }
+            else {
+                this.next();
+            }
         }
@@ -227,3 +245,8 @@ };
         if (this.draggedEnoughToNavigate(deltaX)) {
-            this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
+            if (this.isRTLMode()) {
+                this.changeIndex(deltaX < 0 ? Dir.Prev : Dir.Next);
+            }
+            else {
+                this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
+            }
             if (!this.animate) {
@@ -250,3 +273,8 @@ this.transitionStyle = null;
                 this.pageIndex = idx;
-                this.animationState = (this.pageIndex > this.index ? "left" : "right");
+                if (this.isRTLMode()) {
+                    this.animationState = (this.pageIndex > this.index ? "right" : "left");
+                }
+                else {
+                    this.animationState = (this.pageIndex > this.index ? "left" : "right");
+                }
             }
@@ -271,4 +299,11 @@ else {
      */
-    ScrollViewComponent.prototype.displayPrevArrow = function () {
-        return (this.endless || this.activeIndex > 0) && this.view.total > 0;
+    ScrollViewComponent.prototype.displayLeftArrow = function () {
+        var isNotBorderItem;
+        if (this.isRTLMode()) {
+            isNotBorderItem = this.activeIndex + 1 < this.view.total;
+        }
+        else {
+            isNotBorderItem = this.activeIndex > 0;
+        }
+        return (this.endless || isNotBorderItem) && this.view.total > 0;
     };
@@ -278,5 +313,34 @@ /**
      */
-    ScrollViewComponent.prototype.displayNextArrow = function () {
-        return (this.endless || this.activeIndex + 1 < this.view.total) && this.view.total > 0;
+    ScrollViewComponent.prototype.leftArrowClick = function () {
+        if (this.isRTLMode()) {
+            this.next();
+        }
+        else {
+            this.prev();
+        }
     };
+    /**
+     * @hidden
+     */
+    ScrollViewComponent.prototype.displayRightArrow = function () {
+        var isNotBorderItem;
+        if (this.isRTLMode()) {
+            isNotBorderItem = this.activeIndex > 0;
+        }
+        else {
+            isNotBorderItem = this.activeIndex + 1 < this.view.total;
+        }
+        return (this.endless || isNotBorderItem) && this.view.total > 0;
+    };
+    /**
+     * @hidden
+     */
+    ScrollViewComponent.prototype.rightArrowClick = function () {
+        if (this.isRTLMode()) {
+            this.prev();
+        }
+        else {
+            this.next();
+        }
+    };
     ScrollViewComponent.prototype.draggedInsideBounds = function (deltaX) {
@@ -289,3 +353,12 @@ return Math.abs(deltaX) <= this.element.nativeElement.offsetWidth;
     ScrollViewComponent.prototype.isDragForbidden = function (deltaX) {
-        return !this.endless && ((this.activeIndex === 0 && deltaX > 0) || (this.activeIndex === this.view.total - 1 && deltaX < 0));
+        var pastEnd;
+        var isEndReached;
+        if (this.isRTLMode()) {
+            pastEnd = deltaX < 0 && deltaX !== 0;
+        }
+        else {
+            pastEnd = deltaX > 0 && deltaX !== 0;
+        }
+        isEndReached = ((this.activeIndex === 0 && pastEnd) || (this.activeIndex === this.view.total - 1 && !pastEnd));
+        return !this.endless && isEndReached;
     };
@@ -305,3 +378,3 @@ ScrollViewComponent.prototype.navigate = function (direction) {
             if (this.animate) {
-                this.animationState = "left";
+                this.animationState = this.isRTLMode() ? "right" : "left";
             }
@@ -315,3 +388,3 @@ else {
             if (this.animate) {
-                this.animationState = "right";
+                this.animationState = this.isRTLMode() ? "left" : "right";
             }
@@ -323,2 +396,5 @@ else {
     };
+    ScrollViewComponent.prototype.isRTLMode = function () {
+        return this.direction === "rtl";
+    };
     ScrollViewComponent.decorators = [
@@ -342,3 +418,3 @@ { type: Component, args: [{
                     selector: 'kendo-scrollview',
-                    template: "\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n        <a class=\"k-scrollview-prev\"\n          aria-label=\"previous\"\n          *ngIf=\"arrows && displayPrevArrow()\"\n          (click)=\"prev()\">\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 && displayNextArrow()\"\n          (click)=\"next()\">\n            <span class=\"k-icon k-i-arrowhead-e\"></span>\n        </a>\n        <kendo-scrollview-pager *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'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\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 *ngIf=\"pageable\"\n          (pagerIndexChange)=\"pageChange($event)\"\n          [data]=\"data\"\n          [activeIndex]=\"activeIndex\">\n        </kendo-scrollview-pager>\n      </div>\n    "
                 },] },
@@ -350,2 +426,3 @@ ];
         { type: ApplicationRef, },
+        { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [RTL,] },] },
     ]; };
@@ -369,2 +446,3 @@ ScrollViewComponent.propDecorators = {
         'ariaLive': [{ type: HostBinding, args: ['attr.aria-live',] },],
+        'dir': [{ type: HostBinding, args: ['attr.dir',] },],
         'keyDown': [{ type: HostListener, args: ['keydown', ['$event'],] },],
@@ -371,0 +449,0 @@ };

dist/es/scrollview.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","selector":"kendo-scrollview","template":"\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n        <a class=\"k-scrollview-prev\"\n          aria-label=\"previous\"\n          *ngIf=\"arrows && displayPrevArrow()\"\n          (click)=\"prev()\">\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 && displayNextArrow()\"\n          (click)=\"next()\">\n            <span class=\"k-icon k-i-arrowhead-e\"></span>\n        </a>\n        <kendo-scrollview-pager *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"}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-scrollview-wrap"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-live"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"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"}],"inlineStyles":[{"__symbolic":"method"}],"displayPrevArrow":[{"__symbolic":"method"}],"displayNextArrow":[{"__symbolic":"method"}],"draggedInsideBounds":[{"__symbolic":"method"}],"draggedEnoughToNavigate":[{"__symbolic":"method"}],"isDragForbidden":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"changeIndex":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","selector":"kendo-scrollview","template":"\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n        <a class=\"k-scrollview-prev\"\n          aria-label=\"previous\"\n          *ngIf=\"arrows && displayPrevArrow()\"\n          (click)=\"prev()\">\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 && displayNextArrow()\"\n          (click)=\"next()\">\n            <span class=\"k-icon k-i-arrowhead-e\"></span>\n        </a>\n        <kendo-scrollview-pager *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"}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-scrollview-wrap"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-live"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"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"}],"inlineStyles":[{"__symbolic":"method"}],"displayPrevArrow":[{"__symbolic":"method"}],"displayNextArrow":[{"__symbolic":"method"}],"draggedInsideBounds":[{"__symbolic":"method"}],"draggedEnoughToNavigate":[{"__symbolic":"method"}],"isDragForbidden":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"changeIndex":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","selector":"kendo-scrollview","template":"\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\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 *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"}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-scrollview-wrap"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-live"]}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.dir"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"RTL"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","name":"boolean"}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"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"}],"inlineStyles":[{"__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"}],"isRTLMode":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","selector":"kendo-scrollview","template":"\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\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 *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"}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-scrollview-wrap"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-live"]}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.dir"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"RTL"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","name":"boolean"}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"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"}],"inlineStyles":[{"__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"}],"isRTLMode":[{"__symbolic":"method"}]}}}}]

dist/npm/data.collection.d.ts

@@ -9,3 +9,4 @@ /**
     private pageIndex;
-    constructor(source: any[], index: number, endless: boolean, pageIndex: number);
+    private rtl;
+    constructor(source: any[], index: number, endless: boolean, pageIndex: number, rtl: boolean);
     readonly data: any[];
@@ -12,0 +13,0 @@ readonly total: number;

dist/npm/data.collection.js

@@ -8,3 +8,4 @@ "use strict";
 var DataResultIterator = (function () {
-    function DataResultIterator(source, index, endless, pageIndex) {
+    function DataResultIterator(source, index, endless, pageIndex, rtl) {
+        this.rtl = false;
         this.source = source ? source : [];
@@ -14,2 +15,3 @@ this.index = index ? index : 0;
         this.pageIndex = pageIndex;
+        this.rtl = rtl;
     }
@@ -35,3 +37,3 @@ Object.defineProperty(DataResultIterator.prototype, "data", {
             }
-            return result;
+            return this.rtl ? result.reverse() : result;
         },
@@ -38,0 +40,0 @@ enumerable: true,

dist/npm/data.collection.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DataResultIterator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"}]}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}},"DataCollection":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":61,"character":34}]}],"item":[{"__symbolic":"method"}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DataResultIterator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"}]}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}},"DataCollection":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":61,"character":34}]}],"item":[{"__symbolic":"method"}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DataResultIterator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"}]}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}},"DataCollection":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":63,"character":34}]}],"item":[{"__symbolic":"method"}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DataResultIterator":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"},{"__symbolic":"reference","name":"number"},{"__symbolic":"reference","name":"boolean"}]}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}},"DataCollection":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":63,"character":34}]}],"item":[{"__symbolic":"method"}],"canMoveNext":[{"__symbolic":"method"}],"canMovePrev":[{"__symbolic":"method"}]}}}}]

dist/npm/scrollview.component.d.ts

@@ -5,2 +5,3 @@ import { AnimationTransitionEvent, ApplicationRef, EventEmitter, ElementRef, TemplateRef, OnChanges } from "@angular/core";
 import { DataCollection } from './data.collection';
+import { Direction } from './direction';
 /**
@@ -111,2 +112,3 @@ * Represents the Kendo UI ScrollView component for Angular.
     readonly ariaLive: string;
+    readonly dir: Direction;
     animationState: AnimationState;
@@ -123,3 +125,4 @@ transitionStyle: {
     private transforms;
-    constructor(element: ElementRef, application: ApplicationRef);
+    private direction;
+    constructor(element: ElementRef, application: ApplicationRef, rtl: boolean);
     /**
@@ -170,7 +173,15 @@ * @hidden
      */
-    displayPrevArrow(): boolean;
+    displayLeftArrow(): boolean;
     /**
      * @hidden
      */
-    displayNextArrow(): boolean;
+    leftArrowClick(): void;
+    /**
+     * @hidden
+     */
+    displayRightArrow(): boolean;
+    /**
+     * @hidden
+     */
+    rightArrowClick(): void;
     protected draggedInsideBounds(deltaX: number): boolean;
@@ -181,2 +192,3 @@ protected draggedEnoughToNavigate(deltaX: number): boolean;
     private changeIndex(direction);
+    private isRTLMode();
 }

dist/npm/scrollview.component.js

@@ -5,2 +5,3 @@ "use strict";
 var data_collection_1 = require('./data.collection');
+var kendo_angular_l10n_1 = require('@progress/kendo-angular-l10n');
 /**
@@ -60,3 +61,3 @@ * Represents the Kendo UI ScrollView component for Angular.
 var ScrollViewComponent = (function () {
-    function ScrollViewComponent(element, application) {
+    function ScrollViewComponent(element, application, rtl) {
         var _this = this;
@@ -96,3 +97,3 @@ this.element = element;
         this.view = new data_collection_1.DataCollection(function () {
-            return new data_collection_1.DataResultIterator(_this.data, _this.activeIndex, _this.endless, _this.pageIndex);
+            return new data_collection_1.DataResultIterator(_this.data, _this.activeIndex, _this.endless, _this.pageIndex, _this.isRTLMode());
         });
@@ -104,2 +105,3 @@ this.isDataSourceEmpty = false;
         this.transforms = ["translateX(-100%)", "translateX(0%)", "translateX(100%)"];
+        this.direction = rtl ? 'rtl' : 'ltr';
     }
@@ -159,2 +161,8 @@ Object.defineProperty(ScrollViewComponent.prototype, "activeIndex", {
     ;
+    Object.defineProperty(ScrollViewComponent.prototype, "dir", {
+        get: function () { return this.direction; },
+        enumerable: true,
+        configurable: true
+    });
+    ;
     /**
@@ -165,6 +173,16 @@ * @hidden
         if (e.keyCode === enums_1.Keys.LeftArrow) {
-            this.prev();
+            if (this.isRTLMode()) {
+                this.next();
+            }
+            else {
+                this.prev();
+            }
         }
         if (e.keyCode === enums_1.Keys.RightArrow) {
-            this.next();
+            if (this.isRTLMode()) {
+                this.prev();
+            }
+            else {
+                this.next();
+            }
         }
@@ -229,3 +247,8 @@ };
         if (this.draggedEnoughToNavigate(deltaX)) {
-            this.changeIndex(deltaX > 0 ? enums_1.Dir.Prev : enums_1.Dir.Next);
+            if (this.isRTLMode()) {
+                this.changeIndex(deltaX < 0 ? enums_1.Dir.Prev : enums_1.Dir.Next);
+            }
+            else {
+                this.changeIndex(deltaX > 0 ? enums_1.Dir.Prev : enums_1.Dir.Next);
+            }
             if (!this.animate) {
@@ -252,3 +275,8 @@ this.transitionStyle = null;
                 this.pageIndex = idx;
-                this.animationState = (this.pageIndex > this.index ? "left" : "right");
+                if (this.isRTLMode()) {
+                    this.animationState = (this.pageIndex > this.index ? "right" : "left");
+                }
+                else {
+                    this.animationState = (this.pageIndex > this.index ? "left" : "right");
+                }
             }
@@ -273,4 +301,11 @@ else {
      */
-    ScrollViewComponent.prototype.displayPrevArrow = function () {
-        return (this.endless || this.activeIndex > 0) && this.view.total > 0;
+    ScrollViewComponent.prototype.displayLeftArrow = function () {
+        var isNotBorderItem;
+        if (this.isRTLMode()) {
+            isNotBorderItem = this.activeIndex + 1 < this.view.total;
+        }
+        else {
+            isNotBorderItem = this.activeIndex > 0;
+        }
+        return (this.endless || isNotBorderItem) && this.view.total > 0;
     };
@@ -280,5 +315,34 @@ /**
      */
-    ScrollViewComponent.prototype.displayNextArrow = function () {
-        return (this.endless || this.activeIndex + 1 < this.view.total) && this.view.total > 0;
+    ScrollViewComponent.prototype.leftArrowClick = function () {
+        if (this.isRTLMode()) {
+            this.next();
+        }
+        else {
+            this.prev();
+        }
     };
+    /**
+     * @hidden
+     */
+    ScrollViewComponent.prototype.displayRightArrow = function () {
+        var isNotBorderItem;
+        if (this.isRTLMode()) {
+            isNotBorderItem = this.activeIndex > 0;
+        }
+        else {
+            isNotBorderItem = this.activeIndex + 1 < this.view.total;
+        }
+        return (this.endless || isNotBorderItem) && this.view.total > 0;
+    };
+    /**
+     * @hidden
+     */
+    ScrollViewComponent.prototype.rightArrowClick = function () {
+        if (this.isRTLMode()) {
+            this.prev();
+        }
+        else {
+            this.next();
+        }
+    };
     ScrollViewComponent.prototype.draggedInsideBounds = function (deltaX) {
@@ -291,3 +355,12 @@ return Math.abs(deltaX) <= this.element.nativeElement.offsetWidth;
     ScrollViewComponent.prototype.isDragForbidden = function (deltaX) {
-        return !this.endless && ((this.activeIndex === 0 && deltaX > 0) || (this.activeIndex === this.view.total - 1 && deltaX < 0));
+        var pastEnd;
+        var isEndReached;
+        if (this.isRTLMode()) {
+            pastEnd = deltaX < 0 && deltaX !== 0;
+        }
+        else {
+            pastEnd = deltaX > 0 && deltaX !== 0;
+        }
+        isEndReached = ((this.activeIndex === 0 && pastEnd) || (this.activeIndex === this.view.total - 1 && !pastEnd));
+        return !this.endless && isEndReached;
     };
@@ -307,3 +380,3 @@ ScrollViewComponent.prototype.navigate = function (direction) {
             if (this.animate) {
-                this.animationState = "left";
+                this.animationState = this.isRTLMode() ? "right" : "left";
             }
@@ -317,3 +390,3 @@ else {
             if (this.animate) {
-                this.animationState = "right";
+                this.animationState = this.isRTLMode() ? "left" : "right";
             }
@@ -325,2 +398,5 @@ else {
     };
+    ScrollViewComponent.prototype.isRTLMode = function () {
+        return this.direction === "rtl";
+    };
     ScrollViewComponent.decorators = [
@@ -344,3 +420,3 @@ { type: core_1.Component, args: [{
                     selector: 'kendo-scrollview',
-                    template: "\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n        <a class=\"k-scrollview-prev\"\n          aria-label=\"previous\"\n          *ngIf=\"arrows && displayPrevArrow()\"\n          (click)=\"prev()\">\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 && displayNextArrow()\"\n          (click)=\"next()\">\n            <span class=\"k-icon k-i-arrowhead-e\"></span>\n        </a>\n        <kendo-scrollview-pager *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'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\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 *ngIf=\"pageable\"\n          (pagerIndexChange)=\"pageChange($event)\"\n          [data]=\"data\"\n          [activeIndex]=\"activeIndex\">\n        </kendo-scrollview-pager>\n      </div>\n    "
                 },] },
@@ -352,2 +428,3 @@ ];
         { type: core_1.ApplicationRef, },
+        { type: undefined, decorators: [{ type: core_1.Optional }, { type: core_1.Inject, args: [kendo_angular_l10n_1.RTL,] },] },
     ]; };
@@ -371,2 +448,3 @@ ScrollViewComponent.propDecorators = {
         'ariaLive': [{ type: core_1.HostBinding, args: ['attr.aria-live',] },],
+        'dir': [{ type: core_1.HostBinding, args: ['attr.dir',] },],
         'keyDown': [{ type: core_1.HostListener, args: ['keydown', ['$event'],] },],
@@ -373,0 +451,0 @@ };

dist/npm/scrollview.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","selector":"kendo-scrollview","template":"\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n        <a class=\"k-scrollview-prev\"\n          aria-label=\"previous\"\n          *ngIf=\"arrows && displayPrevArrow()\"\n          (click)=\"prev()\">\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 && displayNextArrow()\"\n          (click)=\"next()\">\n            <span class=\"k-icon k-i-arrowhead-e\"></span>\n        </a>\n        <kendo-scrollview-pager *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"}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-scrollview-wrap"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-live"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"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"}],"inlineStyles":[{"__symbolic":"method"}],"displayPrevArrow":[{"__symbolic":"method"}],"displayNextArrow":[{"__symbolic":"method"}],"draggedInsideBounds":[{"__symbolic":"method"}],"draggedEnoughToNavigate":[{"__symbolic":"method"}],"isDragForbidden":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"changeIndex":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","selector":"kendo-scrollview","template":"\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n        <a class=\"k-scrollview-prev\"\n          aria-label=\"previous\"\n          *ngIf=\"arrows && displayPrevArrow()\"\n          (click)=\"prev()\">\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 && displayNextArrow()\"\n          (click)=\"next()\">\n            <span class=\"k-icon k-i-arrowhead-e\"></span>\n        </a>\n        <kendo-scrollview-pager *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"}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-scrollview-wrap"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-live"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"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"}],"inlineStyles":[{"__symbolic":"method"}],"displayPrevArrow":[{"__symbolic":"method"}],"displayNextArrow":[{"__symbolic":"method"}],"draggedInsideBounds":[{"__symbolic":"method"}],"draggedEnoughToNavigate":[{"__symbolic":"method"}],"isDragForbidden":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"changeIndex":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","selector":"kendo-scrollview","template":"\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\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 *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"}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-scrollview-wrap"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-live"]}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.dir"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"RTL"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","name":"boolean"}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"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"}],"inlineStyles":[{"__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"}],"isRTLMode":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","selector":"kendo-scrollview","template":"\n      <ul class='k-scrollview'\n        [ngStyle]=\"transitionStyle\"\n        [@animateTo]=\"animationState\"\n        (@animateTo.done)= \"transitionEndHandler($event)\"\n        (kendo.drag) = \"handleDrag($event)\"\n        (kendo.press) = \"handlePress($event)\"\n        (kendo.release) = \"handleRelease($event)\"\n        kendoDraggable>\n        <li *ngFor=\"let item of view;let i=index\"\n          [ngStyle]=\"inlineStyles(i)\"\n          [attr.aria-hidden]=\"i !== 1\">\n            <template\n              [ngTemplateOutlet]=\"itemTemplateRef\"\n              [ngOutletContext]=\"{ item: item }\">\n            </template>\n        </li>\n      </ul>\n      <div class='k-scrollview-elements'\n        [ngStyle]=\"{'height': height}\"\n        *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\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 *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"}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.k-scrollview-wrap"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.aria-live"]}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.dir"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"RTL"}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","name":"boolean"}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"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"}],"inlineStyles":[{"__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"}],"isRTLMode":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "@progress/kendo-angular-scrollview",
   "description": "A ScrollView Component for Angular 2",
-  "version": "0.8.5",
+  "version": "0.9.0",
   "publishConfig": {
@@ -38,3 +38,4 @@ "registry": "https://registry.npm.telerik.com"
     "@angular/core": "^2.4.0",
-    "rxjs": "^5.0.1"
+    "rxjs": "^5.0.1",
+    "@progress/kendo-angular-l10n": "^0.2.0"
   },
@@ -52,2 +53,3 @@ "devDependencies": {
     "@progress/kendo-theme-default": "^2.0.0",
+    "@progress/kendo-angular-l10n": "^0.2.0",
     "codelyzer": "2.0.0",
@@ -54,0 +56,0 @@ "core-js": "^2.2.2",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

150347

increased by7.11%

Number of package files

57

increased by7.55%

Lines of code

2067

increased by10.42%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

22

increased by4.76%

No dependency changes