@progress/kendo-angular-scrollview - npm Package Compare ver...

+1

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

+1

dist/cdn/main.js

+14

dist/es2015/change-event-args.d.ts

		/**
		* Arguments for the `itemChanged` event.
		* The `itemChanged` event fires when the current item is changed.
		*/
		export interface ItemChangedEvent {
		/**
		* The changed item.
		*/
		item: any;
		/**
		* The index of the changed item.
		*/
		index: number;
		}

dist/es2015/change-event-args.js

+28

dist/es2015/data.collection.d.ts

		/**
		* @hidden
		*/
		export declare class DataResultIterator {
		private source;
		private index;
		private endless;
		private pageIndex;
		private rtl;
		constructor(source: any[], index: number, endless: boolean, pageIndex: number, rtl: boolean);
		readonly data: any[];
		readonly total: number;
		canMoveNext(): boolean;
		canMovePrev(): boolean;
		}
		/**
		* @hidden
		*/
		export declare class DataCollection {
		private accessor;
		constructor(accessor: () => DataResultIterator);
		readonly length: number;
		readonly total: number;
		item(index: number): any;
		canMoveNext(): boolean;
		canMovePrev(): boolean;
		[Symbol.iterator](): any;
		}

+85

dist/es2015/data.collection.js

		/* tslint:disable:use-life-cycle-interface */
		/** @hidden */
		const iterator = getIterator();
		// TODO: Move to kendo-common
		function getIterator() {
		if (typeof Symbol === 'function' && Symbol.iterator) {
		return Symbol.iterator;
		}
		const keys = Object.getOwnPropertyNames(Map.prototype);
		const proto = Map.prototype;
		for (let i = 0; i < keys.length; ++i) {
		const key = keys[i];
		if (key !== 'entries' && key !== 'size' && proto[key] === proto.entries) {
		return key;
		}
		}
		}
		const EMPTY_OBJ = {};
		/**
		* @hidden
		*/
		export class DataResultIterator {
		constructor(source, index, endless, pageIndex, rtl) {
		this.rtl = false;
		this.source = source ? source : [];
		this.index = index ? index : 0;
		this.endless = endless;
		this.pageIndex = pageIndex;
		this.rtl = rtl;
		}
		get data() {
		let itemCount = this.total;
		let result;
		if (this.endless) {
		result = [
		this.source[(this.index - 1 + itemCount) % itemCount],
		this.source[this.index % itemCount],
		this.source[(this.index + 1 + itemCount) % itemCount]
		];
		}
		else {
		const data = [EMPTY_OBJ, ...this.source, EMPTY_OBJ];
		result = data.slice(this.index, this.index + 3);
		}
		if (this.pageIndex !== null) {
		let isForward = this.pageIndex > this.index;
		result[isForward ? 2 : 0] = this.source[this.pageIndex];
		}
		return this.rtl ? result.reverse() : result;
		}
		get total() {
		return this.source.length;
		}
		canMoveNext() {
		return (this.endless \|\| (this.index < this.total - 1));
		}
		canMovePrev() {
		return (this.endless \|\| this.index > 0);
		}
		[iterator]() {
		return this.data[iterator]();
		}
		}
		/**
		* @hidden
		*/
		export class DataCollection {
		constructor(accessor) {
		this.accessor = accessor;
		}
		get length() { return this.accessor().data.length; }
		get total() { return this.accessor().total; }
		item(index) {
		return this.accessor().data[index];
		}
		canMoveNext() {
		return this.accessor().canMoveNext();
		}
		canMovePrev() {
		return this.accessor().canMovePrev();
		}
		[Symbol.iterator]() {
		return this.accessor()[Symbol.iterator]();
		}
		}

+4

dist/es2015/direction.d.ts

		/**
		* @hidden
		*/
		export declare type Direction = 'rtl' \| 'ltr';

dist/es2015/direction.js

+11

dist/es2015/enums.d.ts

		/**
		* @hidden
		*/
		export declare enum Dir {
		Next = 1,
		Prev = -1
		}
		/**
		* @hidden
		*/
		export declare type AnimationState = "left" \| "right" \| "center";

+8

dist/es2015/enums.js

		/**
		* @hidden
		*/
		export var Dir;
		(function (Dir) {
		Dir[Dir["Next"] = 1] = "Next";
		Dir[Dir["Prev"] = -1] = "Prev";
		})(Dir \|\| (Dir = {}));

+4

dist/es2015/index.d.ts

		/**
		* Generated bundle index. Do not edit.
		*/
		export * from './main';

+4

dist/es2015/index.js

		/**
		* Generated bundle index. Do not edit.
		*/
		export * from './main';

+1

dist/es2015/index.metadata.json

+3

dist/es2015/main.d.ts

		export { ScrollViewComponent } from './scrollview.component';
		export { ScrollViewModule } from './scrollview.module';
		export { ScrollViewPagerComponent } from './scrollview-pager.component';

+3

dist/es2015/main.js

		export { ScrollViewComponent } from './scrollview.component';
		export { ScrollViewModule } from './scrollview.module';
		export { ScrollViewPagerComponent } from './scrollview-pager.component';

+11

dist/es2015/scrollview-pager.component.d.ts

		import { EventEmitter } from '@angular/core';
		/**
		* @hidden
		*/
		export declare class ScrollViewPagerComponent {
		activeIndex: number;
		data: any[];
		pagerIndexChange: EventEmitter<number>;
		itemClass(idx: number): any;
		indexChange(selectedIndex: number): void;
		}

+36

dist/es2015/scrollview-pager.component.js

		import { Component, Input, Output } from '@angular/core';
		import { EventEmitter } from '@angular/core';
		/**
		* @hidden
		*/
		export class ScrollViewPagerComponent {
		constructor() {
		this.pagerIndexChange = new EventEmitter();
		}
		itemClass(idx) {
		return {
		'k-primary': idx === this.activeIndex
		};
		}
		indexChange(selectedIndex) {
		this.pagerIndexChange.emit(selectedIndex);
		}
		}
		ScrollViewPagerComponent.decorators = [
		{ type: Component, args: [{
		selector: 'kendo-scrollview-pager',
		template: `
		<ul class="k-scrollview-pageable">
		<li class="k-button" *ngFor="let item of data; let i = index"
		[ngClass]="itemClass(i)"
		(click)="indexChange(i)">
		</li>
		</ul>
		`
		},] },
		];
		ScrollViewPagerComponent.propDecorators = {
		activeIndex: [{ type: Input }],
		data: [{ type: Input }],
		pagerIndexChange: [{ type: Output }]
		};

+195

