Skip to content
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

feat(stepper): Support additional properties for step #6509

Merged
merged 9 commits into from
Aug 22, 2017
Prev Previous commit
Next Next commit
Simplify code based on review
  • Loading branch information
jwshinjwshin committed Aug 22, 2017
commit ec3993a4edf0ba29fc38eeca63f2402cc6b4cca6
10 changes: 2 additions & 8 deletions src/cdk/stepper/public_api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,14 @@ import {CdkStepper, CdkStep} from './stepper';
import {CommonModule} from '@angular/common';
import {CdkStepLabel} from './step-label';
import {CdkStepperNext, CdkStepperPrevious} from './stepper-button';
import {CdkStepHeader} from './step-header';
import {CdkStepContent} from './step-content';

@NgModule({
imports: [CommonModule],
exports: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious, CdkStepHeader,
CdkStepContent],
declarations: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious,
CdkStepHeader, CdkStepContent]
exports: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious],
declarations: [CdkStep, CdkStepper, CdkStepLabel, CdkStepperNext, CdkStepperPrevious]
})
export class CdkStepperModule {}

export * from './stepper';
export * from './step-label';
export * from './stepper-button';
export * from './step-header';
export * from './step-content';
61 changes: 0 additions & 61 deletions src/cdk/stepper/step-content.ts

This file was deleted.

71 changes: 0 additions & 71 deletions src/cdk/stepper/step-header.ts

This file was deleted.

