@progress/kendo-angular-scrollview 4.1.1 → 4.1.2-dev.202111191702

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: 1637341289,
     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: 1637341289,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/npm/scrollview.component.js

@@ -67,12 +67,12 @@ var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
  * ```
  */
 var ScrollViewComponent = /** @class */ (function () {
-    function ScrollViewComponent(element, application, localization, ngZone) {
+    function ScrollViewComponent(element, localization, ngZone, renderer) {
         var _this = this;
         this.element = element;
-        this.application = application;
         this.localization = localization;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         /**
          * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
          */
@@ -111,9 +111,11 @@ var ScrollViewComponent = /** @class */ (function () {
          * Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
          */
         this.activeIndexChange = new core_1.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 data_collection_1.DataCollection(function () {
             return new data_collection_1.DataResultIterator(_this.data, _this.activeIndex, _this.endless, _this.pageIndex, _this.isRTL);
         });
@@ -137,20 +139,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';
@@ -175,16 +163,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;
@@ -220,9 +198,6 @@ var ScrollViewComponent = /** @class */ (function () {
             }
         }
     };
-    /**
-     * @hidden
-     */
     ScrollViewComponent.prototype.ngOnChanges = function (_) {
         this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
     };
@@ -243,7 +218,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;
@@ -252,7 +226,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();
         }
     };
     /**
@@ -265,13 +238,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)");
         }
     };
     /**
@@ -292,17 +261,17 @@ var ScrollViewComponent = /** @class */ (function () {
                     _this.changeIndex(deltaX > 0 ? enums_1.Dir.Prev : enums_1.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');
                 }
             }
         });
@@ -489,15 +458,13 @@ var ScrollViewComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.TemplateRef)
     ], ScrollViewComponent.prototype, "itemTemplateRef", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ScrollViewComponent.prototype, "widgetClass", null);
+        core_1.ViewChild('itemWrapper', { static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], ScrollViewComponent.prototype, "itemWrapper", void 0);
     tslib_1.__decorate([
         core_1.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([
         core_1.HostBinding('class.k-scrollview-light'),
         tslib_1.__metadata("design:type", Boolean),
@@ -520,14 +487,12 @@ var ScrollViewComponent = /** @class */ (function () {
     ], ScrollViewComponent.prototype, "hostHeight", null);
     tslib_1.__decorate([
         core_1.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([
         core_1.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([
         core_1.HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String),
@@ -568,12 +533,12 @@ var ScrollViewComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-scrollview',
-            template: "\n        <ul class='k-scrollview-wrap'\n            [ngStyle]=\"{ transform: transitionStyle }\"\n            [@animateTo]=\"animationState\"\n            (@animateTo.done)=\"transitionEndHandler($event)\"\n            kendoDraggable\n            (kendoDrag)=\"handleDrag($event)\"\n            (kendoPress)=\"handlePress($event)\"\n            (kendoRelease)=\"handleRelease($event)\"\n        >\n            <li\n                *ngFor=\"let item of view;let i=index\"\n                [ngStyle]=\"inlineListItemStyles(i)\"\n                [attr.aria-hidden]=\"i !== 1\"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"itemTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n            </li>\n      </ul>\n        <div class='k-scrollview-elements'\n            [ngStyle]=\"{'height': height}\"\n            *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n            <a class=\"k-scrollview-prev\"\n                aria-label=\"previous\"\n                *ngIf=\"arrows && displayLeftArrow()\"\n                (click)=\"leftArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-w\"></span>\n            </a>\n            <a class=\"k-scrollview-next\"\n                aria-label=\"next\"\n                *ngIf=\"arrows && displayRightArrow()\"\n                (click)=\"rightArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-e\"></span>\n            </a>\n            <kendo-scrollview-pager\n                class='k-scrollview-nav-wrap'\n                *ngIf=\"pageable\"\n                (pagerIndexChange)=\"pageChange($event)\"\n                [data]=\"data\"\n                [activeIndex]=\"activeIndex\">\n            </kendo-scrollview-pager>\n        </div>\n    "
+            template: "\n        <ul class='k-scrollview-wrap'\n            #itemWrapper\n            [@animateTo]=\"animationState\"\n            (@animateTo.done)=\"transitionEndHandler($event)\"\n            kendoDraggable\n            (kendoDrag)=\"handleDrag($event)\"\n            (kendoPress)=\"handlePress($event)\"\n            (kendoRelease)=\"handleRelease($event)\"\n        >\n            <li\n                *ngFor=\"let item of view;let i=index\"\n                [ngStyle]=\"inlineListItemStyles(i)\"\n                [attr.aria-hidden]=\"i !== 1\"\n            >\n                <ng-template\n                    [ngTemplateOutlet]=\"itemTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ item: item }\">\n                </ng-template>\n            </li>\n      </ul>\n        <div class='k-scrollview-elements'\n            [ngStyle]=\"{'height': height}\"\n            *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n            <a class=\"k-scrollview-prev\"\n                aria-label=\"previous\"\n                *ngIf=\"arrows && displayLeftArrow()\"\n                (click)=\"leftArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-w\"></span>\n            </a>\n            <a class=\"k-scrollview-next\"\n                aria-label=\"next\"\n                *ngIf=\"arrows && displayRightArrow()\"\n                (click)=\"rightArrowClick()\">\n                <span class=\"k-icon k-i-arrowhead-e\"></span>\n            </a>\n            <kendo-scrollview-pager\n                class='k-scrollview-nav-wrap'\n                *ngIf=\"pageable\"\n                (pagerIndexChange)=\"pageChange($event)\"\n                [data]=\"data\"\n                [activeIndex]=\"activeIndex\">\n            </kendo-scrollview-pager>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
-            core_1.ApplicationRef,
             kendo_angular_l10n_1.LocalizationService,
-            core_1.NgZone])
+            core_1.NgZone,
+            core_1.Renderer2])
     ], ScrollViewComponent);
     return ScrollViewComponent;
 }());

package/dist/systemjs/kendo-angular-scrollview.js

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

package/package.json

@@ -3,7 +3,7 @@
   "description": "A ScrollView Component for Angular",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
-  "version": "4.1.1",
+  "version": "4.1.2-dev.202111191702",
   "main": "dist/npm/index.js",
   "module": "dist/fesm5/index.js",
   "es2015": "dist/fesm2015/index.js",