dist/es2015/scrollview.component.d.ts

		import { ApplicationRef, ElementRef, EventEmitter, OnChanges, TemplateRef, NgZone } from '@angular/core';
		import { AnimationEvent } from '@angular/animations';
		import { AnimationState } from './enums';
		import { ItemChangedEvent } from './change-event-args';
		import { DataCollection } from './data.collection';
		import { Direction } from './direction';
		import { LocalizationService } from '@progress/kendo-angular-l10n';
		/**
		* Represents the [Kendo UI ScrollView component for Angular]({% slug overview_scrollview %}).
		*
		* @example
		* ```ts
		*
		* _@Component({
		* selector: 'my-app',
		* template: `
		* <kendo-scrollview
		* [data]="items"
		* [width]="width"
		* [height]="height"
		* [endless]="endless"
		* [pageable]="pageable">
		* <ng-template let-item="item">
		* <h2 class="demo-title">{{item.title}}</h2>
		* <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
		* </ng-template>
		* </kendo-scrollview>
		* `,
		* styles: [`
		* .k-scrollview-wrap {
		* margin: 0 auto;
		* }
		* .demo-title {
		* position: absolute;
		* top: 0;
		* left: 0;
		* right: 0;
		* margin: 0;
		* padding: 15px;
		* color: #fff;
		* background-color: rgba(0,0,0,.4);
		* text-align: center;
		* font-size: 24px;
		* }
		* `]
		* })
		*
		* class AppComponent {
		* public width: string = "600px";
		* public height: string = "400px";
		* public endless: boolean = false;
		* public pageable: boolean = false;
		* public items: any[] = [
		* { title: 'Flower', url: 'https://bit.ly/2cJjYuB' },
		* { title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
		* { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
		* ];
		* }
		* ```
		*/
		export declare class ScrollViewComponent implements OnChanges {
		protected element: ElementRef;
		protected application: ApplicationRef;
		private localization;
		private ngZone;
		/**
		* Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
		*/
		data: Array<any>;
		/**
		* Represents the current item index ([see example]({% slug activeitems_scrollview %})).
		*/
		activeIndex: number;
		/**
		* Sets the width of the ScrollView ([see example]({% slug dimensions_scrollview %})).
		* By default, the width is not set and you have to explicitly define the `width` value.
		*/
		width: string;
		/**
		* Sets the height of the ScrollView ([see example]({% slug dimensions_scrollview %})).
		* By default, the height is not set and you have to explicitly define the `height` value.
		*/
		height: string;
		/**
		* Enables or disables the endless scrolling mode in which the data source items are endlessly looped
		* ([see example]({% slug endlessscrolling_scrollview %})). By default, `endless` is set to `false`
		* and the endless scrolling mode is disabled.
		*/
		endless: boolean;
		/**
		* Enables or disables the built-in animations ([see example]({% slug animations_scrollview %})).
		* By default, `animate` is set to `true` and animations are enabled.
		*/
		animate: boolean;
		/**
		* Enables or disables the built-in pager ([see example]({% slug paging_scrollview %})).
		* By default, `pageable` is set to `false` and paging is disabled.
		*/
		pageable: boolean;
		/**
		* Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
		* By default, `arrows` is set to `false` and arrows are disabled.
		*/
		arrows: boolean;
		/**
		* Fires after the current item is changed.
		*/
		itemChanged: EventEmitter<ItemChangedEvent>;
		itemTemplateRef: TemplateRef<any>;
		readonly widgetClass: boolean;
		readonly scrollViewClass: boolean;
		readonly hostWidth: string;
		readonly hostHeight: string;
		readonly tabIndex: number;
		readonly ariaLive: string;
		readonly dir: Direction;
		touchAction: string;
		animationState: AnimationState;
		transitionStyle: {
		[key: string]: string;
		};
		view: DataCollection;
		isDataSourceEmpty: boolean;
		private _activeIndex;
		private index;
		private initialTouchCoordinate;
		private pageIndex;
		private transforms;
		private readonly direction;
		constructor(element: ElementRef, application: ApplicationRef, localization: LocalizationService, ngZone: NgZone);
		/**
		* @hidden
		*/
		keyDown(e: any): void;
		/**
		* @hidden
		*/
		ngOnChanges(_: any): void;
		/**
		* Navigates the ScrollView to the previous item.
		*/
		prev(): void;
		/**
		* Navigates the ScrollView to the next item.
		*/
		next(): void;
		/**
		* @hidden
		*/
		transitionEndHandler(e: AnimationEvent): void;
		/**
		* @hidden
		*/
		handlePress(e: any): void;
		/**
		* @hidden
		*/
		handleDrag(e: any): void;
		/**
		* @hidden
		*/
		handleRelease(e: any): void;
		/**
		* @hidden
		*/
		pageChange(idx: number): void;
		/**
		* @hidden
		*/
		inlineStyles(idx: number): {
		[key: string]: string;
		};
		/**
		* @hidden
		*/
		displayLeftArrow(): boolean;
		/**
		* @hidden
		*/
		leftArrowClick(): void;
		/**
		* @hidden
		*/
		displayRightArrow(): boolean;
		/**
		* @hidden
		*/
		rightArrowClick(): void;
		protected draggedInsideBounds(deltaX: number): boolean;
		protected draggedEnoughToNavigate(deltaX: number): boolean;
		protected isDragForbidden(deltaX: number): boolean;
		private navigate;
		private changeIndex;
		private readonly isRTL;
		}

+452

