bind settings components as view children of options components

libs/tools/generator/components/src/credential-generator.component.html

@@ -37,6 +37,7 @@
   </div>
 </bit-card>
 <tools-password-settings
+  #passwordSettings
   class="tw-mt-6"
   *ngIf="(showAlgorithm$ | async)?.id === 'password'"
   [userId]="userId$ | async"
@@ -81,21 +82,25 @@ <h2 bitTypography="h6">{{ "options" | i18n }}</h2>
         </bit-form-field>
       </form>
       <tools-catchall-settings
+        #catchallSettings
         *ngIf="(showAlgorithm$ | async)?.id === 'catchall'"
         [userId]="userId$ | async"
         (onUpdated)="generate('catchall settings')"
       />
       <tools-forwarder-settings
+        #forwarderSettings
         *ngIf="!!(forwarderId$ | async)"
         [forwarder]="forwarderId$ | async"
         [userId]="this.userId$ | async"
       />
       <tools-subaddress-settings
+        #subaddressSettings
         *ngIf="(showAlgorithm$ | async)?.id === 'subaddress'"
         [userId]="userId$ | async"
         (onUpdated)="generate('subaddress settings')"
       />
       <tools-username-settings
+        #usernameSettings
         *ngIf="(showAlgorithm$ | async)?.id === 'username'"
         [userId]="userId$ | async"
         (onUpdated)="generate('username settings')"

libs/tools/generator/components/src/credential-generator.component.ts

@@ -48,7 +48,12 @@ import {
 } from "@bitwarden/generator-core";
 import { GeneratorHistoryService } from "@bitwarden/generator-history";
 
+import { CatchallSettingsComponent } from "./catchall-settings.component";
+import { ForwarderSettingsComponent } from "./forwarder-settings.component";
 import { PassphraseSettingsComponent } from "./passphrase-settings.component";
+import { PasswordSettingsComponent } from "./password-settings.component";
+import { SubaddressSettingsComponent } from "./subaddress-settings.component";
+import { UsernameSettingsComponent } from "./username-settings.component";
 
 // constants used to identify navigation selections that are not
 // generator algorithms
@@ -73,7 +78,22 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
   ) {}
 
   /** binds to the settings component at runtime */
