3 files changed, 64 insertions, 0 deletions
diff --git a/public/src/app/rule-frame/rule-frame.component.html b/public/src/app/rule-frame/rule-frame.component.html
new file mode 100644
index 0000000..10f3032
--- /dev/null
+++ b/public/src/app/rule-frame/rule-frame.component.html
@@ -0,0 +1,19 @@
+<div style="position: relative; display: flex; justify-content: flex-end; height: 100%;">
+
+  <div *ngIf="!tabName.includes('map')" style="margin: 1em;">
+    <app-bar-icons [tabName]="tabName"></app-bar-icons>
+  </div>
+
+  <!-- rule engine -->
+  <div style="width: 100%;" *ngIf="tabName.includes('map')">
+    <app-slide-panel [activePane]="store.isLeftVisible ? 'left' : 'right'">
+      <div leftPane style="height: 100%; overflow: auto;">
+        <app-rule-list></app-rule-list>
+      </div>
+      <div rightPane style="height: 100%; overflow: auto;">
+        <app-action-list></app-action-list>
+      </div>
+    </app-slide-panel>
+  </div>
+
+</div>
diff --git a/public/src/app/rule-frame/rule-frame.component.scss b/public/src/app/rule-frame/rule-frame.component.scss
new file mode 100644
index 0000000..2a95e01
--- /dev/null
+++ b/public/src/app/rule-frame/rule-frame.component.scss
@@ -0,0 +1,10 @@
+.frame {
+  display: block;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0 none;
+  box-sizing: border-box;
+}
diff --git a/public/src/app/rule-frame/rule-frame.component.ts b/public/src/app/rule-frame/rule-frame.component.ts
new file mode 100644
index 0000000..4d5f999
--- /dev/null
+++ b/public/src/app/rule-frame/rule-frame.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnDestroy, Input, ViewChild } from '@angular/core';
+import { Store } from '../store/store';
+import { BarIconsComponent } from '../bar-icons/bar-icons.component';
+
+@Component({
+  selector: 'app-rule-frame',
+  templateUrl: './rule-frame.component.html',
+  styleUrls: ['./rule-frame.component.scss']
+})
+export class RuleFrameComponent implements OnDestroy {
+  expandSetting = false;
+  configuration;
+  mappingTarget: string;
+  showHeaderBtn = true;
+  @Input() tabName: string;
+  // @ViewChild(BarIconsComponent) barFormsRef: BarIconsComponent;
+
+  constructor(public store: Store) {
+    this.store.isLeftVisible = true;
+  }
+
+  ngOnDestroy() {}
+
+  onChangeMapping(configurationKey) {
+    console.log('changing ifrmae entry', configurationKey);
+  }
+
+  isPropertyDdl(property) {
+    return property.hasOwnProperty('constraints');
+  }
+
+  enableSetting() {
+    this.expandSetting = !this.expandSetting;
+  }
+}