dist/es2015/scrollview.component.js

		import { ApplicationRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, TemplateRef, NgZone } from '@angular/core';
		import { animate, state, style, transition, trigger } from '@angular/animations';
		import { Dir } from './enums';
		import { Keys } from '@progress/kendo-angular-common';
		import { DataCollection, DataResultIterator } from './data.collection';
		import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
		/**
		* Represents the [Kendo UI ScrollView component for Angular]({% slug overview_scrollview %}).
		*
		* @example
		* ```ts
		*
		* _@Component({
		* selector: 'my-app',
		* template: `
		* <kendo-scrollview
		* [data]="items"
		* [width]="width"
		* [height]="height"
		* [endless]="endless"
		* [pageable]="pageable">
		* <ng-template let-item="item">
		* <h2 class="demo-title">{{item.title}}</h2>
		* <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
		* </ng-template>
		* </kendo-scrollview>
		* `,
		* styles: [`
		* .k-scrollview-wrap {
		* margin: 0 auto;
		* }
		* .demo-title {
		* position: absolute;
		* top: 0;
		* left: 0;
		* right: 0;
		* margin: 0;
		* padding: 15px;
		* color: #fff;
		* background-color: rgba(0,0,0,.4);
		* text-align: center;
		* font-size: 24px;
		* }
		* `]
		* })
		*
		* class AppComponent {
		* public width: string = "600px";
		* public height: string = "400px";
		* public endless: boolean = false;
		* public pageable: boolean = false;
		* public items: any[] = [
		* { title: 'Flower', url: 'https://bit.ly/2cJjYuB' },
		* { title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
		* { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
		* ];
		* }
		* ```
		*/
		export class ScrollViewComponent {
		constructor(element, application, localization, ngZone) {
		this.element = element;
		this.application = application;
		this.localization = localization;
		this.ngZone = ngZone;
		/**
		* Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
		*/
		this.data = [];
		/**
		* Enables or disables the endless scrolling mode in which the data source items are endlessly looped
		* ([see example]({% slug endlessscrolling_scrollview %})). By default, `endless` is set to `false`
		* and the endless scrolling mode is disabled.
		*/
		this.endless = false;
		/**
		* Enables or disables the built-in animations ([see example]({% slug animations_scrollview %})).
		* By default, `animate` is set to `true` and animations are enabled.
		*/
		this.animate = true;
		/**
		* Enables or disables the built-in pager ([see example]({% slug paging_scrollview %})).
		* By default, `pageable` is set to `false` and paging is disabled.
		*/
		this.pageable = false;
		/**
		* Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
		* By default, `arrows` is set to `false` and arrows are disabled.
		*/
		this.arrows = false;
		/**
		* Fires after the current item is changed.
		*/
		this.itemChanged = new EventEmitter();
		this.touchAction = 'pan-y pinch-zoom';
		this.animationState = null;
		this.transitionStyle = {};
		this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
		this.isDataSourceEmpty = false;
		this._activeIndex = 0;
		this.index = 0;
		this.pageIndex = null;
		this.transforms = ["translateX(-100%)", "translateX(0%)", "translateX(100%)"];
		}
		/**
		* Represents the current item index ([see example]({% slug activeitems_scrollview %})).
		*/
		set activeIndex(value) {
		this.index = this._activeIndex = value;
		}
		get activeIndex() {
		return this._activeIndex;
		}
		get widgetClass() {
		return true;
		}
		get scrollViewClass() {
		return true;
		}
		get hostWidth() { return this.width; }
		get hostHeight() { return this.height; }
		get tabIndex() { return 1; }
		get ariaLive() { return "assertive"; }
		get dir() {
		return this.direction;
		}
		get direction() {
		return this.localization.rtl ? 'rtl' : 'ltr';
		}
		/**
		* @hidden
		*/
		keyDown(e) {
		if (e.keyCode === Keys.ArrowLeft) {
		if (this.isRTL) {
		this.next();
		}
		else {
		this.prev();
		}
		}
		if (e.keyCode === Keys.ArrowRight) {
		if (this.isRTL) {
		this.prev();
		}
		else {
		this.next();
		}
		}
		}
		/**
		* @hidden
		*/
		ngOnChanges(_) {
		this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
		}
		/**
		* Navigates the ScrollView to the previous item.
		*/
		prev() {
		this.navigate(Dir.Prev);
		}
		/**
		* Navigates the ScrollView to the next item.
		*/
		next() {
		this.navigate(Dir.Next);
		}
		/**
		* @hidden
		*/
		transitionEndHandler(e) {
		this.animationState = null;
		if (e.toState === "left" \|\| e.toState === "right") {
		if (this.pageIndex !== null) {
		this.activeIndex = this.pageIndex;
		this.pageIndex = null;
		}
		this.activeIndex = this.index;
		this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
		this.application.tick();
		}
		}
		/**
		* @hidden
		*/
		handlePress(e) {
		this.initialTouchCoordinate = e.pageX;
		}
		/**
		* @hidden
		*/
		handleDrag(e) {
		const deltaX = e.pageX - this.initialTouchCoordinate;
		if (!this.animationState && !this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
		// TO DO: refactor to apply style without triggering the change detection
		this.ngZone.run(() => {
		this.transitionStyle = { transform: `translateX(${deltaX}px)` };
		});
		}
		}
		/**
		* @hidden
		*/
		handleRelease(e) {
		const deltaX = e.pageX - this.initialTouchCoordinate;
		if (this.isDragForbidden(deltaX)) {
		return;
		}
		this.ngZone.run(() => {
		if (this.draggedEnoughToNavigate(deltaX)) {
		if (this.isRTL) {
		this.changeIndex(deltaX < 0 ? Dir.Prev : Dir.Next);
		}
		else {
		this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
		}
		if (!this.animate) {
		this.transitionStyle = null;
		this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
		}
		}
		else if (Math.abs(deltaX) > 0) {
		if (this.animate) {
		this.animationState = "center";
		}
		else {
		this.transitionStyle = null;
		}
		}
		});
		}
		/**
		* @hidden
		*/
		pageChange(idx) {
		if (!this.animationState && this.activeIndex !== idx) {
		if (this.animate) {
		this.pageIndex = idx;
		if (this.isRTL) {
		this.animationState = (this.pageIndex > this.index ? "right" : "left");
		}
		else {
		this.animationState = (this.pageIndex > this.index ? "left" : "right");
		}
		}
		else {
		this.activeIndex = idx;
		}
		}
		}
		/**
		* @hidden
		*/
		inlineStyles(idx) {
		return {
		"height": this.height,
		"transform": this.transforms[idx],
		"width": this.width
		};
		}
		/**
		* @hidden
		*/
		displayLeftArrow() {
		let isNotBorderItem;
		if (this.isRTL) {
		isNotBorderItem = this.activeIndex + 1 < this.view.total;
		}
		else {
		isNotBorderItem = this.activeIndex > 0;
		}
		return (this.endless \|\| isNotBorderItem) && this.view.total > 0;
		}
		/**
		* @hidden
		*/
		leftArrowClick() {
		if (this.isRTL) {
		this.next();
		}
		else {
		this.prev();
		}
		}
		/**
		* @hidden
		*/
		displayRightArrow() {
		let isNotBorderItem;
		if (this.isRTL) {
		isNotBorderItem = this.activeIndex > 0;
		}
		else {
		isNotBorderItem = this.activeIndex + 1 < this.view.total;
		}
		return (this.endless \|\| isNotBorderItem) && this.view.total > 0;
		}
		/**
		* @hidden
		*/
		rightArrowClick() {
		if (this.isRTL) {
		this.prev();
		}
		else {
		this.next();
		}
		}
		draggedInsideBounds(deltaX) {
		return Math.abs(deltaX) <= this.element.nativeElement.offsetWidth;
		}
		draggedEnoughToNavigate(deltaX) {
		return Math.abs(deltaX) > (this.element.nativeElement.offsetWidth / 2);
		}
		isDragForbidden(deltaX) {
		let pastEnd;
		let isEndReached;
		if (this.isRTL) {
		pastEnd = deltaX < 0 && deltaX !== 0;
		}
		else {
		pastEnd = deltaX > 0 && deltaX !== 0;
		}
		isEndReached = ((this.activeIndex === 0 && pastEnd) \|\| (this.activeIndex === this.view.total - 1 && !pastEnd));
		return !this.endless && isEndReached;
		}
		navigate(direction) {
		if (this.isDataSourceEmpty \|\| this.animationState) {
		return;
		}
		this.changeIndex(direction);
		if (!this.animate) {
		this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
		}
		}
		changeIndex(direction) {
		if (direction === Dir.Next && this.view.canMoveNext()) {
		this.index = (this.index + 1) % this.view.total;
		if (this.animate) {
		this.animationState = this.isRTL ? "right" : "left";
		}
		else {
		this.activeIndex = this.index;
		}
		}
		else if (direction === Dir.Prev && this.view.canMovePrev()) {
		this.index = this.index === 0 ? this.view.total - 1 : this.index - 1;
		if (this.animate) {
		this.animationState = this.isRTL ? "left" : "right";
		}
		else {
		this.activeIndex = this.index;
		}
		}
		}
		get isRTL() {
		return this.direction === "rtl";
		}
		}
		ScrollViewComponent.decorators = [
		{ type: Component, args: [{
		animations: [
		trigger('animateTo', [
		state('center, left, right', style({ transform: 'translateX(0)' })),
		transition('* => right', [
		animate('300ms ease-out', style({ transform: 'translateX(100%)' }))
		]),
		transition('* => left', [
		animate('300ms ease-out', style({ transform: 'translateX(-100%)' }))
		]),
		transition('* => center', [
		animate('300ms ease-out')
		])
		])
		],
		exportAs: 'kendoScrollView',
		providers: [
		LocalizationService,
		{
		provide: L10N_PREFIX,
		useValue: 'kendo.scrollview'
		}
		],
		selector: 'kendo-scrollview',
		template: `
		<ul class='k-scrollview'
		[ngStyle]="transitionStyle"
		[@animateTo]="animationState" (@animateTo.done)= "transitionEndHandler($event)"
		kendoDraggable
		(kendoDrag) = "handleDrag($event)" (kendoPress) = "handlePress($event)" (kendoRelease) = "handleRelease($event)">
		<li *ngFor="let item of view;let i=index"
		[ngStyle]="inlineStyles(i)"
		[attr.aria-hidden]="i !== 1">
		<ng-template
		[ngTemplateOutlet]="itemTemplateRef"
		[ngTemplateOutletContext]="{ item: item }">
		</ng-template>
		</li>
		</ul>
		<div class='k-scrollview-elements'
		[ngStyle]="{'height': height}"
		*ngIf="!isDataSourceEmpty && (pageable\|\|arrows)">
		<a class="k-scrollview-prev"
		aria-label="previous"
		*ngIf="arrows && displayLeftArrow()"
		(click)="leftArrowClick()">
		<span class="k-icon k-i-arrowhead-w"></span>
		</a>
		<a class="k-scrollview-next"
		aria-label="next"
		*ngIf="arrows && displayRightArrow()"
		(click)="rightArrowClick()">
		<span class="k-icon k-i-arrowhead-e"></span>
		</a>
		<kendo-scrollview-pager *ngIf="pageable"
		(pagerIndexChange)="pageChange($event)"
		[data]="data"
		[activeIndex]="activeIndex">
		</kendo-scrollview-pager>
		</div>
		`
		},] },
		];
		/** @nocollapse */
		ScrollViewComponent.ctorParameters = () => [
		{ type: ElementRef },
		{ type: ApplicationRef },
		{ type: LocalizationService },
		{ type: NgZone }
		];
		ScrollViewComponent.propDecorators = {
		data: [{ type: Input }],
		activeIndex: [{ type: Input }],
		width: [{ type: Input }],
		height: [{ type: Input }],
		endless: [{ type: Input }],
		animate: [{ type: Input }],
		pageable: [{ type: Input }],
		arrows: [{ type: Input }],
		itemChanged: [{ type: Output }],
		itemTemplateRef: [{ type: ContentChild, args: [TemplateRef,] }],
		widgetClass: [{ type: HostBinding, args: ['class.k-widget',] }],
		scrollViewClass: [{ type: HostBinding, args: ['class.k-scrollview-wrap',] }],
		hostWidth: [{ type: HostBinding, args: ['style.width',] }],
		hostHeight: [{ type: HostBinding, args: ['style.height',] }],
		tabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }],
		ariaLive: [{ type: HostBinding, args: ['attr.aria-live',] }],
		dir: [{ type: HostBinding, args: ['attr.dir',] }],
		touchAction: [{ type: HostBinding, args: ['style.touch-action',] }],
		keyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
		};

