igniteui-webcomponents/components/stepper/stepper.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

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<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcStepperComponentEventMap>> & Constructor<LitElement>;
/**
 * 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
 * <igc-stepper>
 *   <igc-step>
 *     <span slot="title">Step 1</span>
 *     <p>Step 1 content</p>
 *   </igc-step>
 *   <igc-step>
 *     <span slot="title">Step 2</span>
 *     <p>Step 2 content</p>
 *   </igc-step>
 * </igc-stepper>
 * ```
 *
 * @example Linear stepper with vertical orientation
 * ```html
 * <igc-stepper orientation="vertical" linear>
 *   <igc-step complete>
 *     <span slot="title">Completed step</span>
 *     <p>This step is already complete.</p>
 *   </igc-step>
 *   <igc-step active>
 *     <span slot="title">Current step</span>
 *     <p>Fill in the details to proceed.</p>
 *   </igc-step>
 *   <igc-step>
 *     <span slot="title">Next step</span>
 *     <p>Upcoming content.</p>
 *   </igc-step>
 * </igc-stepper>
 * ```
 */
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<this>): 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 {};