PLAN-1778: New mat tabs

src/interface/src/app/map/map.component.html

@@ -37,7 +37,8 @@
           class="draw-area-button"
           [ngClass]="{
             selected: selectedAreaCreationAction === AreaCreationAction.DRAW,
-            deselected: selectedAreaCreationAction === AreaCreationAction.UPLOAD
+            deselected:
+              selectedAreaCreationAction === AreaCreationAction.UPLOAD,
           }"
           (click)="onAreaCreationActionChange(AreaCreationAction.DRAW)">
           <mat-icon>draw</mat-icon>
@@ -54,7 +55,8 @@
             [ngClass]="{
               selected:
                 selectedAreaCreationAction === AreaCreationAction.UPLOAD,
-              deselected: selectedAreaCreationAction === AreaCreationAction.DRAW
+              deselected:
+                selectedAreaCreationAction === AreaCreationAction.DRAW,
             }"
             (click)="onAreaCreationActionChange(AreaCreationAction.UPLOAD)">
             <mat-icon>upload_file</mat-icon>
@@ -103,12 +105,12 @@
     <div
       class="map-grid"
       [ngClass]="{
-        'one-column': mapViewOptions$.getValue().numVisibleMaps === 1
+        'one-column': mapViewOptions$.getValue().numVisibleMaps === 1,
       }">
       <div
         class="map-box"
         [ngClass]="{
-          selected: (mapViewOptions$ | async)?.selectedMapIndex === 0
+          selected: (mapViewOptions$ | async)?.selectedMapIndex === 0,
         }"
         [hidden]="!isMapVisible(0)"
         data-testid="map1">
@@ -121,7 +123,7 @@
       <div
         class="map-box"
         [ngClass]="{
-          selected: (mapViewOptions$ | async)?.selectedMapIndex === 1
+          selected: (mapViewOptions$ | async)?.selectedMapIndex === 1,
         }"
         [hidden]="!isMapVisible(1)"
         data-testid="map2">
@@ -135,7 +137,7 @@
       <div
         class="map-box"
         [ngClass]="{
-          selected: (mapViewOptions$ | async)?.selectedMapIndex === 2
+          selected: (mapViewOptions$ | async)?.selectedMapIndex === 2,
         }"
         [hidden]="!isMapVisible(2)"
         data-testid="map3">
@@ -148,7 +150,7 @@
       <div
         class="map-box"
         [ngClass]="{
-          selected: (mapViewOptions$ | async)?.selectedMapIndex === 3
+          selected: (mapViewOptions$ | async)?.selectedMapIndex === 3,
         }"
         [hidden]="!isMapVisible(3)"
         data-testid="map4">

src/interface/src/app/plan/create-scenarios/constraints-panel/constraints-panel.component.html

@@ -60,7 +60,7 @@
             *ngIf="focusedSelection === 'maxCost'"
             [ngClass]="{
               error:
-                constraintsForm.hasError('notEnoughBudget') && maxCost?.touched
+                constraintsForm.hasError('notEnoughBudget') && maxCost?.touched,
             }">
             Budget needs to be at least
             {{ calculateMinBudget() | currency: 'USD' : 'symbol' : '1.0-0' }}

src/interface/src/app/plan/plan-summary/saved-scenarios/saved-scenarios.component.html

@@ -25,7 +25,7 @@
       [isLoading]="loading"
       [hasData]="totalScenarios > 0"
       [ngClass]="{
-        'margin-top': totalScenarios === 0
+        'margin-top': totalScenarios === 0,
       }"
       emptyStateTitle="No scenarios yet"
       [emptyStateContent]="
@@ -155,7 +155,7 @@ <h4 class="scenarios-title">Scenarios</h4>
     [isLoading]="loading"
     [hasData]="totalScenarios > 0"
     [ngClass]="{
-      'margin-top': totalScenarios === 0
+      'margin-top': totalScenarios === 0,
     }"
     emptyStateTitle="No scenarios yet"
     [emptyStateContent]="

src/interface/src/app/plan/plan-summary/saved-scenarios/saved-scenarios.component.scss

@@ -178,6 +178,6 @@ app-section-loader {
   flex: 1;
 }
 
-:host ::ng-deep .mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab  {
+.custom-tab-group ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab {
   flex-grow: 0;
 }

src/interface/src/app/plan/plan-summary/scenarios-table-list/scenarios-table-list.component.html

@@ -86,7 +86,7 @@
     mat-row
     [ngClass]="{
       'scenario-row': highlightedScenarioRow?.id !== row.id,
-      highlight: highlightedScenarioRow?.id === row.id
+      highlight: highlightedScenarioRow?.id === row.id,
     }"
     *matRowDef="let row; columns: displayedColumns"
     (click)="highlightScenario(row)"

