bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-20 02:03:39 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
libs/components/src/progress/progress.component.html
View File

@@ -4,8 +4,8 @@
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
attr.aria-valuenow="{{ barWidth }}"
[ngStyle]="{ width: barWidth + '%' }"
attr.aria-valuenow="{{ barWidth() }}"
[ngStyle]="{ width: barWidth() + '%' }"
>
@if (displayText) {
<div class="tw-flex tw-h-full tw-flex-wrap tw-items-center tw-overflow-hidden">

22
libs/components/src/progress/progress.component.ts
View File

@@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
import { Component, input } from "@angular/core";
type ProgressSizeType = "small" | "default" | "large";
type BackgroundType = "danger" | "primary" | "success" | "warning";
@@ -26,19 +26,19 @@ const BackgroundClasses: Record<BackgroundType, string[]> = {
imports: [CommonModule],
})
export class ProgressComponent {
@Input() barWidth = 0;
@Input() bgColor: BackgroundType = "primary";
@Input() showText = true;
@Input() size: ProgressSizeType = "default";
@Input() text?: string;
readonly barWidth = input(0);
readonly bgColor = input<BackgroundType>("primary");
readonly showText = input(true);
readonly size = input<ProgressSizeType>("default");
readonly text = input<string>();
get displayText() {
return this.showText && this.size !== "small";
return this.showText() && this.size() !== "small";
}
get outerBarStyles() {
return ["tw-overflow-hidden", "tw-rounded", "tw-bg-secondary-100"].concat(
SizeClasses[this.size],
SizeClasses[this.size()],
);
}
@@ -53,11 +53,11 @@ export class ProgressComponent {
"tw-text-contrast",
"tw-transition-all",
]
.concat(SizeClasses[this.size])
.concat(BackgroundClasses[this.bgColor]);
.concat(SizeClasses[this.size()])
.concat(BackgroundClasses[this.bgColor()]);
}
get textContent() {
return this.text || this.barWidth + "%";
return this.text() || this.barWidth() + "%";
}
}