Fixing Angular 21 by migrating all values by signals. (#11)

frontend/src/app/components/submit-button/submit-button.component.html

@@ -1,12 +1,12 @@
 <button type="submit"
-        class="cod-button {{color}}"
-        [disabled]="disabled || requestPending"
+        class="cod-button {{color()}}"
+        [disabled]="disabled() || requestPending()"
         (click)="click.emit()"
         matRipple>
-    @if (requestPending) {
-        <mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
-    }
-    <span>
+  @if (requestPending()) {
+    <mat-spinner class="spinner {{color()}}" [diameter]="25"></mat-spinner>
+  }
+  <span>
         <ng-content/>
     </span>
-</button>
+</button>

frontend/src/app/components/submit-button/submit-button.component.scss

@@ -1,43 +1,43 @@
 button {
-    padding: .8em 1.2em;
-    border-radius: 10em;
-    border: none;
-    background-color: #3f51b5;
-    color: white;
-    transition: background-color .2s ease-in-out;
-    position: relative;
+  padding: .8em 1.2em;
+  border-radius: 10em;
+  border: none;
+  background-color: #3f51b5;
+  color: white;
+  transition: background-color .2s ease-in-out;
+  position: relative;
+
+  &:hover {
+    background-color: #5b6ed8;
+    cursor: pointer;
+  }
+
+  &.secondary {
+    color: #3f51b5;
+    background-color: white;
 
     &:hover {
-        background-color: #5b6ed8;
-        cursor: pointer;
+      background-color: #f2f4ff;
+      cursor: pointer;
     }
+  }
 
-    &.secondary {
-        color: #3f51b5;
-        background-color: white;
+  &:disabled {
+    background-color: #6d7ac5;
+    cursor: not-allowed;
+  }
 
-        &:hover {
-            background-color: #f2f4ff;
-            cursor: pointer;
-        }
-    }
-
-    &:disabled {
-        background-color: #6d7ac5;
-        cursor: not-allowed;
-    }
-
-    mat-spinner {
-        position: absolute;
-        top: calc(50% - 12px);
-        left: calc(50% - 12px);
-    }
+  mat-spinner {
+    position: absolute;
+    top: calc(50% - 12px);
+    left: calc(50% - 12px);
+  }
 }
 
 :host ::ng-deep .spinner circle {
-    stroke: white;
+  stroke: white;
 }
 
 :host ::ng-deep .spinner.secondary circle {
-    stroke: #3f51b5;
-}
+  stroke: #3f51b5;
+}

frontend/src/app/components/submit-button/submit-button.component.ts

@@ -1,22 +1,20 @@
-
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { MatRippleModule } from "@angular/material/core";
-import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import {Component, input, output} from "@angular/core";
+import {MatRippleModule} from "@angular/material/core";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 
 @Component({
-    selector: 'app-submit-button',
-    templateUrl: 'submit-button.component.html',
-    styleUrl: 'submit-button.component.scss',
-    imports: [
+  selector: 'app-submit-button',
+  templateUrl: 'submit-button.component.html',
+  styleUrl: 'submit-button.component.scss',
+  imports: [
     MatRippleModule,
     MatProgressSpinnerModule
-]
+  ]
 })
 export class SubmitButtonComponent {
-    @Input() requestPending: boolean = false;
-    @Input() label: string = '';
-    @Input() disabled: boolean = false;
-    @Input() color?: 'secondary';
-    @Output() click = new EventEmitter<void>();
-  }
-  
+  requestPending = input.required<boolean>();
+  label = input<string>();
+  disabled = input<boolean>(false);
+  color = input<'secondary' | undefined>('secondary');
+  click = output<void>();
+}