mirror of
https://github.com/bitwarden/browser
synced 2025-12-22 03:03:43 +00:00
[PM-15847] libs/components strict migration (#15738)
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:
@@ -1,5 +1,3 @@
|
||||
// FIXME: Update this file to be type safe and remove this and next line
|
||||
// @ts-strict-ignore
|
||||
import { Overlay, OverlayConfig, OverlayRef } from "@angular/cdk/overlay";
|
||||
import { TemplatePortal } from "@angular/cdk/portal";
|
||||
import {
|
||||
@@ -27,12 +25,12 @@ import { PopoverComponent } from "./popover.component";
|
||||
export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
|
||||
readonly popoverOpen = model(false);
|
||||
|
||||
readonly popover = input<PopoverComponent>(undefined, { alias: "bitPopoverTriggerFor" });
|
||||
readonly popover = input.required<PopoverComponent>({ alias: "bitPopoverTriggerFor" });
|
||||
|
||||
readonly position = input<string>();
|
||||
|
||||
private overlayRef: OverlayRef;
|
||||
private closedEventsSub: Subscription;
|
||||
private overlayRef: OverlayRef | null = null;
|
||||
private closedEventsSub: Subscription | null = null;
|
||||
|
||||
get positions() {
|
||||
if (!this.position()) {
|
||||
@@ -82,7 +80,7 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
|
||||
this.popoverOpen.set(true);
|
||||
this.overlayRef = this.overlay.create(this.defaultPopoverConfig);
|
||||
|
||||
const templatePortal = new TemplatePortal(this.popover().templateRef, this.viewContainerRef);
|
||||
const templatePortal = new TemplatePortal(this.popover().templateRef(), this.viewContainerRef);
|
||||
|
||||
this.overlayRef.attach(templatePortal);
|
||||
this.closedEventsSub = this.getClosedEvents().subscribe(() => {
|
||||
@@ -91,6 +89,10 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
|
||||
}
|
||||
|
||||
private getClosedEvents(): Observable<any> {
|
||||
if (!this.overlayRef) {
|
||||
throw new Error("Overlay reference is not available");
|
||||
}
|
||||
|
||||
const detachments = this.overlayRef.detachments();
|
||||
const escKey = this.overlayRef
|
||||
.keydownEvents()
|
||||
@@ -102,7 +104,7 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
|
||||
}
|
||||
|
||||
private destroyPopover() {
|
||||
if (this.overlayRef == null || !this.popoverOpen()) {
|
||||
if (!this.overlayRef || !this.popoverOpen()) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -112,7 +114,9 @@ export class PopoverTriggerForDirective implements OnDestroy, AfterViewInit {
|
||||
|
||||
private disposeAll() {
|
||||
this.closedEventsSub?.unsubscribe();
|
||||
this.closedEventsSub = null;
|
||||
this.overlayRef?.dispose();
|
||||
this.overlayRef = null;
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
// FIXME: Update this file to be type safe and remove this and next line
|
||||
// @ts-strict-ignore
|
||||
import { A11yModule } from "@angular/cdk/a11y";
|
||||
import { Component, EventEmitter, Output, TemplateRef, ViewChild, input } from "@angular/core";
|
||||
import { Component, EventEmitter, Output, TemplateRef, input, viewChild } from "@angular/core";
|
||||
|
||||
import { IconButtonModule } from "../icon-button/icon-button.module";
|
||||
import { SharedModule } from "../shared/shared.module";
|
||||
@@ -14,7 +12,7 @@ import { TypographyModule } from "../typography";
|
||||
exportAs: "popoverComponent",
|
||||
})
|
||||
export class PopoverComponent {
|
||||
@ViewChild(TemplateRef) templateRef: TemplateRef<any>;
|
||||
readonly templateRef = viewChild.required(TemplateRef);
|
||||
readonly title = input("");
|
||||
@Output() closed = new EventEmitter();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user