Align TypeScript config with Angular CLI default #657

angular.json

@@ -21,7 +21,7 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
               "src/settings.js",
@@ -105,7 +105,7 @@
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
+            "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": ["src/styles.scss"],
             "scripts": [],

src/app/dashboard/components/dashboard-action/dashboard-action.component.html

@@ -10,7 +10,7 @@
   <span class="label">{{ label | translate }}</span>
   <div>
     <ng-content></ng-content>
-    <span class="count" *ngIf="count >= 0; else icon">{{ count }}</span>
+    <span class="count" *ngIf="hasCount(count); else icon">{{ count }}</span>
     <ng-template #icon>
       <svg
         xmlns="http://www.w3.org/2000/svg"

src/app/dashboard/components/dashboard-action/dashboard-action.component.ts

@@ -12,9 +12,14 @@ import { TranslateModule } from "@ngx-translate/core";
 })
 export class DashboardActionComponent {
   @Input() label: string;
-  @Input() count?: number;
+  @Input() count?: number | boolean;
   @Input() link?: string[];
   @Input() linkParams?: Params;
   @Input() externalLink?: string;
+
   constructor() {}
+
+  hasCount(count?: number | boolean): boolean {
+    return typeof count === "number" && count >= 0;
+  }
 }

src/app/dashboard/components/dashboard-actions/dashboard-actions.component.html

@@ -28,7 +28,7 @@
   [link]="['/events']"
 >
   <erz-dashboard-deadline
-    *ngIf="(dashboardService.coursesToRateCount$ | async) > 0"
+    *ngIf="(dashboardService.coursesToRateCount$ | async) ?? 0 > 0"
     [count]="dashboardService.coursesToRateCount$ | async"
   ></erz-dashboard-deadline>
 </erz-dashboard-action>

src/app/edit-absences/components/edit-absences-edit/edit-absences-edit.component.html

@@ -54,7 +54,9 @@ <h1>{{ "edit-absences.title" | translate }}</h1>
             <select
               *ngIf="isExcused(confirmationState)"
               class="form-select mt-1"
-              [class.is-invalid]="(absenceTypeIdErrors$ | async).length > 0"
+              [class.is-invalid]="
+                (absenceTypeIdErrors$ | async)?.length || 0 > 0
+              "
               formControlName="absenceTypeId"
             >
               <option [ngValue]="null">
@@ -83,7 +85,7 @@ <h1>{{ "edit-absences.title" | translate }}</h1>
         <div *ngIf="isIncident(category)" class="ms-5">
           <select
             class="form-select mt-1"
-            [class.is-invalid]="(incidentIdErrors$ | async).length > 0"
+            [class.is-invalid]="(incidentIdErrors$ | async)?.length || 0 > 0"
             formControlName="incidentId"
           >
             <option [ngValue]="null">

src/app/edit-absences/components/edit-absences-edit/edit-absences-edit.component.ts