+33

dist/es2015/scrollview.module.d.ts

		/**
		* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
		* definition for the ScrollView component.
		*
		* @example
		*
		* ```ts-no-run
		* // Import the ScrollView module
		* import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
		*
		* // The browser platform with a compiler
		* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
		*
		* import { NgModule } from '@angular/core';
		*
		* // Import the app component
		* import { AppComponent } from './app.component';
		*
		* // Define the app module
		* _@NgModule({
		* declarations: [AppComponent], // declare app component
		* imports: [BrowserModule, ScrollViewModule], // import ScrollView module
		* bootstrap: [AppComponent]
		* })
		* export class AppModule {}
		*
		* // Compile and launch the module
		* platformBrowserDynamic().bootstrapModule(AppModule);
		*
		* ```
		*/
		export declare class ScrollViewModule {
		}

+52

dist/es2015/scrollview.module.js

		import { NgModule } from '@angular/core';
		import { CommonModule } from '@angular/common';
		import { ScrollViewComponent } from './scrollview.component';
		import { ScrollViewPagerComponent } from "./scrollview-pager.component";
		import { DraggableModule } from '@progress/kendo-angular-common';
		const DECLARATIONS = [
		ScrollViewComponent,
		ScrollViewPagerComponent
		];
		const EXPORTS = [
		ScrollViewComponent
		];
		/**
		* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
		* definition for the ScrollView component.
		*
		* @example
		*
		* ```ts-no-run
		* // Import the ScrollView module
		* import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
		*
		* // The browser platform with a compiler
		* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
		*
		* import { NgModule } from '@angular/core';
		*
		* // Import the app component
		* import { AppComponent } from './app.component';
		*
		* // Define the app module
		* _@NgModule({
		* declarations: [AppComponent], // declare app component
		* imports: [BrowserModule, ScrollViewModule], // import ScrollView module
		* bootstrap: [AppComponent]
		* })
		* export class AppModule {}
		*
		* // Compile and launch the module
		* platformBrowserDynamic().bootstrapModule(AppModule);
		*
		* ```
		*/
		export class ScrollViewModule {
		}
		ScrollViewModule.decorators = [
		{ type: NgModule, args: [{
		declarations: [DECLARATIONS],
		exports: [EXPORTS],
		imports: [CommonModule, DraggableModule]
		},] },
		];

+636

