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

<label class="environment-selector-btn">
  {{ "region" | i18n }}:
  <a
    (click)="toggle(null)"
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin"
    aria-haspopup="menu"
    aria-controls="cdk-overlay-container"
    [ngSwitch]="selectedEnvironment"
  >
    <label *ngSwitchCase="ServerEnvironmentType.US" class="text-primary">{{ "us" | i18n }}</label>
    <label *ngSwitchCase="ServerEnvironmentType.EU" class="text-primary">{{ "eu" | i18n }}</label>
    <label *ngSwitchCase="ServerEnvironmentType.SelfHosted" class="text-primary">{{
      "selfHosted" | i18n
    }}</label>
    <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
  </a>
</label>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  (backdropClick)="close()"
  (detach)="close()"
  [cdkConnectedOverlayOpen]="isOpen"
  [cdkConnectedOverlayPositions]="overlayPosition"
>
  <div class="box-content">
    <div class="environment-selector-dialog" [@transformPanel]="'open'" role="dialog">
      <button
        type="button"
        class="environment-selector-dialog-item"
        (click)="toggle(ServerEnvironmentType.US)"
      >
        <i
          class="bwi bwi-fw bwi-sm bwi-check"
          style="padding-bottom: 1px"
          aria-hidden="true"
          [style.visibility]="
            selectedEnvironment === ServerEnvironmentType.US ? 'visible' : 'hidden'
          "
        ></i>
        <img class="img-us" alt="" />
        <span>{{ "us" | i18n }}</span>
      </button>
      <br />
      <button
        type="button"
        class="environment-selector-dialog-item"
        (click)="toggle(ServerEnvironmentType.EU)"
        *ngIf="euServerFlagEnabled"
      >
        <i
          class="bwi bwi-fw bwi-sm bwi-check"
          style="padding-bottom: 1px"
          aria-hidden="true"
          [style.visibility]="
            selectedEnvironment === ServerEnvironmentType.EU ? 'visible' : 'hidden'
          "
        ></i>
        <img class="img-eu" alt="" />
        <span>{{ "eu" | i18n }}</span>
      </button>
      <br *ngIf="euServerFlagEnabled" />
      <button
        type="button"
        class="environment-selector-dialog-item"
        (click)="toggle(ServerEnvironmentType.SelfHosted)"
      >
        <i
          class="bwi bwi-fw bwi-sm bwi-check"
          style="padding-bottom: 1px"
          aria-hidden="true"
          [style.visibility]="
            selectedEnvironment === ServerEnvironmentType.SelfHosted ? 'visible' : 'hidden'
          "
        ></i>
        <i
          class="bwi bwi-fw bwi-sm bwi-pencil-square"
          style="padding-bottom: 1px"
          aria-hidden="true"
        ></i>
        <span>{{ "selfHosted" | i18n }}</span>
      </button>
    </div>
  </div>
</ng-template>