1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00

[CL-707] Migrate CL codebase to signals (#15340)

This commit is contained in:
Vicki League
2025-07-16 08:39:37 -04:00
committed by GitHub
parent 97ec9a6339
commit 6811ea4c0b
124 changed files with 944 additions and 809 deletions

View File

@@ -1,4 +1,4 @@
import { Component, Input } from "@angular/core";
import { Component, effect, input } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { Icon, isIcon } from "./icon";
@@ -6,8 +6,8 @@ import { Icon, isIcon } from "./icon";
@Component({
selector: "bit-icon",
host: {
"[attr.aria-hidden]": "!ariaLabel",
"[attr.aria-label]": "ariaLabel",
"[attr.aria-hidden]": "!ariaLabel()",
"[attr.aria-label]": "ariaLabel()",
"[innerHtml]": "innerHtml",
},
template: ``,
@@ -15,16 +15,18 @@ import { Icon, isIcon } from "./icon";
export class BitIconComponent {
innerHtml: SafeHtml | null = null;
@Input() set icon(icon: Icon) {
if (!isIcon(icon)) {
return;
}
readonly icon = input<Icon>();
const svg = icon.svg;
this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
readonly ariaLabel = input<string>();
constructor(private domSanitizer: DomSanitizer) {
effect(() => {
const icon = this.icon();
if (!isIcon(icon)) {
return;
}
const svg = icon.svg;
this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
});
}
@Input() ariaLabel: string | undefined = undefined;
constructor(private domSanitizer: DomSanitizer) {}
}

View File

@@ -4,7 +4,6 @@ import { Icon, svgIcon } from "./icon";
import { BitIconComponent } from "./icon.component";
describe("IconComponent", () => {
let component: BitIconComponent;
let fixture: ComponentFixture<BitIconComponent>;
beforeEach(async () => {
@@ -13,14 +12,13 @@ describe("IconComponent", () => {
}).compileComponents();
fixture = TestBed.createComponent(BitIconComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it("should have empty innerHtml when input is not an Icon", () => {
const fakeIcon = { svg: "harmful user input" } as Icon;
component.icon = fakeIcon;
fixture.componentRef.setInput("icon", fakeIcon);
fixture.detectChanges();
const el = fixture.nativeElement as HTMLElement;
@@ -30,7 +28,7 @@ describe("IconComponent", () => {
it("should contain icon when input is a safe Icon", () => {
const icon = svgIcon`<svg><text x="0" y="15">safe icon</text></svg>`;
component.icon = icon;
fixture.componentRef.setInput("icon", icon);
fixture.detectChanges();
const el = fixture.nativeElement as HTMLElement;