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

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html

@@ -1,19 +1,20 @@
-@if (!cardless) {
-  <div class="card shadow-sm bg-light fade" [class.show]="show" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
+@if (!cardless()) {
+  <div class="card shadow-sm bg-light fade" [class.show]="show()" cdkDrag [cdkDragDisabled]="!draggable()" cdkDragPreviewContainer="parent">
     <div class="card-header">
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center">
-          @if (draggable) {
+          @if (draggable()) {
             <div class="ms-n2 me-1" cdkDragHandle>
               <i-bs name="grip-vertical"></i-bs>
             </div>
           }
-          <h6 class="card-title mb-0">{{title}}</h6>
-          @if (badge) {
-            <span class="badge bg-info text-dark ms-2">{{badge}}</span>
+          <h6 class="card-title mb-0">{{title()}}</h6>
+          <ng-content select="[title-badge]"></ng-content>
+          @if (badge() !== null && badge() !== undefined) {
+            <span class="badge bg-info text-dark ms-2">{{badge()}}</span>
           }
         </div>
-        @if (loading) {
+        @if (loading()) {
           <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
           <div class="visually-hidden" i18n>Loading...</div>
         }
@@ -25,7 +26,7 @@
     </div>
   </div>
 } @else {
-  <div class="fade" [class.show]="show">
+  <div class="fade" [class.show]="show()">
     <ng-container [ngTemplateOutlet]="content"></ng-container>
   </div>
 }

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss

@@ -1,3 +1,23 @@
 i-bs {
     cursor: move;
 }
+
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts

@@ -45,21 +45,19 @@ describe('WidgetFrameComponent', () => {
   })
 
   it('should show title', () => {
-    component.title = 'Foo'
+    fixture.componentRef.setInput('title', 'Foo')
     fixture.detectChanges()
     expect(fixture.debugElement.nativeElement.textContent).toContain('Foo')
   })
 
   it('should show loading indicator', () => {
     expect(fixture.debugElement.query(By.css('.spinner-border'))).toBeNull()
-    component.loading = true
+    fixture.componentRef.setInput('loading', true)
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('.spinner-border'))).not.toBeNull()
   })
 
   it('should show', () => {
-    expect(component.show).toBeFalsy()
-    jest.advanceTimersByTime(100)
-    expect(component.show).toBeTruthy()
+    expect(component.show()).toBeTruthy()
   })
 })

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -1,8 +1,7 @@
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { NgTemplateOutlet } from '@angular/common'
-import { AfterViewInit, Component, Input } from '@angular/core'
+import { AfterViewInit, Component, input, signal } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 
 @Component({
   selector: 'pngx-widget-frame',
@@ -10,32 +9,20 @@ import { LoadingComponentWithPermissions } from 'src/app/components/loading-comp
   styleUrls: ['./widget-frame.component.scss'],
   imports: [DragDropModule, NgxBootstrapIconsModule, NgTemplateOutlet],
 })
-export class WidgetFrameComponent
-  extends LoadingComponentWithPermissions
-  implements AfterViewInit
-{
-  constructor() {
-    super()
-  }
+export class WidgetFrameComponent implements AfterViewInit {
+  readonly show = signal(false)
 
-  @Input()
-  title: string
+  loading = input(false)
 
-  @Input()
-  loading: boolean = false
+  title = input<string>()
 
-  @Input()
-  draggable: any
+  draggable = input<any>()
 
-  @Input()
-  cardless: boolean = false
+  cardless = input(false)
 
-  @Input()
-  badge: string
+  badge = input<string | number>(null)
 
   ngAfterViewInit(): void {
-    setTimeout(() => {
-      this.show = true
-    }, 100)
+    this.show.set(true)
   }
 }