diff --git a/libs/components/src/badge-list/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts index 496e01f2e49..a16123b9ba5 100644 --- a/libs/components/src/badge-list/badge-list.component.ts +++ b/libs/components/src/badge-list/badge-list.component.ts @@ -1,20 +1,19 @@ -// FIXME: Update this file to be type safe and remove this and next line -// @ts-strict-ignore - -import { Component, Input, OnChanges, input } 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; @@ -22,22 +21,15 @@ export class BadgeListComponent implements OnChanges { readonly items = input([]); readonly truncate = input(true); - // TODO: Skipped for migration because: - // Accessor inputs cannot be migrated as they are too complex. - @Input() - get maxItems(): number | undefined { - return this._maxItems; - } - - set maxItems(value: number | undefined) { - this._maxItems = value == undefined ? undefined : Math.max(1, value); - } + maxItems = input(undefined, { transform: transformMaxItems }); ngOnChanges() { - if (this.maxItems == undefined || this.items().length <= this.maxItems) { + 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; }