From 7a8358bb477dbdb7bc3e01960efc514bc4a5d3ef Mon Sep 17 00:00:00 2001
From: argirok <argirokokogiannaki@gmail.com>
Date: Wed, 16 Mar 2022 18:53:19 +0200
Subject: [PATCH] stepper component v2

---
 claims/claim-utils/stepper/step.component.ts  | 26 --------------
 .../claim-utils/stepper/stepper.component.ts  | 19 -----------
 sharedComponents/stepper/step.component.ts    | 34 +++++++++++++++++++
 .../stepper/stepLine.component.ts             |  3 +-
 sharedComponents/stepper/stepper.component.ts | 32 +++++++++++++++++
 .../stepper/stepper.module.ts                 |  2 +-
 6 files changed, 69 insertions(+), 47 deletions(-)
 delete mode 100644 claims/claim-utils/stepper/step.component.ts
 delete mode 100644 claims/claim-utils/stepper/stepper.component.ts
 create mode 100644 sharedComponents/stepper/step.component.ts
 rename {claims/claim-utils => sharedComponents}/stepper/stepLine.component.ts (58%)
 create mode 100644 sharedComponents/stepper/stepper.component.ts
 rename {claims/claim-utils => sharedComponents}/stepper/stepper.module.ts (87%)

diff --git a/claims/claim-utils/stepper/step.component.ts b/claims/claim-utils/stepper/step.component.ts
deleted file mode 100644
index 9d40156c..00000000
--- a/claims/claim-utils/stepper/step.component.ts
+++ /dev/null
@@ -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>();
-}
diff --git a/claims/claim-utils/stepper/stepper.component.ts b/claims/claim-utils/stepper/stepper.component.ts
deleted file mode 100644
index 8ccfd17c..00000000
--- a/claims/claim-utils/stepper/stepper.component.ts
+++ /dev/null
@@ -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 {
-   
-}
diff --git a/sharedComponents/stepper/step.component.ts b/sharedComponents/stepper/step.component.ts
new file mode 100644
index 00000000..f2e1b504
--- /dev/null
+++ b/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;
+}
diff --git a/claims/claim-utils/stepper/stepLine.component.ts b/sharedComponents/stepper/stepLine.component.ts
similarity index 58%
rename from claims/claim-utils/stepper/stepLine.component.ts
rename to sharedComponents/stepper/stepLine.component.ts
index 3ab34a0c..19b93560 100644
--- a/claims/claim-utils/stepper/stepLine.component.ts
+++ b/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;
   
 }
diff --git a/sharedComponents/stepper/stepper.component.ts b/sharedComponents/stepper/stepper.component.ts
new file mode 100644
index 00000000..2d25c47c
--- /dev/null
+++ b/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 {
+   
+}
diff --git a/claims/claim-utils/stepper/stepper.module.ts b/sharedComponents/stepper/stepper.module.ts
similarity index 87%
rename from claims/claim-utils/stepper/stepper.module.ts
rename to sharedComponents/stepper/stepper.module.ts
index 8365526a..d7c1a72e 100644
--- a/claims/claim-utils/stepper/stepper.module.ts
+++ b/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";