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

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

@@ -1,10 +1,10 @@
-@if (active) {
+@if (active()) {
   <button class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
-    @if (!isNumbered && selected) {
+    @if (!isNumbered() && selected()) {
       <i-bs class="check" width="1em" height="1em" name="check-lg"></i-bs>
     }
-    @if (isNumbered) {
-      <div class="number">{{number}}<span class="visually-hidden">selected</span></div>
+    @if (isNumbered()) {
+      <div class="number">{{number()}}<span class="visually-hidden">selected</span></div>
     }
     <i-bs class="x" width=".9em" height="1em" name="x-lg"></i-bs>
   </button>

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

@@ -21,20 +21,20 @@ describe('ClearableBadgeComponent', () => {
   })
 
   it('should support selected', () => {
-    component.selected = true
-    expect(component.active).toBeTruthy()
+    fixture.componentRef.setInput('selected', true)
+    expect(component.active()).toBeTruthy()
   })
 
   it('should support numbered', () => {
-    component.number = 3
+    fixture.componentRef.setInput('number', 3)
     fixture.detectChanges()
-    expect(component.active).toBeTruthy()
+    expect(component.active()).toBeTruthy()
     expect((fixture.nativeElement as HTMLDivElement).textContent).toContain('3')
   })
 
   it('should support selected', () => {
     let clearedResult
-    component.selected = true
+    fixture.componentRef.setInput('selected', true)
     fixture.detectChanges()
     component.cleared.subscribe((clear) => {
       clearedResult = clear

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)