3 files changed, 50 insertions, 0 deletions
diff --git a/public/src/app/rule-engine/slide-panel/slide-panel.component.html b/public/src/app/rule-engine/slide-panel/slide-panel.component.html
new file mode 100644
index 0000000..f0ee27e
--- /dev/null
+++ b/public/src/app/rule-engine/slide-panel/slide-panel.component.html
@@ -0,0 +1,8 @@
+<div class="panes" [@slide]="activePane">
+  <div style="height: 100%">
+    <ng-content select="[leftPane]"></ng-content>
+  </div>
+  <div style="height: 100%">
+    <ng-content select="[rightPane]"></ng-content>
+  </div>
+</div>
diff --git a/public/src/app/rule-engine/slide-panel/slide-panel.component.scss b/public/src/app/rule-engine/slide-panel/slide-panel.component.scss
new file mode 100644
index 0000000..2c9f00a
--- /dev/null
+++ b/public/src/app/rule-engine/slide-panel/slide-panel.component.scss
@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  overflow: hidden;
+  height: 100%;
+}
+
+.panes {
+  height: 100%;
+  width: 200%;
+
+  display: flex;
+  div {
+    flex: 1;
+  }
+}
diff --git a/public/src/app/rule-engine/slide-panel/slide-panel.component.ts b/public/src/app/rule-engine/slide-panel/slide-panel.component.ts
new file mode 100644
index 0000000..d7aa652
--- /dev/null
+++ b/public/src/app/rule-engine/slide-panel/slide-panel.component.ts
@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger
+} from '@angular/animations';
+
+type PaneType = 'left' | 'right';
+
+@Component({
+  selector: 'app-slide-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './slide-panel.component.html',
+  styleUrls: ['./slide-panel.component.scss'],
+  animations: [
+    trigger('slide', [
+      state('left', style({ transform: 'translateX(0)' })),
+      state('right', style({ transform: 'translateX(-50%)' })),
+      transition('* => *', animate(300))
+    ])
+  ]
+})
+export class SlidePanelComponent {
+  @Input() activePane: PaneType = 'left';
+}