[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/desktop/src/app/vault/view.component.html

@@ -50,11 +50,15 @@
                 {{ cipher.login.maskedPassword }}
               </div>
               <div
-                *ngIf="showPassword"
-                class="monospaced generated-wrapper"
+                *ngIf="showPassword && !showPasswordCount"
+                class="monospaced password-wrapper"
                 appSelectCopy
                 [innerHTML]="cipher.login.password | colorPassword"
               ></div>
+              <div
+                *ngIf="showPassword && showPasswordCount"
+                [innerHTML]="cipher.login.password | colorPasswordCount"
+              ></div>
             </div>
             <div class="action-buttons" *ngIf="cipher.viewPassword">
               <button
@@ -77,6 +81,18 @@
                   aria-hidden="true"
                 ></i>
               </button>
+              <button
+                type="button"
+                class="row-btn"
+                appStopClick
+                attr.aria-label="{{ 'toggleCharacterCount' | i18n }} {{ 'password' | i18n }}"
+                appA11yTitle="{{ 'toggleCharacterCount' | i18n }}"
+                (click)="togglePasswordCount()"
+                *ngIf="showPassword"
+                [attr.aria-pressed]="showPasswordCount"
+              >
+                <i class="bwi bwi-lg bwi-numbered-list" aria-hidden="true"></i>
+              </button>
               <button
                 type="button"
                 class="row-btn"