import * as i0 from '@angular/core';
import { ElementRef, OnChanges, OnInit, AfterContentInit, OnDestroy, EventEmitter, TemplateRef, SimpleChanges, ChangeDetectorRef, AfterViewInit, Renderer2 } from '@angular/core';
import { IBaseEventArgs, IBaseCancelableBrowserEventArgs, PlatformUtil } from 'igniteui-angular/core';
import { IgxCarouselComponentBase, CarouselAnimationDirection, IgxSlideComponentBase } from 'igniteui-angular/carousel';
import { ToggleAnimationSettings, ToggleAnimationPlayer } from 'igniteui-angular/expansion-panel';
/**
* Allows a custom element to be added as an active step indicator.
*
* @igxModule IgxStepperModule
* @igxTheme igx-stepper-theme
* @igxKeywords stepper
* @igxGroup Layouts
*
* @example
*
*
* edit
*
*
*/
declare class IgxStepActiveIndicatorDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Allows a custom element to be added as a complete step indicator.
*
* @igxModule IgxStepperModule
* @igxTheme igx-stepper-theme
* @igxKeywords stepper
* @igxGroup Layouts
*
* @example
*
*
* check
*
*
*/
declare class IgxStepCompletedIndicatorDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Allows a custom element to be added as an invalid step indicator.
*
* @igxModule IgxStepperModule
* @igxTheme igx-stepper-theme
* @igxKeywords stepper
* @igxGroup Layouts
*
* @example
*
*
* error
*
*
*/
declare class IgxStepInvalidIndicatorDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Allows a custom element to be added as a step indicator.
*
* @igxModule IgxStepperModule
* @igxTheme igx-stepper-theme
* @igxKeywords stepper
* @igxGroup Layouts
*
* @example
*
*
* home
*
*
*/
declare class IgxStepIndicatorDirective {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Allows a custom element to be added as a step title.
*
* @igxModule IgxStepperModule
* @igxTheme igx-stepper-theme
* @igxKeywords stepper
* @igxGroup Layouts
*
* @example
*
*
* Home
*
*
*/
declare class IgxStepTitleDirective {
defaultClass: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Allows a custom element to be added as a step subtitle.
*
* @igxModule IgxStepperModule
* @igxTheme igx-stepper-theme
* @igxKeywords stepper
* @igxGroup Layouts
*
* @example
*
*
* Home Subtitle
*
*
*/
declare class IgxStepSubtitleDirective {
defaultClass: boolean;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Allows a custom element to be added as a step content.
*
* @igxModule IgxStepperModule
* @igxTheme igx-stepper-theme
* @igxKeywords stepper
* @igxGroup Layouts
*
* @example
*
*
* ...
*
*
*/
declare class IgxStepContentDirective {
private step;
private stepperService;
elementRef: ElementRef;
private get target();
defaultClass: boolean;
role: string;
get stepId(): string;
id: string;
get tabIndex(): number;
set tabIndex(val: number);
private _tabIndex;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* IgxStepper provides a wizard-like workflow by dividing content into logical steps.
*
* @igxModule IgxStepperModule
*
* @igxKeywords stepper
*
* @igxGroup Layouts
*
* @remarks
* The Ignite UI for Angular 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.
* The component offers keyboard navigation and API to control the active step.
*
* @example
* ```html
*
*
* home
* Home
*
* ...
*
*
*
*
* ...
*
*
*
*
* ...
*
*
*
* ```
*/
declare class IgxStepperComponent extends IgxCarouselComponentBase implements IgxStepper, OnChanges, OnInit, AfterContentInit, OnDestroy {
private stepperService;
private element;
/**
* Get/Set the animation type of the stepper when the orientation direction is vertical.
*
* @remarks
* Default value is `grow`. Other possible values are `fade` and `none`.
*
* ```html
*
*
* ```
*/
get verticalAnimationType(): VerticalAnimationType;
set verticalAnimationType(value: VerticalAnimationType);
/**
* Get/Set the animation type of the stepper when the orientation direction is horizontal.
*
* @remarks
* Default value is `grow`. Other possible values are `fade` and `none`.
*
* ```html
*
*
* ```
*/
get horizontalAnimationType(): HorizontalAnimationType;
set horizontalAnimationType(value: HorizontalAnimationType);
/**
* Get/Set the animation duration.
* ```html
*
*
* ```
*/
get animationDuration(): number;
set animationDuration(value: number);
/**
* 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.
*
* ```html
*
* ```
*/
get linear(): boolean;
set linear(value: boolean);
/**
* Get/Set the stepper orientation.
*
* ```typescript
* this.stepper.orientation = IgxStepperOrientation.Vertical;
* ```
*/
get orientation(): IgxStepperOrientation;
set orientation(value: IgxStepperOrientation);
/**
* Get/Set the type of the steps.
*
* ```typescript
* this.stepper.stepType = IgxStepType.Indicator;
* ```
*/
stepType: IgxStepType;
/**
* Get/Set whether the content is displayed above the steps.
*
* @remarks
* Default value is `false` and the content is below the steps.
*
* ```typescript
* this.stepper.contentTop = true;
* ```
*/
contentTop: boolean;
/**
* Get/Set the position of the steps title.
*
* @remarks
* The default value when the stepper is horizontally orientated is `bottom`.
* In vertical layout the default title position is `end`.
*
* ```typescript
* this.stepper.titlePosition = IgxStepperTitlePosition.Top;
* ```
*/
titlePosition: IgxStepperTitlePosition;
/** @hidden @internal **/
cssClass: string;
/** @hidden @internal **/
role: string;
/** @hidden @internal **/
get directionClass(): boolean;
/**
* Emitted when the stepper's active step is changing.
*
*```html
*
*
* ```
*
*```typescript
* public handleActiveStepChanging(event: IStepChangingEventArgs) {
* if (event.newIndex < event.oldIndex) {
* event.cancel = true;
* }
* }
*```
*/
activeStepChanging: EventEmitter;
/**
* Emitted when the active step is changed.
*
* @example
* ```
*
* ```
*/
activeStepChanged: EventEmitter;
/** @hidden @internal */
invalidIndicatorTemplate: TemplateRef;
/** @hidden @internal */
completedIndicatorTemplate: TemplateRef;
/** @hidden @internal */
activeIndicatorTemplate: TemplateRef;
/** @hidden @internal */
private _steps;
/**
* Get all steps.
*
* ```typescript
* const steps: IgxStepComponent[] = this.stepper.steps;
* ```
*/
get steps(): IgxStepComponent[];
/** @hidden @internal */
get nativeElement(): HTMLElement;
/** @hidden @internal */
verticalAnimationSettings: ToggleAnimationSettings;
/** @hidden @internal */
_defaultTitlePosition: IgxStepperTitlePosition;
private destroy$;
private _orientation;
private _verticalAnimationType;
private _linear;
private readonly _defaultAnimationDuration;
constructor();
/** @hidden @internal */
ngOnChanges(changes: SimpleChanges): void;
/** @hidden @internal */
ngOnInit(): void;
/** @hidden @internal */
ngAfterContentInit(): void;
/** @hidden @internal */
ngOnDestroy(): void;
/**
* Activates the step at a given index.
*
*```typescript
* this.stepper.navigateTo(1);
*```
*/
navigateTo(index: number): void;
/**
* Activates the next enabled step.
*
*```typescript
* this.stepper.next();
*```
*/
next(): void;
/**
* Activates the previous enabled step.
*
*```typescript
* this.stepper.prev();
*```
*/
prev(): void;
/**
* Resets the stepper to its initial state i.e. activates the first step.
*
* @remarks
* The steps' content will not be automatically reset.
*```typescript
* this.stepper.reset();
*```
*/
reset(): void;
/** @hidden @internal */
playHorizontalAnimations(): void;
protected getPreviousElement(): HTMLElement;
protected getCurrentElement(): HTMLElement;
private updateVerticalAnimationSettings;
private updateStepAria;
private handleStepChanges;
private activateFirstStep;
private activateStep;
private moveToNextStep;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_linear: unknown;
static ngAcceptInputType_contentTop: unknown;
}
interface IgxStepper extends IgxCarouselComponentBase {
steps: IgxStepComponent[];
/** @hidden @internal */
nativeElement: HTMLElement;
/** @hidden @internal */
invalidIndicatorTemplate: TemplateRef;
/** @hidden @internal */
completedIndicatorTemplate: TemplateRef;
/** @hidden @internal */
activeIndicatorTemplate: TemplateRef;
verticalAnimationType: VerticalAnimationType;
horizontalAnimationType: HorizontalAnimationType;
animationDuration: number;
linear: boolean;
orientation: IgxStepperOrientation;
stepType: IgxStepType;
contentTop: boolean;
titlePosition: IgxStepperTitlePosition;
/** @hidden @internal */
verticalAnimationSettings: ToggleAnimationSettings;
/** @hidden @internal */
_defaultTitlePosition: IgxStepperTitlePosition;
activeStepChanging: EventEmitter;
activeStepChanged: EventEmitter;
navigateTo(index: number): void;
next(): void;
prev(): void;
reset(): void;
/** @hidden @internal */
playHorizontalAnimations(): void;
}
interface IgxStep extends ToggleAnimationPlayer {
id: string;
/** @hidden @internal */
contentTemplate: TemplateRef;
/** @hidden @internal */
customIndicatorTemplate: TemplateRef;
/** @hidden @internal */
contentContainer: ElementRef;
/** @hidden @internal */
indicator: IgxStepIndicatorDirective;
/** @hidden @internal */
content: IgxStepContentDirective;
/** @hidden @internal */
indicatorTemplate: TemplateRef;
index: number;
disabled: boolean;
completed: boolean;
isValid: boolean;
optional: boolean;
active: boolean;
tabIndex: number;
/** @hidden @internal */
contentId: string;
/** @hidden @internal */
generalDisabled: boolean;
/** @hidden @internal */
titlePositionTop: string;
/** @hidden @internal */
direction: CarouselAnimationDirection;
/** @hidden @internal */
isAccessible: boolean;
/** @hidden @internal */
isHorizontal: boolean;
/** @hidden @internal */
isTitleVisible: boolean;
/** @hidden @internal */
isIndicatorVisible: boolean;
/** @hidden @internal */
titlePosition: string;
/** @hidden @internal */
linearDisabled: boolean;
/** @hidden @internal */
collapsing: boolean;
/** @hidden @internal */
animationSettings: ToggleAnimationSettings;
/** @hidden @internal */
contentClasses: any;
/** @hidden @internal */
stepHeaderClasses: any;
/** @hidden @internal */
nativeElement: HTMLElement;
/** @hidden @internal */
previous: boolean;
cdr: ChangeDetectorRef;
activeChange: EventEmitter;
}
interface IStepChangingEventArgs extends IBaseEventArgs, IBaseCancelableBrowserEventArgs {
newIndex: number;
oldIndex: number;
owner: IgxStepper;
}
interface IStepChangedEventArgs extends IBaseEventArgs {
index: number;
owner: IgxStepper;
}
declare const IgxStepperOrientation: {
readonly Horizontal: "horizontal";
readonly Vertical: "vertical";
};
type IgxStepperOrientation = (typeof IgxStepperOrientation)[keyof typeof IgxStepperOrientation];
declare const IgxStepType: {
readonly Indicator: "indicator";
readonly Title: "title";
readonly Full: "full";
};
type IgxStepType = (typeof IgxStepType)[keyof typeof IgxStepType];
declare const IgxStepperTitlePosition: {
readonly Bottom: "bottom";
readonly Top: "top";
readonly End: "end";
readonly Start: "start";
};
type IgxStepperTitlePosition = (typeof IgxStepperTitlePosition)[keyof typeof IgxStepperTitlePosition];
declare const VerticalAnimationType: {
readonly Grow: "grow";
readonly Fade: "fade";
readonly None: "none";
};
type VerticalAnimationType = (typeof VerticalAnimationType)[keyof typeof VerticalAnimationType];
declare const HorizontalAnimationType: {
readonly none: "none";
readonly slide: "slide";
readonly fade: "fade";
};
type HorizontalAnimationType = (typeof HorizontalAnimationType)[keyof typeof HorizontalAnimationType];
/** @hidden @internal */
declare class IgxStepperService {
activeStep: IgxStepComponent;
previousActiveStep: IgxStepComponent;
focusedStep: IgxStepComponent;
collapsingSteps: Set;
linearDisabledSteps: Set;
visitedSteps: Set;
stepper: IgxStepper;
/**
* Activates the step, fires the steps change event and plays animations.
*/
expand(step: IgxStepComponent): void;
/**
* Activates the step and fires the steps change event without playing animations.
*/
expandThroughApi(step: IgxStepComponent): void;
/**
* Collapses the currently active step and fires the change event.
*/
collapse(step: IgxStepComponent): void;
/**
* Determines the steps that should be marked as visited based on the active step.
*/
calculateVisitedSteps(): void;
/**
* Determines the steps that should be disabled in linear mode based on the validity of the active step.
*/
calculateLinearDisabledSteps(): void;
emitActivatingEvent(step: IgxStepComponent): boolean;
/**
* Updates the linearDisabled steps from the current active step to the next required invalid step.
*
* @param toIndex the index of the last step that should be enabled.
*/
private updateLinearDisabledSteps;
private getNextRequiredStep;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵprov: i0.ɵɵInjectableDeclaration;
}
/**
* The IgxStepComponent is used within the `igx-stepper` element and it holds the content of each step.
* It also supports custom indicators, title and subtitle.
*
* @igxModule IgxStepperModule
*
* @igxKeywords step
*
* @example
* ```html
*
* ...
*
* ...
*
* ...
*
* ```
*/
declare class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep, AfterViewInit, OnDestroy, IgxSlideComponentBase {
stepper: IgxStepper;
cdr: ChangeDetectorRef;
renderer: Renderer2;
protected platform: PlatformUtil;
protected stepperService: IgxStepperService;
private element;
private dir;
/**
* Get/Set the `id` of the step component.
* Default value is `"igx-step-0"`;
* ```html
*
* ```
* ```typescript
* const stepId = this.step.id;
* ```
*/
id: string;
/**
* Get/Set whether the step is interactable.
*
* ```html
*
* ...
*
* ...
*
* ```
*
* ```typescript
* this.stepper.steps[1].disabled = true;
* ```
*/
set disabled(value: boolean);
get disabled(): boolean;
/**
* Get/Set whether the step is completed.
*
* @remarks
* When set to `true` the following separator is styled `solid`.
*
* ```html
*
* ...
*
* ...
*
* ```
*
* ```typescript
* this.stepper.steps[1].completed = true;
* ```
*/
completed: boolean;
/**
* Get/Set whether the step is valid.
*```html
*
* ...
*
*
*
*
* ```
*/
get isValid(): boolean;
set isValid(value: boolean);
/**
* Get/Set 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.
*
* ```html
*
* ```
* ```typescript
* this.stepper.steps[1].optional = true;
* ```
*/
optional: boolean;
/**
* Get/Set the active state of the step
*
* ```html
*
* ```
*
* ```typescript
* this.stepper.steps[1].active = true;
* ```
*
* @param value: boolean
*/
set active(value: boolean);
get active(): boolean;
/** @hidden @internal */
set tabIndex(value: number);
get tabIndex(): number;
/** @hidden @internal **/
role: string;
/** @hidden @internal */
get contentId(): string;
/** @hidden @internal */
cssClass: boolean;
/** @hidden @internal */
get generalDisabled(): boolean;
/** @hidden @internal */
get titlePositionTop(): string;
/**
* Emitted when the step's `active` property changes. Can be used for two-way binding.
*
* ```html
*
*
* ```
*
* ```typescript
* const step: IgxStepComponent = this.stepper.step[0];
* step.activeChange.subscribe((e: boolean) => console.log("Step active state change to ", e))
* ```
*/
activeChange: EventEmitter;
/** @hidden @internal */
contentTemplate: TemplateRef;
/** @hidden @internal */
customIndicatorTemplate: TemplateRef;
/** @hidden @internal */
contentContainer: ElementRef;
/** @hidden @internal */
indicator: IgxStepIndicatorDirective;
/** @hidden @internal */
content: IgxStepContentDirective;
/**
* Get the step index inside of the stepper.
*
* ```typescript
* const step = this.stepper.steps[1];
* const stepIndex: number = step.index;
* ```
*/
get index(): number;
/** @hidden @internal */
get indicatorTemplate(): TemplateRef;
/** @hidden @internal */
get direction(): CarouselAnimationDirection;
/** @hidden @internal */
get isAccessible(): boolean;
/** @hidden @internal */
get isHorizontal(): boolean;
/** @hidden @internal */
get isTitleVisible(): boolean;
/** @hidden @internal */
get isIndicatorVisible(): boolean;
/** @hidden @internal */
get titlePosition(): string;
/** @hidden @internal */
get linearDisabled(): boolean;
/** @hidden @internal */
get collapsing(): boolean;
/** @hidden @internal */
get animationSettings(): ToggleAnimationSettings;
/** @hidden @internal */
get contentClasses(): any;
/** @hidden @internal */
get stepHeaderClasses(): any;
/** @hidden @internal */
get nativeElement(): HTMLElement;
/** @hidden @internal */
previous: boolean;
/** @hidden @internal */
_index: number;
private _tabIndex;
private _valid;
private _focused;
private _disabled;
/** @hidden @internal */
onFocus(): void;
/** @hidden @internal */
onBlur(): void;
/** @hidden @internal */
handleKeydown(event: KeyboardEvent): void;
/** @hidden @internal */
ngAfterViewInit(): void;
/** @hidden @internal */
onPointerDown(event: MouseEvent): void;
/** @hidden @internal */
handleNavigation(key: string): void;
/** @hidden @internal */
changeHorizontalActiveStep(): void;
private get nextStep();
private get previousStep();
private changeVerticalActiveStep;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
static ngAcceptInputType_disabled: unknown;
static ngAcceptInputType_completed: unknown;
static ngAcceptInputType_isValid: unknown;
static ngAcceptInputType_optional: unknown;
static ngAcceptInputType_active: unknown;
}
declare const IGX_STEPPER_DIRECTIVES: readonly [typeof IgxStepComponent, typeof IgxStepperComponent, typeof IgxStepTitleDirective, typeof IgxStepSubtitleDirective, typeof IgxStepIndicatorDirective, typeof IgxStepContentDirective, typeof IgxStepActiveIndicatorDirective, typeof IgxStepCompletedIndicatorDirective, typeof IgxStepInvalidIndicatorDirective];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
declare class IgxStepperModule {
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵmod: i0.ɵɵNgModuleDeclaration;
static ɵinj: i0.ɵɵInjectorDeclaration;
}
export { HorizontalAnimationType, IGX_STEPPER_DIRECTIVES, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, VerticalAnimationType };
export type { IStepChangedEventArgs, IStepChangingEventArgs };