import { Component, Input, ContentChildren, Output, EventEmitter, } from '@angular/core';
import { EvoStepperItemComponent } from './evo-stepper-item/evo-stepper-item.component';
import { map } from 'rxjs/operators';
import { concat, asyncScheduler, of, scheduled, merge } from 'rxjs';
import { EvoStepperEvent, EvoStepperEvents } from './evo-stepper-events';
import * as i0 from "@angular/core";
import * as i1 from "./evo-stepper-events";
import * as i2 from "@angular/common";
import * as i3 from "../../directives/evo-ui-class.directive";
export class EvoStepperComponent {
    constructor(cd, stepperEvents) {
        this.cd = cd;
        this.stepperEvents = stepperEvents;
        this.currentStepIndex = 0;
        this.clickableItems = false;
        this.onChange = new EventEmitter();
        this.clickItem = new EventEmitter();
    }
    ngAfterViewInit() {
        this.stepsList$ = concat(scheduled(of(null), asyncScheduler), merge(this.stepComponentsList.changes, this.stepperEvents.getEvents(EvoStepperEvent.LABEL_CHANGED))).pipe(map(() => this.getStepsList()));
        this.cd.detectChanges();
    }
    ngOnChanges(changes) {
        if (this.stepComponentsList && changes.currentStepIndex !== undefined) {
            const index = changes.currentStepIndex.currentValue;
            this.changeCurrentStep(index);
        }
    }
    getStepsList() {
        const currentStepComponent = this.stepComponentsList.find((stepComponent, i) => i === this.currentStepIndex);
        currentStepComponent.isSelected = true;
        return this.stepComponentsList.map(({ label }) => ({ label }));
    }
    changeCurrentStep(index) {
        this.stepComponentsList.forEach((step, i) => step.isSelected = (index === i));
        this.currentStepIndex = index;
        this.onChange.emit(index);
        this.cd.markForCheck();
    }
    handleItemClick(index) {
        if (this.clickableItems) {
            this.clickItem.emit(index);
        }
    }
}
EvoStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoStepperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.EvoStepperEvents }], target: i0.ɵɵFactoryTarget.Component });
EvoStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EvoStepperComponent, selector: "evo-stepper", inputs: { currentStepIndex: "currentStepIndex", clickableItems: "clickableItems" }, outputs: { onChange: "onChange", clickItem: "clickItem" }, providers: [
        EvoStepperEvents,
    ], queries: [{ propertyName: "stepComponentsList", predicate: EvoStepperItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"evo-stepper\">\n\n  <ng-container\n    *ngIf=\"stepsList$ | async as stepsList\"\n  >\n\n    <div class=\"evo-stepper__current-step-name\">{{stepsList[currentStepIndex].label}}</div>\n\n    <!-- List -->\n    <div class=\"evo-stepper__list\">\n      <div\n        class=\"evo-stepper__item\"\n        *ngFor=\"let step of stepsList; index as i\"\n        [evoUiClass]=\"{'active': currentStepIndex == i, 'completed': i < currentStepIndex, 'clickable': clickableItems}\"\n        >\n\n        <div\n          class=\"evo-stepper__item-inner\"\n          (click)=\"handleItemClick(i)\"\n          >\n\n          <div class=\"evo-stepper__item-point\">\n              <div class=\"evo-stepper__item-number\">{{i + 1}}</div>\n          </div>\n\n          <div class=\"evo-stepper__item-name\">{{step.label}}</div>\n\n        </div>\n\n      </div>\n    </div>\n\n  </ng-container>\n\n  <!-- Content -->\n  <ng-content></ng-content>\n\n</div>\n", styles: [":host{display:block}.evo-stepper__current-step-name{display:none}.evo-stepper__list{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-bottom:40px}.evo-stepper__item{position:relative;display:flex;flex:1;flex-direction:column;justify-content:flex-start;align-items:center;padding:0 10px;text-align:center}.evo-stepper__item:before,.evo-stepper__item:after{position:absolute;top:13px;display:block;content:\"\";height:2px;background:#91B1B8}.evo-stepper__item:before{right:calc(50% + 16px);left:0}.evo-stepper__item:after{right:0;left:calc(50% + 16px)}.evo-stepper__item:first-child:before{display:none}.evo-stepper__item:last-child:after{display:none}.evo-stepper__item_completed:before,.evo-stepper__item_completed:after{background:#21C68B}.evo-stepper__item_completed .evo-stepper__item-point{background:#21C68B}.evo-stepper__item_completed .evo-stepper__item-point:before{top:6px}.evo-stepper__item_completed .evo-stepper__item-number{top:-24px}.evo-stepper__item_completed .evo-stepper__item-name{color:#21c68b}.evo-stepper__item_completed.evo-stepper__item_clickable .evo-stepper__item-inner{cursor:pointer}.evo-stepper__item_completed.evo-stepper__item_clickable .evo-stepper__item-point:hover{background:#4dd1a2}.evo-stepper__item_active:before{background:#21C68B}.evo-stepper__item_active:after{background:#91B1B8}.evo-stepper__item_active .evo-stepper__item-name{color:#21c68b}.evo-stepper__item_active .evo-stepper__item-point{background:#21C68B}.evo-stepper__item-inner{display:flex;flex-direction:column;align-items:center}.evo-stepper__item-point{position:relative;width:28px;height:28px;overflow:hidden;color:#fff;line-height:28px;text-align:center;background:#91B1B8;border-radius:50%;transition:background .3s}.evo-stepper__item-point:before{position:absolute;top:24px;left:11px;display:block;content:\"\";width:6px;height:12px;border-right:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;transform:rotate(45deg);transition:top .3s}.evo-stepper__item-number{position:relative;top:0;font-weight:600;transition:top .3s}.evo-stepper__item-name{margin-top:10px;color:#91b1b8;font-weight:600;transition:color .3s}@media (max-width: 768px){.evo-stepper__current-step-name{display:block;margin-bottom:12px;color:#21c68b;font-weight:600;text-align:center}.evo-stepper__list{margin-bottom:30px}.evo-stepper__item:before,.evo-stepper__item:after{top:7px}.evo-stepper__item:before{right:calc(50% + 10px)}.evo-stepper__item:after{left:calc(50% + 10px)}.evo-stepper__item_active .evo-stepper__item-point,.evo-stepper__item_completed .evo-stepper__item-point{border:2px solid #21C68B}.evo-stepper__item_completed .evo-stepper__item-point:before{display:none}.evo-stepper__item-point{width:16px;height:16px;background-color:transparent;border:2px solid #91B1B8}.evo-stepper__item-name,.evo-stepper__item-number{display:none}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.EvoUiClassDirective, selector: "[evoUiClass]", inputs: ["class", "evoUiClass"] }], pipes: { "async": i2.AsyncPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EvoStepperComponent, decorators: [{
            type: Component,
            args: [{ selector: 'evo-stepper', providers: [
                        EvoStepperEvents,
                    ], template: "<div class=\"evo-stepper\">\n\n  <ng-container\n    *ngIf=\"stepsList$ | async as stepsList\"\n  >\n\n    <div class=\"evo-stepper__current-step-name\">{{stepsList[currentStepIndex].label}}</div>\n\n    <!-- List -->\n    <div class=\"evo-stepper__list\">\n      <div\n        class=\"evo-stepper__item\"\n        *ngFor=\"let step of stepsList; index as i\"\n        [evoUiClass]=\"{'active': currentStepIndex == i, 'completed': i < currentStepIndex, 'clickable': clickableItems}\"\n        >\n\n        <div\n          class=\"evo-stepper__item-inner\"\n          (click)=\"handleItemClick(i)\"\n          >\n\n          <div class=\"evo-stepper__item-point\">\n              <div class=\"evo-stepper__item-number\">{{i + 1}}</div>\n          </div>\n\n          <div class=\"evo-stepper__item-name\">{{step.label}}</div>\n\n        </div>\n\n      </div>\n    </div>\n\n  </ng-container>\n\n  <!-- Content -->\n  <ng-content></ng-content>\n\n</div>\n", styles: [":host{display:block}.evo-stepper__current-step-name{display:none}.evo-stepper__list{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;margin-bottom:40px}.evo-stepper__item{position:relative;display:flex;flex:1;flex-direction:column;justify-content:flex-start;align-items:center;padding:0 10px;text-align:center}.evo-stepper__item:before,.evo-stepper__item:after{position:absolute;top:13px;display:block;content:\"\";height:2px;background:#91B1B8}.evo-stepper__item:before{right:calc(50% + 16px);left:0}.evo-stepper__item:after{right:0;left:calc(50% + 16px)}.evo-stepper__item:first-child:before{display:none}.evo-stepper__item:last-child:after{display:none}.evo-stepper__item_completed:before,.evo-stepper__item_completed:after{background:#21C68B}.evo-stepper__item_completed .evo-stepper__item-point{background:#21C68B}.evo-stepper__item_completed .evo-stepper__item-point:before{top:6px}.evo-stepper__item_completed .evo-stepper__item-number{top:-24px}.evo-stepper__item_completed .evo-stepper__item-name{color:#21c68b}.evo-stepper__item_completed.evo-stepper__item_clickable .evo-stepper__item-inner{cursor:pointer}.evo-stepper__item_completed.evo-stepper__item_clickable .evo-stepper__item-point:hover{background:#4dd1a2}.evo-stepper__item_active:before{background:#21C68B}.evo-stepper__item_active:after{background:#91B1B8}.evo-stepper__item_active .evo-stepper__item-name{color:#21c68b}.evo-stepper__item_active .evo-stepper__item-point{background:#21C68B}.evo-stepper__item-inner{display:flex;flex-direction:column;align-items:center}.evo-stepper__item-point{position:relative;width:28px;height:28px;overflow:hidden;color:#fff;line-height:28px;text-align:center;background:#91B1B8;border-radius:50%;transition:background .3s}.evo-stepper__item-point:before{position:absolute;top:24px;left:11px;display:block;content:\"\";width:6px;height:12px;border-right:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;transform:rotate(45deg);transition:top .3s}.evo-stepper__item-number{position:relative;top:0;font-weight:600;transition:top .3s}.evo-stepper__item-name{margin-top:10px;color:#91b1b8;font-weight:600;transition:color .3s}@media (max-width: 768px){.evo-stepper__current-step-name{display:block;margin-bottom:12px;color:#21c68b;font-weight:600;text-align:center}.evo-stepper__list{margin-bottom:30px}.evo-stepper__item:before,.evo-stepper__item:after{top:7px}.evo-stepper__item:before{right:calc(50% + 10px)}.evo-stepper__item:after{left:calc(50% + 10px)}.evo-stepper__item_active .evo-stepper__item-point,.evo-stepper__item_completed .evo-stepper__item-point{border:2px solid #21C68B}.evo-stepper__item_completed .evo-stepper__item-point:before{display:none}.evo-stepper__item-point{width:16px;height:16px;background-color:transparent;border:2px solid #91B1B8}.evo-stepper__item-name,.evo-stepper__item-number{display:none}}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.EvoStepperEvents }]; }, propDecorators: { stepComponentsList: [{
                type: ContentChildren,
                args: [EvoStepperItemComponent]
            }], currentStepIndex: [{
                type: Input
            }], clickableItems: [{
                type: Input
            }], onChange: [{
                type: Output
            }], clickItem: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 