Feat/signal control flow migrations

src/app/app.component.html

@@ -1,11 +1,11 @@
-<igo-spinner igoSpinnerActivity></igo-spinner>
+<igo-spinner igoSpinnerActivity />
 
 @if (authConfig && authConfig.url) {
-  <igo-auth-form></igo-auth-form>
+  <igo-auth-form />
 }
 
 @if (hasHeader) {
-  <app-header #header></app-header>
+  <app-header #header />
 }
 
 <app-portal
@@ -19,8 +19,8 @@
         : 'portal'
   "
   igoStopDropPropagation
-></app-portal>
+/>
 
 @if (hasFooter) {
-  <app-footer></app-footer>
+  <app-footer />
 }

src/app/pages/portal/expansion-panel/expansion-panel-button/expansion-panel-button.component.html

@@ -1,10 +1,10 @@
 <button
   mat-icon-button
   color="primary"
-  [matTooltip]="(expanded ? 'workspace.close' : 'workspace.open') | translate"
+  [matTooltip]="(expanded() ? 'workspace.close' : 'workspace.open') | translate"
   (click)="onToggleClick()"
 >
-  <mat-icon [style.transform]="expanded ? 'rotate(180deg)' : null">
+  <mat-icon [style.transform]="expanded() ? 'rotate(180deg)' : null">
     open_in_new
   </mat-icon>
 </button>

src/app/pages/portal/expansion-panel/expansion-panel-button/expansion-panel-button.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, model } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -17,11 +17,9 @@ import { IgoLanguageModule } from '@igo2/core/language';
   styleUrls: ['./expansion-panel-button.component.scss']
 })
 export class ExpansionPanelButtonComponent {
-  @Input() expanded: boolean;
-
-  @Output() expand = new EventEmitter<boolean>();
+  readonly expanded = model<boolean>(undefined);
 
   onToggleClick(): void {
-    this.expand.emit(!this.expanded);
+    this.expanded.update((expanded) => !expanded);
   }
 }

src/app/pages/portal/expansion-panel/expansion-panel-header.component.html

@@ -1,9 +1,6 @@
 <div class="app-expansion-panel-trigger-container">
-  <app-expansion-panel-button
-    [expanded]="expanded"
-    (expand)="handleClose()"
-  ></app-expansion-panel-button>
+  <app-expansion-panel-button [(expanded)]="expanded" />
 </div>
 <div class="app-expansion-panel-content">
-  <ng-content></ng-content>
+  <ng-content />
 </div>

src/app/pages/portal/expansion-panel/expansion-panel-header.component.ts

@@ -1,10 +1,8 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   HostBinding,
-  Input,
-  Output
+  model
 } from '@angular/core';
 
 import { ExpansionPanelButtonComponent } from './expansion-panel-button/expansion-panel-button.component';
@@ -17,16 +15,14 @@ import { ExpansionPanelButtonComponent } from './expansion-panel-button/expansio
   imports: [ExpansionPanelButtonComponent]
 })
 export class ExpansionPanelHeaderComponent {
-  @Input() expanded: boolean;
-
-  @Output() expandedChange = new EventEmitter<boolean>();
+  readonly expanded = model<boolean>(undefined);
 
   @HostBinding('class.app-expansion-panel-header-expanded')
   get hasExpandedClass() {
-    return this.expanded;
+    return this.expanded();
   }
 
   handleClose(): void {
-    this.expandedChange.emit(false);
+    this.expanded.set(false);
   }
 }

src/app/pages/portal/expansion-panel/expansion-panel.component.html

@@ -1,17 +1,16 @@
 <div>
   <div class="app-expansion-panel-container">
-    <igo-backdrop [shown]="backdropShown" (click)="onBackdropClick()">
-    </igo-backdrop>
+    <igo-backdrop [shown]="backdropShown()" (click)="onBackdropClick()" />
 
     <app-expansion-panel-header [(expanded)]="expanded">
-      <ng-content select="[expansionPanelHeader]"></ng-content>
+      <ng-content select="[expansionPanelHeader]" />
     </app-expansion-panel-header>
 
     <div
       class="app-expansion-panel-content mat-elevation-z4"
-      [@showContent]="expanded"
+      [@showContent]="expanded()"
     >
-      <ng-content></ng-content>
+      <ng-content />
     </div>
   </div>
 </div>

src/app/pages/portal/expansion-panel/expansion-panel.component.ts

@@ -1,10 +1,9 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
   HostBinding,
-  Input,
-  Output
+  input,
+  model
 } from '@angular/core';
 
 import { BackdropComponent } from '@igo2/common/backdrop';
@@ -21,45 +20,22 @@ import { showContent } from './expansion-panel.animations';
   imports: [BackdropComponent, ExpansionPanelHeaderComponent]
 })
 export class ExpansionPanelComponent {
-  @Input()
-  get expanded(): boolean {
-    return this._expanded;
-  }
-  set expanded(value: boolean) {
-    if (value === this._expanded) {
-      return;
-    }
-
-    this._expanded = value;
-    this.expandedChange.emit(this._expanded);
-  }
-  private _expanded: boolean;
-
-  @Input() maximized = false;
-
-  @Input()
-  get backdropShown(): boolean {
-    return this._backdropShown;
-  }
-  set backdropShown(value: boolean) {
-    this._backdropShown = value;
-  }
-  private _backdropShown: boolean;
-
-  @Output() expandedChange = new EventEmitter<boolean>();
+  readonly expanded = model(false);
+  readonly maximized = input(false);
+  readonly backdropShown = model(false);
 
   @HostBinding('class.app-expansion-panel-expanded')
   get hasExpandedClass() {
-    return this.expanded;
+    return this.expanded();
   }
 
   @HostBinding('class.app-expansion-panel-expanded-maximized')
   get hasExpandedFullClass() {
-    return this.expanded && this.maximized;
+    return this.expanded() && this.maximized();
   }
 
   onBackdropClick() {
-    this.expanded = false;
-    this.backdropShown = false;
+    this.expanded.set(false);
+    this.backdropShown.set(false);
   }
 }