@progress/kendo-angular-scrollview 4.1.1 → 4.1.3

package/dist/es2015/scrollview.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { ApplicationRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, NgZone } from '@angular/core';
+import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, NgZone, ViewChild, Renderer2 } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Dir } from './enums';
 import { Keys } from '@progress/kendo-angular-common';
@@ -65,11 +65,11 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
  * ```
  */
 let ScrollViewComponent = class ScrollViewComponent {
-    constructor(element, application, localization, ngZone) {
+    constructor(element, localization, ngZone, renderer) {
         this.element = element;
-        this.application = application;
         this.localization = localization;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         /**
          * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
          */
@@ -108,9 +108,11 @@ let ScrollViewComponent = class ScrollViewComponent {
          * Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
          */
         this.activeIndexChange = new EventEmitter();
+        this.scrollViewClass = true;
+        this.tabIndex = 1;
+        this.ariaLive = 'assertive';
         this.touchAction = 'pan-y pinch-zoom';
         this.animationState = null;
-        this.transitionStyle = null;
         this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
         this.isDataSourceEmpty = false;
         this._activeIndex = 0;
@@ -128,12 +130,6 @@ let ScrollViewComponent = class ScrollViewComponent {
     get activeIndex() {
         return this._activeIndex;
     }
-    get widgetClass() {
-        return true;
-    }
-    get scrollViewClass() {
-        return true;
-    }
     get scrollViewLightOverlayClass() {
         return this.pagerOverlay === 'light';
     }
@@ -142,8 +138,6 @@ let ScrollViewComponent = class ScrollViewComponent {
     }
     get hostWidth() { return this.width; }
     get hostHeight() { return this.height; }
-    get tabIndex() { return 1; }
-    get ariaLive() { return 'assertive'; }
     get dir() {
         return this.direction;
     }
@@ -171,9 +165,6 @@ let ScrollViewComponent = class ScrollViewComponent {
             }
         }
     }
-    /**
-     * @hidden
-     */
     ngOnChanges(_) {
         this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
     }
@@ -194,7 +185,6 @@ let ScrollViewComponent = class ScrollViewComponent {
      */
     transitionEndHandler(e) {
         this.animationState = null;
-        this.transitionStyle = null;
         if (e.toState === 'left' || e.toState === 'right') {
             if (this.pageIndex !== null) {
                 this.activeIndex = this.pageIndex;
@@ -203,7 +193,6 @@ let ScrollViewComponent = class ScrollViewComponent {
             this.activeIndex = this.index;
             this.activeIndexChange.emit(this.activeIndex);
             this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
-            this.application.tick();
         }
     }
     /**
@@ -218,10 +207,7 @@ let ScrollViewComponent = class ScrollViewComponent {
     handleDrag(e) {
         const deltaX = e.pageX - this.initialTouchCoordinate;
         if (!this.animationState && !this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
-            // TO DO: refactor to apply style without triggering the change detection
-            this.ngZone.run(() => {
-                this.transitionStyle = `translateX(${deltaX}px)`;
-            });
+            this.renderer.setStyle(this.itemWrapper.nativeElement, 'transform', `translateX(${deltaX}px)`);
         }
     }
     /**
@@ -241,17 +227,17 @@ let ScrollViewComponent = class ScrollViewComponent {
                     this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
                 }
                 if (!this.animate) {
-                    this.transitionStyle = null;
+                    this.renderer.removeStyle(this.itemWrapper.nativeElement, 'transform');
                     this.activeIndexChange.emit(this.activeIndex);
                     this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
                 }
             }
-            else if (Math.abs(deltaX) > 0) {
-                if (this.animate) {
+            else {
+                if (this.animate && deltaX) {
                     this.animationState = 'center';
                 }
                 else {
-                    this.transitionStyle = null;
+                    this.renderer.removeStyle(this.itemWrapper.nativeElement, 'transform');
                 }
             }
         });
@@ -435,15 +421,13 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", TemplateRef)
 ], ScrollViewComponent.prototype, "itemTemplateRef", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ScrollViewComponent.prototype, "widgetClass", null);
+    ViewChild('itemWrapper', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], ScrollViewComponent.prototype, "itemWrapper", void 0);
 tslib_1.__decorate([
     HostBinding('class.k-scrollview'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ScrollViewComponent.prototype, "scrollViewClass", null);
+    tslib_1.__metadata("design:type", Boolean)
+], ScrollViewComponent.prototype, "scrollViewClass", void 0);
 tslib_1.__decorate([
     HostBinding('class.k-scrollview-light'),
     tslib_1.__metadata("design:type", Boolean),
@@ -466,14 +450,12 @@ tslib_1.__decorate([
 ], ScrollViewComponent.prototype, "hostHeight", null);
 tslib_1.__decorate([
     HostBinding('attr.tabindex'),
-    tslib_1.__metadata("design:type", Number),
-    tslib_1.__metadata("design:paramtypes", [])
-], ScrollViewComponent.prototype, "tabIndex", null);
+    tslib_1.__metadata("design:type", Number)
+], ScrollViewComponent.prototype, "tabIndex", void 0);
 tslib_1.__decorate([
     HostBinding('attr.aria-live'),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [])
-], ScrollViewComponent.prototype, "ariaLive", null);
+    tslib_1.__metadata("design:type", String)
+], ScrollViewComponent.prototype, "ariaLive", void 0);
 tslib_1.__decorate([
     HostBinding('attr.dir'),
     tslib_1.__metadata("design:type", String),
@@ -516,7 +498,7 @@ ScrollViewComponent = tslib_1.__decorate([
         selector: 'kendo-scrollview',
         template: `
         <ul class='k-scrollview-wrap'
