/**
* Unified SVG-based Stepper Component
* Supports two types (default, text) and three layouts (horizontal, vertical, snake)
* All rendering done with SVG for consistent behavior and scaling
*/
export interface StepperOptions {
type?: "default" | "text";
layout?: "horizontal" | "vertical" | "snake";
showProgress?: boolean;
nodeSize?: number;
connectorGap?: number;
minGap?: number;
padding?: number;
rowGap?: number;
onStepClick?: ((step: Step, index: number) => void) | null;
}
export interface Step {
indicator: string;
labelTitle?: string;
labelDesc?: string;
title?: string;
desc?: string;
state?: "pending" | "active" | "completed" | "failed" | "error";
}
export declare class Stepper {
private container;
private options;
private steps;
private svg;
private popupContainer;
private resizeObserver;
private viewBox;
private MIN_GAP;
private CONTAINER_PADDING;
private ROW_GAP;
constructor(container: string | HTMLElement, options?: StepperOptions);
/**
* Map legacy data-mode values to new API (type + layout)
* For backward compatibility
*/
private _mapLegacyMode;
private init;
/**
* Truncate text to maximum length (30 chars) with ellipsis
*/
private truncateText;
/**
* Attach a native SVG
so hovering an element reveals its full,
* untruncated text — used on labels that are visually clipped to fit.
*/
private appendFullTextTooltip;
private parseSteps;
/**
* Calculate positions based on current layout
*/
private calculatePositions;
/**
* Horizontal Layout: Single horizontal row with equal spacing
*/
private calculateHorizontalLayout;
/**
* Snake Layout: Dynamic spacing with zigzag pattern (L→R→D→R→L)
* Special case: if container width <= 240px, use vertical layout
*/
private calculateSnakeLayout;
/**
* Vertical Layout: All nodes vertically centered
*/
private calculateVerticalLayout;
/**
* Helper function to break text by word boundaries
*/
private breakTextByWords;
/**
* Pre-calculate text widths for text type steppers
*/
private _calculateTextWidths;
private render;
private createSVG;
private renderProgressBar;
private renderConnectors;
private renderNodes;
private renderLabels;
private createPopup;
private showPopup;
private hidePopup;
private handleNodeClick;
private setupResponsive;
/**
* Update step state
*/
updateStep(index: number, newState: Step["state"]): void;
/**
* Create checkmark icon for completed state
*/
private createCheckmark;
/**
* Create close icon for failed state
*/
private createCloseIcon;
/**
* Destroy stepper instance
*/
destroy(): void;
}
export declare function initSteppers(): void;