[PM-6418] Fix environment selector on desktop (#8046)

Fix environment selector being broken on desktop. When selecting self-hosted and filling in a url, the selector fails to update when returning and instead produces the following console error.

apps/desktop/src/auth/login/login.component.ts

@@ -3,7 +3,6 @@ import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
 
-import { EnvironmentSelectorComponent } from "@bitwarden/angular/auth/components/environment-selector.component";
 import { LoginComponent as BaseLoginComponent } from "@bitwarden/angular/auth/components/login.component";
 import { FormValidationErrorsService } from "@bitwarden/angular/platform/abstractions/form-validation-errors.service";
 import { ModalService } from "@bitwarden/angular/services/modal.service";
@@ -37,8 +36,6 @@ const BroadcasterSubscriptionId = "LoginComponent";
 export class LoginComponent extends BaseLoginComponent implements OnDestroy {
   @ViewChild("environment", { read: ViewContainerRef, static: true })
   environmentModal: ViewContainerRef;
-  @ViewChild("environmentSelector", { read: ViewContainerRef, static: true })
-  environmentSelector: EnvironmentSelectorComponent;
 
   protected componentDestroyed$: Subject<void> = new Subject();
   webVaultHostname = "";

libs/angular/src/auth/components/environment-selector.component.html

@@ -1,79 +1,81 @@
-<div class="environment-selector-btn">
+<ng-container
-  {{ "loggingInOn" | i18n }}:
+  *ngIf="{
-  <button
+    selectedRegion: selectedRegion$ | async
-    type="button"
+  } as data"
-    (click)="toggle(null)"
-    cdkOverlayOrigin
-    #trigger="cdkOverlayOrigin"
-    aria-haspopup="dialog"
-    aria-controls="cdk-overlay-container"
-  >
-    <span class="text-primary">
-      <ng-container *ngIf="selectedRegion$ | async as selectedRegion; else fallback">
-        {{ selectedRegion.domain }}
-      </ng-container>
-      <ng-template #fallback>
-        {{ "selfHostedServer" | i18n }}
-      </ng-template>
-    </span>
-    <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
-  </button>
-</div>
-
-<ng-template
-  cdkConnectedOverlay
-  [cdkConnectedOverlayOrigin]="trigger"
-  [cdkConnectedOverlayOpen]="isOpen"
-  [cdkConnectedOverlayPositions]="overlayPosition"
-  [cdkConnectedOverlayHasBackdrop]="true"
-  [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
-  (backdropClick)="isOpen = false"
-  (detach)="close()"
 >
-  <div class="box-content">
+  <div class="environment-selector-btn">
-    <div
+    {{ "loggingInOn" | i18n }}:
-      class="environment-selector-dialog"
+    <button
-      [@transformPanel]="'open'"
+      type="button"
-      cdkTrapFocus
+      (click)="toggle(null)"
-      cdkTrapFocusAutoCapture
+      cdkOverlayOrigin
-      role="dialog"
+      #trigger="cdkOverlayOrigin"
-      aria-modal="true"
+      aria-haspopup="dialog"
+      aria-controls="cdk-overlay-container"
     >
-      <ng-container *ngFor="let region of availableRegions">
+      <span class="text-primary">
+        <ng-container *ngIf="data.selectedRegion; else fallback">
+          {{ data.selectedRegion.domain }}
+        </ng-container>
+        <ng-template #fallback>
+          {{ "selfHostedServer" | i18n }}
+        </ng-template>
+      </span>
+      <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+    </button>
+  </div>
+
+  <ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="isOpen"
+    [cdkConnectedOverlayPositions]="overlayPosition"
+    [cdkConnectedOverlayHasBackdrop]="true"
+    [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
+    (backdropClick)="isOpen = false"
+    (detach)="close()"
+  >
+    <div class="box-content">
+      <div
+        class="environment-selector-dialog"
+        [@transformPanel]="'open'"
+        cdkTrapFocus
+        cdkTrapFocusAutoCapture
+        role="dialog"
+        aria-modal="true"
+      >
+        <ng-container *ngFor="let region of availableRegions">
+          <button
+            type="button"
+            class="environment-selector-dialog-item"
+            (click)="toggle(region.key)"
+            [attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
+          >
+            <i
+              class="bwi bwi-fw bwi-sm bwi-check"
+              style="padding-bottom: 1px"
+              aria-hidden="true"
+              [style.visibility]="data.selectedRegion === region ? 'visible' : 'hidden'"
+            ></i>
+            <span>{{ region.domain }}</span>
+          </button>
+          <br />
+        </ng-container>
         <button
           type="button"
           class="environment-selector-dialog-item"
-          (click)="toggle(region.key)"
+          (click)="toggle(ServerEnvironmentType.SelfHosted)"
-          [attr.aria-pressed]="selectedEnvironment === region.key ? 'true' : 'false'"
+          [attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
         >
           <i
             class="bwi bwi-fw bwi-sm bwi-check"
             style="padding-bottom: 1px"
             aria-hidden="true"
-            [style.visibility]="selectedEnvironment === region.key ? 'visible' : 'hidden'"
+            [style.visibility]="data.selectedRegion ? 'hidden' : 'visible'"
           ></i>
-          <span>{{ region.domain }}</span>
+          <span>{{ "selfHostedServer" | i18n }}</span>
         </button>
-        <br />
+      </div>
-      </ng-container>
-      <button
-        type="button"
-        class="environment-selector-dialog-item"
-        (click)="toggle(ServerEnvironmentType.SelfHosted)"
-        [attr.aria-pressed]="
-          selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'true' : 'false'
-        "
-      >
-        <i
-          class="bwi bwi-fw bwi-sm bwi-check"
-          style="padding-bottom: 1px"
-          aria-hidden="true"
-          [style.visibility]="
-            selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'visible' : 'hidden'
-          "
-        ></i>
-        <span>{{ "selfHostedServer" | i18n }}</span>
-      </button>
     </div>
-  </div>
+  </ng-template>
-</ng-template>
+</ng-container>

libs/angular/src/auth/components/environment-selector.component.ts

@@ -36,11 +36,9 @@ import {
 })
 export class EnvironmentSelectorComponent {
   @Output() onOpenSelfHostedSettings = new EventEmitter();
-  isOpen = false;
+  protected isOpen = false;
-  showingModal = false;
+  protected ServerEnvironmentType = Region;
-  selectedEnvironment: Region;
+  protected overlayPosition: ConnectedPosition[] = [
-  ServerEnvironmentType = Region;
-  overlayPosition: ConnectedPosition[] = [
     {
       originX: "start",
       originY: "bottom",