From b5848889094949c02dc4aa6879aff3ebfd390a3b Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 4 Dec 2018 00:32:38 +0100 Subject: [PATCH] fix(cdk/stepper): exported injection token referring to Material (#14339) Fixes the `cdk/stepper` package exporting a symbol that is referring to Material. --- src/cdk/stepper/stepper.ts | 13 ++++++++++--- src/lib/stepper/stepper.md | 18 +++++++++++------- src/lib/stepper/stepper.spec.ts | 6 +++--- src/lib/stepper/stepper.ts | 4 ++-- .../stepper-errors/stepper-errors-example.ts | 4 ++-- .../stepper-states/stepper-states-example.ts | 4 ++-- tools/public_api_guard/cdk/stepper.d.ts | 2 ++ 7 files changed, 32 insertions(+), 19 deletions(-) diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index 86e2fd34e98..17923e62f5e 100644 --- a/src/cdk/stepper/stepper.ts +++ b/src/cdk/stepper/stepper.ts @@ -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('mat-stepper-global-options'); +export const STEPPER_GLOBAL_OPTIONS = + new InjectionToken('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 { @@ -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; diff --git a/src/lib/stepper/stepper.md b/src/lib/stepper/stepper.md index 2c933c33dee..161cab09972 100644 --- a/src/lib/stepper/stepper.md +++ b/src/lib/stepper/stepper.md @@ -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. @@ -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 @@ -194,14 +196,15 @@ You can set the state of a step to whatever you want. The given state by default ``` -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 } } ] @@ -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 } } ] diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts index 69993394e17..9410a0bd8c8 100644 --- a/src/lib/stepper/stepper.spec.ts +++ b/src/lib/stepper/stepper.spec.ts @@ -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'; @@ -918,7 +918,7 @@ describe('MatStepper', () => { fixture = createComponent( MatHorizontalStepperWithErrorsApp, [{ - provide: MAT_STEPPER_GLOBAL_OPTIONS, + provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true} }], [MatFormFieldModule, MatInputModule] @@ -949,7 +949,7 @@ describe('MatStepper', () => { fixture = createComponent( MatHorizontalStepperWithErrorsApp, [{ - provide: MAT_STEPPER_GLOBAL_OPTIONS, + provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false} }], [MatFormFieldModule, MatInputModule] diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 1b52b77d17e..ebde9063562 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -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'; @@ -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); } diff --git a/src/material-examples/stepper-errors/stepper-errors-example.ts b/src/material-examples/stepper-errors/stepper-errors-example.ts index 22e89d43f54..d164ccfb790 100644 --- a/src/material-examples/stepper-errors/stepper-errors-example.ts +++ b/src/material-examples/stepper-errors/stepper-errors-example.ts @@ -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 @@ -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 { diff --git a/src/material-examples/stepper-states/stepper-states-example.ts b/src/material-examples/stepper-states/stepper-states-example.ts index bce0d1f2a32..f472e5e5a2f 100644 --- a/src/material-examples/stepper-states/stepper-states-example.ts +++ b/src/material-examples/stepper-states/stepper-states-example.ts @@ -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 @@ -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 { diff --git a/tools/public_api_guard/cdk/stepper.d.ts b/tools/public_api_guard/cdk/stepper.d.ts index 7d644881655..311ee234cd3 100644 --- a/tools/public_api_guard/cdk/stepper.d.ts +++ b/tools/public_api_guard/cdk/stepper.d.ts @@ -82,6 +82,8 @@ export declare const STEP_STATE: { export declare type StepContentPositionState = 'previous' | 'current' | 'next'; +export declare const STEPPER_GLOBAL_OPTIONS: InjectionToken; + export interface StepperOptions { displayDefaultIndicatorType?: boolean; showError?: boolean;