import { Component, Input, Output, EventEmitter, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TooltipModule } from 'primeng/tooltip';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "primeng/tooltip";
export class StepsComponent {
    cdr;
    /** Lista de steps a serem exibidos */
    steps = [];
    /** Índice do step ativo */
    activeIndex = 0;
    /** Se permite clicar nos steps para navegar */
    readonly = false;
    /** Quantidade máxima de steps visíveis. 'auto' calcula com base no container */
    maxVisible = 'auto';
    /** Largura mínima de cada step em pixels (usado no cálculo automático) */
    stepMinWidth = 140;
    /** Se mostra animação de transição ao navegar */
    animated = true;
    /** Modo de navegação das setas: 'step' altera o activeIndex, 'scroll' apenas desloca a janela visível */
    navigationMode = 'step';
    /** Esquema de cores aplicado aos steps. Altera as cores do ativo e completados */
    colorScheme = 'default';
    /** Classe CSS customizada para o wrapper */
    styleClass = '';
    /** Emite quando o activeIndex muda por clique */
    activeIndexChange = new EventEmitter();
    /** Emite o StepItem clicado */
    stepClick = new EventEmitter();
    stepsContainer;
    visibleSteps = [];
    visibleStartIndex = 0;
    visibleEndIndex = 0;
    hasOverflowLeft = false;
    hasOverflowRight = false;
    calculatedMaxVisible = 5;
    resizeObserver = null;
    constructor(cdr) {
        this.cdr = cdr;
    }
    ngOnChanges(changes) {
        if (changes['steps'] || changes['activeIndex'] || changes['maxVisible']) {
            this.recalculate();
        }
    }
    ngAfterViewInit() {
        this.setupResizeObserver();
        // Delay para garantir que o container já tem dimensões
        setTimeout(() => this.recalculate(), 0);
    }
    ngOnDestroy() {
        this.resizeObserver?.disconnect();
    }
    onStepClick(step, visibleIndex) {
        if (this.readonly || step.disabled)
            return;
        const realIndex = this.visibleStartIndex + visibleIndex;
        this.activeIndex = realIndex;
        this.activeIndexChange.emit(realIndex);
        this.stepClick.emit(step);
        this.recalculate();
    }
    navigateLeft() {
        if (this.visibleStartIndex <= 0)
            return;
        if (this.navigationMode === 'scroll') {
            // Apenas desloca a janela sem alterar o activeIndex
            this.scrollWindow(this.visibleStartIndex - 1);
        }
        else {
            const newActive = Math.max(0, this.activeIndex - 1);
            this.activeIndex = newActive;
            this.activeIndexChange.emit(newActive);
            this.recalculate();
        }
    }
    navigateRight() {
        if (this.visibleEndIndex >= this.steps.length - 1)
            return;
        if (this.navigationMode === 'scroll') {
            // Apenas desloca a janela sem alterar o activeIndex
            this.scrollWindow(this.visibleStartIndex + 1);
        }
        else {
            const newActive = Math.min(this.steps.length - 1, this.activeIndex + 1);
            this.activeIndex = newActive;
            this.activeIndexChange.emit(newActive);
            this.recalculate();
        }
    }
    /** Desloca a janela visível para um novo startIndex sem alterar o activeIndex */
    scrollWindow(newStart) {
        const total = this.steps.length;
        const max = this.calculatedMaxVisible;
        let start = Math.max(0, Math.min(newStart, total - max));
        let end = start + max - 1;
        if (end >= total) {
            end = total - 1;
            start = end - max + 1;
        }
        this.visibleStartIndex = start;
        this.visibleEndIndex = end;
        this.hasOverflowLeft = start > 0;
        this.hasOverflowRight = end < total - 1;
        this.visibleSteps = this.steps.slice(start, end + 1);
        this.cdr.markForCheck();
    }
    getStepState(visibleIndex) {
        const realIndex = this.visibleStartIndex + visibleIndex;
        if (realIndex < this.activeIndex)
            return 'completed';
        if (realIndex === this.activeIndex)
            return 'active';
        return 'pending';
    }
    getRealIndex(visibleIndex) {
        return this.visibleStartIndex + visibleIndex;
    }
    get hiddenLeftCount() {
        return this.visibleStartIndex;
    }
    get hiddenRightCount() {
        return Math.max(0, this.steps.length - 1 - this.visibleEndIndex);
    }
    trackByIndex(index) {
        return index;
    }
    setupResizeObserver() {
        if (!this.stepsContainer?.nativeElement)
            return;
        this.resizeObserver = new ResizeObserver(() => {
            this.recalculate();
        });
        this.resizeObserver.observe(this.stepsContainer.nativeElement);
    }
    recalculate() {
        if (!this.steps.length) {
            this.visibleSteps = [];
            this.hasOverflowLeft = false;
            this.hasOverflowRight = false;
            this.cdr.markForCheck();
            return;
        }
        this.calculatedMaxVisible = this.getMaxVisible();
        this.calculateVisibleWindow();
        this.cdr.markForCheck();
    }
    getMaxVisible() {
        if (this.maxVisible !== 'auto') {
            return Math.max(1, this.maxVisible);
        }
        if (!this.stepsContainer?.nativeElement) {
            return Math.min(5, this.steps.length);
        }
        const containerWidth = this.stepsContainer.nativeElement.offsetWidth;
        // Reservar espaço para os botões de navegação (40px cada lado)
        const availableWidth = containerWidth - 80;
        const maxFit = Math.max(1, Math.floor(availableWidth / this.stepMinWidth));
        return Math.min(maxFit, this.steps.length);
    }
    calculateVisibleWindow() {
        const total = this.steps.length;
        const max = this.calculatedMaxVisible;
        if (total <= max) {
            // Todos cabem na tela
            this.visibleStartIndex = 0;
            this.visibleEndIndex = total - 1;
            this.hasOverflowLeft = false;
            this.hasOverflowRight = false;
        }
        else {
            // Centralizar no activeIndex
            const half = Math.floor(max / 2);
            let start = this.activeIndex - half;
            let end = start + max - 1;
            // Ajustar limites
            if (start < 0) {
                start = 0;
                end = max - 1;
            }
            else if (end >= total) {
                end = total - 1;
                start = end - max + 1;
            }
            this.visibleStartIndex = start;
            this.visibleEndIndex = end;
            this.hasOverflowLeft = start > 0;
            this.hasOverflowRight = end < total - 1;
        }
        this.visibleSteps = this.steps.slice(this.visibleStartIndex, this.visibleEndIndex + 1);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StepsComponent, isStandalone: true, selector: "sia-steps", inputs: { steps: "steps", activeIndex: "activeIndex", readonly: "readonly", maxVisible: "maxVisible", stepMinWidth: "stepMinWidth", animated: "animated", navigationMode: "navigationMode", colorScheme: "colorScheme", styleClass: "styleClass" }, outputs: { activeIndexChange: "activeIndexChange", stepClick: "stepClick" }, viewQueries: [{ propertyName: "stepsContainer", first: true, predicate: ["stepsContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sia-steps-wrapper\" [class]=\"styleClass\" [class.animated]=\"animated\"\n  [class.theme-success]=\"colorScheme === 'success'\"\n  [class.theme-danger]=\"colorScheme === 'danger'\"\n  [class.theme-warning]=\"colorScheme === 'warning'\"\n  [class.theme-info]=\"colorScheme === 'info'\"\n  #stepsContainer>\n  <!-- Bot\u00E3o de navega\u00E7\u00E3o esquerda -->\n  <button\n    *ngIf=\"hasOverflowLeft\"\n    class=\"sia-steps-nav sia-steps-nav-left\"\n    (click)=\"navigateLeft()\"\n    [attr.aria-label]=\"'Anterior (' + hiddenLeftCount + ' ocultos)'\"\n    type=\"button\">\n    <span class=\"nav-badge\">{{ hiddenLeftCount }}</span>\n    <i class=\"pi pi-chevron-left\"></i>\n  </button>\n\n  <!-- Steps vis\u00EDveis -->\n  <div class=\"sia-steps-content\" [class.has-overflow-left]=\"hasOverflowLeft\" [class.has-overflow-right]=\"hasOverflowRight\">\n    <div class=\"sia-steps-list\">\n      <ng-container *ngFor=\"let step of visibleSteps; let i = index; let first = first; let last = last; trackBy: trackByIndex\">\n        <!-- Conector (n\u00E3o aparece antes do primeiro) -->\n        <div *ngIf=\"!first\" class=\"sia-step-connector\" [class.completed]=\"getStepState(i) === 'completed' || getStepState(i - 1) === 'completed'\">\n          <div class=\"connector-line\"></div>\n        </div>\n\n        <!-- Step item -->\n        <div\n          class=\"sia-step-item\"\n          [class.active]=\"getStepState(i) === 'active'\"\n          [class.completed]=\"getStepState(i) === 'completed'\"\n          [class.pending]=\"getStepState(i) === 'pending'\"\n          [class.disabled]=\"step.disabled\"\n          [class.clickable]=\"!readonly && !step.disabled\"\n          [class]=\"step.styleClass || ''\"\n          [pTooltip]=\"step.label\"\n          tooltipPosition=\"top\"\n          (click)=\"onStepClick(step, i)\"\n          [attr.role]=\"readonly ? 'listitem' : 'button'\"\n          [attr.aria-current]=\"getStepState(i) === 'active' ? 'step' : null\"\n          [attr.aria-disabled]=\"step.disabled || readonly\">\n          \n          <!-- \u00CDcone/n\u00FAmero do step -->\n          <div class=\"sia-step-marker\">\n            <i *ngIf=\"getStepState(i) === 'completed' && !step.icon\" class=\"pi pi-check\"></i>\n            <i *ngIf=\"step.icon && getStepState(i) !== 'completed'\" [class]=\"'pi ' + step.icon\"></i>\n            <span *ngIf=\"!step.icon && getStepState(i) !== 'completed'\">{{ getRealIndex(i) + 1 }}</span>\n          </div>\n\n          <!-- Label do step -->\n          <div class=\"sia-step-label\">\n            <span class=\"label-text\">{{ step.label }}</span>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <!-- Bot\u00E3o de navega\u00E7\u00E3o direita -->\n  <button\n    *ngIf=\"hasOverflowRight\"\n    class=\"sia-steps-nav sia-steps-nav-right\"\n    (click)=\"navigateRight()\"\n    [attr.aria-label]=\"'Pr\u00F3ximo (' + hiddenRightCount + ' ocultos)'\"\n    type=\"button\">\n    <i class=\"pi pi-chevron-right\"></i>\n    <span class=\"nav-badge\">{{ hiddenRightCount }}</span>\n  </button>\n</div>\n", styles: [":host{display:block;width:100%}.sia-steps-wrapper{display:flex;align-items:center;width:100%;gap:4px;position:relative}.sia-steps-nav{display:flex;align-items:center;gap:4px;background:var(--p-surface-100, #f1f5f9);border:1px solid var(--p-surface-200, #e2e8f0);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--p-text-secondary-color, #64748b);font-size:12px;font-weight:500;transition:all .2s ease;flex-shrink:0;min-width:36px;justify-content:center}.sia-steps-nav:hover{background:var(--p-primary-50, #eff6ff);border-color:var(--p-primary-200, #bfdbfe);color:var(--p-primary-600, #2563eb)}.sia-steps-nav:active{transform:scale(.95)}.sia-steps-nav .nav-badge{background:var(--p-primary-100, #dbeafe);color:var(--p-primary-700, #1d4ed8);border-radius:10px;padding:1px 6px;font-size:11px;font-weight:600;line-height:1.4}.sia-steps-nav i{font-size:12px}.sia-steps-content{flex:1;overflow:hidden;min-width:0}.sia-steps-content.has-overflow-left{mask-image:linear-gradient(to right,transparent 0%,black 5%)}.sia-steps-content.has-overflow-right{mask-image:linear-gradient(to left,transparent 0%,black 5%)}.sia-steps-content.has-overflow-left.has-overflow-right{mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%)}.sia-steps-list{display:flex;align-items:center;justify-content:center;padding:8px 4px}.sia-step-connector{flex:0 0 auto;width:32px;display:flex;align-items:center;justify-content:center}.sia-step-connector .connector-line{width:100%;height:2px;background:var(--p-surface-300, #cbd5e1);border-radius:1px;transition:background .3s ease}.sia-step-connector.completed .connector-line{background:var(--p-primary-400, #60a5fa)}.sia-step-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;transition:all .25s ease;min-width:80px;max-width:160px;position:relative}.sia-step-item.clickable{cursor:pointer}.sia-step-item.clickable:hover{background:var(--p-surface-50, #f8fafc);transform:translateY(-1px)}.sia-step-item.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.sia-step-item.pending .sia-step-marker{background:var(--p-surface-100, #f1f5f9);border-color:var(--p-surface-300, #cbd5e1);color:var(--p-text-secondary-color, #64748b)}.sia-step-item.pending .sia-step-label .label-text{color:var(--p-text-secondary-color, #64748b)}.sia-step-item.active .sia-step-marker{background:var(--p-primary-500, #3b82f6);border-color:var(--p-primary-500, #3b82f6);color:#fff;box-shadow:0 0 0 4px var(--p-primary-100, #dbeafe);transform:scale(1.1)}.sia-step-item.active .sia-step-label .label-text{color:var(--p-primary-700, #1d4ed8);font-weight:600}.sia-step-item.completed .sia-step-marker{background:var(--p-primary-100, #dbeafe);border-color:var(--p-primary-300, #93c5fd);color:var(--p-primary-600, #2563eb)}.sia-step-item.completed .sia-step-label .label-text{color:var(--p-text-color, #1e293b)}.sia-step-marker{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid;font-size:13px;font-weight:600;transition:all .3s ease;flex-shrink:0}.sia-step-marker i{font-size:14px}.sia-step-label{text-align:center;max-width:100%;overflow:hidden}.sia-step-label .label-text{display:block;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--p-text-secondary-color, #64748b);transition:color .2s ease,font-weight .2s ease}.sia-steps-wrapper.animated .sia-steps-list{transition:transform .3s ease}.sia-steps-wrapper.animated .sia-step-item{animation:stepFadeIn .25s ease forwards}@keyframes stepFadeIn{0%{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sia-steps-wrapper.theme-success .sia-step-connector.completed .connector-line{background:var(--p-green-400, #4ade80)}.sia-steps-wrapper.theme-success .sia-step-item.active .sia-step-marker{background:var(--p-green-500, #22c55e);border-color:var(--p-green-500, #22c55e);box-shadow:0 0 0 4px var(--p-green-100, #dcfce7)}.sia-steps-wrapper.theme-success .sia-step-item.active .sia-step-label .label-text{color:var(--p-green-700, #15803d)}.sia-steps-wrapper.theme-success .sia-step-item.completed .sia-step-marker{background:var(--p-green-100, #dcfce7);border-color:var(--p-green-300, #86efac);color:var(--p-green-600, #16a34a)}.sia-steps-wrapper.theme-danger .sia-step-connector.completed .connector-line{background:var(--p-red-400, #f87171)}.sia-steps-wrapper.theme-danger .sia-step-item.active .sia-step-marker{background:var(--p-red-500, #ef4444);border-color:var(--p-red-500, #ef4444);box-shadow:0 0 0 4px var(--p-red-100, #fee2e2)}.sia-steps-wrapper.theme-danger .sia-step-item.active .sia-step-label .label-text{color:var(--p-red-700, #b91c1c)}.sia-steps-wrapper.theme-danger .sia-step-item.completed .sia-step-marker{background:var(--p-red-100, #fee2e2);border-color:var(--p-red-300, #fca5a5);color:var(--p-red-600, #dc2626)}.sia-steps-wrapper.theme-warning .sia-step-connector.completed .connector-line{background:var(--p-orange-400, #fb923c)}.sia-steps-wrapper.theme-warning .sia-step-item.active .sia-step-marker{background:var(--p-orange-500, #f97316);border-color:var(--p-orange-500, #f97316);box-shadow:0 0 0 4px var(--p-orange-100, #ffedd5)}.sia-steps-wrapper.theme-warning .sia-step-item.active .sia-step-label .label-text{color:var(--p-orange-700, #c2410c)}.sia-steps-wrapper.theme-warning .sia-step-item.completed .sia-step-marker{background:var(--p-orange-100, #ffedd5);border-color:var(--p-orange-300, #fdba74);color:var(--p-orange-600, #ea580c)}.sia-steps-wrapper.theme-info .sia-step-connector.completed .connector-line{background:var(--p-cyan-400, #22d3ee)}.sia-steps-wrapper.theme-info .sia-step-item.active .sia-step-marker{background:var(--p-cyan-500, #06b6d4);border-color:var(--p-cyan-500, #06b6d4);box-shadow:0 0 0 4px var(--p-cyan-100, #cffafe)}.sia-steps-wrapper.theme-info .sia-step-item.active .sia-step-label .label-text{color:var(--p-cyan-700, #0e7490)}.sia-steps-wrapper.theme-info .sia-step-item.completed .sia-step-marker{background:var(--p-cyan-100, #cffafe);border-color:var(--p-cyan-300, #67e8f9);color:var(--p-cyan-600, #0891b2)}@media (max-width: 576px){.sia-step-item{min-width:60px;max-width:100px;padding:6px 8px}.sia-step-marker{width:30px;height:30px;font-size:11px}.sia-step-marker i{font-size:12px}.sia-step-label .label-text{font-size:11px}.sia-step-connector{width:20px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sia-steps', standalone: true, imports: [CommonModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sia-steps-wrapper\" [class]=\"styleClass\" [class.animated]=\"animated\"\n  [class.theme-success]=\"colorScheme === 'success'\"\n  [class.theme-danger]=\"colorScheme === 'danger'\"\n  [class.theme-warning]=\"colorScheme === 'warning'\"\n  [class.theme-info]=\"colorScheme === 'info'\"\n  #stepsContainer>\n  <!-- Bot\u00E3o de navega\u00E7\u00E3o esquerda -->\n  <button\n    *ngIf=\"hasOverflowLeft\"\n    class=\"sia-steps-nav sia-steps-nav-left\"\n    (click)=\"navigateLeft()\"\n    [attr.aria-label]=\"'Anterior (' + hiddenLeftCount + ' ocultos)'\"\n    type=\"button\">\n    <span class=\"nav-badge\">{{ hiddenLeftCount }}</span>\n    <i class=\"pi pi-chevron-left\"></i>\n  </button>\n\n  <!-- Steps vis\u00EDveis -->\n  <div class=\"sia-steps-content\" [class.has-overflow-left]=\"hasOverflowLeft\" [class.has-overflow-right]=\"hasOverflowRight\">\n    <div class=\"sia-steps-list\">\n      <ng-container *ngFor=\"let step of visibleSteps; let i = index; let first = first; let last = last; trackBy: trackByIndex\">\n        <!-- Conector (n\u00E3o aparece antes do primeiro) -->\n        <div *ngIf=\"!first\" class=\"sia-step-connector\" [class.completed]=\"getStepState(i) === 'completed' || getStepState(i - 1) === 'completed'\">\n          <div class=\"connector-line\"></div>\n        </div>\n\n        <!-- Step item -->\n        <div\n          class=\"sia-step-item\"\n          [class.active]=\"getStepState(i) === 'active'\"\n          [class.completed]=\"getStepState(i) === 'completed'\"\n          [class.pending]=\"getStepState(i) === 'pending'\"\n          [class.disabled]=\"step.disabled\"\n          [class.clickable]=\"!readonly && !step.disabled\"\n          [class]=\"step.styleClass || ''\"\n          [pTooltip]=\"step.label\"\n          tooltipPosition=\"top\"\n          (click)=\"onStepClick(step, i)\"\n          [attr.role]=\"readonly ? 'listitem' : 'button'\"\n          [attr.aria-current]=\"getStepState(i) === 'active' ? 'step' : null\"\n          [attr.aria-disabled]=\"step.disabled || readonly\">\n          \n          <!-- \u00CDcone/n\u00FAmero do step -->\n          <div class=\"sia-step-marker\">\n            <i *ngIf=\"getStepState(i) === 'completed' && !step.icon\" class=\"pi pi-check\"></i>\n            <i *ngIf=\"step.icon && getStepState(i) !== 'completed'\" [class]=\"'pi ' + step.icon\"></i>\n            <span *ngIf=\"!step.icon && getStepState(i) !== 'completed'\">{{ getRealIndex(i) + 1 }}</span>\n          </div>\n\n          <!-- Label do step -->\n          <div class=\"sia-step-label\">\n            <span class=\"label-text\">{{ step.label }}</span>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n  <!-- Bot\u00E3o de navega\u00E7\u00E3o direita -->\n  <button\n    *ngIf=\"hasOverflowRight\"\n    class=\"sia-steps-nav sia-steps-nav-right\"\n    (click)=\"navigateRight()\"\n    [attr.aria-label]=\"'Pr\u00F3ximo (' + hiddenRightCount + ' ocultos)'\"\n    type=\"button\">\n    <i class=\"pi pi-chevron-right\"></i>\n    <span class=\"nav-badge\">{{ hiddenRightCount }}</span>\n  </button>\n</div>\n", styles: [":host{display:block;width:100%}.sia-steps-wrapper{display:flex;align-items:center;width:100%;gap:4px;position:relative}.sia-steps-nav{display:flex;align-items:center;gap:4px;background:var(--p-surface-100, #f1f5f9);border:1px solid var(--p-surface-200, #e2e8f0);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--p-text-secondary-color, #64748b);font-size:12px;font-weight:500;transition:all .2s ease;flex-shrink:0;min-width:36px;justify-content:center}.sia-steps-nav:hover{background:var(--p-primary-50, #eff6ff);border-color:var(--p-primary-200, #bfdbfe);color:var(--p-primary-600, #2563eb)}.sia-steps-nav:active{transform:scale(.95)}.sia-steps-nav .nav-badge{background:var(--p-primary-100, #dbeafe);color:var(--p-primary-700, #1d4ed8);border-radius:10px;padding:1px 6px;font-size:11px;font-weight:600;line-height:1.4}.sia-steps-nav i{font-size:12px}.sia-steps-content{flex:1;overflow:hidden;min-width:0}.sia-steps-content.has-overflow-left{mask-image:linear-gradient(to right,transparent 0%,black 5%)}.sia-steps-content.has-overflow-right{mask-image:linear-gradient(to left,transparent 0%,black 5%)}.sia-steps-content.has-overflow-left.has-overflow-right{mask-image:linear-gradient(to right,transparent 0%,black 5%,black 95%,transparent 100%)}.sia-steps-list{display:flex;align-items:center;justify-content:center;padding:8px 4px}.sia-step-connector{flex:0 0 auto;width:32px;display:flex;align-items:center;justify-content:center}.sia-step-connector .connector-line{width:100%;height:2px;background:var(--p-surface-300, #cbd5e1);border-radius:1px;transition:background .3s ease}.sia-step-connector.completed .connector-line{background:var(--p-primary-400, #60a5fa)}.sia-step-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;transition:all .25s ease;min-width:80px;max-width:160px;position:relative}.sia-step-item.clickable{cursor:pointer}.sia-step-item.clickable:hover{background:var(--p-surface-50, #f8fafc);transform:translateY(-1px)}.sia-step-item.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.sia-step-item.pending .sia-step-marker{background:var(--p-surface-100, #f1f5f9);border-color:var(--p-surface-300, #cbd5e1);color:var(--p-text-secondary-color, #64748b)}.sia-step-item.pending .sia-step-label .label-text{color:var(--p-text-secondary-color, #64748b)}.sia-step-item.active .sia-step-marker{background:var(--p-primary-500, #3b82f6);border-color:var(--p-primary-500, #3b82f6);color:#fff;box-shadow:0 0 0 4px var(--p-primary-100, #dbeafe);transform:scale(1.1)}.sia-step-item.active .sia-step-label .label-text{color:var(--p-primary-700, #1d4ed8);font-weight:600}.sia-step-item.completed .sia-step-marker{background:var(--p-primary-100, #dbeafe);border-color:var(--p-primary-300, #93c5fd);color:var(--p-primary-600, #2563eb)}.sia-step-item.completed .sia-step-label .label-text{color:var(--p-text-color, #1e293b)}.sia-step-marker{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid;font-size:13px;font-weight:600;transition:all .3s ease;flex-shrink:0}.sia-step-marker i{font-size:14px}.sia-step-label{text-align:center;max-width:100%;overflow:hidden}.sia-step-label .label-text{display:block;font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--p-text-secondary-color, #64748b);transition:color .2s ease,font-weight .2s ease}.sia-steps-wrapper.animated .sia-steps-list{transition:transform .3s ease}.sia-steps-wrapper.animated .sia-step-item{animation:stepFadeIn .25s ease forwards}@keyframes stepFadeIn{0%{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sia-steps-wrapper.theme-success .sia-step-connector.completed .connector-line{background:var(--p-green-400, #4ade80)}.sia-steps-wrapper.theme-success .sia-step-item.active .sia-step-marker{background:var(--p-green-500, #22c55e);border-color:var(--p-green-500, #22c55e);box-shadow:0 0 0 4px var(--p-green-100, #dcfce7)}.sia-steps-wrapper.theme-success .sia-step-item.active .sia-step-label .label-text{color:var(--p-green-700, #15803d)}.sia-steps-wrapper.theme-success .sia-step-item.completed .sia-step-marker{background:var(--p-green-100, #dcfce7);border-color:var(--p-green-300, #86efac);color:var(--p-green-600, #16a34a)}.sia-steps-wrapper.theme-danger .sia-step-connector.completed .connector-line{background:var(--p-red-400, #f87171)}.sia-steps-wrapper.theme-danger .sia-step-item.active .sia-step-marker{background:var(--p-red-500, #ef4444);border-color:var(--p-red-500, #ef4444);box-shadow:0 0 0 4px var(--p-red-100, #fee2e2)}.sia-steps-wrapper.theme-danger .sia-step-item.active .sia-step-label .label-text{color:var(--p-red-700, #b91c1c)}.sia-steps-wrapper.theme-danger .sia-step-item.completed .sia-step-marker{background:var(--p-red-100, #fee2e2);border-color:var(--p-red-300, #fca5a5);color:var(--p-red-600, #dc2626)}.sia-steps-wrapper.theme-warning .sia-step-connector.completed .connector-line{background:var(--p-orange-400, #fb923c)}.sia-steps-wrapper.theme-warning .sia-step-item.active .sia-step-marker{background:var(--p-orange-500, #f97316);border-color:var(--p-orange-500, #f97316);box-shadow:0 0 0 4px var(--p-orange-100, #ffedd5)}.sia-steps-wrapper.theme-warning .sia-step-item.active .sia-step-label .label-text{color:var(--p-orange-700, #c2410c)}.sia-steps-wrapper.theme-warning .sia-step-item.completed .sia-step-marker{background:var(--p-orange-100, #ffedd5);border-color:var(--p-orange-300, #fdba74);color:var(--p-orange-600, #ea580c)}.sia-steps-wrapper.theme-info .sia-step-connector.completed .connector-line{background:var(--p-cyan-400, #22d3ee)}.sia-steps-wrapper.theme-info .sia-step-item.active .sia-step-marker{background:var(--p-cyan-500, #06b6d4);border-color:var(--p-cyan-500, #06b6d4);box-shadow:0 0 0 4px var(--p-cyan-100, #cffafe)}.sia-steps-wrapper.theme-info .sia-step-item.active .sia-step-label .label-text{color:var(--p-cyan-700, #0e7490)}.sia-steps-wrapper.theme-info .sia-step-item.completed .sia-step-marker{background:var(--p-cyan-100, #cffafe);border-color:var(--p-cyan-300, #67e8f9);color:var(--p-cyan-600, #0891b2)}@media (max-width: 576px){.sia-step-item{min-width:60px;max-width:100px;padding:6px 8px}.sia-step-marker{width:30px;height:30px;font-size:11px}.sia-step-marker i{font-size:12px}.sia-step-label .label-text{font-size:11px}.sia-step-connector{width:20px}}\n"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
                type: Input
            }], activeIndex: [{
                type: Input
            }], readonly: [{
                type: Input
            }], maxVisible: [{
                type: Input
            }], stepMinWidth: [{
                type: Input
            }], animated: [{
                type: Input
            }], navigationMode: [{
                type: Input
            }], colorScheme: [{
                type: Input
            }], styleClass: [{
                type: Input
            }], activeIndexChange: [{
                type: Output
            }], stepClick: [{
                type: Output
            }], stepsContainer: [{
                type: ViewChild,
                args: ['stepsContainer']
            }] } });
//# sourceMappingURL=data:application/json;base64, 