ngx-slick-carousel
Version:
[](https://badge.fury.io/js/ngx-slick-carousel) [](https://travis-ci.com/leo6104/ngx-slick-carousel)
556 lines (550 loc) • 18.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms')) :
typeof define === 'function' && define.amd ? define('ngx-slick-carousel', ['exports', '@angular/common', '@angular/core', '@angular/forms'], factory) :
(global = global || self, factory(global['ngx-slick-carousel'] = {}, global.ng.common, global.ng.core, global.ng.forms));
}(this, (function (exports, common, core, forms) { 'use strict';
/**
* @fileoverview added by tsickle
* Generated from: slick.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* Slick component
*/
var SlickCarouselComponent = /** @class */ (function () {
/**
* Constructor
*/
function SlickCarouselComponent(el, zone, platformId) {
this.el = el;
this.zone = zone;
this.platformId = platformId;
this.afterChange = new core.EventEmitter();
this.beforeChange = new core.EventEmitter();
this.breakpoint = new core.EventEmitter();
this.destroy = new core.EventEmitter();
this.init = new core.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
*/
/**
* On component destroy
* @return {?}
*/
SlickCarouselComponent.prototype.ngOnDestroy = /**
* On component destroy
* @return {?}
*/
function () {
this.unslick();
};
/**
* @return {?}
*/
SlickCarouselComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.ngAfterViewChecked();
};
/**
* On component view checked
*/
/**
* On component view checked
* @return {?}
*/
SlickCarouselComponent.prototype.ngAfterViewChecked = /**
* On component view checked
* @return {?}
*/
function () {
var _this = this;
if (common.isPlatformServer(this.platformId)) {
return;
}
if (this._addedSlides.length > 0 || this._removedSlides.length > 0) {
/** @type {?} */
var 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 {?}
*/
function (slickItem) {
_this.slides.push(slickItem);
_this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance.slick('slickAdd', slickItem.el.nativeElement);
}));
}));
this._addedSlides = [];
this._removedSlides.forEach((/**
* @param {?} slickItem
* @return {?}
*/
function (slickItem) {
/** @type {?} */
var idx = _this.slides.indexOf(slickItem);
_this.slides = _this.slides.filter((/**
* @param {?} s
* @return {?}
*/
function (s) { return s !== slickItem; }));
_this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance.slick('slickRemove', idx);
}));
}));
this._removedSlides = [];
}
}
};
/**
* init slick
*/
/**
* init slick
* @return {?}
*/
SlickCarouselComponent.prototype.initSlick = /**
* init slick
* @return {?}
*/
function () {
var _this = this;
this.slides = this._addedSlides;
this._addedSlides = [];
this._removedSlides = [];
this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance = jQuery(_this.el.nativeElement);
_this.$instance.on('init', (/**
* @param {?} event
* @param {?} slick
* @return {?}
*/
function (event, slick) {
_this.zone.run((/**
* @return {?}
*/
function () {
_this.init.emit({ event: event, slick: slick });
}));
}));
_this.$instance.slick(_this.config);
_this.zone.run((/**
* @return {?}
*/
function () {
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 {?}
*/
function (event, slick, currentSlide) {
_this.zone.run((/**
* @return {?}
*/
function () {
_this.afterChange.emit({
event: event,
slick: slick,
currentSlide: 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 {?}
*/
function (event, slick, currentSlide, nextSlide) {
_this.zone.run((/**
* @return {?}
*/
function () {
_this.beforeChange.emit({ event: event, slick: slick, currentSlide: currentSlide, nextSlide: nextSlide });
_this.currentIndex = nextSlide;
}));
}));
_this.$instance.on('breakpoint', (/**
* @param {?} event
* @param {?} slick
* @param {?} breakpoint
* @return {?}
*/
function (event, slick, breakpoint) {
_this.zone.run((/**
* @return {?}
*/
function () {
_this.breakpoint.emit({ event: event, slick: slick, breakpoint: breakpoint });
}));
}));
_this.$instance.on('destroy', (/**
* @param {?} event
* @param {?} slick
* @return {?}
*/
function (event, slick) {
_this.zone.run((/**
* @return {?}
*/
function () {
_this.destroy.emit({ event: event, slick: slick });
_this.initialized = false;
}));
}));
}));
};
/**
* @param {?} slickItem
* @return {?}
*/
SlickCarouselComponent.prototype.addSlide = /**
* @param {?} slickItem
* @return {?}
*/
function (slickItem) {
this._addedSlides.push(slickItem);
};
/**
* @param {?} slickItem
* @return {?}
*/
SlickCarouselComponent.prototype.removeSlide = /**
* @param {?} slickItem
* @return {?}
*/
function (slickItem) {
this._removedSlides.push(slickItem);
};
/**
* Slick Method
*/
/**
* Slick Method
* @param {?} index
* @return {?}
*/
SlickCarouselComponent.prototype.slickGoTo = /**
* Slick Method
* @param {?} index
* @return {?}
*/
function (index) {
var _this = this;
this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance.slick('slickGoTo', index);
}));
};
/**
* @return {?}
*/
SlickCarouselComponent.prototype.slickNext = /**
* @return {?}
*/
function () {
var _this = this;
this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance.slick('slickNext');
}));
};
/**
* @return {?}
*/
SlickCarouselComponent.prototype.slickPrev = /**
* @return {?}
*/
function () {
var _this = this;
this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance.slick('slickPrev');
}));
};
/**
* @return {?}
*/
SlickCarouselComponent.prototype.slickPause = /**
* @return {?}
*/
function () {
var _this = this;
this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance.slick('slickPause');
}));
};
/**
* @return {?}
*/
SlickCarouselComponent.prototype.slickPlay = /**
* @return {?}
*/
function () {
var _this = this;
this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance.slick('slickPlay');
}));
};
/**
* @return {?}
*/
SlickCarouselComponent.prototype.unslick = /**
* @return {?}
*/
function () {
var _this = this;
if (this.$instance) {
this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance.slick('unslick');
}));
this.$instance = undefined;
}
this.initialized = false;
};
/**
* @param {?} changes
* @return {?}
*/
SlickCarouselComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var _this = this;
if (this.initialized) {
/** @type {?} */
var config = changes['config'];
if (config.previousValue !== config.currentValue && config.currentValue !== undefined) {
/** @type {?} */
var refresh_1 = config.currentValue['refresh'];
/** @type {?} */
var newOptions_1 = Object.assign({}, config.currentValue);
delete newOptions_1['refresh'];
this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
_this.$instance.slick('slickSetOption', newOptions_1, refresh_1);
}));
}
}
};
SlickCarouselComponent.decorators = [
{ type: core.Component, args: [{
selector: 'ngx-slick-carousel',
exportAs: 'slick-carousel',
providers: [{
provide: forms.NG_VALUE_ACCESSOR,
useExisting: core.forwardRef((/**
* @return {?}
*/
function () { return SlickCarouselComponent; })),
multi: true
}],
template: '<ng-content></ng-content>'
}] }
];
/** @nocollapse */
SlickCarouselComponent.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: core.NgZone },
{ type: String, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] }
]; };
SlickCarouselComponent.propDecorators = {
config: [{ type: core.Input }],
afterChange: [{ type: core.Output }],
beforeChange: [{ type: core.Output }],
breakpoint: [{ type: core.Output }],
destroy: [{ type: core.Output }],
init: [{ type: core.Output }]
};
return SlickCarouselComponent;
}());
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;
}
var SlickItemDirective = /** @class */ (function () {
function SlickItemDirective(el, platformId, carousel) {
this.el = el;
this.platformId = platformId;
this.carousel = carousel;
}
/**
* @return {?}
*/
SlickItemDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (common.isPlatformBrowser(this.platformId)) {
this.carousel.addSlide(this);
}
};
/**
* @return {?}
*/
SlickItemDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (common.isPlatformBrowser(this.platformId)) {
this.carousel.removeSlide(this);
}
};
SlickItemDirective.decorators = [
{ type: core.Directive, args: [{
selector: '[ngxSlickItem]',
},] }
];
/** @nocollapse */
SlickItemDirective.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: String, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] },
{ type: SlickCarouselComponent, decorators: [{ type: core.Host }] }
]; };
return SlickItemDirective;
}());
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
*/
var SlickCarouselModule = /** @class */ (function () {
function SlickCarouselModule() {
}
SlickCarouselModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule
],
declarations: [
SlickCarouselComponent,
SlickItemDirective,
],
exports: [
SlickCarouselComponent,
SlickItemDirective,
]
},] }
];
return SlickCarouselModule;
}());
exports.SlickCarouselComponent = SlickCarouselComponent;
exports.SlickCarouselModule = SlickCarouselModule;
exports.SlickItemDirective = SlickItemDirective;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-slick-carousel.umd.js.map