stepper.mjs 29 KB

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