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>