stepper component v2

claims/claim-utils/stepper/step.component.ts

@@ -1,26 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-
-@Component({
-  selector: 'step',
-  template: `
-
-
-    <div class=" uk-width-auto" >
-      <button class="uk-icon-button uk-border-circle" [class]="status" [class.uk-disabled]="status=='disabled'"
-               (click)="stepChanged.emit(stepId)">
-        <span *ngIf="status != 'done'">{{stepNumber}}</span>
-        <span *ngIf="status == 'done'" uk-icon="check"></span>
-      </button>
-      <span class="uk-margin-small-left stepper-text" [class]="status">{{stepText}}</span>
-    </div>
-    `
-
-})
-export class StepComponent {
-  @Input() status: 'active' | 'default' | 'disabled' | 'done';
-  @Input() stepId;
-  @Input() stepNumber;
-  @Input() stepText;
-  @Input() active;
-  @Output() stepChanged: EventEmitter<string> = new EventEmitter<string>();
-}

claims/claim-utils/stepper/stepper.component.ts

@@ -1,19 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'stepper',
-  template: `
-    <div class="stepper" >
-      <div class=" uk-flex uk-flex-center uk-text-small"  >
-        <div class=" uk-grid uk-flex uk-flex-center uk-flex-middle uk-width-auto">
-          <ng-content></ng-content>
-        </div>
-      </div>
-    </div>
-
-  `
-
-})
-export class StepperComponent {
-   
-}

sharedComponents/stepper/step.component.ts

@@ -0,0 +1,34 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'step',
+  template: `
+
+
+    <div class=" uk-width-auto uk-text-center " style="position: relative; ">
+      <div style="position: relative; z-index:10; min-width: 140px;">
+        <div class="uk-margin-small-left stepper-text uk-text-uppercase uk-margin-bottom"
+             [class]="status">{{stepText}}</div>
+        <div>
+          <button class="uk-icon-button uk-border-circle" [class]="status" [class.uk-disabled]="status=='disabled'"
+                  (click)="stepChanged.emit(stepId)">
+            <span *ngIf="status != 'done'">{{stepNumber}}</span>
+            <span *ngIf="status == 'done'" uk-icon="check"></span>
+          </button>
+        </div>
+      </div>
+      <step-line *ngIf="showStepLine" [status]="status" [stepNumber]="stepNumber" class="stepper-line-container"
+                 [style.z-index]="(+stepNumber)"></step-line>
+    </div>
+  `
+
+})
+export class StepComponent {
+  @Input() status: 'active' | 'default' | 'disabled' | 'done';
+  @Input() stepId;
+  @Input() stepNumber;
+  @Input() stepText;
+  @Input() active;
+  @Output() stepChanged: EventEmitter<string> = new EventEmitter<string>();
+  @Input() showStepLine:boolean = false;
+}

sharedComponents/stepper/stepLine.component.ts

@@ -6,11 +6,12 @@ import {Component, Input} from '@angular/core';
 
 
    
-    <div class="stepper-line uk-margin-small-left" [class]="status"></div>
+    <div class="stepper-line uk-margin-bottom uk-width-medium@m uk-width-small@s" [class]="status + ' step' +  stepNumber"></div>
     `
 
 })
 export class StepLineComponent {
   @Input() status: 'active' | 'default' | 'disabled' | 'done';
+  @Input() stepNumber;
   
 }

sharedComponents/stepper/stepper.component.ts

@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+/*
+* usage example 
+* 
+*  <stepper>
+   <step status="active" stepId="step1" stepNumber="1"
+         stepText="Step 1"
+         active="step1" [showStepLine]="false"></step>
+   <step status="disabled" stepId="step2" stepNumber="2"
+         stepText="Step 2"
+         active="step1"
+         [showStepLine]="true"></step>
+
+ </stepper>
+* */
+@Component({
+  selector: 'stepper',
+  template: `
+    <div class="stepper" >
+      <div class=" uk-flex uk-flex-center "  >
+        <div class=" uk-grid uk-grid-small uk-flex uk-flex-bottom uk-text-small uk-width-auto">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+
+  `
+
+})
+export class StepperComponent {
+   
+}

sharedComponents/stepper/stepper.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import {SharedModule} from "../../../../shared/shared.module";
+import {SharedModule} from "../../../shared/shared.module";
 import {StepperComponent} from "./stepper.component";
 import {StepComponent} from "./step.component";
 import {StepLineComponent} from "./stepLine.component";