@progress/kendo-angular-scrollview 4.1.0 → 4.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/cdn/js/kendo-angular-scrollview.js +2 -2
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/package-metadata.js +1 -1
  4. package/dist/es/scrollview.component.js +23 -58
  5. package/dist/es2015/index.metadata.json +1 -1
  6. package/dist/es2015/package-metadata.js +1 -1
  7. package/dist/es2015/scrollview.component.d.ts +7 -11
  8. package/dist/es2015/scrollview.component.js +23 -41
  9. package/dist/fesm2015/index.js +24 -42
  10. package/dist/fesm5/index.js +24 -59
  11. package/dist/npm/package-metadata.js +1 -1
  12. package/dist/npm/scrollview.component.js +22 -57
  13. package/dist/systemjs/kendo-angular-scrollview.js +1 -1
  14. package/package.json +6 -6
package/dist/es2015/index.metadata.json CHANGED
@@ -1 +1 @@
1
- {"__symbolic":"module","version":4,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":86,"character":1},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":88,"character":8},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":89,"character":12},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":89,"character":41},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":90,"character":12},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":91,"character":16},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":91,"character":42},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":93,"character":12},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":94,"character":16},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":94,"character":42},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":96,"character":12},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":97,"character":16},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":103,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":105,"character":21},"useValue":"kendo.scrollview"}],"selector":"kendo-scrollview","template":"\n <ul class='k-scrollview-wrap'\n [ngStyle]=\"{ transform: transitionStyle }\"\n [@animateTo]=\"animationState\"\n (@animateTo.done)=\"transitionEndHandler($event)\"\n kendoDraggable\n (kendoDrag)=\"handleDrag($event)\"\n (kendoPress)=\"handlePress($event)\"\n (kendoRelease)=\"handleRelease($event)\"\n >\n <li\n *ngFor=\"let item of view;let i=index\"\n [ngStyle]=\"inlineListItemStyles(i)\"\n [attr.aria-hidden]=\"i !== 1\"\n >\n <ng-template\n [ngTemplateOutlet]=\"itemTemplateRef\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </li>\n </ul>\n <div class='k-scrollview-elements'\n [ngStyle]=\"{'height': height}\"\n *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n <a class=\"k-scrollview-prev\"\n aria-label=\"previous\"\n *ngIf=\"arrows && displayLeftArrow()\"\n (click)=\"leftArrowClick()\">\n <span class=\"k-icon k-i-arrowhead-w\"></span>\n </a>\n <a class=\"k-scrollview-next\"\n aria-label=\"next\"\n *ngIf=\"arrows && displayRightArrow()\"\n (click)=\"rightArrowClick()\">\n <span class=\"k-icon k-i-arrowhead-e\"></span>\n </a>\n <kendo-scrollview-pager\n class='k-scrollview-nav-wrap'\n *ngIf=\"pageable\"\n (pagerIndexChange)=\"pageChange($event)\"\n [data]=\"data\"\n [activeIndex]=\"activeIndex\">\n </kendo-scrollview-pager>\n </div>\n "}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":162,"character":5}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":167,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":179,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":185,"character":5}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":192,"character":5}}]}],"pagerOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":198,"character":5}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":5}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":210,"character":5}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":216,"character":5}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":221,"character":5}}]}],"activeIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":226,"character":5}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":228,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":228,"character":18},{"static":false}]}]}],"widgetClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":231,"character":5},"arguments":["class.k-widget"]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":235,"character":5},"arguments":["class.k-scrollview"]}]}],"scrollViewLightOverlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":239,"character":5},"arguments":["class.k-scrollview-light"]}]}],"scrollViewDarkOverlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":243,"character":5},"arguments":["class.k-scrollview-dark"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":247,"character":5},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":248,"character":5},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":249,"character":5},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":250,"character":5},"arguments":["attr.aria-live"]}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":252,"character":5},"arguments":["attr.dir"]}]}],"touchAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":256,"character":5},"arguments":["style.touch-action"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":277,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef","line":278,"character":31},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":279,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":280,"character":24}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":288,"character":5},"arguments":["keydown",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"transitionEndHandler":[{"__symbolic":"method"}],"handlePress":[{"__symbolic":"method"}],"handleDrag":[{"__symbolic":"method"}],"handleRelease":[{"__symbolic":"method"}],"pageChange":[{"__symbolic":"method"}],"inlineListItemStyles":[{"__symbolic":"method"}],"displayLeftArrow":[{"__symbolic":"method"}],"leftArrowClick":[{"__symbolic":"method"}],"displayRightArrow":[{"__symbolic":"method"}],"rightArrowClick":[{"__symbolic":"method"}],"draggedInsideBounds":[{"__symbolic":"method"}],"draggedEnoughToNavigate":[{"__symbolic":"method"}],"isDragForbidden":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"changeIndex":[{"__symbolic":"method"}]}},"ScrollViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":46,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"ScrollViewComponent"},{"__symbolic":"reference","name":"ScrollViewPagerComponent"}]],"exports":[[{"__symbolic":"reference","name":"ScrollViewComponent"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":49,"character":14},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"DraggableModule","line":49,"character":28}]}]}],"members":{}},"ScrollViewPagerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"kendo-scrollview-pager","template":"\n <ul class=\"k-scrollview-pageable k-scrollview-nav\">\n <li class=\"k-button\" *ngFor=\"let item of data; let i = index\"\n [ngClass]=\"itemClass(i)\"\n (click)=\"indexChange(i)\">\n </li>\n </ul>\n "}]}],"members":{"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"pagerIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"itemClass":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}},"ItemChangedEvent":{"__symbolic":"interface"},"ScrollViewPagerOverlay":{"__symbolic":"interface"}},"origins":{"ScrollViewComponent":"./scrollview.component","ScrollViewModule":"./scrollview.module","ScrollViewPagerComponent":"./scrollview-pager.component","ItemChangedEvent":"./change-event-args","ScrollViewPagerOverlay":"./enums"},"importAs":"@progress/kendo-angular-scrollview"}
1
+ {"__symbolic":"module","version":4,"metadata":{"ScrollViewComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":87,"character":1},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":89,"character":8},"arguments":["animateTo",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":90,"character":12},"arguments":["center, left, right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":90,"character":41},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":91,"character":12},"arguments":["* => right",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":92,"character":16},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":92,"character":42},"arguments":[{"transform":"translateX(100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":94,"character":12},"arguments":["* => left",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":95,"character":16},"arguments":["300ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":95,"character":42},"arguments":[{"transform":"translateX(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":97,"character":12},"arguments":["* => center",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":98,"character":16},"arguments":["300ms ease-out"]}]]}]]}],"exportAs":"kendoScrollView","providers":[{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":104,"character":8},{"provide":{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"L10N_PREFIX","line":106,"character":21},"useValue":"kendo.scrollview"}],"selector":"kendo-scrollview","template":"\n <ul class='k-scrollview-wrap'\n #itemWrapper\n [@animateTo]=\"animationState\"\n (@animateTo.done)=\"transitionEndHandler($event)\"\n kendoDraggable\n (kendoDrag)=\"handleDrag($event)\"\n (kendoPress)=\"handlePress($event)\"\n (kendoRelease)=\"handleRelease($event)\"\n >\n <li\n *ngFor=\"let item of view;let i=index\"\n [ngStyle]=\"inlineListItemStyles(i)\"\n [attr.aria-hidden]=\"i !== 1\"\n >\n <ng-template\n [ngTemplateOutlet]=\"itemTemplateRef\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </li>\n </ul>\n <div class='k-scrollview-elements'\n [ngStyle]=\"{'height': height}\"\n *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n\n <a class=\"k-scrollview-prev\"\n aria-label=\"previous\"\n *ngIf=\"arrows && displayLeftArrow()\"\n (click)=\"leftArrowClick()\">\n <span class=\"k-icon k-i-arrowhead-w\"></span>\n </a>\n <a class=\"k-scrollview-next\"\n aria-label=\"next\"\n *ngIf=\"arrows && displayRightArrow()\"\n (click)=\"rightArrowClick()\">\n <span class=\"k-icon k-i-arrowhead-e\"></span>\n </a>\n <kendo-scrollview-pager\n class='k-scrollview-nav-wrap'\n *ngIf=\"pageable\"\n (pagerIndexChange)=\"pageChange($event)\"\n [data]=\"data\"\n [activeIndex]=\"activeIndex\">\n </kendo-scrollview-pager>\n </div>\n "}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":163,"character":5}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":168,"character":5}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":180,"character":5}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":5}}]}],"endless":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":193,"character":5}}]}],"pagerOverlay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":199,"character":5}}]}],"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":205,"character":5}}]}],"pageable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":211,"character":5}}]}],"arrows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":217,"character":5}}]}],"itemChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":222,"character":5}}]}],"activeIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":227,"character":5}}]}],"itemTemplateRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":229,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":229,"character":18},{"static":false}]}]}],"itemWrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":232,"character":5},"arguments":["itemWrapper",{"static":false}]}]}],"scrollViewClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":235,"character":5},"arguments":["class.k-scrollview"]}]}],"scrollViewLightOverlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":237,"character":5},"arguments":["class.k-scrollview-light"]}]}],"scrollViewDarkOverlayClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":241,"character":5},"arguments":["class.k-scrollview-dark"]}]}],"hostWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":245,"character":5},"arguments":["style.width"]}]}],"hostHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":246,"character":5},"arguments":["style.height"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":247,"character":5},"arguments":["attr.tabindex"]}]}],"ariaLive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":248,"character":5},"arguments":["attr.aria-live"]}]}],"dir":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":250,"character":5},"arguments":["attr.dir"]}]}],"touchAction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":254,"character":5},"arguments":["style.touch-action"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":273,"character":27},{"__symbolic":"reference","module":"@progress/kendo-angular-l10n","name":"LocalizationService","line":274,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":275,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":276,"character":26}]}],"keyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":284,"character":5},"arguments":["keydown",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}],"prev":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"transitionEndHandler":[{"__symbolic":"method"}],"handlePress":[{"__symbolic":"method"}],"handleDrag":[{"__symbolic":"method"}],"handleRelease":[{"__symbolic":"method"}],"pageChange":[{"__symbolic":"method"}],"inlineListItemStyles":[{"__symbolic":"method"}],"displayLeftArrow":[{"__symbolic":"method"}],"leftArrowClick":[{"__symbolic":"method"}],"displayRightArrow":[{"__symbolic":"method"}],"rightArrowClick":[{"__symbolic":"method"}],"draggedInsideBounds":[{"__symbolic":"method"}],"draggedEnoughToNavigate":[{"__symbolic":"method"}],"isDragForbidden":[{"__symbolic":"method"}],"navigate":[{"__symbolic":"method"}],"changeIndex":[{"__symbolic":"method"}]}},"ScrollViewModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":46,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"ScrollViewComponent"},{"__symbolic":"reference","name":"ScrollViewPagerComponent"}]],"exports":[[{"__symbolic":"reference","name":"ScrollViewComponent"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":49,"character":14},{"__symbolic":"reference","module":"@progress/kendo-angular-common","name":"DraggableModule","line":49,"character":28}]}]}],"members":{}},"ScrollViewPagerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"kendo-scrollview-pager","template":"\n <ul class=\"k-scrollview-pageable k-scrollview-nav\">\n <li class=\"k-button\" *ngFor=\"let item of data; let i = index\"\n [ngClass]=\"itemClass(i)\"\n (click)=\"indexChange(i)\">\n </li>\n </ul>\n "}]}],"members":{"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"pagerIndexChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"itemClass":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}},"ItemChangedEvent":{"__symbolic":"interface"},"ScrollViewPagerOverlay":{"__symbolic":"interface"}},"origins":{"ScrollViewComponent":"./scrollview.component","ScrollViewModule":"./scrollview.module","ScrollViewPagerComponent":"./scrollview-pager.component","ItemChangedEvent":"./change-event-args","ScrollViewPagerOverlay":"./enums"},"importAs":"@progress/kendo-angular-scrollview"}
package/dist/es2015/package-metadata.js CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-scrollview',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1626799822,
12
+ publishDate: 1637575183,
13
13
  version: '',
