/** * @license * Copyright Endlessjs. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ import { QueryList } from '@angular/core'; import { ElStepComponent } from './step.component'; export declare type ElStepperOrientation = 'vertical' | 'horizontal'; /** * Stepper component * * @stacked-example(Showcase, stepper/stepper-showcase.component) * * ### Installation * * Import `ElStepperModule` to your feature module. * ```ts * @NgModule({ * imports: [ * // ... * ElStepperModule, * ], * }) * export class PageModule { } * ``` * ### Usage * * If step label is string you can pass it as `label` attribute. Otherwise ng-template should be used: * ```html * // ... * * * // ... step content here * * * *
* step number two *
*
* // ... step content here *
*
* ``` * * When linear mode enabled user can't move forward unless current step is complete. * @stacked-example(Linear, stepper/stepper-linear.component) * * Specify `[stepControl]="form"` and stepper allow go to the next step only if form is valid. * You can disable it via `linear` mode setting. * ```html * // ... * * *
* // ... *
*
* // ... *
* ``` * * @stacked-example(Validation, stepper/stepper-validation.component) * * Stepper component has two layout options - `vertical` & `horizontal` * @stacked-example(Vertical, stepper/stepper-vertical.component) * * `disableStepNavigation` disables navigation by clicking on steps, so user can navigate only using * 'elStepperPrevious' and 'elStepperNext' buttons. * @stacked-example(Disabled steps navigation, stepper/stepper-disabled-step-nav.component) * * @styles * * stepper-step-text-color: * stepper-step-text-font-family: * stepper-step-text-font-size: * stepper-step-text-font-weight: * stepper-step-text-line-height: * stepper-step-active-text-color: * stepper-step-completed-text-color: * stepper-step-index-border-color: * stepper-step-index-border-style: * stepper-step-index-border-width: * stepper-step-index-border-radius: * stepper-step-index-width: * stepper-step-index-active-border-color: * stepper-step-index-completed-background-color: * stepper-step-index-completed-border-color: * stepper-step-index-completed-text-color: * stepper-connector-background-color: * stepper-connector-completed-background-color: * stepper-horizontal-connector-margin: * stepper-vertical-connector-margin: * stepper-step-content-padding: */ export declare class ElStepperComponent { /** * Selected step index */ selectedIndex: number; protected _selectedIndex: number; /** * Disables navigation by clicking on steps. False by default * @param {boolean} value */ disableStepNavigation: boolean; protected _disableStepNavigation: boolean; /** * Selected step component */ selected: ElStepComponent | undefined; /** * Stepper orientation - `horizontal`|`vertical` */ orientation: ElStepperOrientation; /** * Allow moving forward only if the current step is complete * @default true */ linear: boolean; protected _linear: boolean; readonly vertical: boolean; readonly horizontal: boolean; steps: QueryList; /** * Navigate to next step * */ next(): void; /** * Navigate to previous step * */ previous(): void; /** * Reset stepper and stepControls to initial state * */ reset(): void; isStepSelected(step: ElStepComponent): boolean; protected isStepValid(index: number): boolean; protected canBeSelected(indexToCheck: number): boolean; protected markCurrentStepInteracted(): void; }