wj-elements
Version:
WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.
81 lines (80 loc) • 3.92 kB
TypeScript
import { default as WJElement } from '../wje-element/element.js';
import { Localizer } from '../utils/localize.js';
/**
* `Stepper` is a custom web component that represents a stepper.
* @summary This element represents a stepper.
* @documentation https://elements.webjet.sk/components/stepper
* @status stable
* @augments WJElement
* @attribute {string} active - The active color for the stepper.
* @attribute {string} done - The done color for the stepper.
* @slot - The default slot for the stepper.
* @csspart native - The native part of the stepper.
* @csspart header - The header part of the stepper.
* @csspart content - The content part of the stepper.
* @tag wje-stepper
*/
export default class Stepper extends WJElement {
static get cssStyleSheet(): any;
currentStep: number;
localizer: Localizer;
steps: any[];
headerSteps: any[];
get active(): string;
get done(): string;
/**
* Draws the component for the stepper.
* @returns {DocumentFragment}
*/
draw(): DocumentFragment;
header: HTMLDivElement;
prev: HTMLSlotElement;
next: HTMLSlotElement;
finish: HTMLSlotElement;
processStep(index: any, step: any, header: any, steps: any): HTMLDivElement;
/**
* Sets up the attributes for the component.
*/
afterDraw(): void;
/**
* Navigates to a different step in a multi-step process based on the provided direction.
* @param {number} direction The navigation direction.
* Use a positive value to move forward or a negative value to move backward.
*/
navigate(direction: number): void;
/**
* Navigates to a specific step in a multi-step process and updates the stepper UI accordingly.
* @param {number} stepIndex The index of the step to navigate to.
* //@fires stepper:next Dispatched when navigating to the next step.
* //@fires stepper:prev Dispatched when navigating to the previous step.
* //@fires stepper:finish Dispatched when the final step is completed.
*/
goToStep(stepIndex: number): void;
/**
* Resets a step to its default state by clearing its active and done attributes.
* Updates the step's badge to show its index and removes any color styling.
* @param {HTMLElement} nav The navigation element representing the step.
* @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
* @param {number} [stepIndex] The index of the step, used to set the badge content.
*/
setStepDefault(nav: HTMLElement, badge?: HTMLElement | null, stepIndex?: number): void;
/**
* Sets a step as active by adding the `active` attribute and updating the step's badge.
* @param {HTMLElement} nav The navigation element representing the step to activate.
* @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
* @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.
*/
setStepActive(nav: HTMLElement, badge?: HTMLElement | null, stepIndex?: number | null): void;
/**
* Activates the content of a specific step by displaying it and hiding all others.
* @param {number} stepIndex The index of the step whose content should be displayed.
*/
setContentActive(stepIndex: number): void;
/**
* Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.
* @param {HTMLElement} nav The navigation element representing the completed step.
* @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.
*/
setStepDone(nav: HTMLElement, badge?: HTMLElement | null): void;
setStepLocked(nav: any, badge?: any): void;
}