dist/fesm2015/index.js

		import { ApplicationRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, NgZone, Output, TemplateRef } from '@angular/core';
		import { animate, state, style, transition, trigger } from '@angular/animations';
		import { DraggableModule, Keys } from '@progress/kendo-angular-common';
		import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
		import { CommonModule } from '@angular/common';

		/**
		* @hidden
		*/
		var Dir;
		(function (Dir) {
		Dir[Dir["Next"] = 1] = "Next";
		Dir[Dir["Prev"] = -1] = "Prev";
		})(Dir \|\| (Dir = {}));

		/* tslint:disable:use-life-cycle-interface */
		/** @hidden */
		const iterator = getIterator();
		// TODO: Move to kendo-common
		function getIterator() {
		if (typeof Symbol === 'function' && Symbol.iterator) {
		return Symbol.iterator;
		}
		const keys = Object.getOwnPropertyNames(Map.prototype);
		const proto = Map.prototype;
		for (let i = 0; i < keys.length; ++i) {
		const key = keys[i];
		if (key !== 'entries' && key !== 'size' && proto[key] === proto.entries) {
		return key;
		}
		}
		}
		const EMPTY_OBJ = {};
		/**
		* @hidden
		*/
		class DataResultIterator {
		constructor(source, index, endless, pageIndex, rtl) {
		this.rtl = false;
		this.source = source ? source : [];
		this.index = index ? index : 0;
		this.endless = endless;
		this.pageIndex = pageIndex;
		this.rtl = rtl;
		}
		get data() {
		let itemCount = this.total;
		let result;
		if (this.endless) {
		result = [
		this.source[(this.index - 1 + itemCount) % itemCount],
		this.source[this.index % itemCount],
		this.source[(this.index + 1 + itemCount) % itemCount]
		];
		}
		else {
		const data = [EMPTY_OBJ, ...this.source, EMPTY_OBJ];
		result = data.slice(this.index, this.index + 3);
		}
		if (this.pageIndex !== null) {
		let isForward = this.pageIndex > this.index;
		result[isForward ? 2 : 0] = this.source[this.pageIndex];
		}
		return this.rtl ? result.reverse() : result;
		}
		get total() {
		return this.source.length;
		}
		canMoveNext() {
		return (this.endless \|\| (this.index < this.total - 1));
		}
		canMovePrev() {
		return (this.endless \|\| this.index > 0);
		}
		[iterator]() {
		return this.data[iterator]();
		}
		}
		/**
		* @hidden
		*/
		class DataCollection {
		constructor(accessor) {
		this.accessor = accessor;
		}
		get length() { return this.accessor().data.length; }
		get total() { return this.accessor().total; }
		item(index) {
		return this.accessor().data[index];
		}
		canMoveNext() {
		return this.accessor().canMoveNext();
		}
		canMovePrev() {
		return this.accessor().canMovePrev();
		}
		[Symbol.iterator]() {
		return this.accessor()[Symbol.iterator]();
		}
		}

		/**
		* Represents the [Kendo UI ScrollView component for Angular]({% slug overview_scrollview %}).
		*
		* @example
		* ```ts
		*
		* _@Component({
		* selector: 'my-app',
		* template: `
		* <kendo-scrollview
		* [data]="items"
		* [width]="width"
		* [height]="height"
		* [endless]="endless"
		* [pageable]="pageable">
		* <ng-template let-item="item">
		* <h2 class="demo-title">{{item.title}}</h2>
		* <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
		* </ng-template>
		* </kendo-scrollview>
		* `,
		* styles: [`
		* .k-scrollview-wrap {
		* margin: 0 auto;
		* }
		* .demo-title {
		* position: absolute;
		* top: 0;
		* left: 0;
		* right: 0;
		* margin: 0;
		* padding: 15px;
		* color: #fff;
		* background-color: rgba(0,0,0,.4);
		* text-align: center;
		* font-size: 24px;
		* }
		* `]
		* })
		*
		* class AppComponent {
		* public width: string = "600px";
		* public height: string = "400px";
		* public endless: boolean = false;
		* public pageable: boolean = false;
		* public items: any[] = [
		* { title: 'Flower', url: 'https://bit.ly/2cJjYuB' },
		* { title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
		* { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
		* ];
		* }
		* ```
		*/
		class ScrollViewComponent {
		constructor(element, application, localization, ngZone) {
		this.element = element;
		this.application = application;
		this.localization = localization;
		this.ngZone = ngZone;
		/**
		* Provides the data source for the ScrollView ([see example]({% slug datasources_scrollview %})).
		*/
		this.data = [];
		/**
		* Enables or disables the endless scrolling mode in which the data source items are endlessly looped
		* ([see example]({% slug endlessscrolling_scrollview %})). By default, `endless` is set to `false`
		* and the endless scrolling mode is disabled.
		*/
		this.endless = false;
		/**
		* Enables or disables the built-in animations ([see example]({% slug animations_scrollview %})).
		* By default, `animate` is set to `true` and animations are enabled.
		*/
		this.animate = true;
		/**
		* Enables or disables the built-in pager ([see example]({% slug paging_scrollview %})).
		* By default, `pageable` is set to `false` and paging is disabled.
		*/
		this.pageable = false;
		/**
		* Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
		* By default, `arrows` is set to `false` and arrows are disabled.
		*/
		this.arrows = false;
		/**
		* Fires after the current item is changed.
		*/
		this.itemChanged = new EventEmitter();
		this.touchAction = 'pan-y pinch-zoom';
		this.animationState = null;
		this.transitionStyle = {};
		this.view = new DataCollection(() => new DataResultIterator(this.data, this.activeIndex, this.endless, this.pageIndex, this.isRTL));
		this.isDataSourceEmpty = false;
		this._activeIndex = 0;
		this.index = 0;
		this.pageIndex = null;
		this.transforms = ["translateX(-100%)", "translateX(0%)", "translateX(100%)"];
		}
		/**
		* Represents the current item index ([see example]({% slug activeitems_scrollview %})).
		*/
		set activeIndex(value) {
		this.index = this._activeIndex = value;
		}
		get activeIndex() {
		return this._activeIndex;
		}
		get widgetClass() {
		return true;
		}
		get scrollViewClass() {
		return true;
		}
		get hostWidth() { return this.width; }
		get hostHeight() { return this.height; }
		get tabIndex() { return 1; }
		get ariaLive() { return "assertive"; }
		get dir() {
		return this.direction;
		}
		get direction() {
		return this.localization.rtl ? 'rtl' : 'ltr';
		}
		/**
		* @hidden
		*/
		keyDown(e) {
		if (e.keyCode === Keys.ArrowLeft) {
		if (this.isRTL) {
		this.next();
		}
		else {
		this.prev();
		}
		}
		if (e.keyCode === Keys.ArrowRight) {
		if (this.isRTL) {
		this.prev();
		}
		else {
		this.next();
		}
		}
		}
		/**
		* @hidden
		*/
		ngOnChanges(_) {
		this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
		}
		/**
		* Navigates the ScrollView to the previous item.
		*/
		prev() {
		this.navigate(Dir.Prev);
		}
		/**
		* Navigates the ScrollView to the next item.
		*/
		next() {
		this.navigate(Dir.Next);
		}
		/**
		* @hidden
		*/
		transitionEndHandler(e) {
		this.animationState = null;
		if (e.toState === "left" \|\| e.toState === "right") {
		if (this.pageIndex !== null) {
		this.activeIndex = this.pageIndex;
		this.pageIndex = null;
		}
		this.activeIndex = this.index;
		this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
		this.application.tick();
		}
		}
		/**
		* @hidden
		*/
		handlePress(e) {
		this.initialTouchCoordinate = e.pageX;
		}
		/**
		* @hidden
		*/
		handleDrag(e) {
		const deltaX = e.pageX - this.initialTouchCoordinate;
		if (!this.animationState && !this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
		// TO DO: refactor to apply style without triggering the change detection
		this.ngZone.run(() => {
		this.transitionStyle = { transform: `translateX(${deltaX}px)` };
		});
		}
		}
		/**
		* @hidden
		*/
		handleRelease(e) {
		const deltaX = e.pageX - this.initialTouchCoordinate;
		if (this.isDragForbidden(deltaX)) {
		return;
		}
		this.ngZone.run(() => {
		if (this.draggedEnoughToNavigate(deltaX)) {
		if (this.isRTL) {
		this.changeIndex(deltaX < 0 ? Dir.Prev : Dir.Next);
		}
		else {
		this.changeIndex(deltaX > 0 ? Dir.Prev : Dir.Next);
		}
		if (!this.animate) {
		this.transitionStyle = null;
		this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
		}
		}
		else if (Math.abs(deltaX) > 0) {
		if (this.animate) {
		this.animationState = "center";
		}
		else {
		this.transitionStyle = null;
		}
		}
		});
		}
		/**
		* @hidden
		*/
		pageChange(idx) {
		if (!this.animationState && this.activeIndex !== idx) {
		if (this.animate) {
		this.pageIndex = idx;
		if (this.isRTL) {
		this.animationState = (this.pageIndex > this.index ? "right" : "left");
		}
		else {
		this.animationState = (this.pageIndex > this.index ? "left" : "right");
		}
		}
		else {
		this.activeIndex = idx;
		}
		}
		}
		/**
		* @hidden
		*/
		inlineStyles(idx) {
		return {
		"height": this.height,
		"transform": this.transforms[idx],
		"width": this.width
		};
		}
		/**
		* @hidden
		*/
		displayLeftArrow() {
		let isNotBorderItem;
		if (this.isRTL) {
		isNotBorderItem = this.activeIndex + 1 < this.view.total;
		}
		else {
		isNotBorderItem = this.activeIndex > 0;
		}
		return (this.endless \|\| isNotBorderItem) && this.view.total > 0;
		}
		/**
		* @hidden
		*/
		leftArrowClick() {
		if (this.isRTL) {
		this.next();
		}
		else {
		this.prev();
		}
		}
		/**
		* @hidden
		*/
		displayRightArrow() {
		let isNotBorderItem;
		if (this.isRTL) {
		isNotBorderItem = this.activeIndex > 0;
		}
		else {
		isNotBorderItem = this.activeIndex + 1 < this.view.total;
		}
		return (this.endless \|\| isNotBorderItem) && this.view.total > 0;
		}
		/**
		* @hidden
		*/
		rightArrowClick() {
		if (this.isRTL) {
		this.prev();
		}
		else {
		this.next();
		}
		}
		draggedInsideBounds(deltaX) {
		return Math.abs(deltaX) <= this.element.nativeElement.offsetWidth;
		}
		draggedEnoughToNavigate(deltaX) {
		return Math.abs(deltaX) > (this.element.nativeElement.offsetWidth / 2);
		}
		isDragForbidden(deltaX) {
		let pastEnd;
		let isEndReached;
		if (this.isRTL) {
		pastEnd = deltaX < 0 && deltaX !== 0;
		}
		else {
		pastEnd = deltaX > 0 && deltaX !== 0;
		}
		isEndReached = ((this.activeIndex === 0 && pastEnd) \|\| (this.activeIndex === this.view.total - 1 && !pastEnd));
		return !this.endless && isEndReached;
		}
		navigate(direction) {
		if (this.isDataSourceEmpty \|\| this.animationState) {
		return;
		}
		this.changeIndex(direction);
		if (!this.animate) {
		this.itemChanged.emit({ index: this.activeIndex, item: this.view.item(1) });
		}
		}
		changeIndex(direction) {
		if (direction === Dir.Next && this.view.canMoveNext()) {
		this.index = (this.index + 1) % this.view.total;
		if (this.animate) {
		this.animationState = this.isRTL ? "right" : "left";
		}
		else {
		this.activeIndex = this.index;
		}
		}
		else if (direction === Dir.Prev && this.view.canMovePrev()) {
		this.index = this.index === 0 ? this.view.total - 1 : this.index - 1;
		if (this.animate) {
		this.animationState = this.isRTL ? "left" : "right";
		}
		else {
		this.activeIndex = this.index;
		}
		}
		}
		get isRTL() {
		return this.direction === "rtl";
		}
		}
		ScrollViewComponent.decorators = [
		{ type: Component, args: [{
		animations: [
		trigger('animateTo', [
		state('center, left, right', style({ transform: 'translateX(0)' })),
		transition('* => right', [
		animate('300ms ease-out', style({ transform: 'translateX(100%)' }))
		]),
		transition('* => left', [
		animate('300ms ease-out', style({ transform: 'translateX(-100%)' }))
		]),
		transition('* => center', [
		animate('300ms ease-out')
		])
		])
		],
		exportAs: 'kendoScrollView',
		providers: [
		LocalizationService,
		{
		provide: L10N_PREFIX,
		useValue: 'kendo.scrollview'
		}
		],
		selector: 'kendo-scrollview',
		template: `
		<ul class='k-scrollview'
		[ngStyle]="transitionStyle"
		[@animateTo]="animationState" (@animateTo.done)= "transitionEndHandler($event)"
		kendoDraggable
		(kendoDrag) = "handleDrag($event)" (kendoPress) = "handlePress($event)" (kendoRelease) = "handleRelease($event)">
		<li *ngFor="let item of view;let i=index"
		[ngStyle]="inlineStyles(i)"
		[attr.aria-hidden]="i !== 1">
		<ng-template
		[ngTemplateOutlet]="itemTemplateRef"
		[ngTemplateOutletContext]="{ item: item }">
		</ng-template>
		</li>
		</ul>
		<div class='k-scrollview-elements'
		[ngStyle]="{'height': height}"
		*ngIf="!isDataSourceEmpty && (pageable\|\|arrows)">
		<a class="k-scrollview-prev"
		aria-label="previous"
		*ngIf="arrows && displayLeftArrow()"
		(click)="leftArrowClick()">
		<span class="k-icon k-i-arrowhead-w"></span>
		</a>
		<a class="k-scrollview-next"
		aria-label="next"
		*ngIf="arrows && displayRightArrow()"
		(click)="rightArrowClick()">
		<span class="k-icon k-i-arrowhead-e"></span>
		</a>
		<kendo-scrollview-pager *ngIf="pageable"
		(pagerIndexChange)="pageChange($event)"
		[data]="data"
		[activeIndex]="activeIndex">
		</kendo-scrollview-pager>
		</div>
		`
		},] },
		];
		/** @nocollapse */
		ScrollViewComponent.ctorParameters = () => [
		{ type: ElementRef },
		{ type: ApplicationRef },
		{ type: LocalizationService },
		{ type: NgZone }
		];
		ScrollViewComponent.propDecorators = {
		data: [{ type: Input }],
		activeIndex: [{ type: Input }],
		width: [{ type: Input }],
		height: [{ type: Input }],
		endless: [{ type: Input }],
		animate: [{ type: Input }],
		pageable: [{ type: Input }],
		arrows: [{ type: Input }],
		itemChanged: [{ type: Output }],
		itemTemplateRef: [{ type: ContentChild, args: [TemplateRef,] }],
		widgetClass: [{ type: HostBinding, args: ['class.k-widget',] }],
		scrollViewClass: [{ type: HostBinding, args: ['class.k-scrollview-wrap',] }],
		hostWidth: [{ type: HostBinding, args: ['style.width',] }],
		hostHeight: [{ type: HostBinding, args: ['style.height',] }],
		tabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }],
		ariaLive: [{ type: HostBinding, args: ['attr.aria-live',] }],
		dir: [{ type: HostBinding, args: ['attr.dir',] }],
		touchAction: [{ type: HostBinding, args: ['style.touch-action',] }],
		keyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }]
		};

		/**
		* @hidden
		*/
		class ScrollViewPagerComponent {
		constructor() {
		this.pagerIndexChange = new EventEmitter();
		}
		itemClass(idx) {
		return {
		'k-primary': idx === this.activeIndex
		};
		}
		indexChange(selectedIndex) {
		this.pagerIndexChange.emit(selectedIndex);
		}
		}
		ScrollViewPagerComponent.decorators = [
		{ type: Component, args: [{
		selector: 'kendo-scrollview-pager',
		template: `
		<ul class="k-scrollview-pageable">
		<li class="k-button" *ngFor="let item of data; let i = index"
		[ngClass]="itemClass(i)"
		(click)="indexChange(i)">
		</li>
		</ul>
		`
		},] },
		];
		ScrollViewPagerComponent.propDecorators = {
		activeIndex: [{ type: Input }],
		data: [{ type: Input }],
		pagerIndexChange: [{ type: Output }]
		};

		const DECLARATIONS = [
		ScrollViewComponent,
		ScrollViewPagerComponent
		];
		const EXPORTS = [
		ScrollViewComponent
		];
		/**
		* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
		* definition for the ScrollView component.
		*
		* @example
		*
		* ```ts-no-run
		* // Import the ScrollView module
		* import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
		*
		* // The browser platform with a compiler
		* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
		*
		* import { NgModule } from '@angular/core';
		*
		* // Import the app component
		* import { AppComponent } from './app.component';
		*
		* // Define the app module
		* _@NgModule({
		* declarations: [AppComponent], // declare app component
		* imports: [BrowserModule, ScrollViewModule], // import ScrollView module
		* bootstrap: [AppComponent]
		* })
		* export class AppModule {}
		*
		* // Compile and launch the module
		* platformBrowserDynamic().bootstrapModule(AppModule);
		*
		* ```
		*/
		class ScrollViewModule {
		}
		ScrollViewModule.decorators = [
		{ type: NgModule, args: [{
		declarations: [DECLARATIONS],
		exports: [EXPORTS],
		imports: [CommonModule, DraggableModule]
		},] },
		];

		/**
		* Generated bundle index. Do not edit.
		*/

		export { ScrollViewComponent, ScrollViewModule, ScrollViewPagerComponent };

