Chorehancement: update to Angular v22, 'zoneless' / 'reactive' (#13114)

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, computed, EventEmitter, input, Output } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 
 @Component({
@@ -8,24 +8,15 @@ import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
   imports: [NgxBootstrapIconsModule],
 })
 export class ClearableBadgeComponent {
-  constructor() {}
-
-  @Input()
-  number: number
-
-  @Input()
-  selected: boolean
+  readonly number = input<number>(undefined)
+  readonly selected = input<boolean>(undefined)
 
   @Output()
   cleared: EventEmitter<boolean> = new EventEmitter()
 
-  get active(): boolean {
-    return this.selected || this.number > -1
-  }
+  readonly active = computed(() => this.selected() || this.number() > -1)
 
-  get isNumbered(): boolean {
-    return this.number > -1
-  }
+  readonly isNumbered = computed(() => this.number() > -1)
 
   onClick(event: PointerEvent) {
     this.cleared.emit(true)