From 0bf6f7602ee49f70cc3c4ac8eda92ab1f034332a Mon Sep 17 00:00:00 2001
From: Sheik Althaf <althafmech@outlook.com>
Date: Fri, 22 Nov 2024 14:22:26 +0530
Subject: [PATCH] refactor(devtools): add split to the demo devtools app
 (#58818)

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

PR Close #58818
---
 .../app/devtools-app/devtools-app.component.html  | 15 ++++++++++-----
 .../app/devtools-app/devtools-app.component.scss  |  8 ++++++--
 .../app/devtools-app/devtools-app.component.ts    |  4 +++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/devtools/src/app/devtools-app/devtools-app.component.html b/devtools/src/app/devtools-app/devtools-app.component.html
index 223fdc1d530..321430d084d 100644
--- a/devtools/src/app/devtools-app/devtools-app.component.html
+++ b/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>
diff --git a/devtools/src/app/devtools-app/devtools-app.component.scss b/devtools/src/app/devtools-app/devtools-app.component.scss
index 64f6596fde8..a959a0fe992 100644
--- a/devtools/src/app/devtools-app/devtools-app.component.scss
+++ b/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;
 }
diff --git a/devtools/src/app/devtools-app/devtools-app.component.ts b/devtools/src/app/devtools-app/devtools-app.component.ts
index e6e33c8e17b..d6106518880 100644
--- a/devtools/src/app/devtools-app/devtools-app.component.ts
+++ b/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;