+1

dist/systemjs/kendo-angular-scrollview.js

System.register("@progress/kendo-angular-scrollview",["tslib","@angular/core","@progress/kendo-angular-common","@angular/common","@angular/animations","@progress/kendo-angular-l10n"],function(r){var o,s,l,d,p,c;function e(t){return t.__useDefault?t.default:t}return{setters:[function(t){o=e(t)},function(t){s=e(t)},function(t){l=e(t)},function(t){d=e(t)},function(t){p=e(t)},function(t){c=e(t)}],execute:function(){function i(t){if(a[t])return a[t].exports;var e=a[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,i),e.l=!0,e.exports}var n,a;a={},i.m=n=[function(t,e){t.exports=s},function(t,e){t.exports=o},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),a=n(0),o=n(0),r=(s.prototype.itemClass=function(t){return{"k-primary":t===this.activeIndex}},s.prototype.indexChange=function(t){this.pagerIndexChange.emit(t)},i.__decorate([a.Input(),i.__metadata("design:type",Number)],s.prototype,"activeIndex",void 0),i.__decorate([a.Input(),i.__metadata("design:type",Array)],s.prototype,"data",void 0),i.__decorate([a.Output(),i.__metadata("design:type",o.EventEmitter)],s.prototype,"pagerIndexChange",void 0),i.__decorate([a.Component({selector:"kendo-scrollview-pager",template:'\n <ul class="k-scrollview-pageable">\n <li class="k-button" *ngFor="let item of data; let i = index"\n [ngClass]="itemClass(i)"\n (click)="indexChange(i)">\n </li>\n </ul>\n '})],s));function s(){this.pagerIndexChange=new o.EventEmitter}e.ScrollViewPagerComponent=r},function(t,e){t.exports=l},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),o=n(0),a=n(10),r=n(9),s=n(3),l=n(8),d=n(7),p=(Object.defineProperty(c.prototype,"activeIndex",{get:function(){return this._activeIndex},set:function(t){this.index=this._activeIndex=t},enumerable:!0,configurable:!0}),Object.defineProperty(c.prototype,"widgetClass",{get:function(){return!0},enumerable:!0,configurable:!0}),Object.defineProperty(c.prototype,"scrollViewClass",{get:function(){return!0},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,"tabIndex",{get:function(){return 1},enumerable:!0,configurable:!0}),Object.defineProperty(c.prototype,"ariaLive",{get:function(){return"assertive"},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(t){t.keyCode===s.Keys.ArrowLeft&&(this.isRTL?this.next():this.prev()),t.keyCode===s.Keys.ArrowRight&&(this.isRTL?this.prev():this.next())},c.prototype.ngOnChanges=function(t){this.activeIndex=Math.max(Math.min(this.activeIndex,this.view.total-1),0)},c.prototype.prev=function(){this.navigate(r.Dir.Prev)},c.prototype.next=function(){this.navigate(r.Dir.Next)},c.prototype.transitionEndHandler=function(t){this.animationState=null,"left"!==t.toState&&"right"!==t.toState||(null!==this.pageIndex&&(this.activeIndex=this.pageIndex,this.pageIndex=null),this.activeIndex=this.index,this.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)}),this.application.tick())},c.prototype.handlePress=function(t){this.initialTouchCoordinate=t.pageX},c.prototype.handleDrag=function(t){var e=this,n=t.pageX-this.initialTouchCoordinate;this.animationState||this.isDragForbidden(n)||!this.draggedInsideBounds(n)||this.ngZone.run(function(){e.transitionStyle={transform:"translateX("+n+"px)"}})},c.prototype.handleRelease=function(t){var e=this,n=t.pageX-this.initialTouchCoordinate;this.isDragForbidden(n)||this.ngZone.run(function(){e.draggedEnoughToNavigate(n)?(e.isRTL?e.changeIndex(n<0?r.Dir.Prev:r.Dir.Next):e.changeIndex(0<n?r.Dir.Prev:r.Dir.Next),e.animate||(e.transitionStyle=null,e.itemChanged.emit({index:e.activeIndex,item:e.view.item(1)}))):0<Math.abs(n)&&(e.animate?e.animationState="center":e.transitionStyle=null)})},c.prototype.pageChange=function(t){this.animationState||this.activeIndex===t||(this.animate?(this.pageIndex=t,this.isRTL?this.animationState=this.pageIndex>this.index?"right":"left":this.animationState=this.pageIndex>this.index?"left":"right"):this.activeIndex=t)},c.prototype.inlineStyles=function(t){return{height:this.height,transform:this.transforms[t],width:this.width}},c.prototype.displayLeftArrow=function(){var t;return t=this.isRTL?this.activeIndex+1<this.view.total:0<this.activeIndex,(this.endless||t)&&0<this.view.total},c.prototype.leftArrowClick=function(){this.isRTL?this.next():this.prev()},c.prototype.displayRightArrow=function(){var t;return t=this.isRTL?0<this.activeIndex:this.activeIndex+1<this.view.total,(this.endless||t)&&0<this.view.total},c.prototype.rightArrowClick=function(){this.isRTL?this.prev():this.next()},c.prototype.draggedInsideBounds=function(t){return Math.abs(t)<=this.element.nativeElement.offsetWidth},c.prototype.draggedEnoughToNavigate=function(t){return Math.abs(t)>this.element.nativeElement.offsetWidth/2},c.prototype.isDragForbidden=function(t){var e,n;return e=this.isRTL?t<0&&0!==t:0<t&&0!==t,n=0===this.activeIndex&&e||this.activeIndex===this.view.total-1&&!e,!this.endless&&n},c.prototype.navigate=function(t){this.isDataSourceEmpty||this.animationState||(this.changeIndex(t),this.animate||this.itemChanged.emit({index:this.activeIndex,item:this.view.item(1)}))},c.prototype.changeIndex=function(t){t===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):t===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(c.prototype,"isRTL",{get:function(){return"rtl"===this.direction},enumerable:!0,configurable:!0}),i.__decorate([o.Input(),i.__metadata("design:type",Array)],c.prototype,"data",void 0),i.__decorate([o.Input(),i.__metadata("design:type",Number),i.__metadata("design:paramtypes",[Number])],c.prototype,"activeIndex",null),i.__decorate([o.Input(),i.__metadata("design:type",String)],c.prototype,"width",void 0),i.__decorate([o.Input(),i.__metadata("design:type",String)],c.prototype,"height",void 0),i.__decorate([o.Input(),i.__metadata("design:type",Boolean)],c.prototype,"endless",void 0),i.__decorate([o.Input(),i.__metadata("design:type",Boolean)],c.prototype,"animate",void 0),i.__decorate([o.Input(),i.__metadata("design:type",Boolean)],c.prototype,"pageable",void 0),i.__decorate([o.Input(),i.__metadata("design:type",Boolean)],c.prototype,"arrows",void 0),i.__decorate([o.Output(),i.__metadata("design:type",o.EventEmitter)],c.prototype,"itemChanged",void 0),i.__decorate([o.ContentChild(o.TemplateRef),i.__metadata("design:type",o.TemplateRef)],c.prototype,"itemTemplateRef",void 0),i.__decorate([o.HostBinding("class.k-widget"),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[])],c.prototype,"widgetClass",null),i.__decorate([o.HostBinding("class.k-scrollview-wrap"),i.__metadata("design:type",Boolean),i.__metadata("design:paramtypes",[])],c.prototype,"scrollViewClass",null),i.__decorate([o.HostBinding("style.width"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],c.prototype,"hostWidth",null),i.__decorate([o.HostBinding("style.height"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],c.prototype,"hostHeight",null),i.__decorate([o.HostBinding("attr.tabindex"),i.__metadata("design:type",Number),i.__metadata("design:paramtypes",[])],c.prototype,"tabIndex",null),i.__decorate([o.HostBinding("attr.aria-live"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],c.prototype,"ariaLive",null),i.__decorate([o.HostBinding("attr.dir"),i.__metadata("design:type",String),i.__metadata("design:paramtypes",[])],c.prototype,"dir",null),i.__decorate([o.HostBinding("style.touch-action"),i.__metadata("design:type",String)],c.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)],c.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:[d.LocalizationService,{provide:d.L10N_PREFIX,useValue:"kendo.scrollview"}],selector:"kendo-scrollview",template:'\n <ul class=\'k-scrollview\'\n [ngStyle]="transitionStyle"\n [@animateTo]="animationState" (@animateTo.done)= "transitionEndHandler($event)"\n kendoDraggable\n (kendoDrag) = "handleDrag($event)" (kendoPress) = "handlePress($event)" (kendoRelease) = "handleRelease($event)">\n <li *ngFor="let item of view;let i=index"\n [ngStyle]="inlineStyles(i)"\n [attr.aria-hidden]="i !== 1">\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 <a class="k-scrollview-prev"\n aria-label="previous"\n *ngIf="arrows && displayLeftArrow()"\n (click)="leftArrowClick()">\n <span class="k-icon k-i-arrowhead-w"></span>\n </a>\n <a class="k-scrollview-next"\n aria-label="next"\n *ngIf="arrows && displayRightArrow()"\n (click)="rightArrowClick()">\n <span class="k-icon k-i-arrowhead-e"></span>\n </a>\n <kendo-scrollview-pager *ngIf="pageable"\n (pagerIndexChange)="pageChange($event)"\n [data]="data"\n [activeIndex]="activeIndex">\n </kendo-scrollview-pager>\n </div>\n '}),i.__metadata("design:paramtypes",[o.ElementRef,o.ApplicationRef,d.LocalizationService,o.NgZone])],c));function c(t,e,n,i){var a=this;this.element=t,this.application=e,this.localization=n,this.ngZone=i,this.data=[],this.endless=!1,this.animate=!0,this.pageable=!1,this.arrows=!1,this.itemChanged=new o.EventEmitter,this.touchAction="pan-y pinch-zoom",this.animationState=null,this.transitionStyle={},this.view=new l.DataCollection(function(){return new l.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%)"]}e.ScrollViewComponent=p},function(t,e){t.exports=d},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),a=n(0),o=n(5),r=n(4),s=n(2),l=n(3),d=[r.ScrollViewComponent,s.ScrollViewPagerComponent],p=[r.ScrollViewComponent],c=i.__decorate([a.NgModule({declarations:[d],exports:[p],imports:[o.CommonModule,l.DraggableModule]})],u);function u(){}e.ScrollViewModule=c},function(t,e){t.exports=c},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=function(){if("function"==typeof Symbol&&Symbol.iterator)return Symbol.iterator;for(var t=Object.getOwnPropertyNames(Map.prototype),e=Map.prototype,n=0;n<t.length;++n){var i=t[n];if("entries"!==i&&"size"!==i&&e[i]===e.entries)return i}}(),a={},o=(Object.defineProperty(r.prototype,"data",{get:function(){var t,e=this.total;return t=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),null!==this.pageIndex&&(t[this.pageIndex>this.index?2:0]=this.source[this.pageIndex]),this.rtl?t.reverse():t},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(t,e,n,i,a){this.rtl=!1,this.source=t||[],this.index=e||0,this.endless=n,this.pageIndex=i,this.rtl=a}e.DataResultIterator=o;var s=(Object.defineProperty(l.prototype,"length",{get:function(){return this.accessor().data.length},enumerable:!0,configurable:!0}),Object.defineProperty(l.prototype,"total",{get:function(){return this.accessor().total},enumerable:!0,configurable:!0}),l.prototype.item=function(t){return this.accessor().data[t]},l.prototype.canMoveNext=function(){return this.accessor().canMoveNext()},l.prototype.canMovePrev=function(){return this.accessor().canMovePrev()},l.prototype[Symbol.iterator]=function(){return this.accessor()[Symbol.iterator]()},l);function l(t){this.accessor=t}e.DataCollection=s},function(t,e,n){"use strict";var i;Object.defineProperty(e,"__esModule",{value:!0}),(i=e.Dir||(e.Dir={}))[i.Next=1]="Next",i[i.Prev=-1]="Prev"},function(t,e){t.exports=p},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(4);e.ScrollViewComponent=i.ScrollViewComponent;var a=n(6);e.ScrollViewModule=a.ScrollViewModule;var o=n(2);e.ScrollViewPagerComponent=o.ScrollViewPagerComponent,function(t){for(var e in t)r(e,t[e])}(e)}],i.c=a,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=11)}}});

+12

schematics/collection.json

		{
		"$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
		"schematics": {
		"ng-add": {
		"description": "Adds Kendo Angular Package to the application.",
		"factory": "./ngAdd",
		"schema": "./ngAdd/schema.json",
		"hidden": true,
		"private": true
		}
		}
		}

+10

schematics/ngAdd/index.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		const schematics_1 = require("@angular-devkit/schematics");
		function default_1(options) {
		const finalOptions = Object.assign({}, options, { mainNgModule: 'ScrollViewModule', package: 'scrollview' //package name, e.g grid
		});
		return schematics_1.externalSchematic('@progress/kendo-schematics', 'ng-add', finalOptions);
		}
		exports.default = default_1;
		//# sourceMappingURL=index.js.map

+1

schematics/ngAdd/index.js.map

{"version":3,"file":"index.js","sourceRoot":"","sources":["../../tooling/schematics/ngAdd/index.ts"],"names":[],"mappings":";;AAAA,2DAKqC;AAErC,mBAAyB,OAAY;IACjC,MAAM,YAAY,qBACX,OAAO,IACV,YAAY,EAAE,kBAAkB,EAChC,OAAO,EAAE,YAAY,CAAC,wBAAwB;OACjD,CAAC;IAEF,OAAO,8BAAiB,CAAC,4BAA4B,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;AACnF,CAAC;AARD,4BAQC"}

+28

schematics/ngAdd/schema.json

		{
		"$schema": "http://json-schema.org/schema",
		"id": "SchematicsKendoAngularScrollView",
		"title": "Kendo Angular ScrollView Options Schema",
		"type": "object",
		"properties": {
		"theme": {
		"enum": [
		"default",
		"bootstrap",
		"material"
		],
		"default": "default",
		"description": "The theme to apply"
		},
		"export": {
		"type": "boolean",
		"default": false,
		"description": "Specifies if declaring module exports the component."
		},
		"skipInstall": {
		"description": "Skip installing Kendo dependency packages.",
		"type": "boolean",
		"default": false
		}
		},
		"required": []
		}

+1

-1

package.json

		@@ -6,3 +6,3 @@ {
		"license": "SEE LICENSE in LICENSE.md",
		"version": "3.0.1-dev.201909301308",
		"version": "3.0.1-dev.201910011329",
		"main": "dist/npm/index.js",
		@@ -9,0 +9,0 @@ "module": "dist/fesm5/index.js",

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

New alerts

Fixed alerts

Improved metrics

Worsened metrics