20 changes: 16 additions & 4 deletions src/cdk/stepper/stepper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import {
Component,
ContentChild,
ViewChild,
TemplateRef
TemplateRef,
ViewEncapsulation
} from '@angular/core';
import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes';
import {CdkStepLabel} from './step-label';
Expand Down Expand Up @@ -53,7 +54,8 @@ export class StepperSelectionEvent {

@Component({
selector: 'cdk-step',
templateUrl: 'step.html'
templateUrl: 'step.html',
encapsulation: ViewEncapsulation.None
})
export class CdkStep {
/** Template for step label if it exists. */
Expand Down Expand Up @@ -138,8 +140,8 @@ export class CdkStepper {
@Input()
get selectedIndex() { return this._selectedIndex; }
set selectedIndex(index: number) {
if (index < this._selectedIndex && !this._steps.toArray()[index].editable) { return; }
if (this._anyControlsInvalid(index)) {
if (this._anyControlsInvalid(index)
|| index < this._selectedIndex && !this._steps.toArray()[index].editable) {
// remove focus from clicked step header if the step is not able to be selected
this._stepHeader.toArray()[index].nativeElement.blur();
} else if (this._selectedIndex != index) {
Expand Down Expand Up @@ -202,6 +204,16 @@ export class CdkStepper {
}
}

/** Returns the type of icon to be displayed. */
_getIndicatorType(index: number): 'number' | 'edit' | 'done' {
const step = this._steps.toArray()[index];
if (!step.completed || this._selectedIndex == index) {
return 'number';
} else {
return step.editable ? 'edit' : 'done';
}
}

private _emitStepperSelectionEvent(newIndex: number): void {
const stepsArray = this._steps.toArray();
this.selectionChange.emit({
Expand Down
2 changes: 1 addition & 1 deletion src/lib/stepper/_stepper-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
background-color: mat-color($background, hover);
}
}
.mat-step-header {

.mat-step-header {
.mat-step-label-active {
color: mat-color($foreground, text);
}
Expand Down
6 changes: 2 additions & 4 deletions src/lib/stepper/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {MdStepLabel} from './step-label';
import {MdStepperNext, MdStepperPrevious} from './stepper-button';
import {MdIconModule} from '../icon/index';
import {MdStepHeader} from './step-header';
import {MdStepContent} from './step-content';

@NgModule({
imports: [
Expand All @@ -31,9 +30,9 @@ import {MdStepContent} from './step-content';
MdIconModule
],
exports: [MdCommonModule, MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
MdStepperNext, MdStepperPrevious, MdStepHeader, MdStepContent],
MdStepperNext, MdStepperPrevious, MdStepHeader],
declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
MdStepperNext, MdStepperPrevious, MdStepHeader, MdStepContent],
MdStepperNext, MdStepperPrevious, MdStepHeader],
})
export class MdStepperModule {}

Expand All @@ -43,4 +42,3 @@ export * from './step-label';
export * from './stepper';
export * from './stepper-button';
export * from './step-header';
export * from './step-content';
3 changes: 0 additions & 3 deletions src/lib/stepper/step-content.html

This file was deleted.

6 changes: 0 additions & 6 deletions src/lib/stepper/step-content.scss

This file was deleted.

30 changes: 0 additions & 30 deletions src/lib/stepper/step-content.ts

This file was deleted.

33 changes: 15 additions & 18 deletions src/lib/stepper/step-header.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
<div [class.mat-horizontal-stepper-header]="horizontal"
[class.mat-vertical-stepper-header]="!horizontal">
<div [class.mat-step-icon]="_getIndicatorType() != 'number' || selected"
[class.mat-step-icon-not-touched]="_getIndicatorType() == 'number' && !selected"
[ngSwitch]="_getIndicatorType()">
<span *ngSwitchCase="'number'">{{index + 1}}</span>
<md-icon *ngSwitchCase="'edit'">create</md-icon>
<md-icon *ngSwitchCase="'done'">done</md-icon>
</div>
<div [class.mat-step-label-active]="step.completed || selected"
[class.mat-step-label-inactive]="!step.completed && !selected">
<!-- If there is a label template, use it. -->
<ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
</ng-container>
<!-- It there is no label template, fall back to the text label. -->
<div class="text-label" *ngIf="!step.stepLabel">{{step.label}}</div>
<div [class.mat-step-icon]="icon != 'number' || selected"
[class.mat-step-icon-not-touched]="icon == 'number' && !selected">
<span *ngIf="icon == 'number'">{{index + 1}}</span>
<md-icon *ngIf="icon == 'edit'">create</md-icon>
<md-icon *ngIf="icon == 'done'">done</md-icon>
</div>
<div [class.mat-step-label-active]="active"
[class.mat-step-label-inactive]="!active">
<!-- If there is a label template, use it. -->
<ng-container *ngIf="stepLabel" [ngTemplateOutlet]="stepLabel.template">
</ng-container>
<!-- It there is no label template, fall back to the text label. -->
<div class="mat-step-text-label" *ngIf="!stepLabel">{{label}}</div>

<div class="mat-step-optional" *ngIf="step.optional">Optional</div>
</div>
<div class="mat-step-optional" *ngIf="optional">Optional</div>
</div>

29 changes: 1 addition & 28 deletions src/lib/stepper/step-header.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
$mat-horizontal-stepper-header-height: 72px !default;
$mat-stepper-label-header-height: 24px !default;
$mat-stepper-label-min-width: 50px !default;
$mat-stepper-side-gap: 24px !default;
Expand All @@ -10,32 +9,6 @@ $mat-step-optional-font-size: 12px;
display: flex;
}

.mat-horizontal-stepper-header {
display: flex;
height: $mat-horizontal-stepper-header-height;
overflow: hidden;
align-items: center;
padding: 0 $mat-stepper-side-gap;

.mat-step-icon,
.mat-step-icon-not-touched {
margin-right: $mat-stepper-line-gap;
flex: none;
}
}

.mat-vertical-stepper-header {
display: flex;
align-items: center;
padding: $mat-stepper-side-gap;
max-height: $mat-stepper-label-header-height;

.mat-step-icon,
.mat-step-icon-not-touched {
margin-right: $mat-vertical-stepper-content-margin - $mat-stepper-side-gap;
}
}

.mat-step-optional {
font-size: $mat-step-optional-font-size;
}
Expand All @@ -60,7 +33,7 @@ $mat-step-optional-font-size: 12px;
vertical-align: middle;
}

.text-label {
.mat-step-text-label {
text-overflow: ellipsis;
overflow: hidden;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$mat-step-header-icon-size: 16px !default;

.mat-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mat-step-icon .mat-icon {
    font-size: $mat-step-header-icon-size;
    height: $mat-step-header-icon-size;
    width: $mat-step-header-icon-size;
}

Loading