[PM-8282] credential generator (#11398)

* credential generator browser ui
* switch browser generate screen to extension refresh flag
* consolidate generator components into module
* add `@bitwarden/generator-components` readme
* normalize generator component rx subscriptions

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

@@ -0,0 +1,77 @@
+<!-- FIXME: root$ should be powered using a reactive form -->
+<bit-toggle-group
+  fullWidth
+  class="tw-mb-4"
+  [selected]="(root$ | async).nav"
+  (selectedChange)="onRootChanged($event)"
+  attr.aria-label="{{ 'type' | i18n }}"
+>
+  <bit-toggle *ngFor="let option of rootOptions$ | async" [value]="option.value">
+    {{ option.label }}
+  </bit-toggle>
+</bit-toggle-group>
+
+<bit-card class="tw-flex tw-justify-between tw-mb-4">
+  <div class="tw-grow tw-flex tw-items-center">
+    <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
+  </div>
+  <div class="tw-space-x-1">
+    <button type="button" bitIconButton="bwi-generate" buttonType="main" (click)="generate$.next()">
+      {{ "generatePassword" | i18n }}
+    </button>
+    <button
+      type="button"
+      bitIconButton="bwi-clone"
+      buttonType="main"
+      showToast
+      [appCopyClick]="value$ | async"
+    >
+      {{ "copyPassword" | i18n }}
+    </button>
+  </div>
+</bit-card>
+<tools-password-settings
+  class="tw-mt-6"
+  *ngIf="(algorithm$ | async)?.id === 'password'"
+  [userId]="userId$ | async"
+  (onUpdated)="generate$.next()"
+/>
+<tools-passphrase-settings
+  class="tw-mt-6"
+  *ngIf="(algorithm$ | async)?.id === 'passphrase'"
+  [userId]="userId$ | async"
+  (onUpdated)="generate$.next()"
+/>
+<bit-section *ngIf="(category$ | async) !== 'password'">
+  <bit-section-header>
+    <h6 bitTypography="h6">{{ "options" | i18n }}</h6>
+  </bit-section-header>
+  <div class="tw-mb-4">
+    <bit-card>
+      <form class="box" [formGroup]="username" class="tw-container">
+        <bit-form-field>
+          <bit-label>{{ "type" | i18n }}</bit-label>
+          <bit-select [items]="usernameOptions$ | async" formControlName="nav"> </bit-select>
+          <bit-hint *ngIf="!!(credentialTypeHint$ | async)">{{
+            credentialTypeHint$ | async
+          }}</bit-hint>
+        </bit-form-field>
+      </form>
+      <tools-catchall-settings
+        *ngIf="(algorithm$ | async)?.id === 'catchall'"
+        [userId]="userId$ | async"
+        (onUpdated)="generate$.next()"
+      />
+      <tools-subaddress-settings
+        *ngIf="(algorithm$ | async)?.id === 'subaddress'"
+        [userId]="userId$ | async"
+        (onUpdated)="generate$.next()"
+      />
+      <tools-username-settings
+        *ngIf="(algorithm$ | async)?.id === 'username'"
+        [userId]="userId$ | async"
+        (onUpdated)="generate$.next()"
+      />
+    </bit-card>
+  </div>
+</bit-section>