import * as tslib_1 from "tslib";
import { Component, Input, EventEmitter, ElementRef, Renderer2, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, QueryList, Optional, ChangeDetectorRef } from '@angular/core';
import { OnChange } from '../core/decorators';
/**
 * Step component
 */
var StepComponent = /** @class */ (function () {
    function StepComponent(_el, _render) {
        var _this = this;
        this._el = _el;
        this._render = _render;
        /** current step value */
        this.value = 1;
        this.valueChange = new EventEmitter();
        // bind value change, update children status
        this.valueChange.subscribe(function (step) {
            _this.value = step;
            _this.updateChildrenStatus(step);
        });
    }
    StepComponent.prototype.ngAfterViewInit = function () {
        // add skin class
        var className = this._el.nativeElement.className;
        if (this.skin) {
            className += " nb-step-" + this.skin;
            this._render.setAttribute(this._el.nativeElement, 'class', className);
        }
    };
    /**
     * update children status
     *
     * @param {number} step - current step
     * @docs-private
     */
    StepComponent.prototype.updateChildrenStatus = function (step) {
        if (this._children) {
            this._children.forEach(function (v) {
                if (v.value === step) {
                    v.active = true;
                    v.success = false;
                }
                else if (v.value < step) {
                    v.success = true;
                    v.active = false;
                }
                else {
                    v.active = false;
                    v.success = false;
                }
            });
        }
    };
    tslib_1.__decorate([
        OnChange(),
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], StepComponent.prototype, "value", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], StepComponent.prototype, "skin", void 0);
    tslib_1.__decorate([
        ContentChildren(forwardRef(function () { return StepItemComponent; })),
        tslib_1.__metadata("design:type", QueryList)
    ], StepComponent.prototype, "_children", void 0);
    StepComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-step',
            template: "<ng-content></ng-content>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            preserveWhitespaces: false,
            host: {
                'class': 'nb-widget nb-step'
            }
        }),
        tslib_1.__metadata("design:paramtypes", [ElementRef, Renderer2])
    ], StepComponent);
    return StepComponent;
}());
export { StepComponent };
/**
 * Step item component
 */
var StepItemComponent = /** @class */ (function () {
    function StepItemComponent(parentBox, _el, _render, _cd) {
        this._el = _el;
        this._render = _render;
        this._cd = _cd;
        this._success = false;
        this._parentBox = parentBox;
    }
    Object.defineProperty(StepItemComponent.prototype, "success", {
        /** Whether the step item is done success */
        get: function () { return this._success; },
        set: function (value) {
            this._success = !!value;
            this._cd.markForCheck();
        },
        enumerable: true,
        configurable: true
    });
    StepItemComponent.prototype.ngOnInit = function () {
        if (this._parentBox) {
            var currentStep = this._parentBox.value;
            if (this.value === currentStep) {
                this.active = true;
                this.success = false;
            }
            else if (this.value < currentStep) {
                this.active = false;
                this.success = true;
            }
            else {
                this.active = false;
                this.success = false;
            }
            this._cd.markForCheck();
        }
    };
    StepItemComponent.prototype.ngAfterViewInit = function () {
        var className = this._el.nativeElement.className;
        if (this.skin) {
            className += " nb-step-item-" + this.skin;
            this._render.setAttribute(this._el.nativeElement, 'class', className);
        }
    };
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Number)
    ], StepItemComponent.prototype, "value", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Object),
        tslib_1.__metadata("design:paramtypes", [Object])
    ], StepItemComponent.prototype, "success", null);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], StepItemComponent.prototype, "error", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], StepItemComponent.prototype, "active", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], StepItemComponent.prototype, "skin", void 0);
    StepItemComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-step-item',
            template: "\n        <div class=\"nb-step-item-title\">\n            <ng-container *ngIf=\"success\"><i class=\"iconfont icon-check\"></i></ng-container>\n            <ng-container *ngIf=\"!success\">{{ value }}</ng-container>\n        </div>\n        <div class=\"nb-step-item-content\">\n            <ng-content></ng-content>\n        </div>\n    ",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            preserveWhitespaces: false,
            host: {
                'class': 'nb-widget nb-step-item',
                '[class.active]': 'active',
                '[class.success]': 'success',
                '[class.error]': 'error'
            }
        }),
        tslib_1.__param(0, Optional()),
        tslib_1.__metadata("design:paramtypes", [StepComponent,
            ElementRef,
            Renderer2,
            ChangeDetectorRef])
    ], StepItemComponent);
    return StepItemComponent;
}());
export { StepItemComponent };
//# sourceMappingURL=step.js.map