-            [ngStyle]="{ transform: transitionStyle }"
+            #itemWrapper
             [@animateTo]="animationState"
             (@animateTo.done)="transitionEndHandler($event)"
             kendoDraggable
@@ -562,8 +544,8 @@ ScrollViewComponent = tslib_1.__decorate([
     `
     }),
     tslib_1.__metadata("design:paramtypes", [ElementRef,
-        ApplicationRef,
         LocalizationService,
-        NgZone])
+        NgZone,
+        Renderer2])
 ], ScrollViewComponent);
 export { ScrollViewComponent };

package/dist/fesm2015/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata } from 'tslib';
-import { EventEmitter, Input, Output, ContentChild, TemplateRef, HostBinding, HostListener, Component, ElementRef, ApplicationRef, NgZone, NgModule } from '@angular/core';
+import { EventEmitter, Input, Output, ContentChild, TemplateRef, ViewChild, ElementRef, HostBinding, HostListener, Component, NgZone, Renderer2, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { Keys, DraggableModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scrollview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635940117,
+    publishDate: 1642584967,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -171,11 +171,11 @@ class DataCollection {
  * ```
  */
 let ScrollViewComponent = class ScrollViewComponent {
-    constructor(element, application, localization, ngZone) {
+    constructor(element, localization, ngZone, renderer) {
         this.element = element;
-        this.application = application;
         this.localization = localization;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         /**
          * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
          */
@@ -214,9 +214,11 @@ let ScrollViewComponent = class ScrollViewComponent {
          * Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
          */
         this.activeIndexChange = new EventEmitter();
+        this.scrollViewClass = true;
+        this.tabIndex = 1;
+        this.ariaLive = 'assertive';
         this.touchAction = 'pan-y pinch-zoom';
         this.animationState = null;
-        this.transitionStyle = null;
         this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
         this.isDataSourceEmpty = false;
         this._activeIndex = 0;
@@ -234,12 +236,6 @@ let ScrollViewComponent = class ScrollViewComponent {
     get activeIndex() {
         return this._activeIndex;
     }
-    get widgetClass() {
-        return true;
-    }
-    get scrollViewClass() {
-        return true;
-    }
     get scrollViewLightOverlayClass() {
         return this.pagerOverlay === 'light';
     }
@@ -248,8 +244,6 @@ let ScrollViewComponent = class ScrollViewComponent {
     }
     get hostWidth() { return this.width; }
     get hostHeight() { return this.height; }
-    get tabIndex() { return 1; }
-    get ariaLive() { return 'assertive'; }
     get dir() {
         return this.direction;
     }
@@ -277,9 +271,6 @@ let ScrollViewComponent = class ScrollViewComponent {
             }
         }
     }
-    /**
-     * @hidden
-     */
     ngOnChanges(_) {
         this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
     }
@@ -300,7 +291,6 @@ let ScrollViewComponent = class ScrollViewComponent {
      */
     transitionEndHandler(e) {
         this.animationState = null;
-        this.transitionStyle = null;
         if (e.toState === 'left' || e.toState === 'right') {
             if (this.pageIndex !== null) {
                 this.activeIndex = this.pageIndex;
@@ -309,7 +299,6 @@ let ScrollViewComponent = class ScrollViewComponent {
             this.activeIndex = this.index;
             this.activeIndexChange.emit(this.activeIndex);
             this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
-            this.application.tick();
         }
     }
     /**
@@ -324,10 +313,7 @@ let ScrollViewComponent = class ScrollViewComponent {
     handleDrag(e) {
         const deltaX = e.pageX - this.initialTouchCoordinate;
         if (!this.animationState && !this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
-            // TO DO: refactor to apply style without triggering the change detection
-            this.ngZone.run(() => {
-                this.transitionStyle = `translateX(${deltaX}px)`;
-            });
+            this.renderer.setStyle(this.itemWrapper.nativeElement, 'transform', `translateX(${deltaX}px)`);
         }
     }
     /**
@@ -347,17 +333,17 @@ let ScrollViewComponent = class ScrollViewComponent {
                     this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
                 }
                 if (!this.animate) {
-                    this.transitionStyle = null;
+                    this.renderer.removeStyle(this.itemWrapper.nativeElement, 'transform');
                     this.activeIndexChange.emit(this.activeIndex);
                     this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
                 }
             }
-            else if (Math.abs(deltaX) > 0) {
-                if (this.animate) {
+            else {
+                if (this.animate && deltaX) {
                     this.animationState = 'center';
                 }
                 else {
-                    this.transitionStyle = null;
+                    this.renderer.removeStyle(this.itemWrapper.nativeElement, 'transform');
                 }
             }
         });
@@ -541,15 +527,13 @@ __decorate([
     __metadata("design:type", TemplateRef)
 ], ScrollViewComponent.prototype, "itemTemplateRef", void 0);
 __decorate([
-    HostBinding('class.k-widget'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ScrollViewComponent.prototype, "widgetClass", null);
+    ViewChild('itemWrapper', { static: false }),
+    __metadata("design:type", ElementRef)
+], ScrollViewComponent.prototype, "itemWrapper", void 0);
 __decorate([
     HostBinding('class.k-scrollview'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ScrollViewComponent.prototype, "scrollViewClass", null);
+    __metadata("design:type", Boolean)
+], ScrollViewComponent.prototype, "scrollViewClass", void 0);
 __decorate([
     HostBinding('class.k-scrollview-light'),
     __metadata("design:type", Boolean),
@@ -572,14 +556,12 @@ __decorate([
 ], ScrollViewComponent.prototype, "hostHeight", null);
 __decorate([
     HostBinding('attr.tabindex'),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [])
-], ScrollViewComponent.prototype, "tabIndex", null);
+    __metadata("design:type", Number)
+], ScrollViewComponent.prototype, "tabIndex", void 0);
 __decorate([
     HostBinding('attr.aria-live'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ScrollViewComponent.prototype, "ariaLive", null);
+    __metadata("design:type", String)
+], ScrollViewComponent.prototype, "ariaLive", void 0);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String),
@@ -622,7 +604,7 @@ ScrollViewComponent = __decorate([
         selector: 'kendo-scrollview',
         template: `
         <ul class='k-scrollview-wrap'
-            [ngStyle]="{ transform: transitionStyle }"
+            #itemWrapper
             [@animateTo]="animationState"
             (@animateTo.done)="transitionEndHandler($event)"
             kendoDraggable
@@ -668,9 +650,9 @@ ScrollViewComponent = __decorate([
     `
     }),
     __metadata("design:paramtypes", [ElementRef,
-        ApplicationRef,
         LocalizationService,
-        NgZone])
+        NgZone,
+        Renderer2])
 ], ScrollViewComponent);
 
 /**

package/dist/fesm5/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __metadata } from 'tslib';
-import { Input, Output, EventEmitter, ContentChild, TemplateRef, HostBinding, HostListener, Component, ElementRef, ApplicationRef, NgZone, NgModule } from '@angular/core';
+import { Input, Output, EventEmitter, ContentChild, TemplateRef, ViewChild, ElementRef, HostBinding, HostListener, Component, NgZone, Renderer2, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { Keys, DraggableModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -26,7 +26,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-scrollview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635940117,
+    publishDate: 1642584967,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -189,12 +189,12 @@ var DataCollection = /** @class */ (function () {
  * ```
  */
 var ScrollViewComponent = /** @class */ (function () {
-    function ScrollViewComponent(element, application, localization, ngZone) {
+    function ScrollViewComponent(element, localization, ngZone, renderer) {
         var _this = this;
         this.element = element;
-        this.application = application;
         this.localization = localization;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         /**
          * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
          */
@@ -233,9 +233,11 @@ var ScrollViewComponent = /** @class */ (function () {
          * Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
          */
         this.activeIndexChange = new EventEmitter();
+        this.scrollViewClass = true;
+        this.tabIndex = 1;
+        this.ariaLive = 'assertive';
         this.touchAction = 'pan-y pinch-zoom';
         this.animationState = null;
-        this.transitionStyle = null;
         this.view = new DataCollection(function () {
             return new DataResultIterator(_this.data, _this.activeIndex, _this.endless, _this.pageIndex, _this.isRTL);
         });
@@ -259,20 +261,6 @@ var ScrollViewComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ScrollViewComponent.prototype, "widgetClass", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewComponent.prototype, "scrollViewClass", {
-        get: function () {
-            return true;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(ScrollViewComponent.prototype, "scrollViewLightOverlayClass", {
         get: function () {
             return this.pagerOverlay === 'light';
@@ -297,16 +285,6 @@ var ScrollViewComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ScrollViewComponent.prototype, "tabIndex", {
-        get: function () { return 1; },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ScrollViewComponent.prototype, "ariaLive", {
-        get: function () { return 'assertive'; },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(ScrollViewComponent.prototype, "dir", {
         get: function () {
             return this.direction;
@@ -342,9 +320,6 @@ var ScrollViewComponent = /** @class */ (function () {
             }
         }
     };
-    /**
-     * @hidden
-     */
     ScrollViewComponent.prototype.ngOnChanges = function (_) {
         this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
     };
@@ -365,7 +340,6 @@ var ScrollViewComponent = /** @class */ (function () {
      */
     ScrollViewComponent.prototype.transitionEndHandler = function (e) {
         this.animationState = null;
-        this.transitionStyle = null;
         if (e.toState === 'left' || e.toState === 'right') {
             if (this.pageIndex !== null) {
                 this.activeIndex = this.pageIndex;
@@ -374,7 +348,6 @@ var ScrollViewComponent = /** @class */ (function () {
             this.activeIndex = this.index;
             this.activeIndexChange.emit(this.activeIndex);
             this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
-            this.application.tick();
         }
     };
     /**
@@ -387,13 +360,9 @@ var ScrollViewComponent = /** @class */ (function () {
      * @hidden
      */
     ScrollViewComponent.prototype.handleDrag = function (e) {
-        var _this = this;
         var deltaX = e.pageX - this.initialTouchCoordinate;
         if (!this.animationState && !this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
-            // TO DO: refactor to apply style without triggering the change detection
-            this.ngZone.run(function () {
-                _this.transitionStyle = "translateX(" + deltaX + "px)";
-            });
+            this.renderer.setStyle(this.itemWrapper.nativeElement, 'transform', "translateX(" + deltaX + "px)");
         }
     };
     /**
@@ -414,17 +383,17 @@ var ScrollViewComponent = /** @class */ (function () {
                     _this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
                 }
                 if (!_this.animate) {
-                    _this.transitionStyle = null;
+                    _this.renderer.removeStyle(_this.itemWrapper.nativeElement, 'transform');
                     _this.activeIndexChange.emit(_this.activeIndex);
                     _this.itemChanged.emit({ index: _this.activeIndex, item: _this.view.item(1) });
                 }
             }
-            else if (Math.abs(deltaX) > 0) {
-                if (_this.animate) {
+            else {
+                if (_this.animate && deltaX) {
                     _this.animationState = 'center';
                 }
                 else {
-                    _this.transitionStyle = null;
+                    _this.renderer.removeStyle(_this.itemWrapper.nativeElement, 'transform');
                 }
             }
         });
@@ -611,15 +580,13 @@ var ScrollViewComponent = /** @class */ (function () {
         __metadata("design:type", TemplateRef)
     ], ScrollViewComponent.prototype, "itemTemplateRef", void 0);
     __decorate([
-        HostBinding('class.k-widget'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ScrollViewComponent.prototype, "widgetClass", null);
+        ViewChild('itemWrapper', { static: false }),
+        __metadata("design:type", ElementRef)
+    ], ScrollViewComponent.prototype, "itemWrapper", void 0);
     __decorate([
         HostBinding('class.k-scrollview'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ScrollViewComponent.prototype, "scrollViewClass", null);
+        __metadata("design:type", Boolean)
+    ], ScrollViewComponent.prototype, "scrollViewClass", void 0);
     __decorate([
         HostBinding('class.k-scrollview-light'),
         __metadata("design:type", Boolean),
@@ -642,14 +609,12 @@ var ScrollViewComponent = /** @class */ (function () {
     ], ScrollViewComponent.prototype, "hostHeight", null);
     __decorate([
         HostBinding('attr.tabindex'),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [])
-    ], ScrollViewComponent.prototype, "tabIndex", null);
+        __metadata("design:type", Number)
+    ], ScrollViewComponent.prototype, "tabIndex", void 0);
     __decorate([
         HostBinding('attr.aria-live'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], ScrollViewComponent.prototype, "ariaLive", null);
+        __metadata("design:type", String)
+    ], ScrollViewComponent.prototype, "ariaLive", void 0);
     __decorate([
         HostBinding('attr.dir'),
         __metadata("design:type", String),
@@ -690,12 +655,12 @@ var ScrollViewComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-scrollview',
-            template: "\n        <ul class='k-scrollview-wrap'\n            [ngStyle]=\"{ transform: transitionStyle }\"\n            [@animateTo]=\"animationState\"\n            (@animateTo.done)=\"transitionEndHandler($event)\"\n            kendoDraggable\n            (kendoDrag)=\"handleDrag($event)\"\n            (kendoPress)=\"handlePress($event)\"\n            (kendoRelease)=\"handleRelease($event)\"\n        >\n            <li\n                *ngFor=\"let item of view;let i=index\"\n                [ngStyle]=\"inlineListItemStyles(i)\"\n                [attr.aria-hidden]=\"i !== 1\"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"itemTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n            </li>\n      </ul>\n        <div class='k-scrollview-elements'\n            [ngStyle]=\"{'height': height}\"\n            *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n            <a class=\"k-scrollview-prev\"\n                aria-label=\"previous\"\n                *ngIf=\"arrows && displayLeftArrow()\"\n                (click)=\"leftArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-w\"></span>\n            </a>\n            <a class=\"k-scrollview-next\"\n                aria-label=\"next\"\n                *ngIf=\"arrows && displayRightArrow()\"\n                (click)=\"rightArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-e\"></span>\n            </a>\n            <kendo-scrollview-pager\n                class='k-scrollview-nav-wrap'\n                *ngIf=\"pageable\"\n                (pagerIndexChange)=\"pageChange($event)\"\n                [data]=\"data\"\n                [activeIndex]=\"activeIndex\">\n            </kendo-scrollview-pager>\n        </div>\n    "
+            template: "\n        <ul class='k-scrollview-wrap'\n            #itemWrapper\n            [@animateTo]=\"animationState\"\n            (@animateTo.done)=\"transitionEndHandler($event)\"\n            kendoDraggable\n            (kendoDrag)=\"handleDrag($event)\"\n            (kendoPress)=\"handlePress($event)\"\n            (kendoRelease)=\"handleRelease($event)\"\n        >\n            <li\n                *ngFor=\"let item of view;let i=index\"\n                [ngStyle]=\"inlineListItemStyles(i)\"\n                [attr.aria-hidden]=\"i !== 1\"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"itemTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n            </li>\n      </ul>\n        <div class='k-scrollview-elements'\n            [ngStyle]=\"{'height': height}\"\n            *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n            <a class=\"k-scrollview-prev\"\n                aria-label=\"previous\"\n                *ngIf=\"arrows && displayLeftArrow()\"\n                (click)=\"leftArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-w\"></span>\n            </a>\n            <a class=\"k-scrollview-next\"\n                aria-label=\"next\"\n                *ngIf=\"arrows && displayRightArrow()\"\n                (click)=\"rightArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-e\"></span>\n            </a>\n            <kendo-scrollview-pager\n                class='k-scrollview-nav-wrap'\n                *ngIf=\"pageable\"\n                (pagerIndexChange)=\"pageChange($event)\"\n                [data]=\"data\"\n                [activeIndex]=\"activeIndex\">\n            </kendo-scrollview-pager>\n        </div>\n    "
         }),
         __metadata("design:paramtypes", [ElementRef,
-            ApplicationRef,
             LocalizationService,
-            NgZone])
+            NgZone,
+            Renderer2])
     ], ScrollViewComponent);
     return ScrollViewComponent;
 }());

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-scrollview',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635940117,
+    publishDate: 1642584967,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };