[PM-2043] Fix additional space and characters copied to clipboard (#5312)

* Change appSelectCopy to accept a dynamic input on what to copy

* Renamed select-copy directive to copy-text directive to be more accurate with the new behaviour

Signed-off-by: Andre Rosado <arosado@bitwarden.com>

* Moved CopyTextDirective on jslib module to be in alphabetic ordering

---------

Signed-off-by: Andre Rosado <arosado@bitwarden.com>
Co-authored-by: Andre Rosado <arosado@bitwarden.com>

apps/browser/src/tools/popup/generator/generator.component.html

@@ -19,7 +19,11 @@
     {{ "passwordGeneratorPolicyInEffect" | i18n }}
   </app-callout>
   <div class="generated-block" *ngIf="type === 'password'">
-    <div class="generated-wrapper" [innerHTML]="password | colorPassword" appSelectCopy></div>
+    <div
+      class="generated-wrapper"
+      [innerHTML]="password | colorPassword"
+      [appCopyText]="password"
+    ></div>
     <div class="action-buttons">
       <button
         type="button"
@@ -41,7 +45,11 @@
     </div>
   </div>
   <div class="generated-block" *ngIf="type === 'username'">
-    <div class="generated-wrapper" [innerHTML]="username | colorPassword" appSelectCopy></div>
+    <div
+      class="generated-wrapper"
+      [innerHTML]="username | colorPassword"
+      [appCopyText]="username"
+    ></div>
     <div class="action-buttons" #form [appApiAction]="usernameGeneratingPromise">
       <button
         type="button"

apps/browser/src/tools/popup/generator/password-generator-history.component.html

@@ -22,7 +22,7 @@
           <div class="row-main-content">
             <div
               class="monospaced password-wrapper"
-              appSelectCopy
+              [appCopyText]="h.password"
               [innerHTML]="h.password | colorPassword"
             ></div>
             <span class="detail">{{ h.date | date : "medium" }}</span>

apps/browser/src/vault/popup/components/vault/view.component.html

@@ -72,7 +72,7 @@
             <div
               *ngIf="showPassword && !showPasswordCount"
               class="monospaced password-wrapper"
-              appSelectCopy
+              [appCopyText]="cipher.login.password"
               [innerHTML]="cipher.login.password | colorPassword"
             ></div>
             <div

apps/desktop/src/app/tools/generator.component.html

@@ -12,7 +12,11 @@
           {{ "passwordGeneratorPolicyInEffect" | i18n }}
         </app-callout>
         <div class="generated-block" *ngIf="type === 'password'">
-          <div class="generated-wrapper" [innerHTML]="password | colorPassword" appSelectCopy></div>
+          <div
+            class="generated-wrapper"
+            [innerHTML]="password | colorPassword"
+            [appCopyText]="password"
+          ></div>
           <div class="action-buttons">
             <button
               type="button"
@@ -35,7 +39,11 @@
           </div>
         </div>
         <div class="generated-block" *ngIf="type === 'username'">
-          <div class="generated-wrapper" [innerHTML]="username | colorPassword" appSelectCopy></div>
+          <div
+            class="generated-wrapper"
+            [innerHTML]="username | colorPassword"
+            [appCopyText]="username"
+          ></div>
           <div class="action-buttons" #form [appApiAction]="usernameGeneratingPromise">
             <button
               type="button"

apps/desktop/src/app/tools/password-generator-history.component.html

@@ -11,7 +11,7 @@
               <div class="row-main">
                 <div
                   class="password-wrapper monospaced"
-                  appSelectCopy
+                  [appCopyText]="h.password"
                   [innerHTML]="h.password | colorPassword"
                 ></div>
                 <span class="detail">{{ h.date | date : "medium" }}</span>

apps/desktop/src/vault/app/vault/view.component.html

@@ -52,7 +52,7 @@
               <div
                 *ngIf="showPassword && !showPasswordCount"
                 class="monospaced password-wrapper"
-                appSelectCopy
+                [appCopyText]="cipher.login.password"
                 [innerHTML]="cipher.login.password | colorPassword"
               ></div>
               <div

apps/web/src/app/tools/generator.component.html

@@ -8,7 +8,7 @@
   <div class="card-body">
     <bit-color-password
       [password]="type === 'password' ? password : username"
-      appSelectCopy
+      [appCopyText]="type === 'password' ? password : username"
     ></bit-color-password>
   </div>
 </div>

apps/web/src/app/tools/password-generator-history.component.html

@@ -10,7 +10,7 @@
             <bit-color-password
               [password]="h.password"
               class="tw-block tw-font-mono"
-              appSelectCopy
+              [appCopyText]="h.password"
             ></bit-color-password>
             <small bitTypography="body2" class="tw-text-muted">
               {{ h.date | date : "medium" }}