@@ -270,7 +270,7 @@ export class EditAbsencesEditComponent implements OnInit, OnDestroy {
     this.route.queryParams.pipe(take(1)).subscribe((params) => {
       this.router.navigate(["/edit-absences"], {
         queryParams: {
-          ...parseQueryString(params.returnparams),
+          ...parseQueryString(params["returnparams"]),
           reload, // Make sure the entries get reloaded when returning to the list
         },
       });

src/app/edit-absences/components/edit-absences-list/edit-absences-list.component.html

@@ -58,7 +58,7 @@ <h1>{{ "edit-absences.title" | translate }}</h1>
                 <input
                   type="checkbox"
                   [checked]="data.selection.length === data.entries.length"
-                  (change)="toggleAll($event.currentTarget.checked)"
+                  (change)="toggleAll($any($event.currentTarget)?.checked)"
                 />
               </th>
               <th class="presence-category">

src/app/edit-absences/components/edit-absences-list/edit-absences-list.component.ts

@@ -113,22 +113,22 @@ export class EditAbsencesListComponent
 
 function createFilterFromParams(params: Params): EditAbsencesFilter {
   return {
-    student: params.student ? Number(params.student) : null,
-    educationalEvent: params.educationalEvent
-      ? Number(params.educationalEvent)
+    student: params["student"] ? Number(params["student"]) : null,
+    educationalEvent: params["educationalEvent"]
+      ? Number(params["educationalEvent"])
       : null,
-    studyClass: params.studyClass ? Number(params.studyClass) : null,
-    teacher: params.teacher ?? null,
-    dateFrom: params.dateFrom ? parseISOLocalDate(params.dateFrom) : null,
-    dateTo: params.dateTo ? parseISOLocalDate(params.dateTo) : null,
-    presenceTypes: params.presenceTypes
-      ? params.presenceTypes.split(",").map(Number)
+    studyClass: params["studyClass"] ? Number(params["studyClass"]) : null,
+    teacher: params["teacher"] ?? null,
+    dateFrom: params["dateFrom"] ? parseISOLocalDate(params["dateFrom"]) : null,
+    dateTo: params["dateTo"] ? parseISOLocalDate(params["dateTo"]) : null,
+    presenceTypes: params["presenceTypes"]
+      ? params["presenceTypes"].split(",").map(Number)
       : null,
-    confirmationStates: params.confirmationStates
-      ? params.confirmationStates.split(",").map(Number)
+    confirmationStates: params["confirmationStates"]
+      ? params["confirmationStates"].split(",").map(Number)
       : null,
-    incidentTypes: params.incidentTypes
-      ? params.incidentTypes.split(",").map(Number)
+    incidentTypes: params["incidentTypes"]
+      ? params["incidentTypes"].split(",").map(Number)
       : null,
   };
 }

src/app/evaluate-absences/components/evaluate-absences-list/evaluate-absences-list.component.html

@@ -53,7 +53,7 @@ <h1>{{ "evaluate-absences.title" | translate }}</h1>
                     }}
                   </div>
                   <div class="sort-direction">
-                    {{ state.sortService.getSortingChar$(column) | async }}
+                    {{ state.sortService.getSortingChar$(column.key) | async }}
                   </div>
                 </div>
               </th>

src/app/evaluate-absences/components/evaluate-absences-list/evaluate-absences-list.component.ts

@@ -127,10 +127,10 @@ export class EvaluateAbsencesListComponent implements OnInit, AfterViewInit {
 
 function createFilterFromParams(params: Params): EvaluateAbsencesFilter {
   return {
-    student: params.student ? Number(params.student) : null,
-    educationalEvent: params.educationalEvent
-      ? Number(params.educationalEvent)
+    student: params["student"] ? Number(params["student"]) : null,
+    educationalEvent: params["educationalEvent"]
+      ? Number(params["educationalEvent"])
       : null,
-    studyClass: params.studyClass ? Number(params.studyClass) : null,
+    studyClass: params["studyClass"] ? Number(params["studyClass"]) : null,
   };
 }

src/app/evaluate-absences/services/evaluate-absences-state.service.ts

@@ -70,7 +70,7 @@ export class EvaluateAbsencesStateService
     );
   }
 
