bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 16:23:44 +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

16
libs/components/src/toggle-group/toggle.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 {
AfterContentChecked,
@@ -8,8 +6,8 @@ import {
ElementRef,
HostBinding,
signal,
ViewChild,
input,
viewChild,
} from "@angular/core";
import { ToggleGroupComponent } from "./toggle-group.component";
@@ -24,9 +22,9 @@ let nextId = 0;
export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewInit {
id = nextId++;
readonly value = input<TValue>();
@ViewChild("labelContent") labelContent: ElementRef<HTMLSpanElement>;
@ViewChild("bitBadgeContainer") bitBadgeContainer: ElementRef<HTMLSpanElement>;
readonly value = input.required<TValue>();
readonly labelContent = viewChild<ElementRef<HTMLSpanElement>>("labelContent");
readonly bitBadgeContainer = viewChild<ElementRef<HTMLSpanElement>>("bitBadgeContainer");
constructor(private groupComponent: ToggleGroupComponent<TValue>) {}
@@ -34,7 +32,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
@HostBinding("class") classList = ["tw-group/toggle", "tw-flex", "tw-min-w-16"];
protected bitBadgeContainerHasChidlren = signal(false);
protected labelTitle = signal<string>(null);
protected labelTitle = signal<string | null>(null);
get name() {
return this.groupComponent.name;
@@ -100,12 +98,12 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
ngAfterContentChecked() {
this.bitBadgeContainerHasChidlren.set(
this.bitBadgeContainer?.nativeElement.childElementCount > 0,
(this.bitBadgeContainer()?.nativeElement.childElementCount ?? 0) > 0,
);
}
ngAfterViewInit() {
const labelText = this.labelContent?.nativeElement.innerText;
const labelText = this.labelContent()?.nativeElement.innerText;
if (labelText) {
this.labelTitle.set(labelText);
}