feat(stepper): Eva theme (#1405)

BREAKING CHANGE: Following theme properties were renamed: stepper-index-size -> stepper-step-index-width stepper-label-font-size -> stepper-step-text-font-size stepper-label-font-weight -> stepper-step-text-font-weight stepper-completed-fg -> stepper-step-completed-text-color stepper-fg -> stepper-step-text-color stepper-step-padding -> stepper-step-content-padding Following theme properties were removed: stepper-accent-color stepper-completed-icon-size stepper-completed-icon-weight NbStepperOrientation changed to type. NbStepperComponent 'disableStepNavigationValue' property removed. Use 'disableStepNavigation' instead.
akveo · May 27, 2019 · 2d841d0 · 2d841d0
1 parent 6360442
commit 2d841d0
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 134 deletions.
diff --git a/src/framework/theme/components/stepper/_stepper.component.theme.scss b/src/framework/theme/components/stepper/_stepper.component.theme.scss
@@ -10,77 +10,72 @@
 
  &.horizontal {
  .header .step {
- width: nb-theme(stepper-index-size);
- margin: 0 nb-theme(stepper-index-size) / 2;
+ width: nb-theme(stepper-step-index-width);
+ margin: 0 nb-theme(stepper-step-index-width) / 2;
  }
 
  .header .connector {
- margin-top: nb-theme(stepper-index-size) / 2;
+ margin: nb-theme(stepper-horizontal-connector-margin);
  }
  }
 
  &.vertical {
  .header .connector {
- margin: nb-theme(stepper-index-size) / 2;
+ margin: nb-theme(stepper-vertical-connector-margin);
  }
  }
 
  .header {
  .connector {
- background-color: nb-theme(stepper-fg);
+ background-color: nb-theme(stepper-connector-background-color);
  }
 
  .connector-past {
- background-color: nb-theme(stepper-accent-color);
- }
-
- .label {
- font-size: nb-theme(stepper-label-font-size);
- font-weight: nb-theme(stepper-label-font-weight);
- color: nb-theme(stepper-fg);
+ background-color: nb-theme(stepper-connector-completed-background-color);
  }
 
  .label-index {
- width: nb-theme(stepper-index-size);
- height: nb-theme(stepper-index-size);
- border-radius: nb-theme(stepper-index-size) / 2;
- border: 2px solid nb-theme(stepper-fg);
- color: nb-theme(stepper-fg);
- font-weight: nb-theme(stepper-label-font-weight);
-
- nb-icon {
- font-size: nb-theme(stepper-completed-icon-size);
- font-weight: nb-theme(stepper-completed-icon-weight);
- }
+ border-radius: nb-theme(stepper-step-index-border-radius);
+ border-color: nb-theme(stepper-index-border-color);
+ border-style: nb-theme(stepper-step-index-border-style);
+ border-width: nb-theme(stepper-step-index-border-width);
+ width: nb-theme(stepper-step-index-width);
+ height: nb-theme(stepper-step-index-width);
  }
 
  .step {
+ color: nb-theme(stepper-step-text-color);
+ font-family: nb-theme(stepper-step-text-font-family);
+ font-size: nb-theme(stepper-step-text-font-size);
+ font-weight: nb-theme(stepper-step-text-font-weight);
+ line-height: nb-theme(stepper-step-text-line-height);
+
+ &.label-index {
+ border-color: nb-theme(stepper-step-index-border-color);
+ }
 
  &.selected {
+ color: nb-theme(stepper-step-active-text-color);
+
  .label-index {
- border: 2px solid nb-theme(stepper-accent-color);
- color: nb-theme(stepper-accent-color);
- }
- .label {
- color: nb-theme(stepper-accent-color);
+ border-color: nb-theme(stepper-step-index-active-border-color);
  }
  }
 
  &.completed {
+ color: nb-theme(stepper-step-completed-text-color);
+
  .label-index {
- background-color: nb-theme(stepper-accent-color);
- border: 2px solid nb-theme(stepper-accent-color);
- color: nb-theme(stepper-completed-fg);
- }
- .label {
- color: nb-theme(stepper-accent-color);
+ background-color: nb-theme(stepper-step-index-completed-background-color);
+ border-color: nb-theme(stepper-step-index-completed-border-color);
+ color: nb-theme(stepper-step-index-completed-text-color);
  }
  }
  }
  }
 
  .step-content {
- padding: nb-theme(stepper-step-padding);
+ padding: nb-theme(stepper-step-content-padding);
  }
  }
 }
