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

34
libs/components/src/multi-select/multi-select.component.ts
View File

@@ -1,12 +1,9 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { hasModifierKey } from "@angular/cdk/keycodes";
import {
Component,
Input,
OnInit,
Output,
ViewChild,
EventEmitter,
HostBinding,
Optional,
@@ -14,6 +11,7 @@ import {
input,
model,
booleanAttribute,
viewChild,
} from "@angular/core";
import {
ControlValueAccessor,
@@ -48,10 +46,10 @@ let nextId = 0;
* This component has been implemented to only support Multi-select list events
*/
export class MultiSelectComponent implements OnInit, BitFormFieldControl, ControlValueAccessor {
@ViewChild(NgSelectComponent) select: NgSelectComponent;
readonly select = viewChild.required(NgSelectComponent);
// Parent component should only pass selectable items (complete list - selected items = baseItems)
readonly baseItems = model<SelectItemView[]>();
readonly baseItems = model.required<SelectItemView[]>();
// Defaults to native ng-select behavior - set to "true" to clear selected items on dropdown close
readonly removeSelectedItems = input(false);
readonly placeholder = model<string>();
@@ -61,10 +59,10 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
@Input({ transform: booleanAttribute }) disabled?: boolean;
// Internal tracking of selected items
protected selectedItems: SelectItemView[];
protected selectedItems: SelectItemView[] | null = null;
// Default values for our implementation
loadingText: string;
loadingText?: string;
protected searchInputId = `search-input-${nextId++}`;
@@ -95,13 +93,14 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
/** Function for customizing keyboard navigation */
/** Needs to be arrow function to retain `this` scope. */
keyDown = (event: KeyboardEvent) => {
if (!this.select.isOpen && event.key === "Enter" && !hasModifierKey(event)) {
const select = this.select();
if (!select.isOpen && event.key === "Enter" && !hasModifierKey(event)) {
return false;
}
if (this.select.isOpen && event.key === "Escape" && !hasModifierKey(event)) {
if (select.isOpen && event.key === "Escape" && !hasModifierKey(event)) {
this.selectedItems = [];
this.select.close();
select.close();
event.stopPropagation();
return false;
}
@@ -183,11 +182,11 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
get ariaDescribedBy() {
return this._ariaDescribedBy;
}
set ariaDescribedBy(value: string) {
set ariaDescribedBy(value: string | undefined) {
this._ariaDescribedBy = value;
this.select?.searchInput.nativeElement.setAttribute("aria-describedby", value);
this.select()?.searchInput.nativeElement.setAttribute("aria-describedby", value ?? "");
}
private _ariaDescribedBy: string;
private _ariaDescribedBy?: string;
/**Implemented as part of BitFormFieldControl */
get labelForId() {
@@ -208,16 +207,17 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
set required(value: any) {
this._required = value != null && value !== false;
}
private _required: boolean;
private _required?: boolean;
/**Implemented as part of BitFormFieldControl */
get hasError() {
return this.ngControl?.status === "INVALID" && this.ngControl?.touched;
return !!(this.ngControl?.status === "INVALID" && this.ngControl?.touched);
}
/**Implemented as part of BitFormFieldControl */
get error(): [string, any] {
const key = Object.keys(this.ngControl?.errors)[0];
return [key, this.ngControl?.errors[key]];
const errors = this.ngControl?.errors ?? {};
const key = Object.keys(errors)[0];
return [key, errors[key]];
}
}