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.

Author: yggg

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);
     }
   }
 }

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;
   }
 
   /**

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')

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');

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;