import { Component, ContentChildren, ViewChild, HostBinding, Renderer2, Input, ElementRef, ViewEncapsulation } from '@angular/core';
import { NzCarouselContentDirective } from './nz-carousel-content.directive';
var NzCarouselComponent = (function () {
    function NzCarouselComponent(hostElement, _renderer) {
        this.hostElement = hostElement;
        this._renderer = _renderer;
        this.activeIndex = 0;
        this.transform = 'translate3d(0px, 0px, 0px)';
        this.nzAutoPlay = false;
        this.nzDots = true;
        this.nzEffect = 'scrollx';
        this.nzVertical = false;
        this._nzCarousel = true;
    }
    Object.defineProperty(NzCarouselComponent.prototype, "_slideContents", {
        set: function (value) {
            this.slideContents = value;
            this.renderContent();
        },
        enumerable: true,
        configurable: true
    });
    NzCarouselComponent.prototype.setActive = function (content, i) {
        this.clearInterval();
        if (this.nzAutoPlay) {
            this.createInterval();
        }
        this.activeIndex = i;
        if (this.nzEffect !== 'fade') {
            if (!this.nzVertical) {
                this.transform = "translate3d(" + -this.activeIndex * this.hostElement.nativeElement.offsetWidth + "px, 0px, 0px)";
            }
            else {
                this.transform = "translate3d(0px, " + -this.activeIndex * this.hostElement.nativeElement.offsetHeight + "px, 0px)";
            }
        }
        this.slideContents.forEach(function (slide) {
            slide.isActive = false;
        });
        content.isActive = true;
    };
    NzCarouselComponent.prototype.ngAfterViewInit = function () {
        this.renderContent();
    };
    NzCarouselComponent.prototype.renderContent = function () {
        var _this = this;
        setTimeout(function (_) {
            if (_this.slideContents.first) {
                _this.slideContents.first.isActive = true;
            }
            _this.slideContents.forEach(function (content, i) {
                content.width = _this.hostElement.nativeElement.offsetWidth;
                if (_this.nzEffect === 'fade') {
                    content.fadeMode = true;
                    if (!_this.nzVertical) {
                        content.left = -i * content.width;
                    }
                    else {
                        content.top = -i * _this.hostElement.nativeElement.offsetHeight;
                    }
                }
            });
            if (_this.nzAutoPlay) {
                _this.createInterval();
            }
            if (_this.nzVertical) {
                _this._renderer.removeStyle(_this.slickList.nativeElement, 'height');
                if (_this.slideContents.first) {
                    _this._renderer.setStyle(_this.slickList.nativeElement, 'height', _this.slideContents.first.nativeElement.offsetHeight + "px");
                }
                _this._renderer.removeStyle(_this.slickTrack.nativeElement, 'height');
                _this._renderer.setStyle(_this.slickTrack.nativeElement, 'height', _this.slideContents.length * _this.hostElement.nativeElement.offsetHeight + "px");
            }
            else {
                _this._renderer.removeStyle(_this.slickList.nativeElement, 'height');
                _this._renderer.setStyle(_this.slickList.nativeElement, 'height', _this.hostElement.nativeElement.offsetHeight + "px");
                _this._renderer.removeStyle(_this.slickTrack.nativeElement, 'width');
                _this._renderer.setStyle(_this.slickTrack.nativeElement, 'width', _this.slideContents.length * _this.hostElement.nativeElement.offsetWidth + "px");
            }
        });
    };
    NzCarouselComponent.prototype.createInterval = function () {
        var _this = this;
        this.interval = setInterval(function (_) {
            if (_this.activeIndex < _this.slideContents.length - 1) {
                _this.activeIndex++;
            }
            else {
                _this.activeIndex = 0;
            }
            _this.setActive(_this.slideContents.toArray()[_this.activeIndex], _this.activeIndex);
        }, 3000);
    };
    NzCarouselComponent.prototype.clearInterval = function () {
        if (this.interval) {
            clearInterval(this.interval);
            this.interval = null;
        }
    };
    NzCarouselComponent.prototype.ngOnDestroy = function () {
        this.clearInterval();
    };
    return NzCarouselComponent;
}());
export { NzCarouselComponent };
NzCarouselComponent.decorators = [
    { type: Component, args: [{
                selector: 'nz-carousel',
                encapsulation: ViewEncapsulation.None,
                template: "\n    <div class=\"slick-initialized slick-slider\" [class.slick-vertical]=\"nzVertical\">\n      <div class=\"slick-list\" #slickList>\n        <div class=\"slick-track\" style=\"opacity: 1;\" [style.transform]=\"transform\" #slickTrack>\n          <ng-content></ng-content>\n        </div>\n      </div>\n      <ul class=\"slick-dots\" style=\"display: block;\" *ngIf=\"nzDots\">\n        <li [class.slick-active]=\"content.isActive\" *ngFor=\"let content of slideContents; let i =index\" (click)=\"setActive(content,i)\">\n          <button>1</button>\n        </li>\n      </ul>\n    </div>",
                styles: [
                    "/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */\n/* stylelint-disable declaration-bang-space-before */\n/* stylelint-disable declaration-bang-space-before */\n.ant-carousel .slick-slider {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  -webkit-touch-callout: none;\n  -ms-touch-action: pan-y;\n  touch-action: pan-y;\n  -webkit-tap-highlight-color: transparent;\n}\n.ant-carousel .slick-list {\n  position: relative;\n  overflow: hidden;\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n.ant-carousel .slick-list:focus {\n  outline: none;\n}\n.ant-carousel .slick-list.dragging {\n  cursor: pointer;\n}\n.ant-carousel .slick-slider .slick-track,\n.ant-carousel .slick-slider .slick-list {\n  transform: translate3d(0, 0, 0);\n}\n.ant-carousel .slick-track {\n  position: relative;\n  left: 0;\n  top: 0;\n  display: block;\n}\n.ant-carousel .slick-track:before,\n.ant-carousel .slick-track:after {\n  content: \"\";\n  display: table;\n}\n.ant-carousel .slick-track:after {\n  clear: both;\n}\n.slick-loading .ant-carousel .slick-track {\n  visibility: hidden;\n}\n.ant-carousel .slick-slide {\n  float: left;\n  height: 100%;\n  min-height: 1px;\n  display: none;\n}\n[dir=\"rtl\"] .ant-carousel .slick-slide {\n  float: right;\n}\n.ant-carousel .slick-slide img {\n  display: block;\n}\n.ant-carousel .slick-slide.slick-loading img {\n  display: none;\n}\n.ant-carousel .slick-slide.dragging img {\n  pointer-events: none;\n}\n.ant-carousel .slick-initialized .slick-slide {\n  display: block;\n}\n.ant-carousel .slick-loading .slick-slide {\n  visibility: hidden;\n}\n.ant-carousel .slick-vertical .slick-slide {\n  display: block;\n  height: auto;\n  border: 1px solid transparent;\n}\n.ant-carousel .slick-arrow.slick-hidden {\n  display: none;\n}\n.ant-carousel .slick-prev,\n.ant-carousel .slick-next {\n  position: absolute;\n  display: block;\n  height: 20px;\n  width: 20px;\n  line-height: 0;\n  font-size: 0;\n  cursor: pointer;\n  background: transparent;\n  color: transparent;\n  top: 50%;\n  margin-top: -10px;\n  padding: 0;\n  border: 0;\n  outline: none;\n}\n.ant-carousel .slick-prev:hover,\n.ant-carousel .slick-next:hover,\n.ant-carousel .slick-prev:focus,\n.ant-carousel .slick-next:focus {\n  outline: none;\n  background: transparent;\n  color: transparent;\n}\n.ant-carousel .slick-prev:hover:before,\n.ant-carousel .slick-next:hover:before,\n.ant-carousel .slick-prev:focus:before,\n.ant-carousel .slick-next:focus:before {\n  opacity: 1;\n}\n.ant-carousel .slick-prev.slick-disabled:before,\n.ant-carousel .slick-next.slick-disabled:before {\n  opacity: 0.25;\n}\n.ant-carousel .slick-prev {\n  left: -25px;\n}\n.ant-carousel .slick-prev:before {\n  content: \"\u2190\";\n}\n.ant-carousel .slick-next {\n  right: -25px;\n}\n.ant-carousel .slick-next:before {\n  content: \"\u2192\";\n}\n.ant-carousel .slick-dots {\n  position: absolute;\n  bottom: 12px;\n  list-style: none;\n  display: block;\n  text-align: center;\n  padding: 0;\n  width: 100%;\n  height: 3px;\n}\n.ant-carousel .slick-dots li {\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  text-align: center;\n  margin: 0 2px;\n  padding: 0;\n}\n.ant-carousel .slick-dots li button {\n  border: 0;\n  cursor: pointer;\n  background: #fff;\n  opacity: 0.3;\n  display: block;\n  width: 16px;\n  height: 3px;\n  border-radius: 1px;\n  outline: none;\n  font-size: 0;\n  color: transparent;\n  transition: all .5s;\n}\n.ant-carousel .slick-dots li button:hover,\n.ant-carousel .slick-dots li button:focus {\n  opacity: 0.75;\n}\n.ant-carousel .slick-dots li.slick-active button {\n  background: #fff;\n  opacity: 1;\n  width: 24px;\n}\n.ant-carousel .slick-dots li.slick-active button:hover,\n.ant-carousel .slick-dots li.slick-active button:focus {\n  opacity: 1;\n}\n.ant-carousel-vertical .slick-dots {\n  width: 3px;\n  bottom: auto;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  height: auto;\n}\n.ant-carousel-vertical .slick-dots li {\n  margin: 0 2px;\n  vertical-align: baseline;\n}\n.ant-carousel-vertical .slick-dots li button {\n  width: 3px;\n  height: 16px;\n}\n.ant-carousel-vertical .slick-dots li.slick-active button {\n  width: 3px;\n  height: 24px;\n}\n",
                    "nz-carousel {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\nnz-carousel .slick-track {\n  transition: all 0.5s ease;\n}\nnz-carousel .slick-track .slick-slide {\n  transition: opacity 500ms ease;\n}\n"
                ]
            },] },
];
/** @nocollapse */
NzCarouselComponent.ctorParameters = function () { return [
    { type: ElementRef, },
    { type: Renderer2, },
]; };
NzCarouselComponent.propDecorators = {
    '_slideContents': [{ type: ContentChildren, args: [NzCarouselContentDirective,] },],
    'slickList': [{ type: ViewChild, args: ['slickList',] },],
    'slickTrack': [{ type: ViewChild, args: ['slickTrack',] },],
    'nzAutoPlay': [{ type: Input },],
    'nzDots': [{ type: Input },],
    'nzEffect': [{ type: Input },],
    'nzVertical': [{ type: Input }, { type: HostBinding, args: ['class.ant-carousel-vertical',] },],
    '_nzCarousel': [{ type: HostBinding, args: ['class.ant-carousel',] },],
};
