use valueLabel with appCopyClick directive (#11718)

* add `valueLabel` to `appCopyClick` directives 
* move generated value description to the configuration

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

@@ -32,6 +32,7 @@
       showToast
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
+      [valueLabel]="credentialTypeLabel$ | async"
     ></button>
   </div>
 </bit-card>

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

@@ -468,6 +468,14 @@ export class CredentialGeneratorComponent implements OnInit, OnDestroy {
     map(({ generate }) => generate),
   );
 
+  /**
+   * Emits the copy credential toast respective of the selected credential type
+   */
+  protected credentialTypeLabel$ = this.algorithm$.pipe(
+    filter((algorithm) => !!algorithm),
+    map(({ generatedValue }) => generatedValue),
+  );
+
   /** Emits hint key for the currently selected credential type */
   protected credentialTypeHint$ = new ReplaySubject<string>(1);
 

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

@@ -30,6 +30,7 @@
       showToast
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
+      [valueLabel]="credentialTypeLabel$ | async"
     ></button>
   </div>
 </bit-card>

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

@@ -233,6 +233,14 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
     map(({ generate }) => generate),
   );
 
+  /**
+   * Emits the copy credential toast respective of the selected credential type
+   */
+  protected credentialTypeLabel$ = this.algorithm$.pipe(
+    filter((algorithm) => !!algorithm),
+    map(({ generatedValue }) => generatedValue),
+  );
+
   private toOptions(algorithms: AlgorithmInfo[]) {
     const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
       value: algorithm.id,

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

@@ -19,6 +19,7 @@
       showToast
       [appA11yTitle]="credentialTypeCopyLabel$ | async"
       [appCopyClick]="value$ | async"
+      [valueLabel]="credentialTypeLabel$ | async"
     >
       {{ credentialTypeCopyLabel$ | async }}
     </button>

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

@@ -390,6 +390,14 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
     map(({ generate }) => generate),
   );
 
+  /**
+   * Emits the copy credential toast respective of the selected credential type
+   */
+  protected credentialTypeLabel$ = this.algorithm$.pipe(
+    filter((algorithm) => !!algorithm),
+    map(({ generatedValue }) => generatedValue),
+  );
+
   /** Emits hint key for the currently selected credential type */
   protected credentialTypeHint$ = new ReplaySubject<string>(1);