-  protected getInitialSorting(): Option<
+  protected override getInitialSorting(): Option<
     Sorting<keyof LessonPresenceStatistic>
   > {
     return {

src/app/events/components/grade/grade.component.html

@@ -34,7 +34,7 @@
       [value]="grade.kind === 'grade' ? grade.result.GradeId : null"
       [disabled]="gradingScaleDisabled$ | async"
       [tabindex]="tabIndex"
-      (valueChange)="onGradeChange($event)"
+      (valueChange)="$event && onGradeChange($event)"
       class="grade-select"
       data-testid="grade-select"
     >

src/app/events/components/grades/grade-select/grade-select.component.html

@@ -3,7 +3,7 @@
   [allowEmpty]="true"
   [value]="valueId"
   [disabled]="disabled"
-  (valueChange)="onGradeChange($event)"
+  (valueChange)="$event && onGradeChange($event)"
   data-testid="grade-select"
 >
 </erz-select>

src/app/events/components/test-edit-grades/test-edit-grades.component.html

@@ -186,7 +186,7 @@
             "
             class="grade"
             [ngClass]="
-              selectedTest !== undefined && grade.test.Id === selectedTest?.Id
+              selectedTest !== undefined && grade.test.Id === selectedTest.Id
                 ? 'selected'
                 : ''
             "

src/app/events/components/tests-edit-form/tests-edit-form.component.html

@@ -15,7 +15,7 @@
           type="text"
           formControlName="designation"
           class="form-control"
-          [class.is-invalid]="(designationErrors$ | async)?.length > 0"
+          [class.is-invalid]="(designationErrors$ | async)?.length || 0 > 0"
           [placeholder]="'tests.form.designation-placeholder' | translate"
           required
         />
@@ -42,7 +42,7 @@
             name="date"
             type="text"
             class="form-control"
-            [class.is-invalid]="(dateErrors$ | async)?.length > 0"
+            [class.is-invalid]="(dateErrors$ | async)?.length || 0 > 0"
             ngbDatepicker
             [placeholder]="'shared.date-select.default-placeholder' | translate"
             #dp="ngbDatepicker"
@@ -76,7 +76,7 @@
               name="factor"
               type="number"
               formControlName="weight"
-              [class.is-invalid]="(weightErrors$ | async)?.length > 0"
+              [class.is-invalid]="(weightErrors$ | async)?.length || 0 > 0"
               class="form-control"
               step="0.05"
               min="0"
@@ -139,7 +139,9 @@
                   id="max-points"
                   formControlName="maxPoints"
                   class="form-control"
-                  [class.is-invalid]="(maxPointsErrors$ | async)?.length > 0"
+                  [class.is-invalid]="
+                    (maxPointsErrors$ | async)?.length || 0 > 0
+                  "
                   step="0.01"
                   min="0"
                   max="999"
@@ -172,7 +174,7 @@
                   formControlName="maxPointsAdjusted"
                   class="form-control"
                   [class.is-invalid]="
-                    (maxPointsAdjustedErrors$ | async)?.length > 0
+                    (maxPointsAdjustedErrors$ | async)?.length || 0 > 0
                   "
                   step="0.01"
                   min="0"

src/app/events/components/tests-edit-form/tests-edit-form.component.ts

@@ -3,6 +3,7 @@ import {
   Component,
   EventEmitter,
   Input,
+  NO_ERRORS_SCHEMA,
   OnDestroy,
   OnInit,
   Output,
@@ -38,10 +39,7 @@ import { TestStateService } from "../../services/test-state.service";
   selector: "erz-tests-edit-form",
   templateUrl: "./tests-edit-form.component.html",
   styleUrls: ["./tests-edit-form.component.scss"],
-  providers: [
-    { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter },
-    { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
-  ],
+  schemas: [NO_ERRORS_SCHEMA], // otherwise html math tags are not allowed using template strict mode
   standalone: true,
   imports: [
     LetDirective,
@@ -54,6 +52,10 @@ import { TestStateService } from "../../services/test-state.service";
     AsyncPipe,
     TranslateModule,
   ],
+  providers: [
+    { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter },
+    { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
+  ],
 })
 export class TestsEditFormComponent implements OnInit, OnDestroy {
   @Input() test: Option<Test> = null;

src/app/events/components/tests-header/tests-header.component.ts

@@ -41,8 +41,8 @@ export class TestsHeaderComponent implements OnChanges {
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.course) {
-      this.course$.next(changes.course.currentValue);
+    if (changes["course"]) {
+      this.course$.next(changes["course"].currentValue);
     }
   }
 

src/app/events/components/tests-list/tests-list.component.html

@@ -17,7 +17,7 @@
           [options]="data.testOptions"
           [value]="data.selectedTestId"
           [allowEmpty]="false"
-          (valueChange)="testSelected($event)"
+          (valueChange)="$event && testSelected($event)"
         ></erz-select>
         <erz-test-edit-grades
           [selectedTest]="data.selectedTest"

src/app/events/components/tests-list/tests-list.component.ts

@@ -73,7 +73,7 @@ export class TestsListComponent {
     return this.state.course$.pipe(
       take(1),
       map((course) =>
-        this.settings.eventlist.evaluation.replace(":id", String(course.Id)),
+        this.settings.eventlist["evaluation"].replace(":id", String(course.Id)),
       ),
     );
   }

src/app/my-absences/components/my-absences-confirm/my-absences-abstract-confirm.component.html

@@ -25,15 +25,15 @@ <h1>{{ titleKey | translate }}</h1>
         <input
           type="radio"
           class="form-check-input"
-          [class.is-invalid]="(absenceTypeIdErrors$ | async).length > 0"
+          [class.is-invalid]="((absenceTypeIdErrors$ | async)?.length ?? 0) > 0"
           [id]="'absence-type-' + i"
           formControlName="absenceTypeId"
           [value]="type.Id"
         />
         <label class="form-check-label" [for]="'absence-type-' + i">
           {{ type.Designation }}
         </label>
-        <ng-container *ngIf="(absenceTypes$ | async)?.length - 1 === i">
+        <ng-container *ngIf="((absenceTypes$ | async)?.length ?? 0) - 1 === i">
           <div
             *ngFor="let error of absenceTypeIdErrors$ | async"
             class="invalid-feedback mt-4"

src/app/my-absences/components/my-absences-confirm/my-absences-confirm.component.ts

@@ -69,7 +69,7 @@ export class MyAbsencesConfirmComponent extends MyAbsencesAbstractConfirmCompone
     );
   }
 
-  protected onSaveSuccess(): void {
+  protected override onSaveSuccess(): void {
     this.selectionService.clear();
     this.myAbsencesService.reset();
     super.onSaveSuccess();

src/app/my-absences/components/my-absences-confirm/my-absences-report-confirm.component.ts

@@ -71,13 +71,13 @@ export class MyAbsencesReportConfirmComponent extends MyAbsencesAbstractConfirmC
     );
   }
 
-  protected getHalfDayType(): Observable<Option<PresenceType>> {
+  protected override getHalfDayType(): Observable<Option<PresenceType>> {
     return this.presenceTypesService
       .getPresenceType(this.settings.halfDayPresenceTypeId)
       .pipe(map((t) => (t.Active ? t : null)));
   }
 
-  protected onSaveSuccess(): void {
+  protected override onSaveSuccess(): void {
     this.selectionService.clear();
     this.state.resetEntries();
     super.onSaveSuccess();

src/app/my-absences/components/my-absences-report-list/my-absences-report-list.component.html

@@ -26,7 +26,7 @@
                 type="checkbox"
                 class="form-check-input"
                 [checked]="allSelected$ | async"
-                (change)="toggleAll($event.target.checked)"
+                (change)="toggleAll($any($event.target)?.checked)"
               />
             </div>
             <div class="all">
@@ -37,7 +37,7 @@
               <a
                 class="edit btn btn-primary btn-icon me-2"
                 [class.disabled]="
-                  (selectionService.selection$ | async).length === 0
+                  (selectionService.selection$ | async)?.length === 0
                 "
                 routerLink="confirm"
               >

src/app/my-absences/components/my-absences-report-list/my-absences-report-list.component.ts

@@ -188,7 +188,7 @@ export class MyAbsencesReportListComponent
 
 function createFilterFromParams(params: Params): ReportAbsencesFilter {
   return {
-    dateFrom: params.dateFrom ? parseISOLocalDate(params.dateFrom) : null,
-    dateTo: params.dateTo ? parseISOLocalDate(params.dateTo) : null,
+    dateFrom: params["dateFrom"] ? parseISOLocalDate(params["dateFrom"]) : null,
+    dateTo: params["dateTo"] ? parseISOLocalDate(params["dateTo"]) : null,
   };
 }

src/app/my-absences/services/my-absences-report-state.service.ts

@@ -108,10 +108,10 @@ export class MyAbsencesReportStateService extends PaginatedEntriesService<
     const { dateFrom, dateTo } = filterValue;
     const params: Params = {};
     if (dateFrom) {
-      params.dateFrom = format(dateFrom, "yyyy-MM-dd");
+      params["dateFrom"] = format(dateFrom, "yyyy-MM-dd");
     }
     if (dateTo) {
-      params.dateTo = format(dateTo, "yyyy-MM-dd");
+      params["dateTo"] = format(dateTo, "yyyy-MM-dd");
     }
     return params;
   }

src/app/my-profile/components/my-profile-edit/my-profile-edit.component.html

@@ -52,15 +52,15 @@ <h1>{{ "my-profile.edit.title" | translate }}</h1>
     </div>
 
     <div class="mb-3">
-      <label class="form-label" id="my-profile-email2">
+      <label class="form-label" for="my-profile-email2">
         {{ "my-profile.edit.fields.email2" | translate }}
       </label>
       <input
         id="my-profile-email2"
         formControlName="email2"
         type="email"
         class="form-control"
-        [class.is-invalid]="(email2Errors$ | async).length > 0"
+        [class.is-invalid]="((email2Errors$ | async)?.length ?? 0) > 0"
         aria-describedby="my-profile-email2-hint"
       />
       <div class="invalid-feedback" *ngFor="let error of email2Errors$ | async">