import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DEPRECATED_CONFIG } from '@seniorsistemas/angular-components/common/deprecated-selector';
import { DeprecatedSelectorDirective } from '@seniorsistemas/angular-components/common/deprecated-selector';
import { StepState } from './models/step-state';
import { NgClass } from '@angular/common';
import { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';
import * as i0 from "@angular/core";
import * as i1 from "@seniorsistemas/angular-components/common/deprecated-selector";
/**
 * @description Componente de progresso em etapas (stepper) com animações.
 * Exibe uma linha do tempo horizontal de passos, permitindo navegar entre eles.
 * Suporta passos ocultos e desabilitados. Também responde ao seletor legado `s-steps`.
 *
 * @example
 * ```html
 * <s-stepper
 *   [steps]="etapas"
 *   [activeIndex]="etapaAtiva"
 *   (stepSelected)="onEtapaSelecionada($event)" />
 * ```
 *
 * @category Structure
 */
export class StepperComponent {
    static nextId = 0;
    /** @description Identificador único do componente no DOM. Gerado automaticamente se não informado. */
    id = `s-steps-${StepperComponent.nextId++}`;
    /** @description Lista de etapas exibidas no stepper. Campo obrigatório. */
    steps;
    /** @description Índice (0-based) da etapa atualmente ativa. Campo obrigatório. */
    activeIndex = 0;
    /** @description Emitido quando o usuário clica em uma etapa não desabilitada. */
    stepSelected = new EventEmitter();
    get stepState() {
        return StepState;
    }
    get visibledStep() {
        return this.steps.filter((step) => !step.hidden);
    }
    stepClick(step, index, event) {
        if (step.disabled || index === this.activeIndex)
            return;
        this.stepSelected.emit({ step, index, event });
    }
    barAnimation(index, activeIndex) {
        const visited = index < activeIndex;
        const activated = index === activeIndex;
        return visited || activated;
    }
    afterBarAnimation(index, activeIndex) {
        const visited = index < activeIndex;
        const activated = index === activeIndex - 1;
        return visited || activated;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperComponent, isStandalone: true, selector: "s-stepper, s-steps", inputs: { id: "id", steps: "steps", activeIndex: "activeIndex" }, outputs: { stepSelected: "stepSelected" }, host: { attributes: { "aria-orientation": "horizontal", "role": "tablist", "tab-index": "0" } }, providers: [
            {
                provide: DEPRECATED_CONFIG,
                useValue: {
                    oldSelector: 's-steps',
                    newSelector: 's-stepper',
                    removalVersion: '20.0.0',
                },
            },
        ], hostDirectives: [{ directive: i1.DeprecatedSelectorDirective }], ngImport: i0, template: "<div\r\n    [id]=\"id\"\r\n    class=\"s-stepper-container\"\r\n>\r\n    @for (step of visibledStep; track step; let i = $index; let isFirst = $first; let isLast = $last) {\r\n        @if (!isFirst) {\r\n            <div\r\n                class=\"s-step-progress-bar\"\r\n                [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                [ngClass]=\"{\r\n                    's-step-success': step.state === stepState.Success,\r\n                    's-step-warning': step.state === stepState.Warning,\r\n                    's-step-disabled': step.disabled,\r\n                    's-step-visited': i < activeIndex,\r\n                    's-step-active': i === activeIndex,\r\n                }\"\r\n            ></div>\r\n        }\r\n        <div\r\n            [id]=\"id + '-step-' + (step.id || i)\"\r\n            class=\"s-step-header\"\r\n            (click)=\"stepClick(step, i, $event)\"\r\n            role=\"tab\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"step.ariaLabel || null\"\r\n            [attr.aria-controls]=\"step.ariaControls\"\r\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-setsize]=\"visibledStep.length\"\r\n            [attr.aria-selected]=\"activeIndex === i\"\r\n            [ngClass]=\"{\r\n                's-step-success': step.state === stepState.Success,\r\n                's-step-warning': step.state === stepState.Warning,\r\n                's-step-visited': i < activeIndex,\r\n                's-step-active': i === activeIndex,\r\n                's-step-previous': i === activeIndex - 1,\r\n            }\"\r\n        >\r\n            @if (!isFirst) {\r\n                <div\r\n                    [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-before\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': step.disabled,\r\n                        's-step-visited': i < activeIndex,\r\n                        's-step-active': i === activeIndex,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            @if (!isLast) {\r\n                <div\r\n                    [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-after\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': visibledStep[i + 1].disabled,\r\n                        's-step-visited': i + 1 < activeIndex,\r\n                        's-step-active': i === activeIndex - 1,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            <div\r\n                class=\"s-step-index\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n                [sTooltip]=\"step.tooltip\"\r\n            >\r\n                <div class=\"s-step-index-content\">\r\n                    @if (step.state !== stepState.Warning && (step.state === stepState.Success || activeIndex > i)) {\r\n                        <span\r\n                            class=\"fas fa-check\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state === stepState.Warning) {\r\n                        <span\r\n                            class=\"fas fa-exclamation-triangle\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state !== stepState.Success && step.state !== stepState.Warning && activeIndex <= i) {\r\n                        <span>{{ i + 1 }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div\r\n                [id]=\"'step-label-' + i\"\r\n                class=\"s-step-label\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n            >\r\n                <span>\r\n                    {{ step.label }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: ["@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}.s-stepper-container{display:flex;white-space:nowrap;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-step-header{box-sizing:border-box;flex-direction:column;height:auto;cursor:pointer;position:relative;display:flex;align-items:center;height:66px}.s-step-header .s-step-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-visited,.s-step-header .s-step-progress-bar-before.s-step-active{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-visited,.s-step-header .s-step-progress-bar-after.s-step-active{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:highlight(#ddd)}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-visited.s-step-progress-bar,.s-step-active.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width: 767px){.s-step-label{display:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }], animations: [
            trigger('beforeActiveDesative', [
                state('active', style({
                    'background-position': 'left bottom',
                })),
                state('desactive', style({
                    'background-position': 'right bottom',
                })),
                transition('active => desactive', [animate('50ms 100ms linear')]),
                transition('desactive => active', [animate('50ms 250ms linear')]),
            ]),
            trigger('activeDesative', [
                state('active', style({
                    'background-position': 'left bottom',
                })),
                state('desactive', style({
                    'background-position': 'right bottom',
                })),
                transition('active => desactive', [animate('100ms 150ms linear')]),
                transition('desactive => active', [animate('100ms 150ms linear')]),
            ]),
            trigger('afterActiveDesative', [
                state('active', style({
                    'background-position': 'left bottom',
                })),
                state('desactive', style({
                    'background-position': 'right bottom',
                })),
                transition('active => desactive', [animate('50ms 250ms linear')]),
                transition('desactive => active', [animate('50ms 100ms linear')]),
            ]),
        ] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-stepper, s-steps', hostDirectives: [DeprecatedSelectorDirective], providers: [
                        {
                            provide: DEPRECATED_CONFIG,
                            useValue: {
                                oldSelector: 's-steps',
                                newSelector: 's-stepper',
                                removalVersion: '20.0.0',
                            },
                        },
                    ], host: {
                        'aria-orientation': 'horizontal',
                        role: 'tablist',
                        'tab-index': '0',
                    }, animations: [
                        trigger('beforeActiveDesative', [
                            state('active', style({
                                'background-position': 'left bottom',
                            })),
                            state('desactive', style({
                                'background-position': 'right bottom',
                            })),
                            transition('active => desactive', [animate('50ms 100ms linear')]),
                            transition('desactive => active', [animate('50ms 250ms linear')]),
                        ]),
                        trigger('activeDesative', [
                            state('active', style({
                                'background-position': 'left bottom',
                            })),
                            state('desactive', style({
                                'background-position': 'right bottom',
                            })),
                            transition('active => desactive', [animate('100ms 150ms linear')]),
                            transition('desactive => active', [animate('100ms 150ms linear')]),
                        ]),
                        trigger('afterActiveDesative', [
                            state('active', style({
                                'background-position': 'left bottom',
                            })),
                            state('desactive', style({
                                'background-position': 'right bottom',
                            })),
                            transition('active => desactive', [animate('50ms 250ms linear')]),
                            transition('desactive => active', [animate('50ms 100ms linear')]),
                        ]),
                    ], standalone: true, imports: [NgClass, TooltipDirective], template: "<div\r\n    [id]=\"id\"\r\n    class=\"s-stepper-container\"\r\n>\r\n    @for (step of visibledStep; track step; let i = $index; let isFirst = $first; let isLast = $last) {\r\n        @if (!isFirst) {\r\n            <div\r\n                class=\"s-step-progress-bar\"\r\n                [@activeDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                [ngClass]=\"{\r\n                    's-step-success': step.state === stepState.Success,\r\n                    's-step-warning': step.state === stepState.Warning,\r\n                    's-step-disabled': step.disabled,\r\n                    's-step-visited': i < activeIndex,\r\n                    's-step-active': i === activeIndex,\r\n                }\"\r\n            ></div>\r\n        }\r\n        <div\r\n            [id]=\"id + '-step-' + (step.id || i)\"\r\n            class=\"s-step-header\"\r\n            (click)=\"stepClick(step, i, $event)\"\r\n            role=\"tab\"\r\n            tabindex=\"0\"\r\n            [attr.aria-label]=\"step.ariaLabel || null\"\r\n            [attr.aria-controls]=\"step.ariaControls\"\r\n            [attr.aria-labelledby]=\"!step.ariaLabel ? 'step-label-' + i : null\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n            [attr.aria-setsize]=\"visibledStep.length\"\r\n            [attr.aria-selected]=\"activeIndex === i\"\r\n            [ngClass]=\"{\r\n                's-step-success': step.state === stepState.Success,\r\n                's-step-warning': step.state === stepState.Warning,\r\n                's-step-visited': i < activeIndex,\r\n                's-step-active': i === activeIndex,\r\n                's-step-previous': i === activeIndex - 1,\r\n            }\"\r\n        >\r\n            @if (!isFirst) {\r\n                <div\r\n                    [@beforeActiveDesative]=\"barAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-before\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': step.disabled,\r\n                        's-step-visited': i < activeIndex,\r\n                        's-step-active': i === activeIndex,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            @if (!isLast) {\r\n                <div\r\n                    [@afterActiveDesative]=\"afterBarAnimation(i, activeIndex) ? 'active' : 'desactive'\"\r\n                    class=\"s-step-progress-bar-after\"\r\n                    [ngClass]=\"{\r\n                        's-step-success': step.state === stepState.Success,\r\n                        's-step-warning': step.state === stepState.Warning,\r\n                        's-step-disabled': visibledStep[i + 1].disabled,\r\n                        's-step-visited': i + 1 < activeIndex,\r\n                        's-step-active': i === activeIndex - 1,\r\n                    }\"\r\n                ></div>\r\n            }\r\n            <div\r\n                class=\"s-step-index\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n                [sTooltip]=\"step.tooltip\"\r\n            >\r\n                <div class=\"s-step-index-content\">\r\n                    @if (step.state !== stepState.Warning && (step.state === stepState.Success || activeIndex > i)) {\r\n                        <span\r\n                            class=\"fas fa-check\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state === stepState.Warning) {\r\n                        <span\r\n                            class=\"fas fa-exclamation-triangle\"\r\n                            aria-hidden=\"true\"\r\n                            [attr.aria-label]=\"i + 1\"\r\n                        >\r\n                        </span>\r\n                    }\r\n                    @if (step.state !== stepState.Success && step.state !== stepState.Warning && activeIndex <= i) {\r\n                        <span>{{ i + 1 }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n            <div\r\n                [id]=\"'step-label-' + i\"\r\n                class=\"s-step-label\"\r\n                [ngClass]=\"{ 's-step-disabled': step.disabled }\"\r\n            >\r\n                <span>\r\n                    {{ step.label }}\r\n                </span>\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: ["@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}.s-stepper-container{display:flex;white-space:nowrap;align-items:flex-start;overflow:hidden;padding:15px 10px}.s-step-header{box-sizing:border-box;flex-direction:column;height:auto;cursor:pointer;position:relative;display:flex;align-items:center;height:66px}.s-step-header .s-step-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;color:#999;font-size:14px;font-weight:400;padding-top:5px}.s-step-header .s-step-progress-bar-before{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;left:0}.s-step-header .s-step-progress-bar-before.s-step-visited,.s-step-header .s-step-progress-bar-before.s-step-active{background-position:left bottom}.s-step-header .s-step-progress-bar-after{margin:0;position:absolute;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:calc(50% - 20px);background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%;right:0}.s-step-header .s-step-progress-bar-after.s-step-visited,.s-step-header .s-step-progress-bar-after.s-step-active{background-position:left bottom}.s-step-progress-bar{margin:0;position:relative;top:20px;flex:auto;height:0;height:3px;overflow:hidden;width:100%;background-color:#ccc;background-image:linear-gradient(to right,#7892a1 50%,#ccc 50%);background-position:right bottom;background-size:300% 100%}.s-step-disabled{opacity:.5;filter:Alpha(Opacity=50)}.s-step-disabled,.s-step-disabled *{cursor:text!important}.s-step-active.s-step-disabled{opacity:1}.s-step-index{background-color:#fff;border:3px solid #ccc;border-radius:50%;color:#999;display:inline-block;font-weight:700;position:relative;transition:background-color .2s ease-out;height:40px;width:40px;flex:none}.s-step-index .s-step-index-content{line-height:18px;font-size:18px;padding-top:8.5px;text-align:center;position:relative;cursor:pointer}.s-step-index:hover{background-color:highlight(#ddd)}.s-step-warning .s-step-index .s-step-index-content{padding-top:7px}.s-step-visited .s-step-index{border-color:#7892a1;background-color:#7892a1}.s-step-visited .s-step-index-content>span{color:#fff}.s-step-visited.s-step-progress-bar,.s-step-active.s-step-progress-bar{background-position:left bottom}.s-step-active .s-step-index{border-color:#7892a1;color:#7892a1;cursor:default}.s-step-active .s-step-label{color:#333;font-weight:700}@media (max-width: 767px){.s-step-label{display:none}}\n"] }]
        }], propDecorators: { id: [{
                type: Input
            }], steps: [{
                type: Input,
                args: [{ required: true }]
            }], activeIndex: [{
                type: Input,
                args: [{ required: true }]
            }], stepSelected: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 