stepper.mjs 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  1. import { FocusKeyManager } from '@angular/cdk/a11y';
  2. import * as i1 from '@angular/cdk/bidi';
  3. import { BidiModule } from '@angular/cdk/bidi';
  4. import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
  5. import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes';
  6. import * as i0 from '@angular/core';
  7. import { Directive, InjectionToken, EventEmitter, forwardRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, ContentChild, ViewChild, Input, Output, QueryList, ContentChildren, NgModule } from '@angular/core';
  8. import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
  9. import { Subject, of } from 'rxjs';
  10. import { startWith, takeUntil } from 'rxjs/operators';
  11. class CdkStepHeader {
  12. constructor(_elementRef) {
  13. this._elementRef = _elementRef;
  14. }
  15. /** Focuses the step header. */
  16. focus() {
  17. this._elementRef.nativeElement.focus();
  18. }
  19. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepHeader, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
  20. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkStepHeader, selector: "[cdkStepHeader]", host: { attributes: { "role": "tab" } }, ngImport: i0 }); }
  21. }
  22. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepHeader, decorators: [{
  23. type: Directive,
  24. args: [{
  25. selector: '[cdkStepHeader]',
  26. host: {
  27. 'role': 'tab',
  28. },
  29. }]
  30. }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
  31. class CdkStepLabel {
  32. constructor(/** @docs-private */ template) {
  33. this.template = template;
  34. }
  35. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepLabel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
  36. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkStepLabel, selector: "[cdkStepLabel]", ngImport: i0 }); }
  37. }
  38. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepLabel, decorators: [{
  39. type: Directive,
  40. args: [{
  41. selector: '[cdkStepLabel]',
  42. }]
  43. }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
  44. /** Used to generate unique ID for each stepper component. */
  45. let nextId = 0;
  46. /** Change event emitted on selection changes. */
  47. class StepperSelectionEvent {
  48. }
  49. /** Enum to represent the different states of the steps. */
  50. const STEP_STATE = {
  51. NUMBER: 'number',
  52. EDIT: 'edit',
  53. DONE: 'done',
  54. ERROR: 'error',
  55. };
  56. /** InjectionToken that can be used to specify the global stepper options. */
  57. const STEPPER_GLOBAL_OPTIONS = new InjectionToken('STEPPER_GLOBAL_OPTIONS');
  58. class CdkStep {
  59. /** Whether the user can return to this step once it has been marked as completed. */
  60. get editable() {
  61. return this._editable;
  62. }
  63. set editable(value) {
  64. this._editable = coerceBooleanProperty(value);
  65. }
  66. /** Whether the completion of step is optional. */
  67. get optional() {
  68. return this._optional;
  69. }
  70. set optional(value) {
  71. this._optional = coerceBooleanProperty(value);
  72. }
  73. /** Whether step is marked as completed. */
  74. get completed() {
  75. return this._completedOverride == null ? this._getDefaultCompleted() : this._completedOverride;
  76. }
  77. set completed(value) {
  78. this._completedOverride = coerceBooleanProperty(value);
  79. }
  80. _getDefaultCompleted() {
  81. return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
  82. }
  83. /** Whether step has an error. */
  84. get hasError() {
  85. return this._customError == null ? this._getDefaultError() : this._customError;
  86. }
  87. set hasError(value) {
  88. this._customError = coerceBooleanProperty(value);
  89. }
  90. _getDefaultError() {
  91. return this.stepControl && this.stepControl.invalid && this.interacted;
  92. }
  93. constructor(_stepper, stepperOptions) {
  94. this._stepper = _stepper;
  95. /** Whether user has attempted to move away from the step. */
  96. this.interacted = false;
  97. /** Emits when the user has attempted to move away from the step. */
  98. this.interactedStream = new EventEmitter();
  99. this._editable = true;
  100. this._optional = false;
  101. this._completedOverride = null;
  102. this._customError = null;
  103. this._stepperOptions = stepperOptions ? stepperOptions : {};
  104. this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
  105. }
  106. /** Selects this step component. */
  107. select() {
  108. this._stepper.selected = this;
  109. }
  110. /** Resets the step to its initial state. Note that this includes resetting form data. */
  111. reset() {
  112. this.interacted = false;
  113. if (this._completedOverride != null) {
  114. this._completedOverride = false;
  115. }
  116. if (this._customError != null) {
  117. this._customError = false;
  118. }
  119. if (this.stepControl) {
  120. this.stepControl.reset();
  121. }
  122. }
  123. ngOnChanges() {
  124. // Since basically all inputs of the MatStep get proxied through the view down to the
  125. // underlying MatStepHeader, we have to make sure that change detection runs correctly.
  126. this._stepper._stateChanged();
  127. }
  128. _markAsInteracted() {
  129. if (!this.interacted) {
  130. this.interacted = true;
  131. this.interactedStream.emit(this);
  132. }
  133. }
  134. /** Determines whether the error state can be shown. */
  135. _showError() {
  136. // We want to show the error state either if the user opted into/out of it using the
  137. // global options, or if they've explicitly set it through the `hasError` input.
  138. return this._stepperOptions.showError ?? this._customError != null;
  139. }
  140. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStep, deps: [{ token: forwardRef(() => CdkStepper) }, { token: STEPPER_GLOBAL_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
  141. static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: CdkStep, selector: "cdk-step", inputs: { stepControl: "stepControl", label: "label", errorMessage: "errorMessage", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], state: "state", editable: "editable", optional: "optional", completed: "completed", hasError: "hasError" }, outputs: { interactedStream: "interacted" }, queries: [{ propertyName: "stepLabel", first: true, predicate: CdkStepLabel, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["cdkStep"], usesOnChanges: true, ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
  142. }
  143. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStep, decorators: [{
  144. type: Component,
  145. args: [{
  146. selector: 'cdk-step',
  147. exportAs: 'cdkStep',
  148. template: '<ng-template><ng-content></ng-content></ng-template>',
  149. encapsulation: ViewEncapsulation.None,
  150. changeDetection: ChangeDetectionStrategy.OnPush,
  151. }]
  152. }], ctorParameters: function () { return [{ type: CdkStepper, decorators: [{
  153. type: Inject,
  154. args: [forwardRef(() => CdkStepper)]
  155. }] }, { type: undefined, decorators: [{
  156. type: Optional
  157. }, {
  158. type: Inject,
  159. args: [STEPPER_GLOBAL_OPTIONS]
  160. }] }]; }, propDecorators: { stepLabel: [{
  161. type: ContentChild,
  162. args: [CdkStepLabel]
  163. }], content: [{
  164. type: ViewChild,
  165. args: [TemplateRef, { static: true }]
  166. }], stepControl: [{
  167. type: Input
  168. }], interactedStream: [{
  169. type: Output,
  170. args: ['interacted']
  171. }], label: [{
  172. type: Input
  173. }], errorMessage: [{
  174. type: Input
  175. }], ariaLabel: [{
  176. type: Input,
  177. args: ['aria-label']
  178. }], ariaLabelledby: [{
  179. type: Input,
  180. args: ['aria-labelledby']
  181. }], state: [{
  182. type: Input
  183. }], editable: [{
  184. type: Input
  185. }], optional: [{
  186. type: Input
  187. }], completed: [{
  188. type: Input
  189. }], hasError: [{
  190. type: Input
  191. }] } });
  192. class CdkStepper {
  193. /** Whether the validity of previous steps should be checked or not. */
  194. get linear() {
  195. return this._linear;
  196. }
  197. set linear(value) {
  198. this._linear = coerceBooleanProperty(value);
  199. }
  200. /** The index of the selected step. */
  201. get selectedIndex() {
  202. return this._selectedIndex;
  203. }
  204. set selectedIndex(index) {
  205. const newIndex = coerceNumberProperty(index);
  206. if (this.steps && this._steps) {
  207. // Ensure that the index can't be out of bounds.
  208. if (!this._isValidIndex(newIndex) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
  209. throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
  210. }
  211. this.selected?._markAsInteracted();
  212. if (this._selectedIndex !== newIndex &&
  213. !this._anyControlsInvalidOrPending(newIndex) &&
  214. (newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)) {
  215. this._updateSelectedItemIndex(newIndex);
  216. }
  217. }
  218. else {
  219. this._selectedIndex = newIndex;
  220. }
  221. }
  222. /** The step that is selected. */
  223. get selected() {
  224. return this.steps ? this.steps.toArray()[this.selectedIndex] : undefined;
  225. }
  226. set selected(step) {
  227. this.selectedIndex = step && this.steps ? this.steps.toArray().indexOf(step) : -1;
  228. }
  229. /** Orientation of the stepper. */
  230. get orientation() {
  231. return this._orientation;
  232. }
  233. set orientation(value) {
  234. // This is a protected method so that `MatStepper` can hook into it.
  235. this._orientation = value;
  236. if (this._keyManager) {
  237. this._keyManager.withVerticalOrientation(value === 'vertical');
  238. }
  239. }
  240. constructor(_dir, _changeDetectorRef, _elementRef) {
  241. this._dir = _dir;
  242. this._changeDetectorRef = _changeDetectorRef;
  243. this._elementRef = _elementRef;
  244. /** Emits when the component is destroyed. */
  245. this._destroyed = new Subject();
  246. /** Steps that belong to the current stepper, excluding ones from nested steppers. */
  247. this.steps = new QueryList();
  248. /** List of step headers sorted based on their DOM order. */
  249. this._sortedHeaders = new QueryList();
  250. this._linear = false;
  251. this._selectedIndex = 0;
  252. /** Event emitted when the selected step has changed. */
  253. this.selectionChange = new EventEmitter();
  254. this._orientation = 'horizontal';
  255. this._groupId = nextId++;
  256. }
  257. ngAfterContentInit() {
  258. this._steps.changes
  259. .pipe(startWith(this._steps), takeUntil(this._destroyed))
  260. .subscribe((steps) => {
  261. this.steps.reset(steps.filter(step => step._stepper === this));
  262. this.steps.notifyOnChanges();
  263. });
  264. }
  265. ngAfterViewInit() {
  266. // If the step headers are defined outside of the `ngFor` that renders the steps, like in the
  267. // Material stepper, they won't appear in the `QueryList` in the same order as they're
  268. // rendered in the DOM which will lead to incorrect keyboard navigation. We need to sort
  269. // them manually to ensure that they're correct. Alternatively, we can change the Material
  270. // template to inline the headers in the `ngFor`, but that'll result in a lot of
  271. // code duplication. See #23539.
  272. this._stepHeader.changes
  273. .pipe(startWith(this._stepHeader), takeUntil(this._destroyed))
  274. .subscribe((headers) => {
  275. this._sortedHeaders.reset(headers.toArray().sort((a, b) => {
  276. const documentPosition = a._elementRef.nativeElement.compareDocumentPosition(b._elementRef.nativeElement);
  277. // `compareDocumentPosition` returns a bitmask so we have to use a bitwise operator.
  278. // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
  279. // tslint:disable-next-line:no-bitwise
  280. return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
  281. }));
  282. this._sortedHeaders.notifyOnChanges();
  283. });
  284. // Note that while the step headers are content children by default, any components that
  285. // extend this one might have them as view children. We initialize the keyboard handling in
  286. // AfterViewInit so we're guaranteed for both view and content children to be defined.
  287. this._keyManager = new FocusKeyManager(this._sortedHeaders)
  288. .withWrap()
  289. .withHomeAndEnd()
  290. .withVerticalOrientation(this._orientation === 'vertical');
  291. (this._dir ? this._dir.change : of())
  292. .pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed))
  293. .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
  294. this._keyManager.updateActiveItem(this._selectedIndex);
  295. // No need to `takeUntil` here, because we're the ones destroying `steps`.
  296. this.steps.changes.subscribe(() => {
  297. if (!this.selected) {
  298. this._selectedIndex = Math.max(this._selectedIndex - 1, 0);
  299. }
  300. });
  301. // The logic which asserts that the selected index is within bounds doesn't run before the
  302. // steps are initialized, because we don't how many steps there are yet so we may have an
  303. // invalid index on init. If that's the case, auto-correct to the default so we don't throw.
  304. if (!this._isValidIndex(this._selectedIndex)) {
  305. this._selectedIndex = 0;
  306. }
  307. }
  308. ngOnDestroy() {
  309. this._keyManager?.destroy();
  310. this.steps.destroy();
  311. this._sortedHeaders.destroy();
  312. this._destroyed.next();
  313. this._destroyed.complete();
  314. }
  315. /** Selects and focuses the next step in list. */
  316. next() {
  317. this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);
  318. }
  319. /** Selects and focuses the previous step in list. */
  320. previous() {
  321. this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
  322. }
  323. /** Resets the stepper to its initial state. Note that this includes clearing form data. */
  324. reset() {
  325. this._updateSelectedItemIndex(0);
  326. this.steps.forEach(step => step.reset());
  327. this._stateChanged();
  328. }
  329. /** Returns a unique id for each step label element. */
  330. _getStepLabelId(i) {
  331. return `cdk-step-label-${this._groupId}-${i}`;
  332. }
  333. /** Returns unique id for each step content element. */
  334. _getStepContentId(i) {
  335. return `cdk-step-content-${this._groupId}-${i}`;
  336. }
  337. /** Marks the component to be change detected. */
  338. _stateChanged() {
  339. this._changeDetectorRef.markForCheck();
  340. }
  341. /** Returns position state of the step with the given index. */
  342. _getAnimationDirection(index) {
  343. const position = index - this._selectedIndex;
  344. if (position < 0) {
  345. return this._layoutDirection() === 'rtl' ? 'next' : 'previous';
  346. }
  347. else if (position > 0) {
  348. return this._layoutDirection() === 'rtl' ? 'previous' : 'next';
  349. }
  350. return 'current';
  351. }
  352. /** Returns the type of icon to be displayed. */
  353. _getIndicatorType(index, state = STEP_STATE.NUMBER) {
  354. const step = this.steps.toArray()[index];
  355. const isCurrentStep = this._isCurrentStep(index);
  356. return step._displayDefaultIndicatorType
  357. ? this._getDefaultIndicatorLogic(step, isCurrentStep)
  358. : this._getGuidelineLogic(step, isCurrentStep, state);
  359. }
  360. _getDefaultIndicatorLogic(step, isCurrentStep) {
  361. if (step._showError() && step.hasError && !isCurrentStep) {
  362. return STEP_STATE.ERROR;
  363. }
  364. else if (!step.completed || isCurrentStep) {
  365. return STEP_STATE.NUMBER;
  366. }
  367. else {
  368. return step.editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
  369. }
  370. }
  371. _getGuidelineLogic(step, isCurrentStep, state = STEP_STATE.NUMBER) {
  372. if (step._showError() && step.hasError && !isCurrentStep) {
  373. return STEP_STATE.ERROR;
  374. }
  375. else if (step.completed && !isCurrentStep) {
  376. return STEP_STATE.DONE;
  377. }
  378. else if (step.completed && isCurrentStep) {
  379. return state;
  380. }
  381. else if (step.editable && isCurrentStep) {
  382. return STEP_STATE.EDIT;
  383. }
  384. else {
  385. return state;
  386. }
  387. }
  388. _isCurrentStep(index) {
  389. return this._selectedIndex === index;
  390. }
  391. /** Returns the index of the currently-focused step header. */
  392. _getFocusIndex() {
  393. return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex;
  394. }
  395. _updateSelectedItemIndex(newIndex) {
  396. const stepsArray = this.steps.toArray();
  397. this.selectionChange.emit({
  398. selectedIndex: newIndex,
  399. previouslySelectedIndex: this._selectedIndex,
  400. selectedStep: stepsArray[newIndex],
  401. previouslySelectedStep: stepsArray[this._selectedIndex],
  402. });
  403. // If focus is inside the stepper, move it to the next header, otherwise it may become
  404. // lost when the active step content is hidden. We can't be more granular with the check
  405. // (e.g. checking whether focus is inside the active step), because we don't have a
  406. // reference to the elements that are rendering out the content.
  407. this._containsFocus()
  408. ? this._keyManager.setActiveItem(newIndex)
  409. : this._keyManager.updateActiveItem(newIndex);
  410. this._selectedIndex = newIndex;
  411. this._stateChanged();
  412. }
  413. _onKeydown(event) {
  414. const hasModifier = hasModifierKey(event);
  415. const keyCode = event.keyCode;
  416. const manager = this._keyManager;
  417. if (manager.activeItemIndex != null &&
  418. !hasModifier &&
  419. (keyCode === SPACE || keyCode === ENTER)) {
  420. this.selectedIndex = manager.activeItemIndex;
  421. event.preventDefault();
  422. }
  423. else {
  424. manager.setFocusOrigin('keyboard').onKeydown(event);
  425. }
  426. }
  427. _anyControlsInvalidOrPending(index) {
  428. if (this._linear && index >= 0) {
  429. return this.steps
  430. .toArray()
  431. .slice(0, index)
  432. .some(step => {
  433. const control = step.stepControl;
  434. const isIncomplete = control
  435. ? control.invalid || control.pending || !step.interacted
  436. : !step.completed;
  437. return isIncomplete && !step.optional && !step._completedOverride;
  438. });
  439. }
  440. return false;
  441. }
  442. _layoutDirection() {
  443. return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
  444. }
  445. /** Checks whether the stepper contains the focused element. */
  446. _containsFocus() {
  447. const stepperElement = this._elementRef.nativeElement;
  448. const focusedElement = _getFocusedElementPierceShadowDom();
  449. return stepperElement === focusedElement || stepperElement.contains(focusedElement);
  450. }
  451. /** Checks whether the passed-in index is a valid step index. */
  452. _isValidIndex(index) {
  453. return index > -1 && (!this.steps || index < this.steps.length);
  454. }
  455. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepper, deps: [{ token: i1.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
  456. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkStepper, selector: "[cdkStepper]", inputs: { linear: "linear", selectedIndex: "selectedIndex", selected: "selected", orientation: "orientation" }, outputs: { selectionChange: "selectionChange" }, queries: [{ propertyName: "_steps", predicate: CdkStep, descendants: true }, { propertyName: "_stepHeader", predicate: CdkStepHeader, descendants: true }], exportAs: ["cdkStepper"], ngImport: i0 }); }
  457. }
  458. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepper, decorators: [{
  459. type: Directive,
  460. args: [{
  461. selector: '[cdkStepper]',
  462. exportAs: 'cdkStepper',
  463. }]
  464. }], ctorParameters: function () { return [{ type: i1.Directionality, decorators: [{
  465. type: Optional
  466. }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { _steps: [{
  467. type: ContentChildren,
  468. args: [CdkStep, { descendants: true }]
  469. }], _stepHeader: [{
  470. type: ContentChildren,
  471. args: [CdkStepHeader, { descendants: true }]
  472. }], linear: [{
  473. type: Input
  474. }], selectedIndex: [{
  475. type: Input
  476. }], selected: [{
  477. type: Input
  478. }], selectionChange: [{
  479. type: Output
  480. }], orientation: [{
  481. type: Input
  482. }] } });
  483. /** Button that moves to the next step in a stepper workflow. */
  484. class CdkStepperNext {
  485. constructor(_stepper) {
  486. this._stepper = _stepper;
  487. /** Type of the next button. Defaults to "submit" if not specified. */
  488. this.type = 'submit';
  489. }
  490. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepperNext, deps: [{ token: CdkStepper }], target: i0.ɵɵFactoryTarget.Directive }); }
  491. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkStepperNext, selector: "button[cdkStepperNext]", inputs: { type: "type" }, host: { listeners: { "click": "_stepper.next()" }, properties: { "type": "type" } }, ngImport: i0 }); }
  492. }
  493. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepperNext, decorators: [{
  494. type: Directive,
  495. args: [{
  496. selector: 'button[cdkStepperNext]',
  497. host: {
  498. '[type]': 'type',
  499. '(click)': '_stepper.next()',
  500. },
  501. }]
  502. }], ctorParameters: function () { return [{ type: CdkStepper }]; }, propDecorators: { type: [{
  503. type: Input
  504. }] } });
  505. /** Button that moves to the previous step in a stepper workflow. */
  506. class CdkStepperPrevious {
  507. constructor(_stepper) {
  508. this._stepper = _stepper;
  509. /** Type of the previous button. Defaults to "button" if not specified. */
  510. this.type = 'button';
  511. }
  512. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepperPrevious, deps: [{ token: CdkStepper }], target: i0.ɵɵFactoryTarget.Directive }); }
  513. static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CdkStepperPrevious, selector: "button[cdkStepperPrevious]", inputs: { type: "type" }, host: { listeners: { "click": "_stepper.previous()" }, properties: { "type": "type" } }, ngImport: i0 }); }
  514. }
  515. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepperPrevious, decorators: [{
  516. type: Directive,
  517. args: [{
  518. selector: 'button[cdkStepperPrevious]',
  519. host: {
  520. '[type]': 'type',
  521. '(click)': '_stepper.previous()',
  522. },
  523. }]
  524. }], ctorParameters: function () { return [{ type: CdkStepper }]; }, propDecorators: { type: [{
  525. type: Input
  526. }] } });
  527. class CdkStepperModule {
  528. static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
  529. static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: CdkStepperModule, declarations: [CdkStep,
  530. CdkStepper,
  531. CdkStepHeader,
  532. CdkStepLabel,
  533. CdkStepperNext,
  534. CdkStepperPrevious], imports: [BidiModule], exports: [CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious] }); }
  535. static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepperModule, imports: [BidiModule] }); }
  536. }
  537. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CdkStepperModule, decorators: [{
  538. type: NgModule,
  539. args: [{
  540. imports: [BidiModule],
  541. exports: [CdkStep, CdkStepper, CdkStepHeader, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
  542. declarations: [
  543. CdkStep,
  544. CdkStepper,
  545. CdkStepHeader,
  546. CdkStepLabel,
  547. CdkStepperNext,
  548. CdkStepperPrevious,
  549. ],
  550. }]
  551. }] });
  552. /**
  553. * Generated bundle index. Do not edit.
  554. */
  555. export { CdkStep, CdkStepHeader, CdkStepLabel, CdkStepper, CdkStepperModule, CdkStepperNext, CdkStepperPrevious, STEPPER_GLOBAL_OPTIONS, STEP_STATE, StepperSelectionEvent };
  556. //# sourceMappingURL=stepper.mjs.map