igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
254 lines (253 loc) • 8.86 kB
TypeScript
import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
import { IgxCarouselComponentBase } from '../carousel/carousel-base';
import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
import { AnimationService } from '../services/animation/animation';
import { IgxStepComponent } from './step/step.component';
import { IgxStepper, IgxStepperOrientation, IgxStepperTitlePosition, IgxStepType, IStepChangedEventArgs, IStepChangingEventArgs, VerticalAnimationType, HorizontalAnimationType } from './stepper.common';
import { IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepInvalidIndicatorDirective } from './stepper.directive';
import { IgxStepperService } from './stepper.service';
import * as i0 from "@angular/core";
/**
* 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
* <igx-stepper>
* <igx-step [active]="true">
* <igx-icon igxStepIndicator>home</igx-icon>
* <p igxStepTitle>Home</p>
* <div igxStepContent>
* ...
* </div>
* </igx-step>
* <igx-step [optional]="true">
* <div igxStepContent>
* ...
* </div>
* </igx-step>
* <igx-step>
* <div igxStepContent>
* ...
* </div>
* </igx-step>
* </igx-stepper>
* ```
*/
export 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
* <igx-stepper verticalAnimationType="none">
* <igx-stepper>
* ```
*/
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
* <igx-stepper animationType="none">
* <igx-stepper>
* ```
*/
get horizontalAnimationType(): HorizontalAnimationType;
set horizontalAnimationType(value: HorizontalAnimationType);
/**
* Get/Set the animation duration.
* ```html
* <igx-stepper [animationDuration]="500">
* <igx-stepper>
* ```
*/
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
* <igx-stepper [linear]="true"></igx-stepper>
* ```
*/
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
* <igx-stepper (activeStepChanging)="handleActiveStepChanging($event)">
* </igx-stepper>
* ```
*
*```typescript
* public handleActiveStepChanging(event: IStepChangingEventArgs) {
* if (event.newIndex < event.oldIndex) {
* event.cancel = true;
* }
* }
*```
*/
activeStepChanging: EventEmitter<IStepChangingEventArgs>;
/**
* Emitted when the active step is changed.
*
* @example
* ```
* <igx-stepper (activeStepChanged)="handleActiveStepChanged($event)"></igx-stepper>
* ```
*/
activeStepChanged: EventEmitter<IStepChangedEventArgs>;
/** @hidden @internal */
invalidIndicatorTemplate: TemplateRef<IgxStepInvalidIndicatorDirective>;
/** @hidden @internal */
completedIndicatorTemplate: TemplateRef<IgxStepCompletedIndicatorDirective>;
/** @hidden @internal */
activeIndicatorTemplate: TemplateRef<IgxStepActiveIndicatorDirective>;
/** @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(cdr: ChangeDetectorRef, animationService: AnimationService, stepperService: IgxStepperService, element: ElementRef<HTMLElement>);
/** @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<IgxStepperComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxStepperComponent, "igx-stepper", never, { "verticalAnimationType": { "alias": "verticalAnimationType"; "required": false; }; "horizontalAnimationType": { "alias": "horizontalAnimationType"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; "linear": { "alias": "linear"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "stepType": { "alias": "stepType"; "required": false; }; "contentTop": { "alias": "contentTop"; "required": false; }; "titlePosition": { "alias": "titlePosition"; "required": false; }; }, { "activeStepChanging": "activeStepChanging"; "activeStepChanged": "activeStepChanged"; }, ["invalidIndicatorTemplate", "completedIndicatorTemplate", "activeIndicatorTemplate", "_steps"], ["igx-step"], true, never>;
static ngAcceptInputType_linear: unknown;
static ngAcceptInputType_contentTop: unknown;
}