3 files changed, 224 insertions, 0 deletions
diff --git a/public/src/app/rule-engine/from/from.component.html b/public/src/app/rule-engine/from/from.component.html
new file mode 100644
index 0000000..7af653d
--- /dev/null
+++ b/public/src/app/rule-engine/from/from.component.html
@@ -0,0 +1,70 @@
+<form #fromFrm="ngForm" novalidate>
+  <!-- Copy template -->
+  <div class="from" *ngIf="actionType === 'copy'" data-tests-id="fromComponent">
+    <div class="from-conatiner">
+      <div style="display: flex; align-items: center; width: 100%;" class="label">
+        <span class="label" style="padding: 0 5px; width: 50px;">From</span>
+        <input class="input-text" name="copyFrom" required style="min-width: 190px;" (ngModelChange)="modelChange(from)" #copyFrom="ngModel"
+          [(ngModel)]="from.value" type="text" data-tests-id="valueInput">
+        <span class="label" (click)="showRegex(from)" [ngStyle]="from.state === 'open' ? { 'color': '#009FDB'} : {'color':'gray'}"
+          style="padding: 0 5px; width: 50px; cursor: pointer; border: none" data-tests-id="btnFromRegex">Re/g</span>
+      </div>
+      <div [@state]="from.state" *ngIf="from.state === 'open'" style="display: flex; align-items: center; width: 80%;" class="label">
+        <span class="label" style="padding: 0 3px; width: 54px; border-top: none; border-bottom: none;">regex</span>
+        <input class="input-text" style="min-width: 192px;" (ngModelChange)="modelChange(from)" [(ngModel)]="from.regex" type="text"
+          ngModel required name="RegexInput" data-tests-id="inputFromRegex">
+      </div>
+    </div>
+  </div>
+  <!-- Map template -->
+  <div class="from" *ngIf="actionType === 'map'" data-tests-id="fromComponent">
+    <div class="from-conatiner">
+      <div style="display: flex; align-items: center; width: 100%;" class="label">
+        <span class="label" style="padding: 0 5px; width: 50px;">From</span>
+        <input class="input-text" ngModel required name="mapFromInput" (ngModelChange)="modelChange(from)" [(ngModel)]="from.value"
+          type="text" data-tests-id="valueInput">
+      </div>
+    </div>
+  </div>
+
+  <!-- dateFormatter template -->
+  <div class="from" *ngIf="actionType === 'date formatter'" data-tests-id="fromComponent">
+    <div class="from-conatiner">
+      <div style="display: flex; align-items: center; width: 100%;" class="label">
+        <span class="label" style="padding: 0 5px; width: 50px;">From</span>
+        <input class="input-text" ngModel required name="dateFormatterFromInput" (ngModelChange)="modelChange(from)" [(ngModel)]="from.value"
+          type="text" data-tests-id="valueInput">
+      </div>
+    </div>
+  </div>
+
+  <!-- Concat template -->
+  <div class="from" *ngIf="actionType === 'concat'" ngModelGroup="concat" #concatFrom="ngModelGroup">
+    <div *ngFor="let input of from.values; let index = index;" data-tests-id="concatInputArrayFrom" (mouseleave)="hoveredIndex=-1"
+      (mouseover)="hoveredIndex=index" class="from-conatiner" style="margin-bottom:1rem; display: flex; flex-direction: column; align-items: flex-start;"
+      data-tests-id="fromComponent">
+      <div style="display: flex; align-items: center; width: 100%;">
+        <div style="display: flex; align-items: center; width: 100%;" class="label">
+          <span class="label" style="padding: 0 5px; width: 50px;">From</span>
+          <input class="input-text" (ngModelChange)="modelChange(from)" [(ngModel)]="input.value" type="text" data-tests-id="valueInput"
+            ngModel required name="concat[{{index}}]">
+        </div>
+
+        <button mat-icon-button class="button-remove" [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" (click)="removeFromInput(index)"
+          *ngIf="from.values.length > 2" style="box-shadow: none; height: 24px; width: 24px; display:flex" data-tests-id="btnDelete">
+          <mat-icon class="md-24">delete</mat-icon>
+        </button>
+      </div>
+
+    </div>
+    <div style="display:flex; justify-content: space-between;">
+      <div style="display: flex; align-items: center;">
+        <button mat-mini-fab color="primary" (click)="addFromInput()" style="box-shadow: none; height: 24px; width: 24px; display:flex"
+          data-tests-id="btnAddInput">
+          <mat-icon>add</mat-icon>
+        </button>
+        <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add input</span>
+      </div>
+    </div>
+  </div>
+</form>
diff --git a/public/src/app/rule-engine/from/from.component.scss b/public/src/app/rule-engine/from/from.component.scss
new file mode 100644
index 0000000..852984d
--- /dev/null
+++ b/public/src/app/rule-engine/from/from.component.scss
@@ -0,0 +1,63 @@
+.from {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+
+  .label {
+    border: 1px solid #d2d2d2;
+    height: 30px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+}
+
+.from-select {
+  width: 250px;
+  border: none;
+}
+
+.from-conatiner {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 350px;
+
+  .input-text {
+    border: none;
+    flex: 1;
+    width: 100%;
+    min-width: 250px;
+    padding: 5px 0 5px 5px;
+    margin: 0;
+  }
+}
+
+.button-remove {
+  display: flex;
+  justify-content: center;
+  color: #a7a7a7;
+  &:hover {
+    color: #009fdb;
+  }
+}
+
+:host {
+  @mixin md-icon-size($size: 24px) {
+    font-size: $size;
+    height: $size;
+    width: $size;
+  }
+
+  .material-icons.mat-icon {
+    @include md-icon-size(24px);
+  }
+  /deep/ .mat-button-wrapper {
+    padding: 0;
+  }
+  .mat-icon {
+    width: 18px;
+    height: 18px;
+  }
+}
diff --git a/public/src/app/rule-engine/from/from.component.ts b/public/src/app/rule-engine/from/from.component.ts
new file mode 100644
index 0000000..e7c276b
--- /dev/null
+++ b/public/src/app/rule-engine/from/from.component.ts
@@ -0,0 +1,91 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild
+} from '@angular/core';
+// import { From } from "../model";
+import { Subject } from 'rxjs/Subject';
+import {
+  trigger,
+  state,
+  animate,
+  transition,
+  style,
+  keyframes
+} from '@angular/animations';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-from',
+  templateUrl: './from.component.html',
+  styleUrls: ['./from.component.scss'],
+  animations: [
+    trigger('state', [
+      state(
+        'open',
+        style({
+          opacity: 1,
+          height: 'auto'
+        })
+      ),
+      transition('* => open', [
+        animate(
+          200,
+          keyframes([
+            style({
+              opacity: 1,
+              height: 'auto'
+            })
+          ])
+        )
+      ]),
+      state(
+        'closed',
+        style({
+          opacity: 0,
+          height: 0
+        })
+      )
+    ])
+  ]
+})
+export class FromComponent {
+  from: any = {
+    value: '',
+    regex: '',
+    state: 'closed',
+    values: [{ value: '' }, { value: '' }]
+  };
+  @Input() actionType;
+  @Output() onFromChange = new EventEmitter();
+  @ViewChild('fromFrm') fromFrm: NgForm;
+  hoveredIndex;
+  // public keyUp = new BehaviorSubject<string>(null);
+
+  showRegex(item) {
+    item.state = item.state === 'closed' ? 'open' : 'closed';
+    if (item.state === 'closed') {
+      item.regex = '';
+    }
+  }
+  updateMode(fromData) {
+    console.log(fromData);
+    if (fromData) {
+      this.from = fromData;
+    }
+  }
+
+  constructor() {}
+
+  modelChange(event) {
+    this.onFromChange.emit(event);
+  }
+  addFromInput() {
+    this.from.values.push({ value: '' });
+  }
+  removeFromInput(index) {
+    this.from.values.splice(index, 1);
+  }
+}