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:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user