-  @ViewChild("passphrase") passphraseSettings: PassphraseSettingsComponent;
+  @ViewChild("passphraseSettings") passphraseComponent: PassphraseSettingsComponent;
+
+  /** binds to the settings component at runtime */
+  @ViewChild("passwordSettings") passwordComponent: PasswordSettingsComponent;
+
+  /** binds to the settings component at runtime */
+  @ViewChild("catchallSettings") catchallComponent: CatchallSettingsComponent;
+
+  /** binds to the settings component at runtime */
+  @ViewChild("forwarderSettings") forwarderComponent: ForwarderSettingsComponent;
+
+  /** binds to the settings component at runtime */
+  @ViewChild("subaddressSettings") subaddressComponent: SubaddressSettingsComponent;
+
+  /** binds to the settings component at runtime */
+  @ViewChild("usernameSettings") usernameComponent: UsernameSettingsComponent;
 
   /** Binds the component to a specific user's settings. When this input is not provided,
    * the form binds to the active user
@@ -510,8 +530,8 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
    *  origin in the debugger.
    */
   protected async generate(requestor: string) {
-    if (this.passphraseSettings) {
-      await this.passphraseSettings.save("credential generator");
+    if (this.passphraseComponent) {
+      await this.passphraseComponent.save("credential generator");
     }
 
     this.generate$.next(requestor);

libs/tools/generator/components/src/password-generator.component.html

@@ -35,13 +35,15 @@
   </div>
 </bit-card>
 <tools-password-settings
+  #passwordSettings
   class="tw-mt-6"
   *ngIf="(algorithm$ | async)?.id === 'password'"
   [userId]="this.userId$ | async"
   [disableMargin]="disableMargin"
   (onUpdated)="generate('password settings')"
 />
 <tools-passphrase-settings
+  #passphraseSettings
   class="tw-mt-6"
   *ngIf="(algorithm$ | async)?.id === 'passphrase'"
   [userId]="this.userId$ | async"

libs/tools/generator/components/src/password-generator.component.ts

@@ -1,5 +1,14 @@
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
-import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from "@angular/core";
 import {
   BehaviorSubject,
   catchError,
@@ -30,6 +39,9 @@ import {
 } from "@bitwarden/generator-core";
 import { GeneratorHistoryService } from "@bitwarden/generator-history";
 
+import { PassphraseSettingsComponent } from "./passphrase-settings.component";
+import { PasswordSettingsComponent } from "./password-settings.component";
+
 /** Options group for passwords */
 @Component({
   selector: "tools-password-generator",
@@ -46,6 +58,12 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
     private zone: NgZone,
   ) {}
 
+  /** binds to the settings component at runtime */
+  @ViewChild("passphraseSettings") passphraseComponent: PassphraseSettingsComponent;
+
+  /** binds to the settings component at runtime */
+  @ViewChild("passwordSettings") passwordComponent: PasswordSettingsComponent;
+
   /** Binds the component to a specific user's settings.
    *  When this input is not provided, the form binds to the active
    *  user

libs/tools/generator/components/src/username-generator.component.html

@@ -57,21 +57,25 @@ <h2 bitTypography="h6">{{ "options" | i18n }}</h2>
         </bit-form-field>
       </form>
       <tools-catchall-settings
+        #catchallSettings
         *ngIf="(algorithm$ | async)?.id === 'catchall'"
         [userId]="this.userId$ | async"
         (onUpdated)="generate('catchall settings')"
       />
       <tools-forwarder-settings
+        #forwarderSettings
         *ngIf="!!(forwarderId$ | async)"
         [forwarder]="forwarderId$ | async"
         [userId]="this.userId$ | async"
       />
       <tools-subaddress-settings
+        #subaddressSettings
         *ngIf="(algorithm$ | async)?.id === 'subaddress'"
         [userId]="this.userId$ | async"
         (onUpdated)="generate('subaddress settings')"
       />
       <tools-username-settings
+        #usernameSettings
         *ngIf="(algorithm$ | async)?.id === 'username'"
         [userId]="this.userId$ | async"
         (onUpdated)="generate('username settings')"

libs/tools/generator/components/src/username-generator.component.ts

@@ -1,5 +1,14 @@
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
-import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
+import {
+  Component,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+} from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import {
   BehaviorSubject,
@@ -38,6 +47,11 @@ import {
 } from "@bitwarden/generator-core";
 import { GeneratorHistoryService } from "@bitwarden/generator-history";
 
+import { CatchallSettingsComponent } from "./catchall-settings.component";
+import { ForwarderSettingsComponent } from "./forwarder-settings.component";
+import { SubaddressSettingsComponent } from "./subaddress-settings.component";
+import { UsernameSettingsComponent } from "./username-settings.component";
+
 // constants used to identify navigation selections that are not
 // generator algorithms
 const FORWARDER = "forwarder";
@@ -67,6 +81,18 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
     private formBuilder: FormBuilder,
   ) {}
 
+  /** binds to the settings component at runtime */
+  @ViewChild("catchallSettings") catchallComponent: CatchallSettingsComponent;
+
+  /** binds to the settings component at runtime */
+  @ViewChild("forwarderSettings") forwarderComponent: ForwarderSettingsComponent;
+
+  /** binds to the settings component at runtime */
+  @ViewChild("subaddressSettings") subaddressComponent: SubaddressSettingsComponent;
+
+  /** binds to the settings component at runtime */
+  @ViewChild("usernameSettings") usernameComponent: UsernameSettingsComponent;
+
   /** Binds the component to a specific user's settings. When this input is not provided,
    * the form binds to the active user
    */