import { Component, Input, ViewEncapsulation, ElementRef, Renderer2, ContentChild, ViewChild } from '@angular/core';
import { NzStepConnectService } from './nz-step-connect.service';
var NzStepComponent = (function () {
    function NzStepComponent(erf, nzStepConnectService, _renderer) {
        this.erf = erf;
        this.nzStepConnectService = nzStepConnectService;
        this._renderer = _renderer;
        this._status = 'wait';
        this._ifCustomStatus = false;
        this._last = false;
        this._processDot = false;
        this._direction = 'horizontal';
        this._el = erf.nativeElement;
    }
    Object.defineProperty(NzStepComponent.prototype, "nzStatus", {
        get: function () {
            return this._status;
        },
        set: function (status) {
            this._status = status;
            this._ifCustomStatus = true;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(NzStepComponent.prototype, "_current", {
        get: function () {
            return this._currentIndex;
        },
        set: function (current) {
            this._currentIndex = current;
            if (!this._ifCustomStatus) {
                if (current > this.index) {
                    this._status = 'finish';
                }
                else if (current === this.index) {
                    if (this.nzStepConnectService.errorIndex) {
                        this._status = 'error';
                    }
                    else {
                        this._status = 'process';
                    }
                }
                else {
                    this._status = 'wait';
                }
            }
            this.initClassMap();
        },
        enumerable: true,
        configurable: true
    });
    ;
    NzStepComponent.prototype.initClassMap = function () {
        this.stepStatusClass = (_a = {},
            _a['ant-steps-item'] = true,
            _a["ant-steps-status-wait"] = this._status === 'wait',
            _a["ant-steps-status-process"] = this._status === 'process',
            _a["ant-steps-status-finish"] = this._status === 'finish',
            _a["ant-steps-status-error"] = this._status === 'error',
            _a['ant-steps-item-last'] = this._last,
            _a['ant-steps-custom'] = !!this.nzIcon,
            _a['ant-steps-next-error'] = (this.nzStepConnectService.errorIndex === 'error' && this._current === this.index - 1),
            _a);
        for (var i in this.stepStatusClass) {
            if (this.stepStatusClass[i]) {
                this._renderer.addClass(this._el, i);
            }
            else {
                this._renderer.removeClass(this._el, i);
            }
        }
        var _a;
    };
    NzStepComponent.prototype.init = function () {
        var _this = this;
        // 记录个数
        this.index = this.nzStepConnectService.itemIndex;
        this._processDot = this.nzStepConnectService.processDot;
        this._direction = this.nzStepConnectService.direction;
        this._current = this.nzStepConnectService.current;
        this._processDotEventSubscription = this.nzStepConnectService.processDotEvent.subscribe(function (data) {
            _this._processDot = data;
        });
        this._directionEventSubscription = this.nzStepConnectService.directionEvent.subscribe(function (data) {
            _this._direction = data;
        });
        this._currentEventSubscription = this.nzStepConnectService.currentEvent.subscribe(function (data) {
            _this._current = data;
        });
        this._errorIndexObjectSubscription = this.nzStepConnectService.errorIndexObject.subscribe(function (data) {
            if (_this._current === _this.index) {
                _this._status = data;
            }
        });
        this.initClassMap();
        this.nzStepConnectService.itemIndex += 1;
        /** judge if last step */
        if (!this.erf.nativeElement.nextElementSibling) {
            this._last = true;
        }
        else {
            this.nzStepConnectService.lastElementSizeEvent.subscribe(function (data) {
                var count = data.count, width = data.width;
                _this._renderer.setStyle(_this.erf.nativeElement, 'width', (100 / (count - 1)) + '%');
                _this._renderer.setStyle(_this.erf.nativeElement, 'margin-right', (-(width / (count - 1) + 5)) + 'px');
                if (_this._direction === 'horizontal') {
                    _this._renderer.setStyle(_this._stepsTail.nativeElement, 'padding-right', ((width / (count - 1) + 5)) + 'px');
                }
            });
        }
    };
    NzStepComponent.prototype.ngOnInit = function () {
        this.init();
    };
    NzStepComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        if (this._last) {
            setTimeout(function (_) {
                _this.nzStepConnectService.lastElementSizeEvent.next({
                    count: _this.erf.nativeElement.parentElement.childElementCount,
                    width: _this.erf.nativeElement.firstElementChild.offsetWidth
                });
            });
        }
    };
    NzStepComponent.prototype.ngOnDestroy = function () {
        if (this._processDotEventSubscription) {
            this._processDotEventSubscription.unsubscribe();
        }
        if (this._directionEventSubscription) {
            this._directionEventSubscription.unsubscribe();
        }
        if (this._currentEventSubscription) {
            this._currentEventSubscription.unsubscribe();
        }
        if (this._errorIndexObjectSubscription) {
            this._errorIndexObjectSubscription.unsubscribe();
        }
    };
    return NzStepComponent;
}());
export { NzStepComponent };
NzStepComponent.decorators = [
    { type: Component, args: [{
                selector: 'nz-step',
                encapsulation: ViewEncapsulation.None,
                template: "\n    <div class=\"ant-steps-tail\" #stepsTail *ngIf=\"_last !== true\">\n      <i></i>\n    </div>\n    <div class=\"ant-steps-step\">\n      <div class=\"ant-steps-head\">\n        <div class=\"ant-steps-head-inner\">\n          <ng-template [ngIf]=\"!_processDot\">\n            <span class=\"ant-steps-icon anticon anticon-check\" *ngIf=\"_status === 'finish' && !nzIcon\"></span>\n            <span class=\"ant-steps-icon anticon anticon-cross\" *ngIf=\"_status === 'error'\"></span>\n            <span class=\"ant-steps-icon\" *ngIf=\"(_status === 'process' || _status === 'wait') && !nzIcon\">{{index + 1}}</span>\n            <span class=\"ant-steps-icon\" *ngIf=\"nzIcon\">\n            <ng-template [ngTemplateOutlet]=\"nzIcon\"></ng-template>\n          </span>\n          </ng-template>\n          <ng-template [ngIf]=\"_processDot\">\n            <span class=\"ant-steps-icon\">\n              <span class=\"ant-steps-icon-dot\"></span>\n            </span>\n          </ng-template>\n        </div>\n      </div>\n      <div class=\"ant-steps-main\">\n        <div class=\"ant-steps-title\">{{nzTitle}}</div>\n        <div class=\"ant-steps-description\">{{nzDescription}}</div>\n      </div>\n    </div>\n  ",
                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-steps {\n  font-size: 0;\n  line-height: 1.5;\n}\n.ant-steps .ant-steps-item {\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n}\n.ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-head-inner {\n  border-color: rgba(0, 0, 0, 0.25);\n  background-color: #fff;\n}\n.ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-head-inner > .ant-steps-icon {\n  color: rgba(0, 0, 0, 0.25);\n}\n.ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-head-inner > .ant-steps-icon .ant-steps-icon-dot {\n  background: rgba(0, 0, 0, 0.25);\n}\n.ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-title {\n  color: rgba(0, 0, 0, 0.43);\n}\n.ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-description {\n  color: rgba(0, 0, 0, 0.43);\n}\n.ant-steps .ant-steps-item.ant-steps-status-wait .ant-steps-tail > i {\n  background-color: #e9e9e9;\n}\n.ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-head-inner {\n  border-color: #108ee9;\n  background-color: #108ee9;\n}\n.ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-head-inner > .ant-steps-icon {\n  color: #fff;\n}\n.ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-head-inner > .ant-steps-icon .ant-steps-icon-dot {\n  background: #108ee9;\n}\n.ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-title {\n  color: rgba(0, 0, 0, 0.65);\n}\n.ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-description {\n  color: rgba(0, 0, 0, 0.65);\n}\n.ant-steps .ant-steps-item.ant-steps-status-process .ant-steps-tail > i {\n  background-color: #e9e9e9;\n}\n.ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-head-inner {\n  border-color: #108ee9;\n  background-color: #fff;\n}\n.ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-head-inner > .ant-steps-icon {\n  color: #108ee9;\n}\n.ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-head-inner > .ant-steps-icon .ant-steps-icon-dot {\n  background: #108ee9;\n}\n.ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-tail > i:after {\n  width: 100%;\n  background: #108ee9;\n  transition: all .6s;\n  opacity: 1;\n  box-shadow: 0 0 0 0 #108ee9;\n  animation: tailEffect .4s;\n}\n.ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-title {\n  color: rgba(0, 0, 0, 0.43);\n}\n.ant-steps .ant-steps-item.ant-steps-status-finish .ant-steps-description {\n  color: rgba(0, 0, 0, 0.43);\n}\n.ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-head-inner {\n  border-color: #f04134;\n  background-color: #fff;\n}\n.ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-head-inner > .ant-steps-icon {\n  color: #f04134;\n}\n.ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-head-inner > .ant-steps-icon .ant-steps-icon-dot {\n  background: #f04134;\n}\n.ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-title {\n  color: #f04134;\n}\n.ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-description {\n  color: #f04134;\n}\n.ant-steps .ant-steps-item.ant-steps-status-error .ant-steps-tail > i {\n  background-color: #e9e9e9;\n}\n.ant-steps .ant-steps-item.ant-steps-next-error .ant-steps-tail > i,\n.ant-steps .ant-steps-item.ant-steps-next-error .ant-steps-tail > i:after {\n  background-color: #f04134;\n}\n.ant-steps .ant-steps-item.ant-steps-custom .ant-steps-head-inner {\n  background: none;\n  border: 0;\n  width: auto;\n  height: auto;\n}\n.ant-steps .ant-steps-item.ant-steps-custom .ant-steps-head-inner > .ant-steps-icon {\n  font-size: 26px;\n  width: 26px;\n  height: 26px;\n}\n.ant-steps .ant-steps-item.ant-steps-custom.ant-steps-status-process .ant-steps-head-inner > .ant-steps-icon {\n  color: #108ee9;\n}\n.ant-steps .ant-steps-head,\n.ant-steps .ant-steps-main {\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n}\n.ant-steps .ant-steps-head {\n  background: #fff;\n}\n.ant-steps .ant-steps-head-inner {\n  display: block;\n  border: 1px solid rgba(0, 0, 0, 0.25);\n  width: 26px;\n  height: 26px;\n  line-height: 23px;\n  text-align: center;\n  border-radius: 26px;\n  font-size: 14px;\n  margin-right: 8px;\n  transition: background-color 0.3s ease, border-color 0.3s ease;\n}\n.ant-steps .ant-steps-head-inner > .ant-steps-icon {\n  line-height: 1;\n  color: #108ee9;\n  position: relative;\n}\n.ant-steps .ant-steps-head-inner > .ant-steps-icon.anticon {\n  font-size: 12px;\n}\n.ant-steps .ant-steps-head-inner > .ant-steps-icon.anticon-cross,\n.ant-steps .ant-steps-head-inner > .ant-steps-icon.anticon-check {\n  font-weight: bold;\n}\n.ant-steps .ant-steps-title {\n  font-size: 14px;\n  line-height: 26px;\n  color: rgba(0, 0, 0, 0.65);\n  font-weight: bold;\n  background-color: #fff;\n  display: inline-block;\n  padding-right: 10px;\n}\n.ant-steps .ant-steps-title > a:first-child:last-child {\n  color: rgba(0, 0, 0, 0.65);\n}\n.ant-steps .ant-steps-item:last-child .ant-steps-title {\n  padding-right: 0;\n  width: 100%;\n}\n.ant-steps .ant-steps-item:last-child .ant-steps-tail {\n  display: none;\n}\n.ant-steps .ant-steps-description {\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.43);\n}\n.ant-steps .ant-steps-tail {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  top: 13px;\n  padding: 0 10px;\n}\n.ant-steps .ant-steps-tail > i {\n  display: inline-block;\n  vertical-align: top;\n  background: #e9e9e9;\n  height: 1px;\n  border-radius: 1px;\n  width: 100%;\n  position: relative;\n}\n.ant-steps .ant-steps-tail > i:after {\n  position: absolute;\n  content: '';\n  top: 0;\n  width: 0;\n  background: #e9e9e9;\n  height: 100%;\n  opacity: 0;\n}\n.ant-steps.ant-steps-small .ant-steps-head-inner {\n  border: 1px solid rgba(0, 0, 0, 0.25);\n  width: 18px;\n  height: 18px;\n  line-height: 15px;\n  text-align: center;\n  border-radius: 18px;\n  font-size: 12px;\n  margin-right: 10px;\n}\n.ant-steps.ant-steps-small .ant-steps-head-inner > .ant-steps-icon.anticon {\n  display: inline-block;\n  font-size: 12px;\n  font-size: 9px 9;\n  transform: scale(0.75) rotate(0deg);\n  /* IE6-IE8 */\n  -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)\";\n  zoom: 1;\n  top: 0;\n}\n:root .ant-steps.ant-steps-small .ant-steps-head-inner > .ant-steps-icon.anticon {\n  filter: none;\n}\n:root .ant-steps.ant-steps-small .ant-steps-head-inner > .ant-steps-icon.anticon {\n  font-size: 12px;\n}\n.ant-steps.ant-steps-small .ant-steps-main {\n  margin-top: 0;\n}\n.ant-steps.ant-steps-small .ant-steps-title {\n  font-size: 12px;\n  line-height: 18px;\n  color: rgba(0, 0, 0, 0.65);\n  font-weight: bold;\n}\n.ant-steps.ant-steps-small .ant-steps-description {\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.43);\n}\n.ant-steps.ant-steps-small .ant-steps-tail {\n  top: 8px;\n  padding: 0 8px;\n}\n.ant-steps.ant-steps-small .ant-steps-tail > i {\n  height: 1px;\n  border-radius: 1px;\n  width: 100%;\n}\n.ant-steps.ant-steps-small .ant-steps-custom .ant-steps-head-inner > .ant-steps-icon {\n  font-size: 18px;\n  width: 18px;\n  height: 18px;\n}\n.ant-steps-vertical > .ant-steps-item {\n  display: block;\n}\n.ant-steps-vertical > .ant-steps-item > .ant-steps-tail {\n  position: absolute;\n  left: 13px;\n  top: 0;\n  height: 100%;\n  width: 1px;\n  padding: 30px 0 4px;\n}\n.ant-steps-vertical > .ant-steps-item > .ant-steps-tail > i {\n  height: 100%;\n  width: 1px;\n}\n.ant-steps-vertical > .ant-steps-item > .ant-steps-tail > i:after {\n  height: 0;\n  width: 100%;\n}\n.ant-steps-vertical .ant-steps-status-finish .ant-steps-tail > i:after {\n  height: 100%;\n}\n.ant-steps-vertical .ant-steps-head {\n  float: left;\n}\n.ant-steps-vertical .ant-steps-head-inner {\n  margin-right: 16px;\n}\n.ant-steps-vertical .ant-steps-main {\n  min-height: 47px;\n  overflow: hidden;\n  display: block;\n}\n.ant-steps-vertical .ant-steps-main .ant-steps-title {\n  line-height: 26px;\n}\n.ant-steps-vertical .ant-steps-main .ant-steps-description {\n  padding-bottom: 12px;\n}\n.ant-steps-vertical.ant-steps-small .ant-steps-tail {\n  position: absolute;\n  left: 9px;\n  top: 0;\n  padding: 22px 0 4px;\n}\n.ant-steps-vertical.ant-steps-small .ant-steps-tail > i {\n  height: 100%;\n}\n.ant-steps-vertical.ant-steps-small .ant-steps-title {\n  line-height: 18px;\n}\n.ant-steps-horizontal.ant-steps-hidden {\n  visibility: hidden;\n}\n.ant-steps-horizontal .ant-steps-description {\n  max-width: 120px;\n}\n.ant-steps-horizontal .ant-steps-item:not(:first-child) .ant-steps-head {\n  padding-left: 10px;\n  margin-left: -10px;\n}\n.ant-steps-dot .ant-steps-item .ant-steps-step {\n  display: inline-block;\n  text-align: center;\n  width: 120px;\n}\n.ant-steps-dot .ant-steps-item:not(:first-child) .ant-steps-head {\n  margin-left: 0;\n  padding-left: 0;\n}\n.ant-steps-dot .ant-steps-tail {\n  margin: 0 0 0 60px;\n  padding: 0;\n  width: 100%;\n  top: 1px;\n}\n.ant-steps-dot .ant-steps-tail > i {\n  height: 3px;\n}\n.ant-steps-dot .ant-steps-head {\n  display: inline-block;\n  padding-right: 0;\n}\n.ant-steps-dot .ant-steps-head-inner {\n  margin: 0 auto;\n  width: 5px;\n  height: 5px;\n  line-height: 5px;\n  border: 0;\n}\n.ant-steps-dot .ant-steps-head-inner .ant-steps-icon-dot {\n  float: left;\n  width: 100%;\n  height: 100%;\n  border-radius: 2.5px;\n  position: relative;\n}\n.ant-steps-dot .ant-steps-head-inner .ant-steps-icon-dot:after {\n  content: '';\n  background: rgba(255, 255, 255, 0.001);\n  width: 40px;\n  height: 24px;\n  position: absolute;\n  top: -8px;\n  left: -16px;\n}\n.ant-steps-dot .ant-steps-head-inner .ant-steps-icon-dot:hover {\n  transform: scale(1.3);\n}\n.ant-steps-dot .ant-steps-main {\n  display: block;\n  margin-top: 10px;\n}\n.ant-steps-dot .ant-steps-main .ant-steps-title {\n  padding-right: 0;\n  background-color: transparent;\n}\n.ant-steps-dot .ant-steps-status-process .ant-steps-head {\n  top: -1px;\n}\n.ant-steps-dot .ant-steps-status-process .ant-steps-head-inner {\n  width: 7px;\n  height: 7px;\n  line-height: 7px;\n}\n.ant-steps-dot .ant-steps-status-process .ant-steps-head-inner .ant-steps-icon-dot {\n  border-radius: 3.5px;\n}\n.ant-steps-dot.ant-steps-vertical .ant-steps-tail {\n  left: 2px;\n  height: 100%;\n  padding: 0;\n  top: 15px;\n}\n.ant-steps-dot.ant-steps-vertical .ant-steps-tail > i {\n  height: 100%;\n  width: 3px;\n}\n.ant-steps-dot.ant-steps-vertical .ant-steps-head {\n  top: 12px;\n  left: 1px;\n}\n.ant-steps-dot.ant-steps-vertical .ant-steps-status-process .ant-steps-head {\n  left: 0;\n}\n@keyframes tailEffect {\n  to {\n    box-shadow: 0 0 3px 3px transparent;\n  }\n}\n",
                    ".ant-steps-horizontal nz-step:not(:first-child) .ant-steps-head {\n  padding-left: 10px;\n  margin-left: -10px;\n}\nnz-step {\n  display: block;\n}\n"
                ]
            },] },
];
/** @nocollapse */
NzStepComponent.ctorParameters = function () { return [
    { type: ElementRef, },
    { type: NzStepConnectService, },
    { type: Renderer2, },
]; };
NzStepComponent.propDecorators = {
    'nzIcon': [{ type: ContentChild, args: ['nzIcon',] },],
    '_stepsTail': [{ type: ViewChild, args: ['stepsTail',] },],
    'nzStatus': [{ type: Input },],
    'nzTitle': [{ type: Input },],
    'nzDescription': [{ type: Input },],
};