diff --git a/src/framework/theme/components/stepper/step.component.ts b/src/framework/theme/components/stepper/step.component.ts
@@ -1,13 +1,7 @@
-import {
- Component,
- forwardRef,
- Inject,
- Input,
- TemplateRef,
- ViewChild,
-} from '@angular/core';
+import { Component, Inject, Input, TemplateRef, ViewChild } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { NbStepperComponent } from './stepper.component';
+import { NB_STEPPER } from './stepper-tokens';
 import { convertToBoolProperty } from '../helpers';
 
 /**
@@ -24,6 +18,8 @@ import { convertToBoolProperty } from '../helpers';
 })
 export class NbStepComponent {
 
+ protected stepper: NbStepperComponent;
+
  /**
  * Step content
  *
@@ -68,22 +64,21 @@ export class NbStepComponent {
  */
  @Input()
  get completed(): boolean {
- return this.completedValue || this.isCompleted;
+ return this._completed || this.isCompleted;
  }
-
  set completed(value: boolean) {
- this.completedValue = convertToBoolProperty(value);
+ this._completed = convertToBoolProperty(value);
  }
+ protected _completed: boolean = false;
 
- private completedValue: boolean = false;
-
- private get isCompleted() {
+ protected get isCompleted() {
  return this.stepControl ? this.stepControl.valid && this.interacted : this.interacted;
  }
 
  interacted = false;
 
- constructor(@Inject(forwardRef(() => NbStepperComponent)) private stepper: NbStepperComponent) {
+ constructor(@Inject(NB_STEPPER) stepper) {
+ this.stepper = stepper;
  }
 
  /**

diff --git a/src/framework/theme/components/stepper/stepper-button.directive.ts b/src/framework/theme/components/stepper/stepper-button.directive.ts
@@ -8,7 +8,7 @@ export class NbStepperNextDirective {
 
  @Input() @HostBinding('attr.type') type: string = 'submit';
 
- constructor(private stepper: NbStepperComponent) {
+ constructor(protected stepper: NbStepperComponent) {
  }
 
  @HostListener('click')
@@ -24,7 +24,7 @@ export class NbStepperPreviousDirective {
 
  @Input() @HostBinding('attr.type') type: string = 'button';
 
- constructor(private stepper: NbStepperComponent) {
+ constructor(protected stepper: NbStepperComponent) {
  }
 
  @HostListener('click')

diff --git a/src/framework/theme/components/stepper/stepper-tokens.ts b/src/framework/theme/components/stepper/stepper-tokens.ts
@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const NB_STEPPER = new InjectionToken('Nebular Stepper Component');
diff --git a/src/framework/theme/components/stepper/stepper.component.scss b/src/framework/theme/components/stepper/stepper.component.scss
@@ -1,5 +1,5 @@
-:host {
- &.horizontal .header {
+:host(.horizontal) {
+ .header {
  .step {
  flex-direction: column;
  }
@@ -9,20 +9,24 @@
  }
  }
 
- &.vertical {
- display: flex;
- height: 100%;
+ .label-index {
+ margin-bottom: 10px;
+ }
+}
 
- .header {
- flex-direction: column;
+:host(.vertical) {
+ display: flex;
+ height: 100%;
+
+ .header {
+ flex-direction: column;
 
-  .label {
-  margin: 0 10px;
-  }
+ .label {
+ margin: 0 10px;
+ }
 
- .connector {
- width: 2px;
- }
+ .connector {
+ width: 2px;
  }
  }
 }
@@ -41,13 +45,13 @@
  display: flex;
  align-items: center;
  cursor: pointer;
+
  &.noninteractive {
  cursor: default;
  }
  }
 
  .label-index {
- margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;