import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component, EventEmitter, inject, Input, Output, } from '@angular/core';
import { goToTop } from '../../../shared/utils/dom';
import { ContentLoaderComponent } from '../../molecules/content-loader/content-loader.component';
import { EmptyStateComponent } from '../../molecules/empty-state/empty-state.component';
import { ComponentStates } from '../../types';
import { MOTION } from './types';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class WizardComponent {
    constructor() {
        this.onClick = new EventEmitter();
        this.wrapperId = 'wizard-wrapper';
        this.currentStep = null;
        this.currentStepTitles = { title: '' };
        this.loadingText = 'Por favor espere...';
        this.cdr = inject(ChangeDetectorRef);
    }
    ngOnInit() {
        this.updateCurrentStep();
    }
    ngOnChanges(changes) {
        if (changes['props']) {
            this.updateCurrentStep();
        }
    }
    updateCurrentStep() {
        if (this.props?.steps && this.props?.current) {
            this.currentStep = this.props.steps[this.props.current];
            this.currentStepTitles = this.currentStep?.titles ?? { title: '' };
        }
    }
    working() {
        this.props.state = ComponentStates.WORKING;
        if (this.Current?.buttons) {
            this.Current.buttons.forEach(button => {
                button.state = ComponentStates.DISABLED;
            });
        }
        this.cdr.markForCheck();
    }
    done() {
        if (this.props.state === ComponentStates.ENABLED) {
            return;
        }
        this.props.state = ComponentStates.ENABLED;
        if (this.Current?.buttons) {
            this.Current.buttons.forEach(button => {
                button.state = ComponentStates.ENABLED;
            });
        }
        this.cdr.markForCheck();
    }
    get Current() {
        if (this.props?.steps && this.props?.current) {
            return this.props.steps[this.props.current];
        }
        return this.currentStep || { titles: { title: '' }, buttons: [] };
    }
    setCurrent(newStep) {
        if (newStep === this.props.current) {
            return;
        }
        this.props.current = newStep;
        this.updateCurrentStep();
        goToTop(this.wrapperId);
    }
    setError(error) {
        if (this.props.state === ComponentStates.ERROR) {
            return;
        }
        this.props.error.titles.description = error;
        this.props.state = ComponentStates.ERROR;
        this.cdr.markForCheck();
        goToTop(this.wrapperId);
    }
    reset() {
        this.props.error.titles.description = '';
        this.done();
    }
    clickHandler(token) {
        if (!token) {
            return;
        }
        if (token.includes('retry')) {
            this.reset();
        }
        this.onClick.emit({ current: this.props.current, motion: MOTION.RETRY });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: WizardComponent, isStandalone: true, selector: "val-wizard", inputs: { props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
    <div [id]="wrapperId" class="wrapper">
      <ng-container *ngIf="props.state !== 'ERROR'">
        <val-empty-state [props]="currentStepTitles" [attr.data-step]="props.current"></val-empty-state>
        <div class="step">
          <div *ngIf="props.state === 'WORKING'">
            <val-content-loader
              [props]="{
                name: 'circular',
                color: 'primary',
                size: 'large',
                text: loadingText,
              }"
            />
          </div>
          <ng-content select="[step]"></ng-content>
        </div>
      </ng-container>
      <ng-container *ngIf="props.state === 'ERROR'">
        <val-empty-state [props]="props.error.titles"></val-empty-state>
      </ng-container>
    </div>
  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-height:320px}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: ContentLoaderComponent, selector: "val-content-loader", inputs: ["props"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WizardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-wizard', standalone: true, imports: [CommonModule, EmptyStateComponent, ContentLoaderComponent], template: `
    <div [id]="wrapperId" class="wrapper">
      <ng-container *ngIf="props.state !== 'ERROR'">
        <val-empty-state [props]="currentStepTitles" [attr.data-step]="props.current"></val-empty-state>
        <div class="step">
          <div *ngIf="props.state === 'WORKING'">
            <val-content-loader
              [props]="{
                name: 'circular',
                color: 'primary',
                size: 'large',
                text: loadingText,
              }"
            />
          </div>
          <ng-content select="[step]"></ng-content>
        </div>
      </ng-container>
      <ng-container *ngIf="props.state === 'ERROR'">
        <val-empty-state [props]="props.error.titles"></val-empty-state>
      </ng-container>
    </div>
  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.wrapper{height:auto;display:flex;flex-direction:column;justify-content:space-between;position:relative;min-height:320px}.step{min-height:9.375rem;margin:16px 0;text-align:center}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }], onClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 