import * as tslib_1 from "tslib";
import { Component, Input, ElementRef, Renderer2, ChangeDetectorRef, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { OnChange } from '../core/decorators';
/**
 * Carousel Component
 */
var CarouselComponent = /** @class */ (function () {
    function CarouselComponent(_el, _render, _cd) {
        this._el = _el;
        this._render = _render;
        this._cd = _cd;
        /**
         * Whether the carousel can auto play
         * @default false
         */
        this.auto = false;
        /**
         * The time interval(milliseconds) when auto play
         * @default 3000
         */
        this.interval = 3000;
        /**
         * Whether the carousel show title navigation
         * @default false
         */
        this.showTitle = false;
        /**
         * carousel datasource, each item with a `title`、`imageUrl`、`href`(optional) property
         * @default []
         */
        this.datasource = [];
        /**
         * carousel active index
         * @default 0
         */
        this.activeIndex = 0;
        /**
         * carousel custom style skin, will add a class `nb-carousel-skinName` to the host element
         * @default ''
         */
        this.skin = '';
    }
    Object.defineProperty(CarouselComponent.prototype, "leftPos", {
        /**
         * compute left position
         *
         * @readonly
         * @docs-private
         */
        get: function () {
            return -this.activeIndex * this.width;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * navigate to specific index
     *
     * @param {number} idx - index
     */
    CarouselComponent.prototype.navigate = function (idx) {
        this.activeIndex = idx;
    };
    /**
     * navigate to prev item
     */
    CarouselComponent.prototype.prev = function () {
        this.activeIndex = this.activeIndex - 1;
    };
    /**
     * navigate to next item
     */
    CarouselComponent.prototype.next = function () {
        this.activeIndex = this.activeIndex + 1;
    };
    CarouselComponent.prototype.ngAfterViewInit = function () {
        var self = this;
        var className = self._el.nativeElement.className;
        if (self.skin) {
            className += " nb-carousel-" + self.skin;
            self._render.setAttribute(self._el.nativeElement, 'class', className);
        }
        this.poll();
    };
    CarouselComponent.prototype._onMouseOver = function () {
        clearInterval(this._timer);
    };
    CarouselComponent.prototype._onMouseOut = function () {
        this.poll();
    };
    /**
     * @docs-private
     */
    CarouselComponent.prototype.poll = function () {
        var self = this;
        if (self.auto) {
            self._timer = setInterval(function () {
                self.next();
                if (self.activeIndex === self.datasource.length) {
                    self.activeIndex = 0;
                }
                self._cd.markForCheck();
            }, self.interval);
        }
    };
    CarouselComponent.prototype.ngOnDestroy = function () {
        clearInterval(this._timer);
    };
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], CarouselComponent.prototype, "auto", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], CarouselComponent.prototype, "interval", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], CarouselComponent.prototype, "showTitle", void 0);
    tslib_1.__decorate([
        OnChange(),
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], CarouselComponent.prototype, "width", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Array)
    ], CarouselComponent.prototype, "datasource", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], CarouselComponent.prototype, "activeIndex", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], CarouselComponent.prototype, "skin", void 0);
    CarouselComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-carousel',
            template: "<div class=\"image-container\" [style.width.px]=\"width\"><div class=\"image-container-inner\" [style.width.px]=\"width * datasource.length\" [style.left.px]=\"leftPos\"><div class=\"image-item\" *ngFor=\"let image of datasource\"><ng-container *ngIf=\"image.link\"><a href=\"{{image.link}}\" target=\"_blank\"><img class=\"image\" src=\"{{image.imageUrl}}\" alt=\"{{image.title}}\" [style.width.px]=\"width\"></a></ng-container><ng-container *ngIf=\"!image.link\"><img class=\"image\" src=\"{{image.imageUrl}}\" alt=\"{{image.title}}\" [style.width.px]=\"width\"></ng-container></div></div><div *ngIf=\"showTitle\" class=\"image-titles-background\"><div class=\"image-titles\"><div class=\"image-title\" *ngFor=\"let image of datasource; index as idx\" [class.active]=\"idx == activeIndex\" (click)=\"navigate(idx)\">{{ image.title }}</div></div></div></div><div *ngIf=\"activeIndex != 0\" class=\"left-arrow\" (click)=\"prev()\"><i class=\"iconfont icon-left\"></i></div><div *ngIf=\"activeIndex != datasource.length - 1\" class=\"right-arrow\" (click)=\"next()\"><i class=\"iconfont icon-right\"></i></div><div *ngIf=\"!showTitle\" class=\"navigator-items\"><div class=\"navigator-item\" *ngFor=\"let image of datasource; index as idx\" [class.active]=\"idx == activeIndex\" (click)=\"navigate(idx)\"></div></div><div class=\"navigator-text\">{{ activeIndex + 1 }}/{{ datasource.length }}</div>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            preserveWhitespaces: false,
            host: {
                'class': 'nb-widget nb-carousel',
                '(mouseover)': '_onMouseOver()',
                '(mouseout)': '_onMouseOut()'
            },
            exportAs: 'nbCarousel'
        }),
        tslib_1.__metadata("design:paramtypes", [ElementRef,
            Renderer2,
            ChangeDetectorRef])
    ], CarouselComponent);
    return CarouselComponent;
}());
export { CarouselComponent };
//# sourceMappingURL=carousel.js.map