bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00
Code Issues Releases Wiki Activity

[PM-15847] libs/components strict migration (#15738)

Browse Source 
This PR migrates `libs/components` to use strict TypeScript.

- Remove `@ts-strict-ignore` from each file in `libs/components` and resolved any new compilation errors
- Converted ViewChild and ContentChild decorators to use the new signal-based queries using the [Angular signal queries migration](https://angular.dev/reference/migrations/signal-queries)
  - Made view/content children `required` where appropriate, eliminating the need for additional null checking. This helped simplify the strict migration.

---

Co-authored-by: Vicki League <vleague@bitwarden.com>
This commit is contained in:
Will Martin
2025-08-18 15:36:45 -04:00
committed by GitHub
parent f2d2d0a767
commit 827c4c0301
77 changed files with 450 additions and 612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
libs/components/src/avatar/avatar.component.ts
View File

@@ -1,5 +1,3 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { NgClass } from "@angular/common";
import { Component, OnChanges, input } from "@angular/core";
import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
@@ -41,7 +39,7 @@ export class AvatarComponent implements OnChanges {
private svgFontSize = 20;
private svgFontWeight = 300;
private svgSize = 48;
src: SafeResourceUrl;
src?: SafeResourceUrl;
constructor(public sanitizer: DomSanitizer) {}
@@ -56,8 +54,14 @@ export class AvatarComponent implements OnChanges {
}
private generate() {
let chars: string = null;
const upperCaseText = this.text()?.toUpperCase() ?? "";
const color = this.color();
const text = this.text();
const id = this.id();
if (!text && !color && !id) {
throw new Error("Must supply `text`, `color`, or `id` input.");
}
let chars: string | null = null;
const upperCaseText = text?.toUpperCase() ?? "";
chars = this.getFirstLetters(upperCaseText, this.svgCharCount);
@@ -66,18 +70,17 @@ export class AvatarComponent implements OnChanges {
}
// If the chars contain an emoji, only show it.
if (chars.match(Utils.regexpEmojiPresentation)) {
chars = chars.match(Utils.regexpEmojiPresentation)[0];
const emojiMatch = chars.match(Utils.regexpEmojiPresentation);
if (emojiMatch) {
chars = emojiMatch[0];
}
let svg: HTMLElement;
let hexColor = this.color();
const id = this.id();
if (!Utils.isNullOrWhitespace(this.color())) {
let hexColor = color ?? "";
if (!Utils.isNullOrWhitespace(hexColor)) {
svg = this.createSvgElement(this.svgSize, hexColor);
} else if (!Utils.isNullOrWhitespace(id)) {
hexColor = Utils.stringToColor(id.toString());
} else if (!Utils.isNullOrWhitespace(id ?? "")) {
hexColor = Utils.stringToColor(id!.toString());
svg = this.createSvgElement(this.svgSize, hexColor);
} else {
hexColor = Utils.stringToColor(upperCaseText);
@@ -95,7 +98,7 @@ export class AvatarComponent implements OnChanges {
);
}
private getFirstLetters(data: string, count: number): string {
private getFirstLetters(data: string, count: number): string | null {
const parts = data.split(" ");
if (parts.length > 1) {
let text = "";