igniteui-webcomponents
Version:
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.
105 lines (104 loc) • 4.59 kB
TypeScript
import { LitElement, nothing } from 'lit';
import { type Animation } from './animations.js';
/**
* The step component is used within the `igc-stepper` element and it holds the content of each step.
* It also supports custom indicators, title and subtitle.
*
* @element igc-step
*
* @slot - Renders the content of the step.
* @slot indicator - Renders the indicator of the step. By default, it displays the step index + 1.
* @slot title - Renders the title of the step.
* @slot subtitle - Renders the subtitle of the step.
*
* @csspart header-container - Wrapper of the step's `header` and its separators.
* @csspart disabled - Indicates a disabled state. Applies to `header-container`.
* @csspart complete-start - Indicates a complete state of the current step. Applies to `header-container`.
* @csspart complete-end - Indicates a complete state of the previous step. Applies to `header-container`.
* @csspart optional - Indicates an optional state. Applies to `header-container`.
* @csspart invalid - Indicates an invalid state. Applies to `header-container`.
* @csspart top - Indicates that the title should be above the indicator. Applies to `header-container`.
* @csspart bottom - Indicates that the title should be below the indicator. Applies to `header-container`.
* @csspart start - Indicates that the title should be before the indicator. Applies to `header-container`.
* @csspart end - Indicates that the title should be after the indicator. Applies to `header-container`.
* @csspart header - Wrapper of the step's `indicator` and `text`.
* @csspart indicator - The indicator of the step.
* @csspart text - Wrapper of the step's `title` and `subtitle`.
* @csspart empty - Indicates that no title and subtitle has been provided to the step. Applies to `text`.
* @csspart title - The title of the step.
* @csspart subtitle - The subtitle of the step.
* @csspart body - Wrapper of the step's `content`.
* @csspart content - The steps `content`.
*/
export default class IgcStepComponent extends LitElement {
static readonly tagName = "igc-step";
static styles: import("lit").CSSResult[];
static register(): void;
private bodyRef;
private contentRef;
private bodyAnimationPlayer;
private contentAnimationPlayer;
private _titleChildren;
private _subTitleChildren;
header: HTMLElement;
contentBody: HTMLElement;
/** Gets/sets whether the step is invalid. */
invalid: boolean;
/** Gets/sets whether the step is activе. */
active: boolean;
/**
* Gets/sets whether the step is optional.
*
* @remarks
* Optional steps validity does not affect the default behavior when the stepper is in linear mode i.e.
* if optional step is invalid the user could still move to the next step.
*/
optional: boolean;
/** Gets/sets whether the step is interactable. */
disabled: boolean;
/** Gets/sets whether the step is completed.
*
* @remarks
* When set to `true` the following separator is styled `solid`.
*/
complete: boolean;
/** @hidden @internal @private */
previousComplete: boolean;
/** @hidden @internal @private */
stepType: 'indicator' | 'title' | 'full';
/** @hidden @internal @private */
titlePosition?: 'bottom' | 'top' | 'end' | 'start';
/** @hidden @internal @private */
orientation: 'horizontal' | 'vertical';
/** @hidden @internal @private */
index: number;
/** @hidden @internal @private */
contentTop: boolean;
/** @hidden @internal @private */
linearDisabled: boolean;
/** @hidden @internal @private */
visited: boolean;
/** @hidden @internal @private */
animation: Animation;
/** @hidden @internal @private */
animationDuration: number;
toggleAnimation(type: 'in' | 'out', direction?: 'normal' | 'reverse'): Promise<string>;
protected activeChange(): void;
protected disabledInvalidOptionalChange(): void;
protected completeChange(): void;
private handleClick;
private handleKeydown;
/** @hidden @internal */
get isAccessible(): boolean;
private get headerContainerParts();
private get textParts();
protected renderIndicator(): import("lit-html").TemplateResult<1> | typeof nothing;
protected renderTitleAndSubtitle(): import("lit-html").TemplateResult<1>;
protected renderContent(): import("lit-html").TemplateResult<1>;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-step': IgcStepComponent;
}
}