stepper.d.ts 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { FocusableOption } from '@angular/cdk/a11y';
  9. import { Directionality } from '@angular/cdk/bidi';
  10. import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, OnChanges, OnDestroy, QueryList, TemplateRef } from '@angular/core';
  11. import { Observable, Subject } from 'rxjs';
  12. import { CdkStepLabel } from './step-label';
  13. /**
  14. * Position state of the content of each step in stepper that is used for transitioning
  15. * the content into correct position upon step selection change.
  16. */
  17. export declare type StepContentPositionState = 'previous' | 'current' | 'next';
  18. /** Possible orientation of a stepper. */
  19. export declare type StepperOrientation = 'horizontal' | 'vertical';
  20. /** Change event emitted on selection changes. */
  21. export declare class StepperSelectionEvent {
  22. /** Index of the step now selected. */
  23. selectedIndex: number;
  24. /** Index of the step previously selected. */
  25. previouslySelectedIndex: number;
  26. /** The step instance now selected. */
  27. selectedStep: CdkStep;
  28. /** The step instance previously selected. */
  29. previouslySelectedStep: CdkStep;
  30. }
  31. /** The state of each step. */
  32. export declare type StepState = 'number' | 'edit' | 'done' | 'error' | string;
  33. /** Enum to represent the different states of the steps. */
  34. export declare const STEP_STATE: {
  35. NUMBER: string;
  36. EDIT: string;
  37. DONE: string;
  38. ERROR: string;
  39. };
  40. /** InjectionToken that can be used to specify the global stepper options. */
  41. export declare const STEPPER_GLOBAL_OPTIONS: InjectionToken<StepperOptions>;
  42. /**
  43. * InjectionToken that can be used to specify the global stepper options.
  44. * @deprecated Use `STEPPER_GLOBAL_OPTIONS` instead.
  45. * @breaking-change 8.0.0.
  46. */
  47. export declare const MAT_STEPPER_GLOBAL_OPTIONS: InjectionToken<StepperOptions>;
  48. /** Configurable options for stepper. */
  49. export interface StepperOptions {
  50. /**
  51. * Whether the stepper should display an error state or not.
  52. * Default behavior is assumed to be false.
  53. */
  54. showError?: boolean;
  55. /**
  56. * Whether the stepper should display the default indicator type
  57. * or not.
  58. * Default behavior is assumed to be true.
  59. */
  60. displayDefaultIndicatorType?: boolean;
  61. }
  62. export declare class CdkStep implements OnChanges {
  63. private _stepper;
  64. private _stepperOptions;
  65. _showError: boolean;
  66. _displayDefaultIndicatorType: boolean;
  67. /** Template for step label if it exists. */
  68. stepLabel: CdkStepLabel;
  69. /** Template for step content. */
  70. content: TemplateRef<any>;
  71. /** The top level abstract control of the step. */
  72. stepControl: FormControlLike;
  73. /** Whether user has seen the expanded step content or not. */
  74. interacted: boolean;
  75. /** Plain text label of the step. */
  76. label: string;
  77. /** Error message to display when there's an error. */
  78. errorMessage: string;
  79. /** Aria label for the tab. */
  80. ariaLabel: string;
  81. /**
  82. * Reference to the element that the tab is labelled by.
  83. * Will be cleared if `aria-label` is set at the same time.
  84. */
  85. ariaLabelledby: string;
  86. /** State of the step. */
  87. state: StepState;
  88. /** Whether the user can return to this step once it has been marked as completed. */
  89. editable: boolean;
  90. private _editable;
  91. /** Whether the completion of step is optional. */
  92. optional: boolean;
  93. private _optional;
  94. /** Whether step is marked as completed. */
  95. completed: boolean;
  96. _completedOverride: boolean | null;
  97. private _getDefaultCompleted;
  98. /** Whether step has an error. */
  99. hasError: boolean;
  100. private _customError;
  101. private _getDefaultError;
  102. /** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
  103. constructor(_stepper: CdkStepper, stepperOptions?: StepperOptions);
  104. /** Selects this step component. */
  105. select(): void;
  106. /** Resets the step to its initial state. Note that this includes resetting form data. */
  107. reset(): void;
  108. ngOnChanges(): void;
  109. }
  110. export declare class CdkStepper implements AfterViewInit, OnDestroy {
  111. private _dir;
  112. private _changeDetectorRef;
  113. private _elementRef?;
  114. /** Emits when the component is destroyed. */
  115. protected _destroyed: Subject<void>;
  116. /** Used for managing keyboard focus. */
  117. private _keyManager;
  118. /**
  119. * @breaking-change 8.0.0 Remove `| undefined` once the `_document`
  120. * constructor param is required.
  121. */
  122. private _document;
  123. /**
  124. * The list of step components that the stepper is holding.
  125. * @deprecated use `steps` instead
  126. * @breaking-change 9.0.0 remove this property
  127. */
  128. _steps: QueryList<CdkStep>;
  129. /** The list of step components that the stepper is holding. */
  130. readonly steps: QueryList<CdkStep>;
  131. /**
  132. * The list of step headers of the steps in the stepper.
  133. * @deprecated Type to be changed to `QueryList<CdkStepHeader>`.
  134. * @breaking-change 8.0.0
  135. */
  136. _stepHeader: QueryList<FocusableOption>;
  137. /** Whether the validity of previous steps should be checked or not. */
  138. linear: boolean;
  139. private _linear;
  140. /** The index of the selected step. */
  141. selectedIndex: number;
  142. private _selectedIndex;
  143. /** The step that is selected. */
  144. selected: CdkStep;
  145. /** Event emitted when the selected step has changed. */
  146. selectionChange: EventEmitter<StepperSelectionEvent>;
  147. /** Used to track unique ID for each stepper component. */
  148. _groupId: number;
  149. protected _orientation: StepperOrientation;
  150. constructor(_dir: Directionality, _changeDetectorRef: ChangeDetectorRef, _elementRef?: ElementRef<HTMLElement> | undefined, _document?: any);
  151. ngAfterViewInit(): void;
  152. ngOnDestroy(): void;
  153. /** Selects and focuses the next step in list. */
  154. next(): void;
  155. /** Selects and focuses the previous step in list. */
  156. previous(): void;
  157. /** Resets the stepper to its initial state. Note that this includes clearing form data. */
  158. reset(): void;
  159. /** Returns a unique id for each step label element. */
  160. _getStepLabelId(i: number): string;
  161. /** Returns unique id for each step content element. */
  162. _getStepContentId(i: number): string;
  163. /** Marks the component to be change detected. */
  164. _stateChanged(): void;
  165. /** Returns position state of the step with the given index. */
  166. _getAnimationDirection(index: number): StepContentPositionState;
  167. /** Returns the type of icon to be displayed. */
  168. _getIndicatorType(index: number, state?: StepState): StepState;
  169. private _getDefaultIndicatorLogic;
  170. private _getGuidelineLogic;
  171. private _isCurrentStep;
  172. /** Returns the index of the currently-focused step header. */
  173. _getFocusIndex(): number | null;
  174. private _updateSelectedItemIndex;
  175. _onKeydown(event: KeyboardEvent): void;
  176. private _anyControlsInvalidOrPending;
  177. private _layoutDirection;
  178. /** Checks whether the stepper contains the focused element. */
  179. private _containsFocus;
  180. }
  181. /**
  182. * Simplified representation of a FormControl from @angular/forms.
  183. * Used to avoid having to bring in @angular/forms for a single optional interface.
  184. * @docs-private
  185. */
  186. interface FormControlLike {
  187. asyncValidator: () => any | null;
  188. dirty: boolean;
  189. disabled: boolean;
  190. enabled: boolean;
  191. errors: {
  192. [key: string]: any;
  193. } | null;
  194. invalid: boolean;
  195. parent: any;
  196. pending: boolean;
  197. pristine: boolean;
  198. root: FormControlLike;
  199. status: string;
  200. statusChanges: Observable<any>;
  201. touched: boolean;
  202. untouched: boolean;
  203. updateOn: any;
  204. valid: boolean;
  205. validator: () => any | null;
  206. value: any;
  207. valueChanges: Observable<any>;
  208. clearAsyncValidators(): void;
  209. clearValidators(): void;
  210. disable(opts?: any): void;
  211. enable(opts?: any): void;
  212. get(path: (string | number)[] | string): FormControlLike | null;
  213. getError(errorCode: string, path?: (string | number)[] | string): any;
  214. hasError(errorCode: string, path?: (string | number)[] | string): boolean;
  215. markAllAsTouched(): void;
  216. markAsDirty(opts?: any): void;
  217. markAsPending(opts?: any): void;
  218. markAsPristine(opts?: any): void;
  219. markAsTouched(opts?: any): void;
  220. markAsUntouched(opts?: any): void;
  221. patchValue(value: any, options?: Object): void;
  222. reset(value?: any, options?: Object): void;
  223. setAsyncValidators(newValidator: () => any | (() => any)[] | null): void;
  224. setErrors(errors: {
  225. [key: string]: any;
  226. } | null, opts?: any): void;
  227. setParent(parent: any): void;
  228. setValidators(newValidator: () => any | (() => any)[] | null): void;
  229. setValue(value: any, options?: Object): void;
  230. updateValueAndValidity(opts?: any): void;
  231. patchValue(value: any, options?: any): void;
  232. registerOnChange(fn: Function): void;
  233. registerOnDisabledChange(fn: (isDisabled: boolean) => void): void;
  234. reset(formState?: any, options?: any): void;
  235. setValue(value: any, options?: any): void;
  236. }
  237. export {};