src/interface/src/app/plan/project-areas-metrics/project-areas-metrics.component.html

@@ -33,7 +33,7 @@ <h3 class="title">Metrics per Project area</h3>
           mat-button
           (click)="toggleMapLayer(i)"
           [ngClass]="{
-            ' selected': chart.metric_layer === (mapConditionLayer$ | async)
+            ' selected': chart.metric_layer === (mapConditionLayer$ | async),
           }">
           <mat-icon>map</mat-icon>
         </button>

src/interface/src/app/treatments/direct-impacts-map-legend/direct-impacts-map-legend.component.html

@@ -3,7 +3,7 @@
   <div
     *ngFor="let step of steps; index as i"
     [ngStyle]="{
-      '--square-color': SLOT_PALETTES[activeSlot][i]
+      '--square-color': SLOT_PALETTES[activeSlot][i],
     }">
     {{ step }}
   </div>

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

@@ -63,7 +63,7 @@ <h4 class="title">Direct Treatment Impacts</h4>
         [paddedContent]="false"
         [buttons]="[
           { icon: 'layers', actionName: 'layers' },
-          { icon: 'open_in_full', actionName: 'expand' }
+          { icon: 'open_in_full', actionName: 'expand' },
         ]"
         (clickedButton)="expandMaps()">
         <div panelTitle>{{ mapPanelTitle$ | async }}</div>

src/interface/src/app/treatments/map-controls/map-controls.component.html

@@ -18,7 +18,7 @@
       type="button"
       *ngIf="userCanEditStands"
       [ngClass]="{
-        active: (standSelectionEnabled$ | async)
+        active: (standSelectionEnabled$ | async),
       }"
       (click)="toggleRxSelection()"
       matTooltip="RX Selection Tool"

src/interface/src/app/treatments/map-project-areas/map-project-areas.component.html

@@ -20,9 +20,9 @@
       'case',
       ['==', ['get', 'id'], hoveredProjectAreaFromFeatures?.properties?.['id']],
       hoveredFillColor,
-      fillColor
+      fillColor,
     ],
-    'fill-opacity': visible && withFill ? 0.5 : 0
+    'fill-opacity': visible && withFill ? 0.5 : 0,
   }"></mgl-layer>
 
 <mgl-layer
@@ -32,7 +32,7 @@
   [sourceLayer]="layers.projectAreasOutline.sourceLayer"
   [paint]="{
     'line-color': visible ? layers.projectAreasOutline.color : 'transparent',
-    'line-width': 2
+    'line-width': 2,
   }"></mgl-layer>
 
 <mgl-layer
@@ -46,7 +46,7 @@
     'text-field': ['get', 'name'],
     'text-size': textSize,
     'text-anchor': 'center',
-    'text-justify': 'center'
+    'text-justify': 'center',
   }"
   [paint]="layers.projectAreaLabels.paint"></mgl-layer>
 

src/interface/src/app/treatments/map-rectangle/map-rectangle.component.html

@@ -7,13 +7,13 @@
   [source]="sourceName"
   [paint]="{
     'line-color': '#007dff',
-    'line-width': 1
+    'line-width': 1,
   }"></mgl-layer>
 <mgl-layer
   id="selection-rectangle-fill"
   type="fill"
   [source]="sourceName"
   [paint]="{
     'fill-color': '#007dff',
-    'fill-opacity': 0.1
+    'fill-opacity': 0.1,
   }"></mgl-layer>

src/interface/src/app/treatments/planning-area-layer/planning-area-layer.component.html

@@ -7,7 +7,7 @@
   [source]="sourceName"
   [paint]="{
     'line-color': 'black',
-    'line-width': 2
+    'line-width': 2,
   }">
 </mgl-layer>
 <mgl-layer
@@ -16,6 +16,6 @@
   [source]="sourceName"
   [paint]="{
     'fill-color': '#e9eded',
-    'fill-opacity': 0.1
+    'fill-opacity': 0.1,
   }">
 </mgl-layer>

src/interface/src/styleguide/modal/modal.component.html

@@ -31,7 +31,7 @@
   class="modal-body"
   [ngClass]="{
     scrollable: scrollableContent,
-    padded: padBody
+    padded: padBody,
   }">
   <ng-content select="[modalBodyContent]"></ng-content>
 </main>