@catull/igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,227 lines • 128 kB
JavaScript
import { __decorate, __extends, __metadata } from "tslib";
import { CommonModule } from '@angular/common';
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, OnDestroy, Output, ContentChildren, QueryList, IterableDiffer, IterableDiffers, AfterContentInit, IterableChangeRecord, TemplateRef, ViewChild, ContentChild, Injectable } from '@angular/core';
import { IgxIconModule } from '../icon/index';
import { IBaseEventArgs, PlatformUtil } from '../core/utils';
import { Subject, merge } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
import { useAnimation, AnimationBuilder, AnimationPlayer, AnimationReferenceMetadata } from '@angular/animations';
import { slideInLeft, fadeIn } from '../animations/main';
import { IgxSlideComponent, Direction } from './slide.component';
import { CurrentResourceStrings } from '../core/i18n/resources';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
var NEXT_ID = 0;
export var CarouselIndicatorsOrientation;
(function (CarouselIndicatorsOrientation) {
CarouselIndicatorsOrientation["bottom"] = "bottom";
CarouselIndicatorsOrientation["top"] = "top";
})(CarouselIndicatorsOrientation || (CarouselIndicatorsOrientation = {}));
export var CarouselAnimationType;
(function (CarouselAnimationType) {
CarouselAnimationType["none"] = "none";
CarouselAnimationType["slide"] = "slide";
CarouselAnimationType["fade"] = "fade";
})(CarouselAnimationType || (CarouselAnimationType = {}));
var CarouselHammerConfig = /** @class */ (function (_super) {
__extends(CarouselHammerConfig, _super);
function CarouselHammerConfig() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.overrides = {
pan: { direction: Hammer.DIRECTION_HORIZONTAL }
};
return _this;
}
CarouselHammerConfig = __decorate([
Injectable()
], CarouselHammerConfig);
return CarouselHammerConfig;
}(HammerGestureConfig));
export { CarouselHammerConfig };
/**
* **Ignite UI for Angular Carousel** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel.html)
*
* The Ignite UI Carousel is used to browse or navigate through a collection of slides. Slides can contain custom
* content such as images or cards and be used for things such as on-boarding tutorials or page-based interfaces.
* It can be used as a separate fullscreen element or inside another component.
*
* Example:
* ```html
* <igx-carousel>
* <igx-slide>
* <h3>First Slide Header</h3>
* <p>First slide Content</p>
* <igx-slide>
* <igx-slide>
* <h3>Second Slide Header</h3>
* <p>Second Slide Content</p>
* </igx-carousel>
* ```
*/
var IgxCarouselComponent = /** @class */ (function () {
function IgxCarouselComponent(element, iterableDiffers, builder, platformUtil) {
this.element = element;
this.iterableDiffers = iterableDiffers;
this.builder = builder;
this.platformUtil = platformUtil;
/**
* Returns the `role` attribute of the carousel.
* ```typescript
* let carouselRole = this.carousel.role;
* ```
* @memberof IgxCarouselComponent
*/
this.role = 'region';
/**
* Sets the `id` of the carousel.
* If not set, the `id` of the first carousel component will be `"igx-carousel-0"`.
* ```html
* <igx-carousel id="my-first-carousel"></igx-carousel>
* ```
* @memberof IgxCarouselComponent
*/
this.id = "igx-carousel-" + NEXT_ID++;
/**
* Returns the `aria-label` of the carousel.
*
* ```typescript
* let carousel = this.carousel.ariaLabel;
* ```
*
*/
this.ariaLabel = 'carousel';
/**
* Returns the class of the carousel component.
* ```typescript
* let class = this.carousel.cssClass;
* ```
* @memberof IgxCarouselComponent
*/
this.cssClass = 'igx-carousel';
/**
* Sets whether the carousel should `loop` back to the first slide after reaching the last slide.
* Default value is `true`.
* ```html
* <igx-carousel [loop]="false"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.loop = true;
/**
* Sets whether the carousel will `pause` the slide transitions on user interactions.
* Default value is `true`.
* ```html
* <igx-carousel [pause]="false"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.pause = true;
/**
* Controls whether the carousel should render the left/right `navigation` buttons.
* Default value is `true`.
* ```html
* <igx-carousel [navigation] = "false"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.navigation = true;
/**
* Controls whether the carousel should support keyboard navigation.
* Default value is `true`.
* ```html
* <igx-carousel [keyboardSupport] = "false"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.keyboardSupport = true;
/**
* Controls whether the carousel should support gestures.
* Default value is `true`.
* ```html
* <igx-carousel [gesturesSupport] = "false"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.gesturesSupport = true;
/**
* Controls the maximum indexes that can be shown.
* Default value is `5`.
* ```html
* <igx-carousel [maximumIndicatorsCount] = "10"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.maximumIndicatorsCount = 5;
/**
* Gets/sets the display mode of carousel indicators. It can be top or bottom.
* Default value is `bottom`.
* ```html
* <igx-carousel indicatorsOrientation='top'>
* <igx-carousel>
* ```
* @memberOf IgxSlideComponent
*/
this.indicatorsOrientation = CarouselIndicatorsOrientation.bottom;
/**
* Gets/sets the animation type of carousel.
* Default value is `slide`.
* ```html
* <igx-carousel animationType='none'>
* <igx-carousel>
* ```
* @memberOf IgxSlideComponent
*/
this.animationType = CarouselAnimationType.slide;
/**
* The custom template, if any, that should be used when rendering carousel indicators
*
* ```typescript
* // Set in typescript
* const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
* myComponent.carousel.indicatorTemplate = myCustomTemplate;
* ```
* ```html
* <!-- Set in markup -->
* <igx-carousel #carousel>
* ...
* <ng-template igxCarouselIndicator let-slide>
* <igx-icon *ngIf="slide.active" fontSet="material">brightness_7</igx-icon>
* <igx-icon *ngIf="!slide.active" fontSet="material">brightness_5</igx-icon>
* </ng-template>
* </igx-carousel>
* ```
*/
this.indicatorTemplate = null;
/**
* The custom template, if any, that should be used when rendering carousel next button
*
* ```typescript
* // Set in typescript
* const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
* myComponent.carousel.nextButtonTemplate = myCustomTemplate;
* ```
* ```html
* <!-- Set in markup -->
* <igx-carousel #carousel>
* ...
* <ng-template igxCarouselNextButton let-disabled>
* <button igxButton="fab" igxRipple="white" [disabled]="disabled">
* <igx-icon fontSet="material">add</igx-icon>
* </button>
* </ng-template>
* </igx-carousel>
* ```
*/
this.nextButtonTemplate = null;
/**
* The custom template, if any, that should be used when rendering carousel previous button
*
* ```typescript
* // Set in typescript
* const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
* myComponent.carousel.nextButtonTemplate = myCustomTemplate;
* ```
* ```html
* <!-- Set in markup -->
* <igx-carousel #carousel>
* ...
* <ng-template igxCarouselPrevButton let-disabled>
* <button igxButton="fab" igxRipple="white" [disabled]="disabled">
* <igx-icon fontSet="material">remove</igx-icon>
* </button>
* </ng-template>
* </igx-carousel>
* ```
*/
this.prevButtonTemplate = null;
/**
* An event that is emitted after a slide transition has happened.
* Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments.
* ```html
* <igx-carousel (onSlideChanged)="onSlideChanged($event)"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.onSlideChanged = new EventEmitter();
/**
* An event that is emitted after a slide has been added to the carousel.
* Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments.
* ```html
* <igx-carousel (onSlideAdded)="onSlideAdded($event)"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.onSlideAdded = new EventEmitter();
/**
* An event that is emitted after a slide has been removed from the carousel.
* Provides references to the `IgxCarouselComponent` and `IgxSlideComponent` as event arguments.
* ```html
* <igx-carousel (onSlideRemoved)="onSlideRemoved($event)"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.onSlideRemoved = new EventEmitter();
/**
* An event that is emitted after the carousel has been paused.
* Provides a reference to the `IgxCarouselComponent` as an event argument.
* ```html
* <igx-carousel (onCarouselPaused)="onCarouselPaused($event)"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.onCarouselPaused = new EventEmitter();
/**
* An event that is emitted after the carousel has resumed transitioning between `slides`.
* Provides a reference to the `IgxCarouselComponent` as an event argument.
* ```html
* <igx-carousel (onCarouselPlaying)="onCarouselPlaying($event)"></igx-carousel>
* ```
* @memberOf IgxCarouselComponent
*/
this.onCarouselPlaying = new EventEmitter();
this._resourceStrings = CurrentResourceStrings.CarouselResStrings;
this.destroy$ = new Subject();
this.differ = null;
this.animationDuration = 320;
this.animationPosition = 0;
this.newDuration = 0;
this.differ = this.iterableDiffers.find([]).create(null);
}
Object.defineProperty(IgxCarouselComponent.prototype, "tabIndex", {
/**
* Returns the `tabIndex` of the carousel component.
* ```typescript
* let tabIndex = this.carousel.tabIndex;
* ```
* @memberof IgxCarouselComponent
*/
get: function () {
return 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "touchAction", {
/**
* Gets the `touch-action` style of the `list item`.
* ```typescript
* let touchAction = this.listItem.touchAction;
* ```
*/
get: function () {
return this.gesturesSupport ? 'pan-y' : 'auto';
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "interval", {
/**
* Returns the time `interval` in milliseconds before the slide changes.
* ```typescript
* let timeInterval = this.carousel.interval;
* ```
* @memberof IgxCarouselComponent
*/
get: function () {
return this._interval;
},
/**
* Sets the time `interval` in milliseconds before the slide changes.
* If not set, the carousel will not change `slides` automatically.
* ```html
* <igx-carousel [interval] = "1000"></igx-carousel>
* ```
* @memberof IgxCarouselComponent
*/
set: function (value) {
this._interval = +value;
this.restartInterval();
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "resourceStrings", {
/**
* An accessor that returns the resource strings.
*/
get: function () {
return this._resourceStrings;
},
/**
* An accessor that sets the resource strings.
* By default it uses EN resources.
*/
set: function (value) {
this._resourceStrings = Object.assign({}, this._resourceStrings, value);
},
enumerable: true,
configurable: true
});
/** @hidden */
IgxCarouselComponent.prototype.ngAfterContentInit = function () {
var _this = this;
this.slides.changes
.pipe(takeUntil(this.destroy$))
.subscribe(function (change) { _this.initSlides(change); });
this.initSlides(this.slides);
};
/** @hidden */
IgxCarouselComponent.prototype.ngOnDestroy = function () {
this.destroy$.next(true);
this.destroy$.complete();
this.destroyed = true;
if (this.lastInterval) {
clearInterval(this.lastInterval);
}
};
IgxCarouselComponent.prototype.unsubscriber = function (slide) {
return merge(this.destroy$, slide.isDestroyed);
};
IgxCarouselComponent.prototype.onSlideActivated = function (slide) {
var _this = this;
if (slide.active && slide !== this.currentSlide) {
if (slide.direction === Direction.NONE) {
var newIndex = slide.index;
slide.direction = newIndex > this.current ? Direction.NEXT : Direction.PREV;
}
if (this.currentSlide) {
var animationWasStarted = this.finishAnimations();
this.currentSlide.direction = slide.direction;
this.currentSlide.active = false;
this.previousSlide = this.currentSlide;
this.currentSlide = slide;
if (this.animationType !== CarouselAnimationType.none) {
if (animationWasStarted) {
requestAnimationFrame(function () {
_this.playAnimations();
});
}
else {
this.playAnimations();
}
}
}
else {
this.currentSlide = slide;
}
this.onSlideChanged.emit({ carousel: this, slide: slide });
this.restartInterval();
}
};
IgxCarouselComponent.prototype.playAnimations = function () {
this.playLeaveAnimation();
this.playEnterAnimation();
};
IgxCarouselComponent.prototype.finishAnimations = function () {
var animationWasStarted = false;
if (this.previousSlide && this.previousSlide.previous) {
this.previousSlide.previous = false;
}
if (this.leaveAnimationPlayer) {
animationWasStarted = true;
this.leaveAnimationPlayer.finish();
}
if (this.enterAnimationPlayer) {
animationWasStarted = true;
this.enterAnimationPlayer.finish();
}
return animationWasStarted;
};
IgxCarouselComponent.prototype.getAnimation = function () {
var duration;
if (this.newDuration) {
duration = this.animationPosition ? this.animationPosition * this.newDuration : this.newDuration;
}
else {
duration = this.animationPosition ? this.animationPosition * this.animationDuration : this.animationDuration;
}
switch (this.animationType) {
case CarouselAnimationType.slide:
var trans = this.animationPosition ? this.animationPosition * 100 : 100;
return {
enterAnimation: useAnimation(slideInLeft, {
params: {
delay: '0s',
duration: duration + "ms",
endOpacity: 1,
startOpacity: 1,
fromPosition: "translateX(" + (this.currentSlide.direction === 1 ? trans : -trans) + "%)",
toPosition: 'translateX(0%)'
}
}),
leaveAnimation: useAnimation(slideInLeft, {
params: {
delay: '0s',
duration: duration + "ms",
endOpacity: 1,
startOpacity: 1,
fromPosition: "translateX(0%)",
toPosition: "translateX(" + (this.currentSlide.direction === 1 ? -trans : trans) + "%)",
}
})
};
case CarouselAnimationType.fade:
return {
enterAnimation: useAnimation(fadeIn, { params: { duration: duration + "ms", startOpacity: "" + this.animationPosition } }),
leaveAnimation: null
};
}
return {
enterAnimation: null,
leaveAnimation: null
};
};
IgxCarouselComponent.prototype.playEnterAnimation = function () {
var _this = this;
if (!this.getAnimation().enterAnimation) {
return;
}
var animationBuilder = this.builder.build(this.getAnimation().enterAnimation);
this.enterAnimationPlayer = animationBuilder.create(this.currentSlide.nativeElement);
this.enterAnimationPlayer.onDone(function () {
if (_this.enterAnimationPlayer) {
_this.enterAnimationPlayer.reset();
_this.enterAnimationPlayer = null;
}
_this.animationPosition = 0;
_this.newDuration = 0;
_this.previousSlide.previous = false;
});
this.previousSlide.previous = true;
this.enterAnimationPlayer.play();
};
IgxCarouselComponent.prototype.playLeaveAnimation = function () {
var _this = this;
if (!this.getAnimation().leaveAnimation) {
return;
}
var animationBuilder = this.builder.build(this.getAnimation().leaveAnimation);
this.leaveAnimationPlayer = animationBuilder.create(this.previousSlide.nativeElement);
this.leaveAnimationPlayer.onDone(function () {
if (_this.leaveAnimationPlayer) {
_this.leaveAnimationPlayer.reset();
_this.leaveAnimationPlayer = null;
}
_this.animationPosition = 0;
_this.newDuration = 0;
});
this.leaveAnimationPlayer.play();
};
IgxCarouselComponent.prototype.initSlides = function (change) {
var _this = this;
var diff = this.differ.diff(change.toArray());
if (diff) {
this.slides.reduce(function (any, c, ind) { return c.index = ind; }, 0); // reset slides indexes
diff.forEachAddedItem(function (record) {
var slide = record.item;
_this.onSlideAdded.emit({ carousel: _this, slide: slide });
if (slide.active) {
_this.currentSlide = slide;
}
slide.activeChange.pipe(takeUntil(_this.unsubscriber(slide))).subscribe(function () { return _this.onSlideActivated(slide); });
});
diff.forEachRemovedItem(function (record) {
var slide = record.item;
_this.onSlideRemoved.emit({ carousel: _this, slide: slide });
if (slide.active) {
slide.active = false;
_this.currentSlide = _this.get(slide.index < _this.total ? slide.index : _this.total - 1);
}
});
this.updateSlidesSelection();
}
};
IgxCarouselComponent.prototype.updateSlidesSelection = function () {
var _this = this;
requestAnimationFrame(function () {
if (_this.currentSlide) {
_this.currentSlide.active = true;
var activeSlides = _this.slides.filter(function (slide) { return slide.active && slide.index !== _this.currentSlide.index; });
activeSlides.forEach(function (slide) { slide.active = false; });
}
else if (_this.total) {
_this.slides.first.active = true;
}
_this.play();
});
};
Object.defineProperty(IgxCarouselComponent.prototype, "getIndicatorTemplate", {
/** @hidden */
get: function () {
if (this.indicatorTemplate) {
return this.indicatorTemplate;
}
return this.defaultIndicator;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "getNextButtonTemplate", {
/** @hidden */
get: function () {
if (this.nextButtonTemplate) {
return this.nextButtonTemplate;
}
return this.defaultNextButton;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "getPrevButtonTemplate", {
/** @hidden */
get: function () {
if (this.prevButtonTemplate) {
return this.prevButtonTemplate;
}
return this.defaultPrevButton;
},
enumerable: true,
configurable: true
});
/** @hidden */
IgxCarouselComponent.prototype.setAriaLabel = function (slide) {
return "Item " + (slide.index + 1) + " of " + this.total;
};
Object.defineProperty(IgxCarouselComponent.prototype, "indicatorsOrientationClass", {
/** @hidden */
get: function () {
return "igx-carousel-indicators--" + this.indicatorsOrientation;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "showIndicators", {
/** @hidden */
get: function () {
return this.total <= this.maximumIndicatorsCount && this.total > 0;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "showIndicatorsLabel", {
/** @hidden */
get: function () {
return this.total > this.maximumIndicatorsCount;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "getCarouselLabel", {
/** @hidden */
get: function () {
return this.current + 1 + " " + this.resourceStrings.igx_carousel_of + " " + this.total;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "total", {
/**
* Returns the total number of `slides` in the carousel.
* ```typescript
* let slideCount = this.carousel.total;
* ```
* @memberOf IgxCarouselComponent
*/
get: function () {
return this.slides.length;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "current", {
/**
* The index of the slide being currently shown.
* ```typescript
* let currentSlideNumber = this.carousel.current;
* ```
* @memberOf IgxCarouselComponent
*/
get: function () {
return !this.currentSlide ? 0 : this.currentSlide.index;
},
enumerable: true,
configurable: true
});
IgxCarouselComponent.prototype.getNextIndex = function () {
return (this.current + 1) % this.total;
};
IgxCarouselComponent.prototype.getPrevIndex = function () {
return this.current - 1 < 0 ? this.total - 1 : this.current - 1;
};
Object.defineProperty(IgxCarouselComponent.prototype, "isPlaying", {
/**
* Returns a boolean indicating if the carousel is playing.
* ```typescript
* let isPlaying = this.carousel.isPlaying;
* ```
* @memberOf IgxCarouselComponent
*/
get: function () {
return this.playing;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "isDestroyed", {
/**
* Returns а boolean indicating if the carousel is destroyed.
* ```typescript
* let isDestroyed = this.carousel.isDestroyed;
* ```
* @memberOf IgxCarouselComponent
*/
get: function () {
return this.destroyed;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "nativeElement", {
/**
* Returns a reference to the carousel element in the DOM.
* ```typescript
* let nativeElement = this.carousel.nativeElement;
* ```
* @memberof IgxCarouselComponent
*/
get: function () {
return this.element.nativeElement;
},
enumerable: true,
configurable: true
});
/**
* Returns the slide corresponding to the provided `index` or null.
* ```typescript
* let slide1 = this.carousel.get(1);
* ```
* @memberOf IgxCarouselComponent
*/
IgxCarouselComponent.prototype.get = function (index) {
return this.slides.find(function (slide) { return slide.index === index; });
};
/**
* Adds a new slide to the carousel.
* ```typescript
* this.carousel.add(newSlide);
* ```
* @memberOf IgxCarouselComponent
*/
IgxCarouselComponent.prototype.add = function (slide) {
var newSlides = this.slides.toArray();
newSlides.push(slide);
this.slides.reset(newSlides);
this.slides.notifyOnChanges();
};
/**
* Removes a slide from the carousel.
* ```typescript
* this.carousel.remove(slide);
* ```
* @memberOf IgxCarouselComponent
*/
IgxCarouselComponent.prototype.remove = function (slide) {
if (slide && slide === this.get(slide.index)) { // check if the requested slide for delete is present in the carousel
var newSlides = this.slides.toArray();
newSlides.splice(slide.index, 1);
this.slides.reset(newSlides);
this.slides.notifyOnChanges();
}
};
/**
* Kicks in a transition for a given slide with a given `direction`.
* ```typescript
* this.carousel.select(this.carousel.get(2), Direction.NEXT);
* ```
* @memberOf IgxCarouselComponent
*/
IgxCarouselComponent.prototype.select = function (slide, direction) {
if (direction === void 0) { direction = Direction.NONE; }
if (slide && slide !== this.currentSlide) {
slide.direction = direction;
slide.active = true;
}
};
/**
* Transitions to the next slide in the carousel.
* ```typescript
* this.carousel.next();
* ```
* @memberOf IgxCarouselComponent
*/
IgxCarouselComponent.prototype.next = function () {
var index = this.getNextIndex();
if (index === 0 && !this.loop) {
this.stop();
return;
}
return this.select(this.get(index), Direction.NEXT);
};
/**
* Transitions to the previous slide in the carousel.
* ```typescript
* this.carousel.prev();
* ```
* @memberOf IgxCarouselComponent
*/
IgxCarouselComponent.prototype.prev = function () {
var index = this.getPrevIndex();
if (!this.loop && index === this.total - 1) {
this.stop();
return;
}
return this.select(this.get(index), Direction.PREV);
};
/**
* Resumes playing of the carousel if in paused state.
* No operation otherwise.
* ```typescript
* this.carousel.play();
* }
* ```
* @memberOf IgxCarouselComponent
*/
IgxCarouselComponent.prototype.play = function () {
if (!this.playing) {
this.playing = true;
this.onCarouselPlaying.emit(this);
this.restartInterval();
this.stoppedByInteraction = false;
}
};
/**
* Stops slide transitions if the `pause` option is set to `true`.
* No operation otherwise.
* ```typescript
* this.carousel.stop();
* }
* ```
* @memberOf IgxCarouselComponent
*/
IgxCarouselComponent.prototype.stop = function () {
if (this.pause) {
this.playing = false;
this.onCarouselPaused.emit(this);
this.resetInterval();
}
};
IgxCarouselComponent.prototype.resetInterval = function () {
if (this.lastInterval) {
clearInterval(this.lastInterval);
this.lastInterval = null;
}
};
IgxCarouselComponent.prototype.restartInterval = function () {
var _this = this;
this.resetInterval();
if (!isNaN(this.interval) && this.interval > 0 && this.platformUtil.isBrowser) {
this.lastInterval = setInterval(function () {
var tick = +_this.interval;
if (_this.playing && _this.total && !isNaN(tick) && tick > 0) {
_this.next();
}
else {
_this.stop();
}
}, this.interval);
}
};
Object.defineProperty(IgxCarouselComponent.prototype, "nextButtonDisabled", {
/** @hidden */
get: function () {
return !this.loop && this.current === (this.total - 1);
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxCarouselComponent.prototype, "prevButtonDisabled", {
/** @hidden */
get: function () {
return !this.loop && this.current === 0;
},
enumerable: true,
configurable: true
});
/** @hidden */
IgxCarouselComponent.prototype.onKeydownArrowRight = function (event) {
var _this = this;
if (this.keyboardSupport) {
event.preventDefault();
this.next();
requestAnimationFrame(function () { return _this.nativeElement.focus(); });
}
};
/** @hidden */
IgxCarouselComponent.prototype.onKeydownArrowLeft = function (event) {
var _this = this;
if (this.keyboardSupport) {
event.preventDefault();
this.prev();
requestAnimationFrame(function () { return _this.nativeElement.focus(); });
}
};
/** @hidden */
IgxCarouselComponent.prototype.onTap = function (event) {
// play pause only when tap on slide
if (event.target && event.target.classList.contains('igx-slide')) {
if (this.isPlaying) {
if (this.pause) {
this.stoppedByInteraction = true;
}
this.stop();
}
else if (this.stoppedByInteraction) {
this.play();
}
}
};
/** @hidden */
IgxCarouselComponent.prototype.onKeydownHome = function (event) {
var _this = this;
if (this.keyboardSupport && this.slides.length > 0) {
event.preventDefault();
this.slides.first.active = true;
requestAnimationFrame(function () { return _this.nativeElement.focus(); });
}
};
/** @hidden */
IgxCarouselComponent.prototype.onKeydownEnd = function (event) {
var _this = this;
if (this.keyboardSupport && this.slides.length > 0) {
event.preventDefault();
this.slides.last.active = true;
requestAnimationFrame(function () { return _this.nativeElement.focus(); });
}
};
/** @hidden */
IgxCarouselComponent.prototype.onMouseEnter = function () {
if (this.pause && this.isPlaying) {
this.stoppedByInteraction = true;
}
this.stop();
};
/** @hidden */
IgxCarouselComponent.prototype.onMouseLeave = function () {
if (this.stoppedByInteraction) {
this.play();
}
};
/** @hidden */
IgxCarouselComponent.prototype.onPanLeft = function (event) {
this.pan(event);
};
/** @hidden */
IgxCarouselComponent.prototype.onPanRight = function (event) {
this.pan(event);
};
IgxCarouselComponent.prototype.resetSlideStyles = function (slide) {
slide.nativeElement.style.transform = '';
slide.nativeElement.style.opacity = '';
};
IgxCarouselComponent.prototype.pan = function (event) {
var slideWidth = this.currentSlide.nativeElement.offsetWidth;
var panOffset = (slideWidth / 1000);
var deltaX = event.deltaX;
var index = deltaX < 0 ? this.getNextIndex() : this.getPrevIndex();
var offset = deltaX < 0 ? slideWidth + deltaX : -slideWidth + deltaX;
if (!this.gesturesSupport || event.isFinal || Math.abs(deltaX) + panOffset >= slideWidth) {
return;
}
if (!this.loop && ((this.current === 0 && deltaX > 0) || (this.current === this.total - 1 && deltaX < 0))) {
this.incomingSlide = null;
return;
}
event.preventDefault();
if (this.isPlaying) {
this.stoppedByInteraction = true;
this.stop();
}
this.finishAnimations();
if (this.incomingSlide) {
if (index !== this.incomingSlide.index) {
this.resetSlideStyles(this.incomingSlide);
this.incomingSlide.previous = false;
this.incomingSlide = this.get(index);
}
}
else {
this.incomingSlide = this.get(index);
}
this.incomingSlide.previous = true;
if (this.animationType === CarouselAnimationType.fade) {
this.currentSlide.nativeElement.style.opacity = "" + Math.abs(offset) / slideWidth;
}
else {
this.currentSlide.nativeElement.style.transform = "translateX(" + deltaX + "px)";
this.incomingSlide.nativeElement.style.transform = "translateX(" + offset + "px)";
}
};
/**
* @hidden
*/
IgxCarouselComponent.prototype.onPanEnd = function (event) {
if (!this.gesturesSupport) {
return;
}
event.preventDefault();
var slideWidth = this.currentSlide.nativeElement.offsetWidth;
var panOffset = (slideWidth / 1000);
var deltaX = Math.abs(event.deltaX) + panOffset < slideWidth ? Math.abs(event.deltaX) : slideWidth - panOffset;
var velocity = Math.abs(event.velocity);
this.resetSlideStyles(this.currentSlide);
if (this.incomingSlide) {
this.resetSlideStyles(this.incomingSlide);
if (slideWidth / 2 < deltaX || velocity > 1) {
this.incomingSlide.direction = event.deltaX < 0 ? Direction.NEXT : Direction.PREV;
this.incomingSlide.previous = false;
this.animationPosition = this.animationType === CarouselAnimationType.fade ?
deltaX / slideWidth : (slideWidth - deltaX) / slideWidth;
if (velocity > 1) {
this.newDuration = this.animationDuration / velocity;
}
this.incomingSlide.active = true;
}
else {
this.currentSlide.direction = event.deltaX > 0 ? Direction.NEXT : Direction.PREV;
this.previousSlide = this.incomingSlide;
this.previousSlide.previous = true;
this.animationPosition = this.animationType === CarouselAnimationType.fade ?
Math.abs((slideWidth - deltaX) / slideWidth) : deltaX / slideWidth;
this.playAnimations();
}
}
if (this.stoppedByInteraction) {
this.play();
}
};
IgxCarouselComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: IterableDiffers },
{ type: AnimationBuilder },
{ type: PlatformUtil }
]; };
__decorate([
HostBinding('attr.role'),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "role", void 0);
__decorate([
HostBinding('attr.id'),
Input(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "id", void 0);
__decorate([
HostBinding('attr.aria-label'),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "ariaLabel", void 0);
__decorate([
HostBinding('attr.tabindex'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], IgxCarouselComponent.prototype, "tabIndex", null);
__decorate([
HostBinding('class.igx-carousel'),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "cssClass", void 0);
__decorate([
HostBinding('style.touch-action'),
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], IgxCarouselComponent.prototype, "touchAction", null);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "loop", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "pause", void 0);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], IgxCarouselComponent.prototype, "interval", null);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "navigation", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "keyboardSupport", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "gesturesSupport", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "maximumIndicatorsCount", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], IgxCarouselComponent.prototype, "indicatorsOrientation", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "animationType", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], IgxCarouselComponent.prototype, "resourceStrings", null);
__decorate([
ViewChild('defaultIndicator', { read: TemplateRef, static: true }),
__metadata("design:type", TemplateRef)
], IgxCarouselComponent.prototype, "defaultIndicator", void 0);
__decorate([
ViewChild('defaultNextButton', { read: TemplateRef, static: true }),
__metadata("design:type", TemplateRef)
], IgxCarouselComponent.prototype, "defaultNextButton", void 0);
__decorate([
ViewChild('defaultPrevButton', { read: TemplateRef, static: true }),
__metadata("design:type", TemplateRef)
], IgxCarouselComponent.prototype, "defaultPrevButton", void 0);
__decorate([
ContentChild(IgxCarouselIndicatorDirective, { read: TemplateRef, static: false }),
__metadata("design:type", TemplateRef)
], IgxCarouselComponent.prototype, "indicatorTemplate", void 0);
__decorate([
ContentChild(IgxCarouselNextButtonDirective, { read: TemplateRef, static: false }),
__metadata("design:type", TemplateRef)
], IgxCarouselComponent.prototype, "nextButtonTemplate", void 0);
__decorate([
ContentChild(IgxCarouselPrevButtonDirective, { read: TemplateRef, static: false }),
__metadata("design:type", TemplateRef)
], IgxCarouselComponent.prototype, "prevButtonTemplate", void 0);
__decorate([
ContentChildren(IgxSlideComponent),
__metadata("design:type", QueryList)
], IgxCarouselComponent.prototype, "slides", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "onSlideChanged", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "onSlideAdded", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "onSlideRemoved", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "onCarouselPaused", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxCarouselComponent.prototype, "onCarouselPlaying", void 0);
__decorate([
HostListener('keydown.arrowright', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onKeydownArrowRight", null);
__decorate([
HostListener('keydown.arrowleft', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onKeydownArrowLeft", null);
__decorate([
HostListener('tap', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onTap", null);
__decorate([
HostListener('keydown.home', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onKeydownHome", null);
__decorate([
HostListener('keydown.end', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onKeydownEnd", null);
__decorate([
HostListener('mouseenter'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onMouseEnter", null);
__decorate([
HostListener('mouseleave'),
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onMouseLeave", null);
__decorate([
HostListener('panleft', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onPanLeft", null);
__decorate([
HostListener('panright', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onPanRight", null);
__decorate([
HostListener('panend', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], IgxCarouselComponent.prototype, "onPanEnd", null);
IgxCarouselComponent = __decorate([
Component({
providers: [
{
provide: HAMMER_GESTURE_CONFIG,
useClass: CarouselHammerConfig
}
],
selector: 'igx-carousel',
template: "<ng-template #defaultIndicator let-slide>\n <div class=\"igx-nav-dot\"\n [class.igx-nav-dot--active]=\"slide.active\"\n >\n </div>\n</ng-template>\n\n<ng-template #defaultNextButton let-disabled>\n <a class=\"igx-nav-arrow\"\n [class.igx-nav-arrow--disabled]=\"disabled\"\n >\n <igx-icon fontSet=\"material\">arrow_forward</igx-icon>\n </a>\n</ng-template>\n\n<ng-template #defaultPrevButton let-disabled>\n <a class=\"igx-nav-arrow\"\n [class.igx-nav-arrow--disabled]=\"disabled\"\n >\n <igx-icon fontSet=\"material\">arrow_back</igx-icon>\n </a>\n</ng-template>\n\n\n<div *ngIf=\"showIndicators\" [ngClass]=\"indicatorsOrientationClass\">\n <div *ngFor=\"let slide of slides\"\n class=\"igx-carousel-indicators__indicator\"\n (click)=\"select(slide)\"\n [attr.aria-label]=\"setAriaLabel(slide)\"\n [attr.aria-selected]=\"slide.active\">\n <ng-container *ngTemplateOutlet=\"getIndicatorTemplate; context: {$implicit: slide};\"></ng-container>\n </div>\n</div>\n\n<div *ngIf=\"showIndicatorsLabel\" [ngClass]=\"indicatorsOrientationClass\">\n <span class=\"igx-carousel__label\">{{getCarouselLabel}}</span>\n</div>\n\n<div class=\"igx-carousel__inner\" role=\"list\">\n <ng-content></ng-content>\n</div>\n\n<div *ngIf=\"navigation && slides.length\" role=\"button\" tabindex=\"0\" class=\"igx-carousel__arrow--prev\" (click)=\"prev()\">\n <ng-container *ngTemplateOutlet=\"getPrevButtonTemplate; context: {$implicit: prevButtonDisabled};\"></ng-container>\n</div>\n\n<div *ngIf=\"navigation && slides.length\" role=\"button\" tabindex=\"0\" class=\"igx-carousel__arrow--next\" (click)=\"next()\">\n <ng-container *ngTemplateOutlet=\"getNextButtonTemplate; context: {$implicit: nextButtonDisabled};\"></ng-container>\n</div>\n\n\n\n",
styles: ["\n :host {\n display: block;\n outline-style: none;\n }"]
}),
__metadata("design:paramtypes", [ElementRef, IterableDiffers,
AnimationBuilder, PlatformUtil])
], IgxCarouselComponent);
return IgxCarouselComponent;
}());
export { IgxCarouselComponent };
/**
* @hidden
*/
var IgxCarouselModule = /** @class */ (function () {
function IgxCarouselModule() {
}
IgxCarouselModule = __decorate([
NgModule({
declarations: [
IgxCarouselComponent,
IgxSlideComponent,
IgxCarouselIndicatorDirective,
IgxCarouselNextButtonDirective,
IgxCarouselPrevButtonDirective
],
exports: [
IgxCarouselComponent,
IgxSlideComponent,
IgxCarouselIndicatorDirective,
IgxCarouselNextButtonDirective,
IgxCarouselPrevButtonDirective
],
imports: [CommonModule, IgxIconModule]
})
], IgxCarouselModule);
return IgxCarouselModule;
}());
export { IgxCarouselModule };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2Fyb3VzZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vaWduaXRldWktYW5ndWxhci8iLCJzb3VyY2VzIjpbImxpYi9jYXJvdXNlbC9jYXJvdXNlbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0gsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osV0FBVyxFQUNYLFlBQVksRUFDWixLQUFLLEVBQ0wsUUFBUSxFQUNSLFNBQVMsRUFDVCxNQUFNLEVBQ04sZUFBZSxFQUNmLFNBQVMsRUFDVCxjQUFjLEVBQ2QsZUFBZSxFQUNmLGdCQUFnQixFQUNoQixvQkFBb0IsRUFDcEIsV0FBVyxFQUNYLFNBQVMsRUFDVCxZQUFZLEVBQ1osVUFBVSxFQUNiLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUMsT0FBTyxFQUFFLGNBQWMsRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0QsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSw4QkFBOEIsRUFBRSw4QkFBOEIsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3RJLE9BQU8sRUFBRSxZQUFZLEVBQUUsZ0JBQWdCLEVBQUUsZUFBZSxFQUFFLDBCQUEwQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDbEgsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUN6RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFFakUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDaEUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLHFCQUFxQixFQUFFLE1BQU0sMkJBQTJCLE