import { Directionality } from '@angular/cdk/bidi';
import { CdkStepper, StepState } from '@angular/cdk/stepper';
import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, TemplateRef } from '@angular/core';
import { ProductExperienceEvent, ProductExperienceEventSource } from '../product-experience/product-experience.model';
import { C8yStepperIcon } from './stepper-icon.directive';
import * as i0 from "@angular/core";
/**
* `C8yStepper` extends the `CdkStepper`. You can use cdk based functionality and inputs.
* Additional to that you are able to modify the behavior and also the look and feel when
* using the `C8yStepper`.
*
* The `C8yStepper` is used to present any step-based process to the user.
* A stepper, `C8yStepper` and/or `CdkStepper` is the parent of cdk-steps.
* Each cdk-step represents one step in the whole process that you want to provide to the user.
*
* The `C8yStepper` will create, based on the given `cdk-steps`, a kind of stepper-progress which looks like this:
* `(1)---(2)---(3)---(n)`
* The stepper will handle the state of each step and provides styles for active steps, done-steps or in edit-mode.
* You are able to override icons for each step in the stepper-progress with a template. You are also able to activate
* default-icons for states like 'edit' and 'done'.
*
* To force users through every provided step, set the stepper to 'linear'.
* This will disable the possibility to move for example from step one to step three.
*
* Whenever it comes to validation try to use formGroups. It is possible to
* assign a `formGroup` to a `cdk-step` input called `[stepControl]`, which automatically respects the
* validation-rules that you created for this `formGroup`. If fields are required but not filled or
* any other validation, like a pattern, is not matched the `formGroup` will be invalid. In this case
* stepping in a linear stepper to the next step gets impossible.
*
* If there is the need to execute asynchronous code you have at least two possibilities.
* First: As you learned, a cdk-step works with `formGroups` and `Validators`, so you are able to use
* asyncValidators as well.
* Second: The `C8yStepper` provides an event-emitter `onStepChange` which is called whenever a step-button `(1)--(2)--(n)`
* in the stepper-progress is clicked. The event of this emitter holds the index of the step as number. You can
* use this `EventEmitter` to call for example a custom navigate-method which performs first any async-call and then moves
* on to the given step.
*
* ```typescript
*
*
*
*
*
*
*
*
*
What is the name of your hero?
*
*
*
*
* Enter the name of the Superhero
*
*
*
*
*
*
*
* ...
*
*
* ```
*/
export declare class C8yStepper extends CdkStepper implements AfterContentInit, OnDestroy, ProductExperienceEventSource {
private dir;
private changeDetectorRef;
private elementRef?;
/**
* Optional
* Indicator if icons for edit and done state should be shown in step-header buttons
*/
disableDefaultIcons?: {
edit: boolean;
done: boolean;
};
/**
* Optional
* Disable/enable navigation by stepper progress buttons
* default: false
*/
disableProgressButtons?: boolean;
/**
* Optional
* Possibility to add any kind of custom css classes to the step-header
*/
customClasses?: string[];
/**
* Optional
* Possibility to hide the stepper progress completely.
*/
hideStepProgress?: boolean;
/**
* Optional
* If `true`, the label defined on a cdk-step won't get rendered below each step-header button.
* Instead, it will be used as a title only.
*/
useStepLabelsAsTitlesOnly?: boolean;
/**
* Will emit the step index number whenever a step-header button was clicked
* It listens to the stepIndex Subject.
* @deprecated: Use the default `selectionChange` event emitter.
*/
onStepChange: EventEmitter;
/**
* Holding a QueryList of C8yStepperIcons
* These are templateRefs which overrides any step-header button icon with matching state of cdk-step
*
* ```typescript
*
*
*
*
*
*
*
*
* Your Superhero is now ready to save the world!
*
*
*
*
*
* ```
*/
_icons: QueryList;
/** Consumer-specified template-refs to be used to override the header icons. */
_iconOverrides: {
[key: string]: TemplateRef;
};
productExperienceEvent: ProductExperienceEvent;
private _stepIndex;
private _stepIndexSubscription;
/**
* @ignore
*/
constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef, elementRef?: ElementRef);
/**
* @ignore
*/
ngAfterContentInit(): void;
/**
* @ignore
*/
ngOnDestroy(): void;
/**
* Manipulates the state based on the disabledDefaultIcons Input()
* Changing edit or done to false will change the icons within step-header buttons
* @param index step index
* @param state step state, like 'done', 'edit', 'error'
*/
getIndicatorType(index: number, state: StepState): string;
/**
* Pushes the step index to the subject
* @param index step index
*/
setIndex(index: number): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
//# sourceMappingURL=stepper.component.d.ts.map