refactor(devtools): add split to the demo devtools app (angular#58818)

added split area component to demo component so that we can resize the devtools and demo app.

PR Close angular#58818

Author: sheikalthaf

devtools/src/app/devtools-app/devtools-app.component.html

@@ -1,5 +1,10 @@
-<iframe #ref src="demo-app/todos/app" id="sample-app" title="todos-app"></iframe>
-<br />
-<div class="devtools-wrapper">
-  <ng-devtools></ng-devtools>
-</div>
+<as-split unit="percent" [direction]="'vertical'" [gutterSize]="9">
+  <as-split-area size="40">
+    <iframe #ref src="demo-app/todos/app" id="sample-app" title="todos-app"></iframe>
+  </as-split-area>
+  <as-split-area size="60">
+    <div class="devtools-wrapper">
+      <ng-devtools></ng-devtools>
+    </div>
+  </as-split-area>
+</as-split>

devtools/src/app/devtools-app/devtools-app.component.scss

@@ -1,9 +1,13 @@
 iframe {
-  height: 339px;
+  height: 100%;
   width: 100%;
   border: 0;
 }
 
 .devtools-wrapper {
-  height: calc(100vh - 344px);
+  height: 100%;
+}
+:host {
+  display: block;
+  height: 100vh;
 }

devtools/src/app/devtools-app/devtools-app.component.ts

@@ -10,11 +10,13 @@ import {Component, ElementRef, viewChild} from '@angular/core';
 
 import {IFrameMessageBus} from '../../iframe-message-bus';
 import {DevToolsComponent} from 'ng-devtools';
+import {SplitAreaDirective} from '../../../projects/ng-devtools/src/lib/vendor/angular-split/lib/component/splitArea.directive';
+import {SplitComponent} from '../../../projects/ng-devtools/src/lib/vendor/angular-split/lib/component/split.component';
 
 @Component({
   templateUrl: './devtools-app.component.html',
   styleUrls: ['./devtools-app.component.scss'],
-  imports: [DevToolsComponent],
+  imports: [DevToolsComponent, SplitAreaDirective, SplitComponent],
 })
 export class AppDevToolsComponent {
   messageBus: IFrameMessageBus | null = null;