Skip to content

Commit b584888

Browse files
crisbetommalerba
authored andcommittedDec 3, 2018
fix(cdk/stepper): exported injection token referring to Material (#14339)
Fixes the `cdk/stepper` package exporting a symbol that is referring to Material.
1 parent f176119 commit b584888

File tree

7 files changed

+32
-19
lines changed

7 files changed

+32
-19
lines changed
 

‎src/cdk/stepper/stepper.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,15 @@ export const STEP_STATE = {
7979
};
8080

8181
/** InjectionToken that can be used to specify the global stepper options. */
82-
export const MAT_STEPPER_GLOBAL_OPTIONS =
83-
new InjectionToken<StepperOptions>('mat-stepper-global-options');
82+
export const STEPPER_GLOBAL_OPTIONS =
83+
new InjectionToken<StepperOptions>('STEPPER_GLOBAL_OPTIONS');
84+
85+
/**
86+
* InjectionToken that can be used to specify the global stepper options.
87+
* @deprecated Use `STEPPER_GLOBAL_OPTIONS` instead.
88+
* @breaking-change 8.0.0.
89+
*/
90+
export const MAT_STEPPER_GLOBAL_OPTIONS = STEPPER_GLOBAL_OPTIONS;
8491

8592
/** Configurable options for stepper. */
8693
export interface StepperOptions {
@@ -188,7 +195,7 @@ export class CdkStep implements OnChanges {
188195
/** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
189196
constructor(
190197
@Inject(forwardRef(() => CdkStepper)) private _stepper: CdkStepper,
191-
@Optional() @Inject(MAT_STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
198+
@Optional() @Inject(STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
192199
this._stepperOptions = stepperOptions ? stepperOptions : {};
193200
this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
194201
this._showError = !!this._stepperOptions.showError;

‎src/lib/stepper/stepper.md

+11-7
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ For more complex labels, add a template with the `matStepLabel` directive inside
4141
```
4242

4343
#### Label position
44-
For `mat-horizontal-stepper` it's possible to define the position of the label. `end` is the default value, while `bottom` will place it under the step icon instead of at its side.
44+
For `mat-horizontal-stepper` it's possible to define the position of the label. `end` is the
45+
default value, while `bottom` will place it under the step icon instead of at its side.
4546
This behaviour is controlled by `labelPosition` property.
4647

4748
<!-- example(stepper-label-position-bottom) -->
@@ -163,7 +164,8 @@ by placing a `matStepperIcon` for each of the icons that you want to override. T
163164
Note that you aren't limited to using the `mat-icon` component when providing custom icons.
164165

165166
#### Step States
166-
You can set the state of a step to whatever you want. The given state by default maps to an icon. However, it can be overridden the same way as mentioned above.
167+
You can set the state of a step to whatever you want. The given state by default maps to an icon.
168+
However, it can be overridden the same way as mentioned above.
167169

168170
```html
169171
<mat-horizontal-stepper>
@@ -194,14 +196,15 @@ You can set the state of a step to whatever you want. The given state by default
194196
</mat-horizontal-stepper>
195197
```
196198

197-
In order to use the custom step states, you must add the `displayDefaultIndicatorType` option to the global default stepper options which can be specified by providing a value for
198-
`MAT_STEPPER_GLOBAL_OPTIONS` in your application's root module.
199+
In order to use the custom step states, you must add the `displayDefaultIndicatorType` option to
200+
the global default stepper options which can be specified by providing a value for
201+
`STEPPER_GLOBAL_OPTIONS` in your application's root module.
199202

200203
```ts
201204
@NgModule({
202205
providers: [
203206
{
204-
provide: MAT_STEPPER_GLOBAL_OPTIONS,
207+
provide: STEPPER_GLOBAL_OPTIONS,
205208
useValue: { displayDefaultIndicatorType: false }
206209
}
207210
]
@@ -212,13 +215,14 @@ In order to use the custom step states, you must add the `displayDefaultIndicato
212215

213216
### Error State
214217

215-
The stepper can now show error states by simply providing the `showError` option to the `MAT_STEPPER_GLOBAL_OPTIONS` in your application's root module as mentioned above.
218+
The stepper can now show error states by simply providing the `showError` option to the
219+
`STEPPER_GLOBAL_OPTIONS` in your application's root module as mentioned above.
216220

217221
```ts
218222
@NgModule({
219223
providers: [
220224
{
221-
provide: MAT_STEPPER_GLOBAL_OPTIONS,
225+
provide: STEPPER_GLOBAL_OPTIONS,
222226
useValue: { showError: true }
223227
}
224228
]

‎src/lib/stepper/stepper.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
SPACE,
1010
UP_ARROW,
1111
} from '@angular/cdk/keycodes';
12-
import {StepperOrientation, MAT_STEPPER_GLOBAL_OPTIONS, STEP_STATE} from '@angular/cdk/stepper';
12+
import {StepperOrientation, STEPPER_GLOBAL_OPTIONS, STEP_STATE} from '@angular/cdk/stepper';
1313
import {dispatchKeyboardEvent, createKeyboardEvent, dispatchEvent} from '@angular/cdk/testing';
1414
import {Component, DebugElement, EventEmitter, OnInit, Type, Provider} from '@angular/core';
1515
import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
@@ -918,7 +918,7 @@ describe('MatStepper', () => {
918918
fixture = createComponent(
919919
MatHorizontalStepperWithErrorsApp,
920920
[{
921-
provide: MAT_STEPPER_GLOBAL_OPTIONS,
921+
provide: STEPPER_GLOBAL_OPTIONS,
922922
useValue: {showError: true}
923923
}],
924924
[MatFormFieldModule, MatInputModule]
@@ -949,7 +949,7 @@ describe('MatStepper', () => {
949949
fixture = createComponent(
950950
MatHorizontalStepperWithErrorsApp,
951951
[{
952-
provide: MAT_STEPPER_GLOBAL_OPTIONS,
952+
provide: STEPPER_GLOBAL_OPTIONS,
953953
useValue: {displayDefaultIndicatorType: false}
954954
}],
955955
[MatFormFieldModule, MatInputModule]

‎src/lib/stepper/stepper.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
CdkStep,
1212
CdkStepper,
1313
StepContentPositionState,
14-
MAT_STEPPER_GLOBAL_OPTIONS,
14+
STEPPER_GLOBAL_OPTIONS,
1515
StepperOptions
1616
} from '@angular/cdk/stepper';
1717
import {AnimationEvent} from '@angular/animations';
@@ -63,7 +63,7 @@ export class MatStep extends CdkStep implements ErrorStateMatcher {
6363
/** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
6464
constructor(@Inject(forwardRef(() => MatStepper)) stepper: MatStepper,
6565
@SkipSelf() private _errorStateMatcher: ErrorStateMatcher,
66-
@Optional() @Inject(MAT_STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
66+
@Optional() @Inject(STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
6767
super(stepper, stepperOptions);
6868
}
6969

‎src/material-examples/stepper-errors/stepper-errors-example.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Component, OnInit} from '@angular/core';
22
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
3-
import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
3+
import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
44

55
/**
66
* @title Stepper that displays errors in the steps
@@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
1010
templateUrl: 'stepper-errors-example.html',
1111
styleUrls: ['stepper-errors-example.css'],
1212
providers: [{
13-
provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
13+
provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
1414
}]
1515
})
1616
export class StepperErrorsExample implements OnInit {

‎src/material-examples/stepper-states/stepper-states-example.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Component, OnInit} from '@angular/core';
22
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
3-
import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
3+
import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
44

55
/**
66
* @title Stepper with customized states
@@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
1010
templateUrl: 'stepper-states-example.html',
1111
styleUrls: ['stepper-states-example.css'],
1212
providers: [{
13-
provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
13+
provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
1414
}]
1515
})
1616
export class StepperStatesExample implements OnInit {

‎tools/public_api_guard/cdk/stepper.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@ export declare const STEP_STATE: {
8282

8383
export declare type StepContentPositionState = 'previous' | 'current' | 'next';
8484

85+
export declare const STEPPER_GLOBAL_OPTIONS: InjectionToken<StepperOptions>;
86+
8587
export interface StepperOptions {
8688
displayDefaultIndicatorType?: boolean;
8789
showError?: boolean;

0 commit comments

Comments
 (0)
Please sign in to comment.