import { LitElement, type PropertyValues } from 'lit'; import type { Constructor } from '../common/mixins/constructor.js'; import type { HorizontalTransitionAnimation, StepperOrientation, StepperStepType, StepperTitlePosition, StepperVerticalAnimation } from '../types.js'; import type { IgcStepperComponentEventMap } from './common/types.js'; import IgcStepComponent from './step.js'; declare const IgcStepperComponent_base: Constructor> & Constructor; /** * A stepper component that provides a wizard-like workflow by dividing content into logical steps. * * @remarks * The stepper component allows the user to navigate between multiple `igc-step` elements. * It supports horizontal and vertical orientation, linear and non-linear navigation, * keyboard navigation, and provides API methods to control the active step. * * In linear mode, the user can only advance to the next step if the current step is valid * (not marked as `invalid`). * * @element igc-stepper * * @slot - Renders `igc-step` components inside the default slot. * * @fires igcActiveStepChanging - Emitted when the active step is about to change. Cancelable. * @fires igcActiveStepChanged - Emitted after the active step has changed. * * @example * ```html * * * Step 1 *

Step 1 content

*
* * Step 2 *

Step 2 content

*
*
* ``` * * @example Linear stepper with vertical orientation * ```html * * * Completed step *

This step is already complete.

*
* * Current step *

Fill in the details to proceed.

*
* * Next step *

Upcoming content.

*
*
* ``` */ export default class IgcStepperComponent extends IgcStepperComponent_base { static readonly tagName = "igc-stepper"; static styles: import("lit").CSSResult; static register(): void; private readonly _state; private readonly _contextProvider; private readonly _internals; private readonly _slots; private get _isHorizontal(); /** Returns all of the stepper's steps. */ get steps(): readonly IgcStepComponent[]; /** * The orientation of the stepper. * * @attr orientation * @default 'horizontal' */ orientation: StepperOrientation; /** * The visual type of the steps. * * @attr step-type * @default 'full' */ stepType: StepperStepType; /** * Whether the stepper is linear. * * @remarks * If the stepper is in linear mode and if the active step is valid only then the user is able to move forward. * * @attr linear * @default false */ linear: boolean; /** * Whether the content is displayed above the steps. * * @attr content-top * @default false */ contentTop: boolean; /** * The animation type when in vertical mode. * * @attr vertical-animation * @default 'grow' */ verticalAnimation: StepperVerticalAnimation; /** * The animation type when in horizontal mode. * * @attr horizontal-animation * @default 'slide' */ horizontalAnimation: HorizontalTransitionAnimation; /** * The animation duration in either vertical or horizontal mode in milliseconds. * * @attr animation-duration * @default 320 */ animationDuration: number; /** * The position of the steps title. * * @remarks * When the stepper is horizontally orientated the title is positioned below the indicator. * When the stepper is vertically orientated the title is positioned on the right side of the indicator. * * @attr title-position * @default 'auto' */ titlePosition: StepperTitlePosition; constructor(); protected update(properties: PropertyValues): void; private _skipKeyboard; private _handleHomeKey; private _handleEndKey; private _handleArrowDown; private _handleArrowUp; private _handleArrowLeft; private _handleArrowRight; private _handleInteraction; private _handleSlotChange; private _syncStepperAttributes; private _animateSteps; private _emitChanging; private _emitChanged; private _activateStep; private _moveToNextStep; private _getNextStep; private _getPreviousStep; private _getActiveStepComponent; private _getStepHeader; /** Activates the step at a given index. */ navigateTo(index: number): void; /** Activates the next enabled step. */ next(): void; /** Activates the previous enabled step. */ prev(): void; /** * Resets the stepper to its initial state i.e. activates the first step. * * @remarks * The steps' content will not be automatically reset. */ reset(): void; protected render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { 'igc-stepper': IgcStepperComponent; } } export {};