1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 00:33:44 +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,6 +1,6 @@
<div class="tw-inline-flex tw-flex-wrap tw-gap-2">
@for (item of filteredItems; track item; let last = $last) {
<span bitBadge [variant]="variant" [truncate]="truncate">
<span bitBadge [variant]="variant()" [truncate]="truncate()">
{{ item }}
</span>
@if (!last || isFiltered) {
@@ -8,8 +8,8 @@
}
}
@if (isFiltered) {
<span bitBadge [variant]="variant">
{{ "plusNMore" | i18n: (items.length - filteredItems.length).toString() }}
<span bitBadge [variant]="variant()">
{{ "plusNMore" | i18n: (items().length - filteredItems.length).toString() }}
</span>
}
</div>

View File

@@ -1,42 +1,36 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { Component, Input, OnChanges } from "@angular/core";
import { Component, OnChanges, input } from "@angular/core";
import { I18nPipe } from "@bitwarden/ui-common";
import { BadgeModule, BadgeVariant } from "../badge";
function transformMaxItems(value: number | undefined) {
return value == undefined ? undefined : Math.max(1, value);
}
@Component({
selector: "bit-badge-list",
templateUrl: "badge-list.component.html",
imports: [BadgeModule, I18nPipe],
})
export class BadgeListComponent implements OnChanges {
private _maxItems: number;
protected filteredItems: string[] = [];
protected isFiltered = false;
@Input() variant: BadgeVariant = "primary";
@Input() items: string[] = [];
@Input() truncate = true;
readonly variant = input<BadgeVariant>("primary");
readonly items = input<string[]>([]);
readonly truncate = input(true);
@Input()
get maxItems(): number | undefined {
return this._maxItems;
}
set maxItems(value: number | undefined) {
this._maxItems = value == undefined ? undefined : Math.max(1, value);
}
readonly maxItems = input(undefined, { transform: transformMaxItems });
ngOnChanges() {
if (this.maxItems == undefined || this.items.length <= this.maxItems) {
this.filteredItems = this.items;
const maxItems = this.maxItems();
if (maxItems == undefined || this.items().length <= maxItems) {
this.filteredItems = this.items();
} else {
this.filteredItems = this.items.slice(0, this.maxItems - 1);
this.filteredItems = this.items().slice(0, maxItems - 1);
}
this.isFiltered = this.items.length > this.filteredItems.length;
this.isFiltered = this.items().length > this.filteredItems.length;
}
}