stepper.es5.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954
  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 { Directive, ElementRef, TemplateRef, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, EventEmitter, forwardRef, Inject, InjectionToken, Input, Optional, Output, ViewChild, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
  9. import { FocusKeyManager } from '@angular/cdk/a11y';
  10. import { Directionality, BidiModule } from '@angular/cdk/bidi';
  11. import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
  12. import { END, ENTER, hasModifierKey, HOME, SPACE } from '@angular/cdk/keycodes';
  13. import { DOCUMENT, CommonModule } from '@angular/common';
  14. import { of, Subject } from 'rxjs';
  15. import { startWith, takeUntil } from 'rxjs/operators';
  16. /**
  17. * @fileoverview added by tsickle
  18. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  19. */
  20. var CdkStepHeader = /** @class */ (function () {
  21. function CdkStepHeader(_elementRef) {
  22. this._elementRef = _elementRef;
  23. }
  24. /** Focuses the step header. */
  25. /**
  26. * Focuses the step header.
  27. * @return {?}
  28. */
  29. CdkStepHeader.prototype.focus = /**
  30. * Focuses the step header.
  31. * @return {?}
  32. */
  33. function () {
  34. this._elementRef.nativeElement.focus();
  35. };
  36. CdkStepHeader.decorators = [
  37. { type: Directive, args: [{
  38. selector: '[cdkStepHeader]',
  39. host: {
  40. 'role': 'tab',
  41. },
  42. },] },
  43. ];
  44. /** @nocollapse */
  45. CdkStepHeader.ctorParameters = function () { return [
  46. { type: ElementRef }
  47. ]; };
  48. return CdkStepHeader;
  49. }());
  50. /**
  51. * @fileoverview added by tsickle
  52. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  53. */
  54. var CdkStepLabel = /** @class */ (function () {
  55. function CdkStepLabel(/** @docs-private */ template) {
  56. this.template = template;
  57. }
  58. CdkStepLabel.decorators = [
  59. { type: Directive, args: [{
  60. selector: '[cdkStepLabel]',
  61. },] },
  62. ];
  63. /** @nocollapse */
  64. CdkStepLabel.ctorParameters = function () { return [
  65. { type: TemplateRef }
  66. ]; };
  67. return CdkStepLabel;
  68. }());
  69. /**
  70. * @fileoverview added by tsickle
  71. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  72. */
  73. /**
  74. * Used to generate unique ID for each stepper component.
  75. * @type {?}
  76. */
  77. var nextId = 0;
  78. /**
  79. * Change event emitted on selection changes.
  80. */
  81. var /**
  82. * Change event emitted on selection changes.
  83. */
  84. StepperSelectionEvent = /** @class */ (function () {
  85. function StepperSelectionEvent() {
  86. }
  87. return StepperSelectionEvent;
  88. }());
  89. /**
  90. * Enum to represent the different states of the steps.
  91. * @type {?}
  92. */
  93. var STEP_STATE = {
  94. NUMBER: 'number',
  95. EDIT: 'edit',
  96. DONE: 'done',
  97. ERROR: 'error'
  98. };
  99. /**
  100. * InjectionToken that can be used to specify the global stepper options.
  101. * @type {?}
  102. */
  103. var STEPPER_GLOBAL_OPTIONS = new InjectionToken('STEPPER_GLOBAL_OPTIONS');
  104. /**
  105. * InjectionToken that can be used to specify the global stepper options.
  106. * @deprecated Use `STEPPER_GLOBAL_OPTIONS` instead.
  107. * \@breaking-change 8.0.0.
  108. * @type {?}
  109. */
  110. var MAT_STEPPER_GLOBAL_OPTIONS = STEPPER_GLOBAL_OPTIONS;
  111. var CdkStep = /** @class */ (function () {
  112. /** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
  113. function CdkStep(_stepper, stepperOptions) {
  114. this._stepper = _stepper;
  115. /**
  116. * Whether user has seen the expanded step content or not.
  117. */
  118. this.interacted = false;
  119. this._editable = true;
  120. this._optional = false;
  121. this._completedOverride = null;
  122. this._customError = null;
  123. this._stepperOptions = stepperOptions ? stepperOptions : {};
  124. this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
  125. this._showError = !!this._stepperOptions.showError;
  126. }
  127. Object.defineProperty(CdkStep.prototype, "editable", {
  128. /** Whether the user can return to this step once it has been marked as completed. */
  129. get: /**
  130. * Whether the user can return to this step once it has been marked as completed.
  131. * @return {?}
  132. */
  133. function () {
  134. return this._editable;
  135. },
  136. set: /**
  137. * @param {?} value
  138. * @return {?}
  139. */
  140. function (value) {
  141. this._editable = coerceBooleanProperty(value);
  142. },
  143. enumerable: true,
  144. configurable: true
  145. });
  146. Object.defineProperty(CdkStep.prototype, "optional", {
  147. /** Whether the completion of step is optional. */
  148. get: /**
  149. * Whether the completion of step is optional.
  150. * @return {?}
  151. */
  152. function () {
  153. return this._optional;
  154. },
  155. set: /**
  156. * @param {?} value
  157. * @return {?}
  158. */
  159. function (value) {
  160. this._optional = coerceBooleanProperty(value);
  161. },
  162. enumerable: true,
  163. configurable: true
  164. });
  165. Object.defineProperty(CdkStep.prototype, "completed", {
  166. /** Whether step is marked as completed. */
  167. get: /**
  168. * Whether step is marked as completed.
  169. * @return {?}
  170. */
  171. function () {
  172. return this._completedOverride == null ? this._getDefaultCompleted() : this._completedOverride;
  173. },
  174. set: /**
  175. * @param {?} value
  176. * @return {?}
  177. */
  178. function (value) {
  179. this._completedOverride = coerceBooleanProperty(value);
  180. },
  181. enumerable: true,
  182. configurable: true
  183. });
  184. /**
  185. * @private
  186. * @return {?}
  187. */
  188. CdkStep.prototype._getDefaultCompleted = /**
  189. * @private
  190. * @return {?}
  191. */
  192. function () {
  193. return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
  194. };
  195. Object.defineProperty(CdkStep.prototype, "hasError", {
  196. /** Whether step has an error. */
  197. get: /**
  198. * Whether step has an error.
  199. * @return {?}
  200. */
  201. function () {
  202. return this._customError == null ? this._getDefaultError() : this._customError;
  203. },
  204. set: /**
  205. * @param {?} value
  206. * @return {?}
  207. */
  208. function (value) {
  209. this._customError = coerceBooleanProperty(value);
  210. },
  211. enumerable: true,
  212. configurable: true
  213. });
  214. /**
  215. * @private
  216. * @return {?}
  217. */
  218. CdkStep.prototype._getDefaultError = /**
  219. * @private
  220. * @return {?}
  221. */
  222. function () {
  223. return this.stepControl && this.stepControl.invalid && this.interacted;
  224. };
  225. /** Selects this step component. */
  226. /**
  227. * Selects this step component.
  228. * @return {?}
  229. */
  230. CdkStep.prototype.select = /**
  231. * Selects this step component.
  232. * @return {?}
  233. */
  234. function () {
  235. this._stepper.selected = this;
  236. };
  237. /** Resets the step to its initial state. Note that this includes resetting form data. */
  238. /**
  239. * Resets the step to its initial state. Note that this includes resetting form data.
  240. * @return {?}
  241. */
  242. CdkStep.prototype.reset = /**
  243. * Resets the step to its initial state. Note that this includes resetting form data.
  244. * @return {?}
  245. */
  246. function () {
  247. this.interacted = false;
  248. if (this._completedOverride != null) {
  249. this._completedOverride = false;
  250. }
  251. if (this._customError != null) {
  252. this._customError = false;
  253. }
  254. if (this.stepControl) {
  255. this.stepControl.reset();
  256. }
  257. };
  258. /**
  259. * @return {?}
  260. */
  261. CdkStep.prototype.ngOnChanges = /**
  262. * @return {?}
  263. */
  264. function () {
  265. // Since basically all inputs of the MatStep get proxied through the view down to the
  266. // underlying MatStepHeader, we have to make sure that change detection runs correctly.
  267. this._stepper._stateChanged();
  268. };
  269. CdkStep.decorators = [
  270. { type: Component, args: [{selector: 'cdk-step',
  271. exportAs: 'cdkStep',
  272. template: '<ng-template><ng-content></ng-content></ng-template>',
  273. encapsulation: ViewEncapsulation.None,
  274. changeDetection: ChangeDetectionStrategy.OnPush,
  275. },] },
  276. ];
  277. /** @nocollapse */
  278. CdkStep.ctorParameters = function () { return [
  279. { type: CdkStepper, decorators: [{ type: Inject, args: [forwardRef((/**
  280. * @return {?}
  281. */
  282. function () { return CdkStepper; })),] }] },
  283. { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [STEPPER_GLOBAL_OPTIONS,] }] }
  284. ]; };
  285. CdkStep.propDecorators = {
  286. stepLabel: [{ type: ContentChild, args: [CdkStepLabel, { static: false },] }],
  287. content: [{ type: ViewChild, args: [TemplateRef, { static: true },] }],
  288. stepControl: [{ type: Input }],
  289. label: [{ type: Input }],
  290. errorMessage: [{ type: Input }],
  291. ariaLabel: [{ type: Input, args: ['aria-label',] }],
  292. ariaLabelledby: [{ type: Input, args: ['aria-labelledby',] }],
  293. state: [{ type: Input }],
  294. editable: [{ type: Input }],
  295. optional: [{ type: Input }],
  296. completed: [{ type: Input }],
  297. hasError: [{ type: Input }]
  298. };
  299. return CdkStep;
  300. }());
  301. var CdkStepper = /** @class */ (function () {
  302. function CdkStepper(_dir, _changeDetectorRef, _elementRef, _document) {
  303. this._dir = _dir;
  304. this._changeDetectorRef = _changeDetectorRef;
  305. this._elementRef = _elementRef;
  306. /**
  307. * Emits when the component is destroyed.
  308. */
  309. this._destroyed = new Subject();
  310. this._linear = false;
  311. this._selectedIndex = 0;
  312. /**
  313. * Event emitted when the selected step has changed.
  314. */
  315. this.selectionChange = new EventEmitter();
  316. this._orientation = 'horizontal';
  317. this._groupId = nextId++;
  318. this._document = _document;
  319. }
  320. Object.defineProperty(CdkStepper.prototype, "steps", {
  321. /** The list of step components that the stepper is holding. */
  322. get: /**
  323. * The list of step components that the stepper is holding.
  324. * @return {?}
  325. */
  326. function () {
  327. return this._steps;
  328. },
  329. enumerable: true,
  330. configurable: true
  331. });
  332. Object.defineProperty(CdkStepper.prototype, "linear", {
  333. /** Whether the validity of previous steps should be checked or not. */
  334. get: /**
  335. * Whether the validity of previous steps should be checked or not.
  336. * @return {?}
  337. */
  338. function () {
  339. return this._linear;
  340. },
  341. set: /**
  342. * @param {?} value
  343. * @return {?}
  344. */
  345. function (value) {
  346. this._linear = coerceBooleanProperty(value);
  347. },
  348. enumerable: true,
  349. configurable: true
  350. });
  351. Object.defineProperty(CdkStepper.prototype, "selectedIndex", {
  352. /** The index of the selected step. */
  353. get: /**
  354. * The index of the selected step.
  355. * @return {?}
  356. */
  357. function () {
  358. return this._selectedIndex;
  359. },
  360. set: /**
  361. * @param {?} index
  362. * @return {?}
  363. */
  364. function (index) {
  365. /** @type {?} */
  366. var newIndex = coerceNumberProperty(index);
  367. if (this.steps) {
  368. // Ensure that the index can't be out of bounds.
  369. if (newIndex < 0 || newIndex > this.steps.length - 1) {
  370. throw Error('cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.');
  371. }
  372. if (this._selectedIndex != newIndex && !this._anyControlsInvalidOrPending(newIndex) &&
  373. (newIndex >= this._selectedIndex || this.steps.toArray()[newIndex].editable)) {
  374. this._updateSelectedItemIndex(index);
  375. }
  376. }
  377. else {
  378. this._selectedIndex = newIndex;
  379. }
  380. },
  381. enumerable: true,
  382. configurable: true
  383. });
  384. Object.defineProperty(CdkStepper.prototype, "selected", {
  385. /** The step that is selected. */
  386. get: /**
  387. * The step that is selected.
  388. * @return {?}
  389. */
  390. function () {
  391. // @breaking-change 8.0.0 Change return type to `CdkStep | undefined`.
  392. return this.steps ? this.steps.toArray()[this.selectedIndex] : (/** @type {?} */ (undefined));
  393. },
  394. set: /**
  395. * @param {?} step
  396. * @return {?}
  397. */
  398. function (step) {
  399. this.selectedIndex = this.steps ? this.steps.toArray().indexOf(step) : -1;
  400. },
  401. enumerable: true,
  402. configurable: true
  403. });
  404. /**
  405. * @return {?}
  406. */
  407. CdkStepper.prototype.ngAfterViewInit = /**
  408. * @return {?}
  409. */
  410. function () {
  411. var _this = this;
  412. // Note that while the step headers are content children by default, any components that
  413. // extend this one might have them as view chidren. We initialize the keyboard handling in
  414. // AfterViewInit so we're guaranteed for both view and content children to be defined.
  415. this._keyManager = new FocusKeyManager(this._stepHeader)
  416. .withWrap()
  417. .withVerticalOrientation(this._orientation === 'vertical');
  418. (this._dir ? ((/** @type {?} */ (this._dir.change))) : of())
  419. .pipe(startWith(this._layoutDirection()), takeUntil(this._destroyed))
  420. .subscribe((/**
  421. * @param {?} direction
  422. * @return {?}
  423. */
  424. function (direction) { return _this._keyManager.withHorizontalOrientation(direction); }));
  425. this._keyManager.updateActiveItemIndex(this._selectedIndex);
  426. this.steps.changes.pipe(takeUntil(this._destroyed)).subscribe((/**
  427. * @return {?}
  428. */
  429. function () {
  430. if (!_this.selected) {
  431. _this._selectedIndex = Math.max(_this._selectedIndex - 1, 0);
  432. }
  433. }));
  434. };
  435. /**
  436. * @return {?}
  437. */
  438. CdkStepper.prototype.ngOnDestroy = /**
  439. * @return {?}
  440. */
  441. function () {
  442. this._destroyed.next();
  443. this._destroyed.complete();
  444. };
  445. /** Selects and focuses the next step in list. */
  446. /**
  447. * Selects and focuses the next step in list.
  448. * @return {?}
  449. */
  450. CdkStepper.prototype.next = /**
  451. * Selects and focuses the next step in list.
  452. * @return {?}
  453. */
  454. function () {
  455. this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);
  456. };
  457. /** Selects and focuses the previous step in list. */
  458. /**
  459. * Selects and focuses the previous step in list.
  460. * @return {?}
  461. */
  462. CdkStepper.prototype.previous = /**
  463. * Selects and focuses the previous step in list.
  464. * @return {?}
  465. */
  466. function () {
  467. this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
  468. };
  469. /** Resets the stepper to its initial state. Note that this includes clearing form data. */
  470. /**
  471. * Resets the stepper to its initial state. Note that this includes clearing form data.
  472. * @return {?}
  473. */
  474. CdkStepper.prototype.reset = /**
  475. * Resets the stepper to its initial state. Note that this includes clearing form data.
  476. * @return {?}
  477. */
  478. function () {
  479. this._updateSelectedItemIndex(0);
  480. this.steps.forEach((/**
  481. * @param {?} step
  482. * @return {?}
  483. */
  484. function (step) { return step.reset(); }));
  485. this._stateChanged();
  486. };
  487. /** Returns a unique id for each step label element. */
  488. /**
  489. * Returns a unique id for each step label element.
  490. * @param {?} i
  491. * @return {?}
  492. */
  493. CdkStepper.prototype._getStepLabelId = /**
  494. * Returns a unique id for each step label element.
  495. * @param {?} i
  496. * @return {?}
  497. */
  498. function (i) {
  499. return "cdk-step-label-" + this._groupId + "-" + i;
  500. };
  501. /** Returns unique id for each step content element. */
  502. /**
  503. * Returns unique id for each step content element.
  504. * @param {?} i
  505. * @return {?}
  506. */
  507. CdkStepper.prototype._getStepContentId = /**
  508. * Returns unique id for each step content element.
  509. * @param {?} i
  510. * @return {?}
  511. */
  512. function (i) {
  513. return "cdk-step-content-" + this._groupId + "-" + i;
  514. };
  515. /** Marks the component to be change detected. */
  516. /**
  517. * Marks the component to be change detected.
  518. * @return {?}
  519. */
  520. CdkStepper.prototype._stateChanged = /**
  521. * Marks the component to be change detected.
  522. * @return {?}
  523. */
  524. function () {
  525. this._changeDetectorRef.markForCheck();
  526. };
  527. /** Returns position state of the step with the given index. */
  528. /**
  529. * Returns position state of the step with the given index.
  530. * @param {?} index
  531. * @return {?}
  532. */
  533. CdkStepper.prototype._getAnimationDirection = /**
  534. * Returns position state of the step with the given index.
  535. * @param {?} index
  536. * @return {?}
  537. */
  538. function (index) {
  539. /** @type {?} */
  540. var position = index - this._selectedIndex;
  541. if (position < 0) {
  542. return this._layoutDirection() === 'rtl' ? 'next' : 'previous';
  543. }
  544. else if (position > 0) {
  545. return this._layoutDirection() === 'rtl' ? 'previous' : 'next';
  546. }
  547. return 'current';
  548. };
  549. /** Returns the type of icon to be displayed. */
  550. /**
  551. * Returns the type of icon to be displayed.
  552. * @param {?} index
  553. * @param {?=} state
  554. * @return {?}
  555. */
  556. CdkStepper.prototype._getIndicatorType = /**
  557. * Returns the type of icon to be displayed.
  558. * @param {?} index
  559. * @param {?=} state
  560. * @return {?}
  561. */
  562. function (index, state) {
  563. if (state === void 0) { state = STEP_STATE.NUMBER; }
  564. /** @type {?} */
  565. var step = this.steps.toArray()[index];
  566. /** @type {?} */
  567. var isCurrentStep = this._isCurrentStep(index);
  568. return step._displayDefaultIndicatorType ? this._getDefaultIndicatorLogic(step, isCurrentStep) :
  569. this._getGuidelineLogic(step, isCurrentStep, state);
  570. };
  571. /**
  572. * @private
  573. * @param {?} step
  574. * @param {?} isCurrentStep
  575. * @return {?}
  576. */
  577. CdkStepper.prototype._getDefaultIndicatorLogic = /**
  578. * @private
  579. * @param {?} step
  580. * @param {?} isCurrentStep
  581. * @return {?}
  582. */
  583. function (step, isCurrentStep) {
  584. if (step._showError && step.hasError && !isCurrentStep) {
  585. return STEP_STATE.ERROR;
  586. }
  587. else if (!step.completed || isCurrentStep) {
  588. return STEP_STATE.NUMBER;
  589. }
  590. else {
  591. return step.editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
  592. }
  593. };
  594. /**
  595. * @private
  596. * @param {?} step
  597. * @param {?} isCurrentStep
  598. * @param {?=} state
  599. * @return {?}
  600. */
  601. CdkStepper.prototype._getGuidelineLogic = /**
  602. * @private
  603. * @param {?} step
  604. * @param {?} isCurrentStep
  605. * @param {?=} state
  606. * @return {?}
  607. */
  608. function (step, isCurrentStep, state) {
  609. if (state === void 0) { state = STEP_STATE.NUMBER; }
  610. if (step._showError && step.hasError && !isCurrentStep) {
  611. return STEP_STATE.ERROR;
  612. }
  613. else if (step.completed && !isCurrentStep) {
  614. return STEP_STATE.DONE;
  615. }
  616. else if (step.completed && isCurrentStep) {
  617. return state;
  618. }
  619. else if (step.editable && isCurrentStep) {
  620. return STEP_STATE.EDIT;
  621. }
  622. else {
  623. return state;
  624. }
  625. };
  626. /**
  627. * @private
  628. * @param {?} index
  629. * @return {?}
  630. */
  631. CdkStepper.prototype._isCurrentStep = /**
  632. * @private
  633. * @param {?} index
  634. * @return {?}
  635. */
  636. function (index) {
  637. return this._selectedIndex === index;
  638. };
  639. /** Returns the index of the currently-focused step header. */
  640. /**
  641. * Returns the index of the currently-focused step header.
  642. * @return {?}
  643. */
  644. CdkStepper.prototype._getFocusIndex = /**
  645. * Returns the index of the currently-focused step header.
  646. * @return {?}
  647. */
  648. function () {
  649. return this._keyManager ? this._keyManager.activeItemIndex : this._selectedIndex;
  650. };
  651. /**
  652. * @private
  653. * @param {?} newIndex
  654. * @return {?}
  655. */
  656. CdkStepper.prototype._updateSelectedItemIndex = /**
  657. * @private
  658. * @param {?} newIndex
  659. * @return {?}
  660. */
  661. function (newIndex) {
  662. /** @type {?} */
  663. var stepsArray = this.steps.toArray();
  664. this.selectionChange.emit({
  665. selectedIndex: newIndex,
  666. previouslySelectedIndex: this._selectedIndex,
  667. selectedStep: stepsArray[newIndex],
  668. previouslySelectedStep: stepsArray[this._selectedIndex],
  669. });
  670. // If focus is inside the stepper, move it to the next header, otherwise it may become
  671. // lost when the active step content is hidden. We can't be more granular with the check
  672. // (e.g. checking whether focus is inside the active step), because we don't have a
  673. // reference to the elements that are rendering out the content.
  674. this._containsFocus() ? this._keyManager.setActiveItem(newIndex) :
  675. this._keyManager.updateActiveItemIndex(newIndex);
  676. this._selectedIndex = newIndex;
  677. this._stateChanged();
  678. };
  679. /**
  680. * @param {?} event
  681. * @return {?}
  682. */
  683. CdkStepper.prototype._onKeydown = /**
  684. * @param {?} event
  685. * @return {?}
  686. */
  687. function (event) {
  688. /** @type {?} */
  689. var hasModifier = hasModifierKey(event);
  690. /** @type {?} */
  691. var keyCode = event.keyCode;
  692. /** @type {?} */
  693. var manager = this._keyManager;
  694. if (manager.activeItemIndex != null && !hasModifier &&
  695. (keyCode === SPACE || keyCode === ENTER)) {
  696. this.selectedIndex = manager.activeItemIndex;
  697. event.preventDefault();
  698. }
  699. else if (keyCode === HOME) {
  700. manager.setFirstItemActive();
  701. event.preventDefault();
  702. }
  703. else if (keyCode === END) {
  704. manager.setLastItemActive();
  705. event.preventDefault();
  706. }
  707. else {
  708. manager.onKeydown(event);
  709. }
  710. };
  711. /**
  712. * @private
  713. * @param {?} index
  714. * @return {?}
  715. */
  716. CdkStepper.prototype._anyControlsInvalidOrPending = /**
  717. * @private
  718. * @param {?} index
  719. * @return {?}
  720. */
  721. function (index) {
  722. /** @type {?} */
  723. var steps = this.steps.toArray();
  724. steps[this._selectedIndex].interacted = true;
  725. if (this._linear && index >= 0) {
  726. return steps.slice(0, index).some((/**
  727. * @param {?} step
  728. * @return {?}
  729. */
  730. function (step) {
  731. /** @type {?} */
  732. var control = step.stepControl;
  733. /** @type {?} */
  734. var isIncomplete = control ? (control.invalid || control.pending || !step.interacted) : !step.completed;
  735. return isIncomplete && !step.optional && !step._completedOverride;
  736. }));
  737. }
  738. return false;
  739. };
  740. /**
  741. * @private
  742. * @return {?}
  743. */
  744. CdkStepper.prototype._layoutDirection = /**
  745. * @private
  746. * @return {?}
  747. */
  748. function () {
  749. return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
  750. };
  751. /** Checks whether the stepper contains the focused element. */
  752. /**
  753. * Checks whether the stepper contains the focused element.
  754. * @private
  755. * @return {?}
  756. */
  757. CdkStepper.prototype._containsFocus = /**
  758. * Checks whether the stepper contains the focused element.
  759. * @private
  760. * @return {?}
  761. */
  762. function () {
  763. if (!this._document || !this._elementRef) {
  764. return false;
  765. }
  766. /** @type {?} */
  767. var stepperElement = this._elementRef.nativeElement;
  768. /** @type {?} */
  769. var focusedElement = this._document.activeElement;
  770. return stepperElement === focusedElement || stepperElement.contains(focusedElement);
  771. };
  772. CdkStepper.decorators = [
  773. { type: Directive, args: [{
  774. selector: '[cdkStepper]',
  775. exportAs: 'cdkStepper',
  776. },] },
  777. ];
  778. /** @nocollapse */
  779. CdkStepper.ctorParameters = function () { return [
  780. { type: Directionality, decorators: [{ type: Optional }] },
  781. { type: ChangeDetectorRef },
  782. { type: ElementRef },
  783. { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
  784. ]; };
  785. CdkStepper.propDecorators = {
  786. _steps: [{ type: ContentChildren, args: [CdkStep,] }],
  787. _stepHeader: [{ type: ContentChildren, args: [CdkStepHeader,] }],
  788. linear: [{ type: Input }],
  789. selectedIndex: [{ type: Input }],
  790. selected: [{ type: Input }],
  791. selectionChange: [{ type: Output }]
  792. };
  793. return CdkStepper;
  794. }());
  795. /**
  796. * @fileoverview added by tsickle
  797. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  798. */
  799. /**
  800. * Button that moves to the next step in a stepper workflow.
  801. */
  802. var CdkStepperNext = /** @class */ (function () {
  803. function CdkStepperNext(_stepper) {
  804. this._stepper = _stepper;
  805. /**
  806. * Type of the next button. Defaults to "submit" if not specified.
  807. */
  808. this.type = 'submit';
  809. }
  810. // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
  811. // In Ivy the `host` bindings will be merged when this class is extended, whereas in
  812. // ViewEngine they're overwritten.
  813. // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
  814. // tslint:disable-next-line:no-host-decorator-in-concrete
  815. // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
  816. // In Ivy the `host` bindings will be merged when this class is extended, whereas in
  817. // ViewEngine they're overwritten.
  818. // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
  819. // tslint:disable-next-line:no-host-decorator-in-concrete
  820. /**
  821. * @return {?}
  822. */
  823. CdkStepperNext.prototype._handleClick =
  824. // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
  825. // In Ivy the `host` bindings will be merged when this class is extended, whereas in
  826. // ViewEngine they're overwritten.
  827. // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
  828. // tslint:disable-next-line:no-host-decorator-in-concrete
  829. /**
  830. * @return {?}
  831. */
  832. function () {
  833. this._stepper.next();
  834. };
  835. CdkStepperNext.decorators = [
  836. { type: Directive, args: [{
  837. selector: 'button[cdkStepperNext]',
  838. host: {
  839. '[type]': 'type',
  840. }
  841. },] },
  842. ];
  843. /** @nocollapse */
  844. CdkStepperNext.ctorParameters = function () { return [
  845. { type: CdkStepper }
  846. ]; };
  847. CdkStepperNext.propDecorators = {
  848. type: [{ type: Input }],
  849. _handleClick: [{ type: HostListener, args: ['click',] }]
  850. };
  851. return CdkStepperNext;
  852. }());
  853. /**
  854. * Button that moves to the previous step in a stepper workflow.
  855. */
  856. var CdkStepperPrevious = /** @class */ (function () {
  857. function CdkStepperPrevious(_stepper) {
  858. this._stepper = _stepper;
  859. /**
  860. * Type of the previous button. Defaults to "button" if not specified.
  861. */
  862. this.type = 'button';
  863. }
  864. // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
  865. // In Ivy the `host` bindings will be merged when this class is extended, whereas in
  866. // ViewEngine they're overwritten.
  867. // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
  868. // tslint:disable-next-line:no-host-decorator-in-concrete
  869. // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
  870. // In Ivy the `host` bindings will be merged when this class is extended, whereas in
  871. // ViewEngine they're overwritten.
  872. // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
  873. // tslint:disable-next-line:no-host-decorator-in-concrete
  874. /**
  875. * @return {?}
  876. */
  877. CdkStepperPrevious.prototype._handleClick =
  878. // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
  879. // In Ivy the `host` bindings will be merged when this class is extended, whereas in
  880. // ViewEngine they're overwritten.
  881. // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
  882. // tslint:disable-next-line:no-host-decorator-in-concrete
  883. /**
  884. * @return {?}
  885. */
  886. function () {
  887. this._stepper.previous();
  888. };
  889. CdkStepperPrevious.decorators = [
  890. { type: Directive, args: [{
  891. selector: 'button[cdkStepperPrevious]',
  892. host: {
  893. '[type]': 'type',
  894. }
  895. },] },
  896. ];
  897. /** @nocollapse */
  898. CdkStepperPrevious.ctorParameters = function () { return [
  899. { type: CdkStepper }
  900. ]; };
  901. CdkStepperPrevious.propDecorators = {
  902. type: [{ type: Input }],
  903. _handleClick: [{ type: HostListener, args: ['click',] }]
  904. };
  905. return CdkStepperPrevious;
  906. }());
  907. /**
  908. * @fileoverview added by tsickle
  909. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  910. */
  911. var CdkStepperModule = /** @class */ (function () {
  912. function CdkStepperModule() {
  913. }
  914. CdkStepperModule.decorators = [
  915. { type: NgModule, args: [{
  916. imports: [BidiModule, CommonModule],
  917. exports: [
  918. CdkStep,
  919. CdkStepper,
  920. CdkStepHeader,
  921. CdkStepLabel,
  922. CdkStepperNext,
  923. CdkStepperPrevious,
  924. ],
  925. declarations: [
  926. CdkStep,
  927. CdkStepper,
  928. CdkStepHeader,
  929. CdkStepLabel,
  930. CdkStepperNext,
  931. CdkStepperPrevious,
  932. ]
  933. },] },
  934. ];
  935. return CdkStepperModule;
  936. }());
  937. /**
  938. * @fileoverview added by tsickle
  939. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  940. */
  941. /**
  942. * @fileoverview added by tsickle
  943. * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  944. */
  945. export { StepperSelectionEvent, STEP_STATE, STEPPER_GLOBAL_OPTIONS, MAT_STEPPER_GLOBAL_OPTIONS, CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious, CdkStepperModule, CdkStepHeader };
  946. //# sourceMappingURL=stepper.es5.js.map