[EC-474] Add hidden char count toggle to web and desktop (#3262)

* feat-web: add hidden char count toggle

* Added toggle char count for desktop

* Use Tailwind and Component Library, add i18n

* Hide char count when password is hidden

* Initial proposal

* Update colors per design spec for all clients

Also make variable names consistent across clients

* Remove unused scss

* Add styling

* Set fixed with for password count elements

* Add separate wrapped stories

* Fix alignment of first char when wrapped

* Minor refactors

* Make naming consistent

* Add Figma url

* add barrel files

* Use CL component

* Fix template

* Remove duplicate style

* Use ColorPasswordComponent in web, remove old pipe

Also remove styling and move pipe out of jslib-module given that
it's no longer shared by all Angular clients

* Run prettier

* Remove unused scss vars

* Undo unnecessary changes

* Remove unnecessary changes

* Fix styling

* Fix selector

* Collect show password event

* Fix incorrect background in dark mode

* Fix linting

* Use color password for password history

* Add char count to hidden custom fields in desktop

* Fix char count background in web: take 2

* Update service name

* Add missing label toggleCharacterCount for desktop

Co-authored-by: Daniel James Smith <djsmith@web.de>
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

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

@@ -6,18 +6,10 @@
 </app-callout>
 <div class="card card-generated bg-light my-4">
   <div class="card-body">
-    <div
-      *ngIf="type === 'password'"
-      class="generated-wrapper"
-      [innerHTML]="password | colorPassword"
+    <bit-color-password
+      [password]="type === 'password' ? password : username"
       appSelectCopy
-    ></div>
-    <div
-      *ngIf="type === 'username'"
-      class="generated-wrapper"
-      [innerHTML]="username | colorPassword"
-      appSelectCopy
-    ></div>
+    ></bit-color-password>
   </div>
 </div>
 <div class="form-group" role="radiogroup" aria-labelledby="typeHeading">

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

@@ -15,12 +15,12 @@
       <div class="modal-body" *ngIf="history.length">
         <ul class="list-group list-group-flush">
           <li class="list-group-item d-flex" *ngFor="let h of history">
-            <div class="password-row">
-              <div
-                class="text-monospace generated-wrapper"
-                [innerHTML]="h.password | colorPassword"
+            <div class="tw-min-w-0">
+              <bit-color-password
+                [password]="h.password"
+                class="tw-block tw-font-mono"
                 appSelectCopy
-              ></div>
+              ></bit-color-password>
               <small class="text-muted">{{ h.date | date: "medium" }}</small>
             </div>
             <div class="ml-auto">