ngx-slick-carousel
Version:
[](https://badge.fury.io/js/ngx-slick-carousel) [](https://travis-ci.com/leo6104/ngx-slick-carousel)
483 lines (478 loc) • 13.8 kB
JavaScript
import { isPlatformServer, isPlatformBrowser, CommonModule } from '@angular/common';
import { EventEmitter, Component, forwardRef, ElementRef, NgZone, Inject, PLATFORM_ID, Input, Output, Directive, Host, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
/**
* @fileoverview added by tsickle
* Generated from: slick.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Slick component
*/
class SlickCarouselComponent {
/**
* Constructor
* @param {?} el
* @param {?} zone
* @param {?} platformId
*/
constructor(el, zone, platformId) {
this.el = el;
this.zone = zone;
this.platformId = platformId;
this.afterChange = new EventEmitter();
this.beforeChange = new EventEmitter();
this.breakpoint = new EventEmitter();
this.destroy = new EventEmitter();
this.init = new EventEmitter();
// access from parent component can be a problem with change detection timing. Please use afterChange output
this.currentIndex = 0;
this.slides = [];
this.initialized = false;
this._removedSlides = [];
this._addedSlides = [];
}
/**
* On component destroy
* @return {?}
*/
ngOnDestroy() {
this.unslick();
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.ngAfterViewChecked();
}
/**
* On component view checked
* @return {?}
*/
ngAfterViewChecked() {
if (isPlatformServer(this.platformId)) {
return;
}
if (this._addedSlides.length > 0 || this._removedSlides.length > 0) {
/** @type {?} */
const nextSlidesLength = this.slides.length - this._removedSlides.length + this._addedSlides.length;
if (!this.initialized) {
if (nextSlidesLength > 0) {
this.initSlick();
}
// if nextSlidesLength is zere, do nothing
}
else if (nextSlidesLength === 0) { // unslick case
this.unslick();
}
else {
this._addedSlides.forEach((/**
* @param {?} slickItem
* @return {?}
*/
slickItem => {
this.slides.push(slickItem);
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance.slick('slickAdd', slickItem.el.nativeElement);
}));
}));
this._addedSlides = [];
this._removedSlides.forEach((/**
* @param {?} slickItem
* @return {?}
*/
slickItem => {
/** @type {?} */
const idx = this.slides.indexOf(slickItem);
this.slides = this.slides.filter((/**
* @param {?} s
* @return {?}
*/
s => s !== slickItem));
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance.slick('slickRemove', idx);
}));
}));
this._removedSlides = [];
}
}
}
/**
* init slick
* @return {?}
*/
initSlick() {
this.slides = this._addedSlides;
this._addedSlides = [];
this._removedSlides = [];
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance = jQuery(this.el.nativeElement);
this.$instance.on('init', (/**
* @param {?} event
* @param {?} slick
* @return {?}
*/
(event, slick) => {
this.zone.run((/**
* @return {?}
*/
() => {
this.init.emit({ event, slick });
}));
}));
this.$instance.slick(this.config);
this.zone.run((/**
* @return {?}
*/
() => {
var _a;
this.initialized = true;
this.currentIndex = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.initialSlide) || 0;
}));
this.$instance.on('afterChange', (/**
* @param {?} event
* @param {?} slick
* @param {?} currentSlide
* @return {?}
*/
(event, slick, currentSlide) => {
this.zone.run((/**
* @return {?}
*/
() => {
this.afterChange.emit({
event,
slick,
currentSlide,
first: currentSlide === 0,
last: slick.$slides.length === currentSlide + slick.options.slidesToScroll
});
this.currentIndex = currentSlide;
}));
}));
this.$instance.on('beforeChange', (/**
* @param {?} event
* @param {?} slick
* @param {?} currentSlide
* @param {?} nextSlide
* @return {?}
*/
(event, slick, currentSlide, nextSlide) => {
this.zone.run((/**
* @return {?}
*/
() => {
this.beforeChange.emit({ event, slick, currentSlide, nextSlide });
this.currentIndex = nextSlide;
}));
}));
this.$instance.on('breakpoint', (/**
* @param {?} event
* @param {?} slick
* @param {?} breakpoint
* @return {?}
*/
(event, slick, breakpoint) => {
this.zone.run((/**
* @return {?}
*/
() => {
this.breakpoint.emit({ event, slick, breakpoint });
}));
}));
this.$instance.on('destroy', (/**
* @param {?} event
* @param {?} slick
* @return {?}
*/
(event, slick) => {
this.zone.run((/**
* @return {?}
*/
() => {
this.destroy.emit({ event, slick });
this.initialized = false;
}));
}));
}));
}
/**
* @param {?} slickItem
* @return {?}
*/
addSlide(slickItem) {
this._addedSlides.push(slickItem);
}
/**
* @param {?} slickItem
* @return {?}
*/
removeSlide(slickItem) {
this._removedSlides.push(slickItem);
}
/**
* Slick Method
* @param {?} index
* @return {?}
*/
slickGoTo(index) {
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance.slick('slickGoTo', index);
}));
}
/**
* @return {?}
*/
slickNext() {
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance.slick('slickNext');
}));
}
/**
* @return {?}
*/
slickPrev() {
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance.slick('slickPrev');
}));
}
/**
* @return {?}
*/
slickPause() {
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance.slick('slickPause');
}));
}
/**
* @return {?}
*/
slickPlay() {
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance.slick('slickPlay');
}));
}
/**
* @return {?}
*/
unslick() {
if (this.$instance) {
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance.slick('unslick');
}));
this.$instance = undefined;
}
this.initialized = false;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (this.initialized) {
/** @type {?} */
const config = changes['config'];
if (config.previousValue !== config.currentValue && config.currentValue !== undefined) {
/** @type {?} */
const refresh = config.currentValue['refresh'];
/** @type {?} */
const newOptions = Object.assign({}, config.currentValue);
delete newOptions['refresh'];
this.zone.runOutsideAngular((/**
* @return {?}
*/
() => {
this.$instance.slick('slickSetOption', newOptions, refresh);
}));
}
}
}
}
SlickCarouselComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-slick-carousel',
exportAs: 'slick-carousel',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => SlickCarouselComponent)),
multi: true
}],
template: '<ng-content></ng-content>'
}] }
];
/** @nocollapse */
SlickCarouselComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone },
{ type: String, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
];
SlickCarouselComponent.propDecorators = {
config: [{ type: Input }],
afterChange: [{ type: Output }],
beforeChange: [{ type: Output }],
breakpoint: [{ type: Output }],
destroy: [{ type: Output }],
init: [{ type: Output }]
};
if (false) {
/** @type {?} */
SlickCarouselComponent.prototype.config;
/** @type {?} */
SlickCarouselComponent.prototype.afterChange;
/** @type {?} */
SlickCarouselComponent.prototype.beforeChange;
/** @type {?} */
SlickCarouselComponent.prototype.breakpoint;
/** @type {?} */
SlickCarouselComponent.prototype.destroy;
/** @type {?} */
SlickCarouselComponent.prototype.init;
/** @type {?} */
SlickCarouselComponent.prototype.$instance;
/**
* @type {?}
* @private
*/
SlickCarouselComponent.prototype.currentIndex;
/** @type {?} */
SlickCarouselComponent.prototype.slides;
/** @type {?} */
SlickCarouselComponent.prototype.initialized;
/**
* @type {?}
* @private
*/
SlickCarouselComponent.prototype._removedSlides;
/**
* @type {?}
* @private
*/
SlickCarouselComponent.prototype._addedSlides;
/**
* @type {?}
* @private
*/
SlickCarouselComponent.prototype.el;
/**
* @type {?}
* @private
*/
SlickCarouselComponent.prototype.zone;
/**
* @type {?}
* @private
*/
SlickCarouselComponent.prototype.platformId;
}
class SlickItemDirective {
/**
* @param {?} el
* @param {?} platformId
* @param {?} carousel
*/
constructor(el, platformId, carousel) {
this.el = el;
this.platformId = platformId;
this.carousel = carousel;
}
/**
* @return {?}
*/
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
this.carousel.addSlide(this);
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (isPlatformBrowser(this.platformId)) {
this.carousel.removeSlide(this);
}
}
}
SlickItemDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxSlickItem]',
},] }
];
/** @nocollapse */
SlickItemDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: String, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
{ type: SlickCarouselComponent, decorators: [{ type: Host }] }
];
if (false) {
/** @type {?} */
SlickItemDirective.prototype.el;
/**
* @type {?}
* @private
*/
SlickItemDirective.prototype.platformId;
/**
* @type {?}
* @private
*/
SlickItemDirective.prototype.carousel;
}
/**
* @fileoverview added by tsickle
* Generated from: index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SlickCarouselModule {
}
SlickCarouselModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [
SlickCarouselComponent,
SlickItemDirective,
],
exports: [
SlickCarouselComponent,
SlickItemDirective,
]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: ngx-slick-carousel.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { SlickCarouselComponent, SlickCarouselModule, SlickItemDirective };
//# sourceMappingURL=ngx-slick-carousel.js.map