import { Component, ContentChildren, HostBinding, Input, QueryList, } from '@angular/core';
import { R_STEPPER } from './stepper-tokens';
import { RStepComponent } from './step.component';
export class RStepperComponent {
    constructor() {
        this._selectedIndex = 0;
        this._disableStepNavigation = false;
        /**
         * Stepper orientation - `horizontal`|`vertical`
         */
        this.orientation = 'horizontal';
        this._linear = true;
    }
    /**
     * Selected step index
     */
    get selectedIndex() {
        return this._selectedIndex;
    }
    set selectedIndex(index) {
        if (!this.steps) {
            this._selectedIndex = index;
            return;
        }
        this.markCurrentStepInteracted();
        if (this.canBeSelected(index)) {
            this._selectedIndex = index;
        }
    }
    /**
     * Disables navigation by clicking on steps. False by default
     * @param {boolean} value
     */
    set disableStepNavigation(value) {
        this._disableStepNavigation = !!value;
    }
    get disableStepNavigation() {
        return this._disableStepNavigation;
    }
    /**
     * Selected step component
     */
    get selected() {
        return this.steps ? this.steps.toArray()[this.selectedIndex] : undefined;
    }
    set selected(step) {
        if (!this.steps) {
            return;
        }
        this.selectedIndex = this.steps.toArray().indexOf(step);
    }
    /**
     * Allow moving forward only if the current step is complete
     * @default true
     */
    set linear(value) {
        this._linear = !!value;
    }
    get linear() {
        return this._linear;
    }
    get vertical() {
        return this.orientation === 'vertical';
    }
    get horizontal() {
        return this.orientation === 'horizontal';
    }
    /**
     * Navigate to next step
     * */
    next() {
        this.selectedIndex = Math.min(this.selectedIndex + 1, this.steps.length - 1);
    }
    /**
     * Navigate to previous step
     * */
    previous() {
        this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
    }
    /**
     * Reset stepper and stepControls to initial state
     * */
    reset() {
        this._selectedIndex = 0;
        this.steps.forEach(step => step.reset());
    }
    isStepSelected(step) {
        return this.selected === step;
    }
    /*
     * @docs-private
     **/
    getStepTemplate(step) {
        if (step.isLabelTemplate) {
            return step.label;
        }
        return null;
    }
    isStepValid(index) {
        return this.steps.toArray()[index].completed;
    }
    canBeSelected(indexToCheck) {
        const noSteps = !this.steps || this.steps.length === 0;
        if (noSteps || indexToCheck < 0 || indexToCheck >= this.steps.length) {
            return false;
        }
        if (indexToCheck <= this.selectedIndex || !this.linear) {
            return true;
        }
        let isAllStepsValid = true;
        for (let i = this.selectedIndex; i < indexToCheck; i++) {
            if (!this.isStepValid(i)) {
                isAllStepsValid = false;
                break;
            }
        }
        return isAllStepsValid;
    }
    markCurrentStepInteracted() {
        if (this.selected) {
            this.selected.interacted = true;
        }
    }
}
RStepperComponent.decorators = [
    { type: Component, args: [{
                selector: 'r-stepper',
                template: "<ng-template><ng-content select=\"r-step\"></ng-content></ng-template>\r\n<div class=\"header\">\r\n  <ng-container *ngFor=\"let step of steps; let index = index; let first = first\">\r\n\r\n    <div *ngIf=\"!first && !step.hidden\"\r\n         [class.connector-past]=\"index <= selectedIndex\"\r\n         class=\"connector\"></div>\r\n\r\n    <div *ngIf=\"!step.hidden\" class=\"step\"\r\n         [class.selected]=\"isStepSelected(step)\"\r\n         [class.completed]=\"!isStepSelected(step) && step.completed\"\r\n         [class.noninteractive]=\"disableStepNavigation\"\r\n         (click)=\"!disableStepNavigation && step.select()\">\r\n      <div class=\"label-index\">\r\n        <span *ngIf=\"!step.completed || isStepSelected(step)\">{{ index + 1 }}</span>\r\n        <r-icon *ngIf=\"!isStepSelected(step) && step.completed\" icon=\"checkmark-outline\" pack=\"r-components-essentials\">\r\n        </r-icon>\r\n      </div>\r\n      <div class=\"label\">\r\n        <ng-container *ngIf=\"step.isLabelTemplate\">\r\n          <ng-container *ngTemplateOutlet=\"getStepTemplate(step)\"></ng-container>\r\n        </ng-container>\r\n        <span *ngIf=\"!step.isLabelTemplate\">{{ step.label }}</span>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n<div class=\"step-content\">\r\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\r\n</div>\r\n",
                providers: [{ provide: R_STEPPER, useExisting: RStepperComponent }],
                styles: [":host(.horizontal) .header .step{flex-direction:column}:host(.horizontal) .header .connector{height:2px}:host(.horizontal) .label-index{margin-bottom:10px}:host(.vertical){display:flex;height:100%}:host(.vertical) .header{flex-direction:column}:host(.vertical) .header .label{margin:0 10px}:host(.vertical) .header .connector{width:2px}.header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.header .connector{flex:auto}.header .step{display:flex;align-items:center;cursor:pointer}.header .step.noninteractive{cursor:default}.header .label-index{display:flex;justify-content:center;align-items:center}.header .label{width:-webkit-max-content;width:-moz-max-content;width:max-content}"]
            },] }
];
RStepperComponent.propDecorators = {
    selectedIndex: [{ type: Input }],
    disableStepNavigation: [{ type: Input }],
    selected: [{ type: Input }],
    orientation: [{ type: Input }],
    linear: [{ type: Input }],
    vertical: [{ type: HostBinding, args: ['class.vertical',] }],
    horizontal: [{ type: HostBinding, args: ['class.horizontal',] }],
    steps: [{ type: ContentChildren, args: [RStepComponent,] }]
};
//# sourceMappingURL=stepper.component.js.map