bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-12 22:44:11 +00:00
Code Issues Releases Wiki Activity

finish migrating icon component

Browse Source
This commit is contained in:
Vicki League
2025-06-25 12:46:06 -04:00
parent 7f97c4aeb6
commit e3d5539b7d
2 changed files with 14 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
libs/components/src/icon/icon.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input, input } from "@angular/core";
import { Component, effect, input } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { Icon, isIcon } from "./icon";
@@ -15,18 +15,18 @@ import { Icon, isIcon } from "./icon";
export class BitIconComponent {
innerHtml: SafeHtml | null = null;
// TODO: Skipped for migration because:
// Accessor inputs cannot be migrated as they are too complex.
@Input() set icon(icon: Icon) {
if (!isIcon(icon)) {
return;
}
const svg = icon.svg;
this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
}
icon = input<Icon>();
readonly ariaLabel = input<string | undefined>(undefined);
constructor(private domSanitizer: DomSanitizer) {}
constructor(private domSanitizer: DomSanitizer) {
effect(() => {
const icon = this.icon();
if (!isIcon(icon)) {
return;
}
const svg = icon.svg;
this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
});
}
}

6
libs/components/src/icon/icon.components.spec.ts
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;