14
14
  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'
15
15
  };
package/dist/es2015/scrollview.component.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { ApplicationRef, ElementRef, EventEmitter, OnChanges, TemplateRef, NgZone } from '@angular/core';
5
+ import { ElementRef, EventEmitter, OnChanges, TemplateRef, NgZone, Renderer2 } from '@angular/core';
6
6
  import { AnimationEvent } from '@angular/animations';
7
7
  import { AnimationState, ScrollViewPagerOverlay } from './enums';
8
8
  import { ItemChangedEvent } from './change-event-args';
@@ -64,9 +64,9 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
64
64
  */
65
65
  export declare class ScrollViewComponent implements OnChanges {
66
66
  protected element: ElementRef;
67
- protected application: ApplicationRef;
68
67
  private localization;
69
68
  private ngZone;
69
+ private renderer;
70
70
  /**
71
71
  * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
72
72
  */
@@ -120,18 +120,17 @@ export declare class ScrollViewComponent implements OnChanges {
120
120
  */
121
121
  activeIndexChange: EventEmitter<number>;
122
122
  itemTemplateRef: TemplateRef<any>;
123
- readonly widgetClass: boolean;
124
- readonly scrollViewClass: boolean;
123
+ itemWrapper: ElementRef;
124
+ scrollViewClass: boolean;
125
125
  readonly scrollViewLightOverlayClass: boolean;
126
126
  readonly scrollViewDarkOverlayClass: boolean;
127
127
  readonly hostWidth: string;
128
128
  readonly hostHeight: string;
129
- readonly tabIndex: number;
130
- readonly ariaLive: string;
129
+ tabIndex: number;
130
+ ariaLive: string;
131
131
  readonly dir: Direction;
132
132
  touchAction: string;
133
133
  animationState: AnimationState;
134
- transitionStyle: string;
135
134
  view: DataCollection;
136
135
  isDataSourceEmpty: boolean;
137
136
  private _activeIndex;
@@ -140,14 +139,11 @@ export declare class ScrollViewComponent implements OnChanges {
140
139
  private pageIndex;
141
140
  private transforms;
142
141
  private readonly direction;
143
- constructor(element: ElementRef, application: ApplicationRef, localization: LocalizationService, ngZone: NgZone);
142
+ constructor(element: ElementRef, localization: LocalizationService, ngZone: NgZone, renderer: Renderer2);
144
143
  /**
145
144
  * @hidden
146
145
  */
147
146
  keyDown(e: any): void;
148
- /**
149
- * @hidden
150
- */
151
147
  ngOnChanges(_: any): void;
152
148
  /**
153
149
  * Navigates the ScrollView to the previous item.
package/dist/es2015/scrollview.component.js CHANGED
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as tslib_1 from "tslib";
6
- import { ApplicationRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, NgZone } from '@angular/core';
6
+ import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, NgZone, ViewChild, Renderer2 } from '@angular/core';
7
7
  import { animate, state, style, transition, trigger } from '@angular/animations';
8
8
  import { Dir } from './enums';
9
9
  import { Keys } from '@progress/kendo-angular-common';
@@ -65,11 +65,11 @@ import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
65
65
  * ```
66
66
  */
67
67
  let ScrollViewComponent = class ScrollViewComponent {
68
- constructor(element, application, localization, ngZone) {
68
+ constructor(element, localization, ngZone, renderer) {
69
69
  this.element = element;
70
- this.application = application;
71
70
  this.localization = localization;
72
71
  this.ngZone = ngZone;
72
+ this.renderer = renderer;
73
73
  /**
74
74
  * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
75
75
  */
@@ -108,9 +108,11 @@ let ScrollViewComponent = class ScrollViewComponent {
108
108
  * Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
109
109
  */
110
110
  this.activeIndexChange = new EventEmitter();
111
+ this.scrollViewClass = true;
112
+ this.tabIndex = 1;
113
+ this.ariaLive = 'assertive';
111
114
  this.touchAction = 'pan-y pinch-zoom';
112
115
  this.animationState = null;
113
- this.transitionStyle = null;
114
116
  this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
115
117
  this.isDataSourceEmpty = false;
116
118
  this._activeIndex = 0;
@@ -128,12 +130,6 @@ let ScrollViewComponent = class ScrollViewComponent {
128
130
  get activeIndex() {
129
131
  return this._activeIndex;
130
132
  }
131
- get widgetClass() {
132
- return true;
133
- }
134
- get scrollViewClass() {
135
- return true;
136
- }
137
133
  get scrollViewLightOverlayClass() {
138
134
  return this.pagerOverlay === 'light';
139
135
  }
@@ -142,8 +138,6 @@ let ScrollViewComponent = class ScrollViewComponent {
142
138
  }
143
139
  get hostWidth() { return this.width; }
144
140
  get hostHeight() { return this.height; }
145
- get tabIndex() { return 1; }
146
- get ariaLive() { return 'assertive'; }
147
141
  get dir() {
148
142
  return this.direction;
149
143
  }
@@ -171,9 +165,6 @@ let ScrollViewComponent = class ScrollViewComponent {
171
165
  }
172
166
  }
173
167
  }
174
- /**
175
- * @hidden
176
- */
177
168
  ngOnChanges(_) {
178
169
  this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
179
170
  }
@@ -194,7 +185,6 @@ let ScrollViewComponent = class ScrollViewComponent {
194
185
  */
195
186
  transitionEndHandler(e) {
196
187
  this.animationState = null;
197
- this.transitionStyle = null;
198
188
  if (e.toState === 'left' || e.toState === 'right') {
199
189
  if (this.pageIndex !== null) {
200
190
  this.activeIndex = this.pageIndex;
@@ -203,7 +193,6 @@ let ScrollViewComponent = class ScrollViewComponent {
203
193
  this.activeIndex = this.index;
204
194
  this.activeIndexChange.emit(this.activeIndex);
205
195
  this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
206
- this.application.tick();
207
196
  }
208
197
  }
209
198
  /**
@@ -218,10 +207,7 @@ let ScrollViewComponent = class ScrollViewComponent {
218
207
  handleDrag(e) {
219
208
  const deltaX = e.pageX - this.initialTouchCoordinate;
220
209
  if (!this.animationState && !this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
221
- // TO DO: refactor to apply style without triggering the change detection
222
- this.ngZone.run(() => {
223
- this.transitionStyle = `translateX(${deltaX}px)`;
224
- });
210
+ this.renderer.setStyle(this.itemWrapper.nativeElement, 'transform', `translateX(${deltaX}px)`);
225
211
  }
226
212
  }
227
213
  /**
@@ -241,17 +227,17 @@ let ScrollViewComponent = class ScrollViewComponent {
241
227
  this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
242
228
  }
243
229
  if (!this.animate) {
244
- this.transitionStyle = null;
230
+ this.renderer.removeStyle(this.itemWrapper.nativeElement, 'transform');
245
231
  this.activeIndexChange.emit(this.activeIndex);
246
232
  this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
247
233
  }
248
234
  }
249
- else if (Math.abs(deltaX) > 0) {
250
- if (this.animate) {
235
+ else {
236
+ if (this.animate && deltaX) {
251
237
  this.animationState = 'center';
252
238
  }
253
239
  else {
254
- this.transitionStyle = null;
240
+ this.renderer.removeStyle(this.itemWrapper.nativeElement, 'transform');
255
241
  }
256
242
  }
257
243
  });
@@ -435,15 +421,13 @@ tslib_1.__decorate([
435
421
  tslib_1.__metadata("design:type", TemplateRef)
436
422
  ], ScrollViewComponent.prototype, "itemTemplateRef", void 0);
437
423
  tslib_1.__decorate([
438
- HostBinding('class.k-widget'),
439
- tslib_1.__metadata("design:type", Boolean),
440
- tslib_1.__metadata("design:paramtypes", [])
441
- ], ScrollViewComponent.prototype, "widgetClass", null);
424
+ ViewChild('itemWrapper', { static: false }),
425
+ tslib_1.__metadata("design:type", ElementRef)
426
+ ], ScrollViewComponent.prototype, "itemWrapper", void 0);
442
427
  tslib_1.__decorate([
443
428
  HostBinding('class.k-scrollview'),
444
- tslib_1.__metadata("design:type", Boolean),
445
- tslib_1.__metadata("design:paramtypes", [])
446
- ], ScrollViewComponent.prototype, "scrollViewClass", null);
429
+ tslib_1.__metadata("design:type", Boolean)
430
+ ], ScrollViewComponent.prototype, "scrollViewClass", void 0);
447
431
  tslib_1.__decorate([
448
432
  HostBinding('class.k-scrollview-light'),
449
433
  tslib_1.__metadata("design:type", Boolean),
@@ -466,14 +450,12 @@ tslib_1.__decorate([
466
450
  ], ScrollViewComponent.prototype, "hostHeight", null);
467
451
  tslib_1.__decorate([
468
452
  HostBinding('attr.tabindex'),
469
- tslib_1.__metadata("design:type", Number),
470
- tslib_1.__metadata("design:paramtypes", [])
471
- ], ScrollViewComponent.prototype, "tabIndex", null);
453
+ tslib_1.__metadata("design:type", Number)
454
+ ], ScrollViewComponent.prototype, "tabIndex", void 0);
472
455
  tslib_1.__decorate([
473
456
  HostBinding('attr.aria-live'),
474
- tslib_1.__metadata("design:type", String),
475
- tslib_1.__metadata("design:paramtypes", [])
476
- ], ScrollViewComponent.prototype, "ariaLive", null);
457
+ tslib_1.__metadata("design:type", String)
458
+ ], ScrollViewComponent.prototype, "ariaLive", void 0);
477
459
  tslib_1.__decorate([
478
460
  HostBinding('attr.dir'),
479
461
  tslib_1.__metadata("design:type", String),
@@ -516,7 +498,7 @@ ScrollViewComponent = tslib_1.__decorate([
516
498
  selector: 'kendo-scrollview',
517
499
  template: `
518
500
  <ul class='k-scrollview-wrap'
519
- [ngStyle]="{ transform: transitionStyle }"
501
+ #itemWrapper
520
502
  [@animateTo]="animationState"
521
503
  (@animateTo.done)="transitionEndHandler($event)"
522
504
  kendoDraggable
@@ -562,8 +544,8 @@ ScrollViewComponent = tslib_1.__decorate([
562
544
  `
563
545
  }),
564
546
  tslib_1.__metadata("design:paramtypes", [ElementRef,
565
- ApplicationRef,
566
547
  LocalizationService,
567
- NgZone])
548
+ NgZone,
549
+ Renderer2])
568
550
  ], ScrollViewComponent);
569
551
  export { ScrollViewComponent };
package/dist/fesm2015/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { __decorate, __metadata } from 'tslib';
6
- import { EventEmitter, Input, Output, ContentChild, TemplateRef, HostBinding, HostListener, Component, ElementRef, ApplicationRef, NgZone, NgModule } from '@angular/core';
6
+ import { EventEmitter, Input, Output, ContentChild, TemplateRef, ViewChild, ElementRef, HostBinding, HostListener, Component, NgZone, Renderer2, NgModule } from '@angular/core';
7
7
  import { trigger, state, style, transition, animate } from '@angular/animations';
8
8
  import { Keys, DraggableModule } from '@progress/kendo-angular-common';
9
9
  import { validatePackage } from '@progress/kendo-licensing';
@@ -26,7 +26,7 @@ const packageMetadata = {
26
26
  name: '@progress/kendo-angular-scrollview',
27
27
  productName: 'Kendo UI for Angular',
28
28
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
29
- publishDate: 1626799822,
29
+ publishDate: 1637575183,
30
30
  version: '',
31
31
  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'
32
32
  };
@@ -171,11 +171,11 @@ class DataCollection {
171
171
  * ```
172
172
  */
173
173
  let ScrollViewComponent = class ScrollViewComponent {
174
- constructor(element, application, localization, ngZone) {
174
+ constructor(element, localization, ngZone, renderer) {
175
175
  this.element = element;
176
- this.application = application;
177
176
  this.localization = localization;
178
177
  this.ngZone = ngZone;
178
+ this.renderer = renderer;
179
179
  /**
180
180
  * Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
181
181
  */
@@ -214,9 +214,11 @@ let ScrollViewComponent = class ScrollViewComponent {
214
214
  * Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
215
215
  */
216
216
  this.activeIndexChange = new EventEmitter();
217
+ this.scrollViewClass = true;
218
+ this.tabIndex = 1;
219
+ this.ariaLive = 'assertive';
217
220
  this.touchAction = 'pan-y pinch-zoom';
218
221
  this.animationState = null;
219
- this.transitionStyle = null;
220
222
  this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
221
223
  this.isDataSourceEmpty = false;
222
224
  this._activeIndex = 0;
@@ -234,12 +236,6 @@ let ScrollViewComponent = class ScrollViewComponent {
234
236
  get activeIndex() {
235
237
  return this._activeIndex;
236
238
  }
237
- get widgetClass() {
238
- return true;
239
- }
240
- get scrollViewClass() {
241
- return true;
242
- }
243
239
  get scrollViewLightOverlayClass() {
244
240
  return this.pagerOverlay === 'light';
245
241
  }
@@ -248,8 +244,6 @@ let ScrollViewComponent = class ScrollViewComponent {
248
244
  }
249
245
  get hostWidth() { return this.width; }
250
246
  get hostHeight() { return this.height; }
251
- get tabIndex() { return 1; }
252
- get ariaLive() { return 'assertive'; }
253
247
  get dir() {
254
248
  return this.direction;
255
249
  }
@@ -277,9 +271,6 @@ let ScrollViewComponent = class ScrollViewComponent {
277
271
  }
278
272
  }
279
273
  }
280
- /**
281
- * @hidden
282
- */
283
274
  ngOnChanges(_) {
284
275
  this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
285
276
  }
@@ -300,7 +291,6 @@ let ScrollViewComponent = class ScrollViewComponent {
300
291
  */
301
292
  transitionEndHandler(e) {
302
293
  this.animationState = null;
303
- this.transitionStyle = null;
304
294
  if (e.toState === 'left' || e.toState === 'right') {
305
295
  if (this.pageIndex !== null) {
306
296
  this.activeIndex = this.pageIndex;
@@ -309,7 +299,6 @@ let ScrollViewComponent = class ScrollViewComponent {
309
299
  this.activeIndex = this.index;
310
300
  this.activeIndexChange.emit(this.activeIndex);
311
301
  this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
312
- this.application.tick();
313
302
  }
314
303
  }
315
304
  /**
@@ -324,10 +313,7 @@ let ScrollViewComponent = class ScrollViewComponent {
324
313
  handleDrag(e) {
325
314
  const deltaX = e.pageX - this.initialTouchCoordinate;
326
315
  if (!this.animationState && !this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
327
- // TO DO: refactor to apply style without triggering the change detection
328
- this.ngZone.run(() => {
329
- this.transitionStyle = `translateX(${deltaX}px)`;
330
- });
316
+ this.renderer.setStyle(this.itemWrapper.nativeElement, 'transform', `translateX(${deltaX}px)`);
331
317
  }
332
318
  }
333
319
  /**
@@ -347,17 +333,17 @@ let ScrollViewComponent = class ScrollViewComponent {
347
333
  this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
348
334
  }
349
335
  if (!this.animate) {
350
- this.transitionStyle = null;
336
+ this.renderer.removeStyle(this.itemWrapper.nativeElement, 'transform');
351
337
  this.activeIndexChange.emit(this.activeIndex);
352
338
  this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
353
339
  }
354
340
  }
355
- else if (Math.abs(deltaX) > 0) {
356
- if (this.animate) {
341
+ else {
342
+ if (this.animate && deltaX) {
357
343
  this.animationState = 'center';
358
344
  }
359
345
  else {
360
- this.transitionStyle = null;
346
+ this.renderer.removeStyle(this.itemWrapper.nativeElement, 'transform');
361
347
  }
362
348
  }
363
349
  });
@@ -541,15 +527,13 @@ __decorate([
541
527
  __metadata("design:type", TemplateRef)
542
528
  ], ScrollViewComponent.prototype, "itemTemplateRef", void 0);
543
529
  __decorate([
544
- HostBinding('class.k-widget'),
545
- __metadata("design:type", Boolean),
546
- __metadata("design:paramtypes", [])
547
- ], ScrollViewComponent.prototype, "widgetClass", null);
530
+ ViewChild('itemWrapper', { static: false }),
531
+ __metadata("design:type", ElementRef)
532
+ ], ScrollViewComponent.prototype, "itemWrapper", void 0);
548
533
  __decorate([
549
534
  HostBinding('class.k-scrollview'),
550
- __metadata("design:type", Boolean),
551
- __metadata("design:paramtypes", [])
552
- ], ScrollViewComponent.prototype, "scrollViewClass", null);
535
+ __metadata("design:type", Boolean)
536
+ ], ScrollViewComponent.prototype, "scrollViewClass", void 0);
553
537
  __decorate([
554
538
  HostBinding('class.k-scrollview-light'),
555
539
  __metadata("design:type", Boolean),
@@ -572,14 +556,12 @@ __decorate([
572
556
  ], ScrollViewComponent.prototype, "hostHeight", null);
573
557
  __decorate([
574
558
  HostBinding('attr.tabindex'),
575
- __metadata("design:type", Number),
576
- __metadata("design:paramtypes", [])
577
- ], ScrollViewComponent.prototype, "tabIndex", null);
559
+ __metadata("design:type", Number)
560
+ ], ScrollViewComponent.prototype, "tabIndex", void 0);
578
561
  __decorate([
579
562
  HostBinding('attr.aria-live'),
580
- __metadata("design:type", String),
581
- __metadata("design:paramtypes", [])
582
- ], ScrollViewComponent.prototype, "ariaLive", null);
563
+ __metadata("design:type", String)
564
+ ], ScrollViewComponent.prototype, "ariaLive", void 0);
583
565
  __decorate([
584
566
  HostBinding('attr.dir'),
585
567
  __metadata("design:type", String),
@@ -622,7 +604,7 @@ ScrollViewComponent = __decorate([
622
604
  selector: 'kendo-scrollview',
623
605
  template: `
624
606
  <ul class='k-scrollview-wrap'
625
- [ngStyle]="{ transform: transitionStyle }"
607
+ #itemWrapper
626
608
  [@animateTo]="animationState"
627
609
  (@animateTo.done)="transitionEndHandler($event)"
628
610
  kendoDraggable
@@ -668,9 +650,9 @@ ScrollViewComponent = __decorate([
668
650
  `
669
651
  }),
670
652
  __metadata("design:paramtypes", [ElementRef,
671
- ApplicationRef,
672
653
  LocalizationService,
673
- NgZone])
654
+ NgZone,
655
+ Renderer2])
674
656
  ], ScrollViewComponent);
675
657
 
676
658
  /**