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

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)
   }
 }