[SG-58] Avatar color selector (#3691)

* changes

* merge

* undo

* work

* stuffs

* chore: added custom color picker

* oops

* chore: everything but the broken sink

* picker v2

* fix: cleanup

* fix: linty

* fix: use tailwind

* fix: use tailwind

* undo: merge error

* remove: old color picker

* fix: merge issue

* chore: use input vs component

* fix: move logic out!

* fix: revert changes to bit-avatar

* fix: cleanup undos

* feat: color lookup for "me" badge in vault

* fix: naming stuff

* fix: event emitter

* fix: linty

* fix: protect

* fix: remove v1 states
work: navatar

* fix: big

* fix: messages merge issue

* bug: differing bg colors for generated components

* feat: added sync stuff

* fix: cli

* fix: remove service refs, use state

* fix: moved from EventEmitter to Subjects

* fix: srs

* fix: strict stuff is nice tbh

* SG-920 + SG-921 (#4342)

* SG-920 + SG-921

* Update change-avatar.component.html

* Update selectable-avatar.component.ts

* [SG-926] [SG-58] [Defect] - Selected Avatar color does not persist in the Account Settings menu (#4359)

* SG-926

* fix: comment

* fix: undo

* fix: imp

* work: done with static values (#4272)

* [SG-35] (#4361)

Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>

apps/web/src/app/components/dynamic-avatar.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnDestroy } from "@angular/core";
+import { Observable, Subject } from "rxjs";
+
+import { AvatarUpdateService } from "@bitwarden/common/abstractions/account/avatar-update.service";
+type SizeTypes = "xlarge" | "large" | "default" | "small" | "xsmall";
+@Component({
+  selector: "dynamic-avatar",
+  template: `<span [title]="title">
+    <bit-avatar
+      appStopClick
+      [text]="text"
+      [size]="size"
+      [color]="color$ | async"
+      [border]="border"
+      [id]="id"
+      [title]="title"
+    >
+    </bit-avatar>
+  </span>`,
+})
+export class DynamicAvatarComponent implements OnDestroy {
+  @Input() border = false;
+  @Input() id: string;
+  @Input() text: string;
+  @Input() title: string;
+  @Input() size: SizeTypes = "default";
+  color$: Observable<string | null>;
+  private destroy$ = new Subject<void>();
+
+  constructor(private accountUpdateService: AvatarUpdateService) {
+    if (this.text) {
+      this.text = this.text.toUpperCase();
+    }
+    this.color$ = this.accountUpdateService.avatarUpdate$;
+  }
+
+  async ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}