[CL-7] Avatar (#3153)

* CL-7 Begin Implementing Avatar

* add figma design to parameters

* rework size property

* Update Figma file to correct component

* remove circle input (avatar will always be a circle)

* adjust sizing and limit inputs

* Setup color input and functionality

* Add border option

* fix bug duplicating classes

* Update size for large avatar

* Remove unnecessary class

* Fix typo

* Remove 'dynamic' input (Avatar will now regenerate on changes by default)

* Use Tailwind class instead of an arbitrary value

* Remove gravatars (deprecated, see SG-434)

* Rename methods to a more accurate name

* Rework classList() getter method

* Remove unnecessary logic and services

* Make properties private, and rename for better clarity

* Move sanitizer logic to the TS code rather than the template

* Rework and move function to a common static class in Utils

* Rename 'data' to 'text' for clarity

* Rework classList implementation

* Remove email since we removed gravatars

* Remove template

* set color based on color, id, or text input

* rework generate method

* add explicit null/undefined check

* remove comment

Co-authored-by: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>

libs/common/src/misc/utils.ts

@@ -370,6 +370,39 @@ export class Utils {
     return s.charAt(0).toUpperCase() + s.slice(1);
   }
 
+  /**
+   * There are a few ways to calculate text color for contrast, this one seems to fit accessibility guidelines best.
+   * https://stackoverflow.com/a/3943023/6869691
+   *
+   * @param {string} bgColor
+   * @param {number} [threshold] see stackoverflow link above
+   * @param {boolean} [svgTextFill]
+   * Indicates if this method is performed on an SVG <text> 'fill' attribute (e.g. <text fill="black"></text>).
+   * This check is necessary because the '!important' tag cannot be used in a 'fill' attribute.
+   */
+  static pickTextColorBasedOnBgColor(bgColor: string, threshold = 186, svgTextFill = false) {
+    const bgColorHexNums = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
+    const r = parseInt(bgColorHexNums.substring(0, 2), 16); // hexToR
+    const g = parseInt(bgColorHexNums.substring(2, 4), 16); // hexToG
+    const b = parseInt(bgColorHexNums.substring(4, 6), 16); // hexToB
+    const blackColor = svgTextFill ? "black" : "black !important";
+    const whiteColor = svgTextFill ? "white" : "white !important";
+    return r * 0.299 + g * 0.587 + b * 0.114 > threshold ? blackColor : whiteColor;
+  }
+
+  static stringToColor(str: string): string {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let color = "#";
+    for (let i = 0; i < 3; i++) {
+      const value = (hash >> (i * 8)) & 0xff;
+      color += ("00" + value.toString(16)).substr(-2);
+    }
+    return color;
+  }
+
   /**
    * @throws Will throw an error if the ContainerService has not been attached to the window object
    */