import * as i0 from '@angular/core'; import { AfterContentInit, OnChanges, EventEmitter, QueryList, ElementRef, SimpleChanges } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; interface IEuiWizardStep { id: string; indexLabel: string; indexIconSvgName: string; label: string; subLabel: string; isCompleted: boolean; isActive: boolean; isShowStepTitle: boolean; isInvalid: boolean; isWarning: boolean; isDisabled: boolean; index: number; url: string; } declare class EuiWizardStep implements IEuiWizardStep { id: string; indexLabel: string; indexIconSvgName: string; label: string; subLabel: string; isCompleted: boolean; isActive: boolean; isShowStepTitle: boolean; isInvalid: boolean; isWarning: boolean; isDisabled: boolean; index: number; url: string; constructor(values?: any); toString(): string; toJSON(): object; } /** * @description * Individual step component within an eui-wizard. * Represents a single stage in a multi-step process with configurable state indicators. * Supports completion, validation, and warning states with custom labels and icons. * Must be used as a child of eui-wizard component. * Automatically manages visual state based on wizard navigation and step progression. */ declare class EuiWizardStepComponent implements EuiWizardStep { /** * Unique identifier for the step. * Used for programmatic step selection and tracking. */ id: string; /** * Text label displayed inside the step indicator circle. * Typically a number or short text representing step order. */ indexLabel: string; /** * SVG icon name displayed inside the step indicator circle. * Alternative to indexLabel for visual step representation. * Follows eui-icon-svg naming convention. */ indexIconSvgName: string; /** * Primary label text for the step. * Displayed as the main step title. */ label: string; /** * Secondary descriptive text for the step. * Provides additional context below the main label. */ subLabel: string; /** * Numeric position of the step in the wizard sequence. * Used for ordering and navigation logic. */ index: number; /** * Optional URL associated with the step. * Can be used for routing or deep linking to specific wizard steps. */ url: string; /** * Marks the step as completed. * Displays completion indicator (typically a checkmark) in the step circle. * @default false */ isCompleted: boolean; /** * Marks the step as currently active. * Applies active styling and indicates current wizard position. * @default false */ isActive: boolean; /** * Shows the step title below the step indicator. * Inherited from parent wizard but can be overridden per step. * @default false */ isShowStepTitle: boolean; /** * Marks the step as invalid or containing errors. * Displays error styling to indicate validation failure. * @default false */ isInvalid: boolean; /** * Marks the step with a warning state. * Displays warning styling to indicate attention needed. * @default false */ isWarning: boolean; /** * Disables the step from being selected or navigated to. * Prevents user interaction with the step indicator. * @default false */ isDisabled: boolean; /** * TODO: from which one is this method being used from? */ toJSON(): object; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isCompleted: unknown; static ngAcceptInputType_isActive: unknown; static ngAcceptInputType_isShowStepTitle: unknown; static ngAcceptInputType_isInvalid: unknown; static ngAcceptInputType_isWarning: unknown; static ngAcceptInputType_isDisabled: unknown; } /** * @description * Multi-step wizard component for guiding users through sequential processes or forms. * Displays step indicators with navigation controls and manages step activation state. * Supports keyboard navigation with arrow keys and programmatic step selection. * Provides both declarative (content children) and programmatic (steps array) configuration. * Commonly used for onboarding flows, multi-page forms, checkout processes, and guided workflows. * * @usageNotes * ### Basic Usage * ```html * * *
*
* *
*
* *
*
*
* ``` * * ### Programmatic Steps * ```html * * * ``` * * ```typescript * wizardSteps: EuiWizardStep[] = [ * { label: 'Step 1', id: 'step1' }, * { label: 'Step 2', id: 'step2' }, * { label: 'Step 3', id: 'step3' } * ]; * currentStep = 1; * ``` * * ### Accessibility * - Use role="navigation" with aria-label describing the wizard * - Each step has clear labels and state indicators * - Keyboard navigation: Arrow keys to move between steps * - Current step is announced to screen readers * * ### Notes * - activeStepIndex is 1-based (first step is 1, not 0) * - Steps can be defined declaratively or programmatically * - Visual indicators show completed, current, and upcoming steps * - Supports both linear and non-linear navigation patterns */ declare class EuiWizardComponent implements AfterContentInit, OnChanges { /** * Index of the currently active step (1-based). * When set, activates the corresponding step in the wizard. * Used for programmatic step control. */ activeStepIndex: number; /** * Array of wizard step configurations. * Can be used instead of or in addition to content children steps. * Each step should conform to EuiWizardStep interface. * @default [] */ steps: Array; /** * Tab index value for keyboard navigation focus management. * Controls whether wizard is included in tab order. * @default 0 */ tabindex: number; /** * Data attribute used for end-to-end testing identification. * @default 'eui-wizard' */ e2eAttr: string; /** * Emitted when a step is selected or activated. * Payload: EuiWizardStep object representing the newly active step. * Triggers on user click, keyboard navigation, or programmatic selection. */ selectStep: EventEmitter; childrenSteps: QueryList; canBeFocused: QueryList; stepContentId: string; stepIds: string; /** * Enables custom content mode where step content is managed externally. * When true, wizard only displays step indicators without content areas. * @default false */ isCustomContent: boolean; /** * Displays step titles below step indicators. * Provides additional context for each step in the wizard. * @default false */ isShowStepTitle: boolean; /** * Enables or disables step navigation. * When false, prevents users from clicking steps or using keyboard navigation. * Useful for enforcing sequential completion. * @default true */ isNavigationAllowed: boolean; ngAfterContentInit(): void; ngOnChanges(changes: SimpleChanges): void; onSelectStep(step: EuiWizardStep, index: number): void; onKeyDown(event: KeyboardEvent): void; /** @deprecated This will be removed in next version of eUI */ protected trackByFn(index: number, item: EuiWizardStep): string; protected selectPreviousStep(): void; protected selectNextStep(): void; private _selectStep; private _getStep; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_isCustomContent: unknown; static ngAcceptInputType_isShowStepTitle: unknown; static ngAcceptInputType_isNavigationAllowed: unknown; } /** * @description * Service for managing wizard state and navigation in eui-wizard components. * Tracks active step index, handles step transitions, and integrates with Angular Router for URL-based navigation. * Provides programmatic control over wizard progression and step selection. * Intended injection scope: Component-level (provided in wizard component). * Dependencies: Angular Router for route-based step navigation. */ declare class EuiWizardService { activeStepIndex: number; steps: EuiWizardStep[]; route: ActivatedRoute; private router; /** * Initializes the wizard service with step configuration and routing context. * Sets up step collection and determines active step based on current URL. * Must be called before using other service methods. * @param steps - Array of wizard step configurations to manage * @param route - ActivatedRoute for relative navigation context */ init(steps: EuiWizardStep[], route: ActivatedRoute): void; /** * Navigates to a step relative to the current active step. * Increments or decrements the active step index by the specified amount. * Prevents navigation beyond first or last step boundaries. * @param increment - Number of steps to move (positive for forward, negative for backward) */ navigationIncrement(increment: number): void; /** * Activates a specific wizard step and navigates to its URL if defined. * Updates active step index and triggers route navigation when step has associated URL. * @param step - The wizard step to select and navigate to */ selectStep(step: EuiWizardStep): void; private _navigateToStep; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare const EUI_WIZARD: readonly [typeof EuiWizardStepComponent, typeof EuiWizardComponent]; export { EUI_WIZARD, EuiWizardComponent, EuiWizardService, EuiWizardStep, EuiWizardStepComponent }; export type { IEuiWizardStep }; //# sourceMappingURL=eui-components-eui-wizard.d.ts.map