Skip to content

fix(cdk/stepper): exported injection token referring to Material #14339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 3, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions src/cdk/stepper/stepper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,15 @@ export const STEP_STATE = {
};

/** InjectionToken that can be used to specify the global stepper options. */
export const MAT_STEPPER_GLOBAL_OPTIONS =
new InjectionToken<StepperOptions>('mat-stepper-global-options');
export const STEPPER_GLOBAL_OPTIONS =
new InjectionToken<StepperOptions>('STEPPER_GLOBAL_OPTIONS');

/**
* InjectionToken that can be used to specify the global stepper options.
* @deprecated Use `STEPPER_GLOBAL_OPTIONS` instead.
* @breaking-change 8.0.0.
*/
export const MAT_STEPPER_GLOBAL_OPTIONS = STEPPER_GLOBAL_OPTIONS;

/** Configurable options for stepper. */
export interface StepperOptions {
Expand Down Expand Up @@ -188,7 +195,7 @@ export class CdkStep implements OnChanges {
/** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
constructor(
@Inject(forwardRef(() => CdkStepper)) private _stepper: CdkStepper,
@Optional() @Inject(MAT_STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
@Optional() @Inject(STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
this._stepperOptions = stepperOptions ? stepperOptions : {};
this._displayDefaultIndicatorType = this._stepperOptions.displayDefaultIndicatorType !== false;
this._showError = !!this._stepperOptions.showError;
Expand Down
18 changes: 11 additions & 7 deletions src/lib/stepper/stepper.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ For more complex labels, add a template with the `matStepLabel` directive inside
```

#### Label position
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.
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.
This behaviour is controlled by `labelPosition` property.

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

#### Step States
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.
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.

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

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
`MAT_STEPPER_GLOBAL_OPTIONS` in your application's root module.
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
`STEPPER_GLOBAL_OPTIONS` in your application's root module.

```ts
@NgModule({
providers: [
{
provide: MAT_STEPPER_GLOBAL_OPTIONS,
provide: STEPPER_GLOBAL_OPTIONS,
useValue: { displayDefaultIndicatorType: false }
}
]
Expand All @@ -212,13 +215,14 @@ In order to use the custom step states, you must add the `displayDefaultIndicato

### Error State

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.
The stepper can now show error states by simply providing the `showError` option to the
`STEPPER_GLOBAL_OPTIONS` in your application's root module as mentioned above.

```ts
@NgModule({
providers: [
{
provide: MAT_STEPPER_GLOBAL_OPTIONS,
provide: STEPPER_GLOBAL_OPTIONS,
useValue: { showError: true }
}
]
Expand Down
6 changes: 3 additions & 3 deletions src/lib/stepper/stepper.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
SPACE,
UP_ARROW,
} from '@angular/cdk/keycodes';
import {StepperOrientation, MAT_STEPPER_GLOBAL_OPTIONS, STEP_STATE} from '@angular/cdk/stepper';
import {StepperOrientation, STEPPER_GLOBAL_OPTIONS, STEP_STATE} from '@angular/cdk/stepper';
import {dispatchKeyboardEvent, createKeyboardEvent, dispatchEvent} from '@angular/cdk/testing';
import {Component, DebugElement, EventEmitter, OnInit, Type, Provider} from '@angular/core';
import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
Expand Down Expand Up @@ -918,7 +918,7 @@ describe('MatStepper', () => {
fixture = createComponent(
MatHorizontalStepperWithErrorsApp,
[{
provide: MAT_STEPPER_GLOBAL_OPTIONS,
provide: STEPPER_GLOBAL_OPTIONS,
useValue: {showError: true}
}],
[MatFormFieldModule, MatInputModule]
Expand Down Expand Up @@ -949,7 +949,7 @@ describe('MatStepper', () => {
fixture = createComponent(
MatHorizontalStepperWithErrorsApp,
[{
provide: MAT_STEPPER_GLOBAL_OPTIONS,
provide: STEPPER_GLOBAL_OPTIONS,
useValue: {displayDefaultIndicatorType: false}
}],
[MatFormFieldModule, MatInputModule]
Expand Down
4 changes: 2 additions & 2 deletions src/lib/stepper/stepper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
CdkStep,
CdkStepper,
StepContentPositionState,
MAT_STEPPER_GLOBAL_OPTIONS,
STEPPER_GLOBAL_OPTIONS,
StepperOptions
} from '@angular/cdk/stepper';
import {AnimationEvent} from '@angular/animations';
Expand Down Expand Up @@ -63,7 +63,7 @@ export class MatStep extends CdkStep implements ErrorStateMatcher {
/** @breaking-change 8.0.0 remove the `?` after `stepperOptions` */
constructor(@Inject(forwardRef(() => MatStepper)) stepper: MatStepper,
@SkipSelf() private _errorStateMatcher: ErrorStateMatcher,
@Optional() @Inject(MAT_STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
@Optional() @Inject(STEPPER_GLOBAL_OPTIONS) stepperOptions?: StepperOptions) {
super(stepper, stepperOptions);
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';

/**
* @title Stepper that displays errors in the steps
Expand All @@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
templateUrl: 'stepper-errors-example.html',
styleUrls: ['stepper-errors-example.css'],
providers: [{
provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
}]
})
export class StepperErrorsExample implements OnInit {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';

/**
* @title Stepper with customized states
Expand All @@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
templateUrl: 'stepper-states-example.html',
styleUrls: ['stepper-states-example.css'],
providers: [{
provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
}]
})
export class StepperStatesExample implements OnInit {
Expand Down
2 changes: 2 additions & 0 deletions tools/public_api_guard/cdk/stepper.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ export declare const STEP_STATE: {

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

export declare const STEPPER_GLOBAL_OPTIONS: InjectionToken<StepperOptions>;

export interface StepperOptions {
displayDefaultIndicatorType?: boolean;
showError?: boolean;
Expand Down