chore: code tidying

libs/configuration/src/components/configuration-select/configuration-select.component.ts

@@ -1,6 +1,15 @@
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, ViewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  EventEmitter,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -44,7 +53,9 @@ import { ConfigurationService, IUserSettings } from '../../provider';
   styleUrl: './configuration-select.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class PicsaConfigurationSelectComponent {
+export class PicsaConfigurationSelectComponent implements OnInit {
+  @Output() selectionChange = new EventEmitter<IUserSettings>();
+
   // mat-stepper prefers individual forms per step
   public countryForm = this.fb.group({
     country_code: new FormControl<IUserSettings['country_code']>(null as any, {
@@ -91,7 +102,20 @@ export class PicsaConfigurationSelectComponent {
 
   @ViewChild(MatStepper) stepper: MatStepper;
 
-  constructor(private fb: FormBuilder, private configurationService: ConfigurationService) {}
+  constructor(
+    private fb: FormBuilder,
+    private configurationService: ConfigurationService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit() {
+    const { country_code, language_code, user_type } = this.configurationService.userSettings();
+    this.countryForm.patchValue({ country_code });
+    this.languageForm.patchValue({ language_code });
+    this.userTypeForm.patchValue({ user_type });
+    this.cdr.markForCheck();
+  }
+
   public setCountry(country_code: ICountryCode) {
     this.countryForm.patchValue({ country_code });
     this.configurationService.updateUserSettings({ country_code });
@@ -103,6 +127,7 @@ export class PicsaConfigurationSelectComponent {
     this.configurationService.updateUserSettings({ language_code });
     this.goToNextStep();
   }
+
   public setUserType(user_type: IUserSettings['user_type']) {
     this.userTypeForm.patchValue({ user_type });
     this.loadDeploymentFromSelections();
@@ -146,5 +171,6 @@ export class PicsaConfigurationSelectComponent {
       user_type: this.userTypeForm.value.user_type,
       deployment_id,
     });
+    this.selectionChange.next(this.configurationService.userSettings());
   }
 }

libs/configuration/src/components/configuration-summary/configuration-summary.html

@@ -1,6 +1,11 @@
-<button mat-button color="primary" (click)="openLanguageSelect()">
+<button mat-button color="primary" (click)="dialog.open(selectDialog)">
   <div style="display: flex; align-items: center">
     <img class="language-summary-flag" [src]="image" />
     <span class="language-label">{{ label }}</span>
   </div>
 </button>
+
+<!-- Dialog -->
+<ng-template #selectDialog>
+  <picsa-configuration-select (selectionChange)="dialog.closeAll()"></picsa-configuration-select>
+</ng-template>

libs/configuration/src/components/configuration-summary/configuration-summary.ts

@@ -1,23 +1,29 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, effect } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { COUNTRIES_DATA_HASHMAP, LANGUAGES_DATA_HASHMAP } from '@picsa/data/deployments';
 
 import { ConfigurationService } from '../../provider';
+import { PicsaConfigurationSelectComponent } from '../configuration-select/configuration-select.component';
 
 /** UI button that displays summary of current configuration and launches dialog to change */
 @Component({
   selector: 'picsa-configuration-summary',
   templateUrl: 'configuration-summary.html',
   styleUrl: './configuration-summary.scss',
-  imports: [CommonModule, MatButtonModule],
+  imports: [CommonModule, MatButtonModule, MatDialogModule, PicsaConfigurationSelectComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
 })
 export class PicsaConfigurationSummaryComponent {
   public label = '';
   public image = '';
-  constructor(public configurationService: ConfigurationService, private cdr: ChangeDetectorRef) {
+  constructor(
+    public configurationService: ConfigurationService,
+    public dialog: MatDialog,
+    private cdr: ChangeDetectorRef
+  ) {
     effect(() => {
       const { country_code } = this.configurationService.deploymentSettings();
       if (country_code) {
@@ -34,8 +40,4 @@ export class PicsaConfigurationSummaryComponent {
       }
     });
   }
-
-  async openLanguageSelect() {
-    this.configurationService.resetUserSettings();
-  }
 }

libs/theme/src/_overrides.scss

@@ -39,6 +39,11 @@ mat-card-content.mat-mdc-card-content {
 .mat-mdc-dialog-surface {
   padding: 24px;
 }
+// Allow dialog content to scroll (e.g. configuration select)
+mat-dialog-container.mat-mdc-dialog-container {
+  max-height: 100vh;
+  overflow: auto;
+}
 // Add override to remove dialog padding
 .cdk-overlay-pane.no-padding {
   .mat-mdc-dialog-surface {