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 } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
import IgcStepComponent from './step.js';
import type { IgcStepperComponentEventMap } from './stepper.common.js';
declare const IgcStepperComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcStepperComponentEventMap>> & Constructor<LitElement>;
/**
 * IgxStepper provides a wizard-like workflow by dividing content into logical steps.
 *
 * @remarks
 * The stepper component allows the user to navigate between multiple steps.
 * It supports horizontal and vertical orientation as well as keyboard navigation and provides API methods to control the active step.
 *
 * @element igc-stepper
 *
 * @slot - Renders the step components inside default slot.
 *
 * @fires igcActiveStepChanging - Emitted when the active step is about to change.
 * @fires igcActiveStepChanged - Emitted when the active step is changed.
 */
export default class IgcStepperComponent extends IgcStepperComponent_base {
    static readonly tagName = "igc-stepper";
    protected static styles: import("lit").CSSResult;
    static register(): void;
    private readonly keyDownHandlers;
    private activeStep;
    /** Returns all of the stepper's steps. */
    steps: Array<IgcStepComponent>;
    /** Gets/Sets the orientation of the stepper.
     *
     * @remarks
     * Default value is `horizontal`.
     */
    orientation: 'horizontal' | 'vertical';
    /** Get/Set the type of the steps.
     *
     * @remarks
     * Default value is `full`.
     */
    stepType: 'indicator' | 'title' | 'full';
    /**
     * Get/Set 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.
     */
    linear: boolean;
    /**
     * Get/Set whether the content is displayed above the steps.
     *
     * @remarks
     * Default value is `false` and the content is below the steps.
     */
    contentTop: boolean;
    /**
     * The animation type when in vertical mode.
     * @attr vertical-animation
     */
    verticalAnimation: 'grow' | 'fade' | 'none';
    /**
     * The animation type when in horizontal mode.
     * @attr horizontal-animation
     */
    horizontalAnimation: 'slide' | 'fade' | 'none';
    /**
     * The animation duration in either vertical or horizontal mode.
     * @attr animation-duration
     */
    animationDuration: number;
    /**
     * Get/Set the position of the steps title.
     *
     * @remarks
     * The default value is undefined.
     * When the stepper is horizontally orientated the title is positioned below the indicator.
     * When the stepper is horizontally orientated the title is positioned on the right side of the indicator.
     */
    titlePosition?: 'bottom' | 'top' | 'end' | 'start';
    protected orientationChange(): void;
    protected stepTypeChange(): void;
    protected titlePositionChange(): void;
    protected contentTopChange(): void;
    protected linearChange(): void;
    protected animationTypeChange(): void;
    protected animationDurationChange(): void;
    constructor();
    connectedCallback(): void;
    private activateFirstStep;
    private animateSteps;
    private activateStep;
    private changeActiveStep;
    private moveToNextStep;
    private handleKeydown;
    private onHomeKey;
    private onEndKey;
    private onArrowDownKeyDown;
    private onArrowUpKeyDown;
    private onArrowRightKeyDown;
    private onArrowLeftKeyDown;
    private getNextStep;
    private getPreviousStep;
    private updateStepsLinearDisabled;
    private updateAnimation;
    private syncProperties;
    private stepsChanged;
    /** 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 {};