styles

src/interface/src/app/treatments/direct-impacts/direct-impacts.component.ts

@@ -148,12 +148,14 @@ export class DirectImpactsComponent implements OnInit, OnDestroy {
   expandStandChart() {
     this.dialog.open(ExpandedStandDataChartComponent, {
       injector: this.injector, // Pass the current injector to the dialog
+      autoFocus: false,
     });
   }
 
   expandMaps() {
     this.dialog.open(ExpandedDirectImpactMapComponent, {
       injector: this.injector, // Pass the current injector to the dialog
+      autoFocus: false,
     });
   }
 

src/interface/src/app/treatments/expanded-direct-impact-map/expanded-direct-impact-map.component.html

@@ -1,13 +1,6 @@
-<sg-modal
-  [title]="(mapPanelTitle$ | async) || ''"
-  primaryButtonText="Create"
-  [scrollableContent]="false"
-  [showBorders]="true"
-  [hasFooter]="false"
-  (clickedClose)="close()"
-  width="full"
-  class="expanded-maps-modal">
-  <div modalBodyContent class="expanded-maps">
+<sg-expanded-panel (clickedClose)="close()">
+  <div panelTitle>{{ mapPanelTitle$ | async }}</div>
+  <div panelContent>
     <app-direct-impacts-synced-maps
       *ngIf="
         (showTreatmentPrescription$ | async) === false
@@ -18,4 +11,4 @@
     <app-treatment-legend
       *ngIf="showTreatmentPrescription$ | async"></app-treatment-legend>
   </div>
-</sg-modal>
+</sg-expanded-panel>

src/interface/src/app/treatments/expanded-direct-impact-map/expanded-direct-impact-map.component.scss

@@ -1,21 +0,0 @@
-@import "mixins";
-
-.expanded-maps {
-  height: 90vh;
-  position: relative;
-}
-
-::ng-deep {
-  sg-modal.expanded-maps-modal {
-
-    &.full {
-      width: 80vw;
-    }
-
-    .header {
-      @include h5();
-      height: 39px;
-    }
-  }
-}
-

src/interface/src/app/treatments/expanded-direct-impact-map/expanded-direct-impact-map.component.ts

@@ -7,6 +7,7 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { DirectImpactsSyncedMapsComponent } from '../direct-impacts-synced-maps/direct-impacts-synced-maps.component';
 import { TreatmentMapComponent } from '../treatment-map/treatment-map.component';
 import { TreatmentLegendComponent } from '../treatment-legend/treatment-legend.component';
+import { ExpandedPanelComponent } from '../../../styleguide/expanded-panel/expanded-panel.component';
 
 @Component({
   selector: 'app-expanded-direct-impact-map',
@@ -19,6 +20,7 @@ import { TreatmentLegendComponent } from '../treatment-legend/treatment-legend.c
     TreatmentMapComponent,
     TreatmentLegendComponent,
     NgIf,
+    ExpandedPanelComponent,
   ],
   templateUrl: './expanded-direct-impact-map.component.html',
   styleUrl: './expanded-direct-impact-map.component.scss',

src/interface/src/app/treatments/expanded-stand-data-chart/expanded-stand-data-chart.component.html

@@ -1,13 +1,6 @@
-<sg-modal
-  [title]="(standChartPanelTitle$ | async) || ''"
-  primaryButtonText="Create"
-  [scrollableContent]="false"
-  [showBorders]="true"
-  [hasFooter]="false"
-  (clickedClose)="close()"
-  width="large"
-  class="stand-data-modal">
-  <div modalBodyContent class="expanded-stand-data">
+<sg-expanded-panel (clickedClose)="close()">
+  <div panelTitle>{{ standChartPanelTitle$ | async }}</div>
+  <div panelContent>
     <app-stand-data-chart></app-stand-data-chart>
   </div>
-</sg-modal>
+</sg-expanded-panel>

src/interface/src/app/treatments/expanded-stand-data-chart/expanded-stand-data-chart.component.scss

@@ -1,16 +0,0 @@
-@import "mixins";
-
-.expanded-stand-data {
-  padding: 20px;
-  height: 70vh;
-}
-
-::ng-deep {
-  sg-modal.stand-data-modal {
-    .header {
-      @include h5();
-      height: 39px;
-    }
-  }
-}
-

src/interface/src/app/treatments/expanded-stand-data-chart/expanded-stand-data-chart.component.ts

@@ -6,6 +6,7 @@ import { StandDataChartComponent } from '../stand-data-chart/stand-data-chart.co
 import { DirectImpactsStateService } from '../direct-impacts.state.service';
 import { map } from 'rxjs';
 import { MatDialogRef } from '@angular/material/dialog';
+import { ExpandedPanelComponent } from '../../../styleguide/expanded-panel/expanded-panel.component';
 
 @Component({
   selector: 'app-expanded-stand-data-chart',
@@ -17,6 +18,7 @@ import { MatDialogRef } from '@angular/material/dialog';
     NgForOf,
     NgIf,
     StandDataChartComponent,
+    ExpandedPanelComponent,
   ],
   templateUrl: './expanded-stand-data-chart.component.html',
   styleUrl: './expanded-stand-data-chart.component.scss',

src/interface/src/styleguide/expanded-panel/expanded-panel.component.html

@@ -1,6 +1,6 @@
 <section class="header">
   <div class="header-title">
-    <ng-content select="[modalBodyTitle]"></ng-content>
+    <ng-content select="[panelTitle]"></ng-content>
   </div>
   <div class="title-buttons">
     <button mat-icon-button (click)="handleCloseButton()" aria-label="close">
@@ -9,5 +9,5 @@
   </div>
 </section>
 <main class="modal-body">
-  <ng-content select="[modalBodyContent]"></ng-content>
+  <ng-content select="[panelContent]"></ng-content>
 </main>

src/interface/src/styleguide/expanded-panel/expanded-panel.component.scss

@@ -4,30 +4,28 @@
 :host {
   display: flex;
   flex-direction: column;
-  width: 500px;
   background-color: white;
-  max-height: 700px;
+  max-height: 1000px;
   border-radius: 4px;
   justify-content: space-between;
+  height: 90vh;
+  position: relative;
+  width: 80vw;
+  max-width: 1400px;
 }
 
 .header {
-  @include h4();
+  @include h5();
   display: flex;
   flex-shrink: 0;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  font-family: 'Public Sans';
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 32px;
   text-align: left;
-  padding: 10px 16px;
+  padding: 14px 9px 14px 24px;
   border-bottom: 1px solid $color-soft-gray;
-  height: 64px;
-
-
+  height: 60px;
+  box-sizing: border-box;
 }
 
 
@@ -62,3 +60,14 @@
   align-items: center;
   gap: 16px;
 }
+
+.modal-body {
+  height: 100%;
+}
+
+::ng-deep {
+  [panelcontent] {
+    height: 100%;
+  }
+}
+

src/interface/src/styleguide/expanded-panel/expanded-panel.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { CommonModule, NgIf } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -24,7 +24,11 @@ import { MatButtonModule } from '@angular/material/button';
   ],
 })
 export class ExpandedPanelComponent {
+  @Output() clickedClose = new EventEmitter<any>();
+
   constructor() {}
 
-  handleCloseButton(): void {}
+  handleCloseButton() {
+    this.clickedClose.emit();
+  }
 }

src/interface/src/styleguide/expanded-panel/expanded-panel.stories.ts

@@ -46,8 +46,8 @@ export const Default: Story = {
     props: args,
     template: `<div ${containerStyle}>
       <sg-expanded-panel ${argsToTemplate(args)}>
-        <div modalBodyTitle>The title</div>
-        <div modalBodyContent>Just a basic expaded panel</div>
+        <div panelTitle>The title</div>
+        <div panelContent>Just a basic expaded panel</div>
       </sg-expanded-panel><div>`,
   }),
 };

src/interface/src/styleguide/panel/panel.component.ts

@@ -19,6 +19,8 @@ export interface PanelIconButton {
   styleUrl: './panel.component.scss',
 })
 export class PanelComponent {
+  constructor() {}
+
   /**
    * List of buttons to be displayed at the right side of the title
    */