Angular v20

.forgejo/workflows/master.yaml

@@ -0,0 +1,4 @@
+on: [push]
+jobs:
+  steps:
+    - run: ls

angular.json

@@ -115,5 +115,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

package.json

@@ -11,24 +11,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.14",
+    "@angular/animations": "^20.1.7",
-    "@angular/common": "^19.2.14",
+    "@angular/common": "^20.1.7",
-    "@angular/compiler": "^19.2.14",
+    "@angular/compiler": "^20.1.7",
-    "@angular/core": "^19.2.14",
+    "@angular/core": "^20.1.7",
-    "@angular/forms": "^19.2.14",
+    "@angular/forms": "^20.1.7",
-    "@angular/platform-browser": "^19.2.14",
+    "@angular/platform-browser": "^20.1.7",
-    "@angular/platform-browser-dynamic": "^19.2.14",
+    "@angular/platform-browser-dynamic": "^20.1.7",
-    "@angular/router": "^19.2.14",
+    "@angular/router": "^20.1.7",
     "lodash": "^4.17.21",
     "rxjs": "~6.6.7",
     "tslib": "^1.14.1",
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.15",
+    "@angular-devkit/build-angular": "^20.1.6",
-    "@angular/cli": "^19.2.15",
+    "@angular/cli": "^20.1.6",
-    "@angular/compiler-cli": "^19.2.14",
+    "@angular/compiler-cli": "^20.1.7",
-    "@angular/language-service": "^19.2.14",
+    "@angular/language-service": "^20.1.7",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "^2.0.8",
     "@types/jest": "^27.0.2",

src/modules/pool/components/card/card.component.html

@@ -1,4 +1,4 @@
-<div title="{{champion.name}}" class="imageWrap" [style.background-image]="getImage(champion.img)" (click)="selectChampion(champion)" 
+<div title="{{champion.name}}" class="imageWrap" [style.background-image]="getImage(champion.img)" (click)="selectChampion(champion)"
 [ngClass]="{
     'selected': champion.isSelected,
     'sinergy': champion.sinergy && !champion.isSelected,
@@ -13,4 +13,4 @@
         <img title="{{role }}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" alt="{{role}}">
     </div>
     <div class="clear"></div>
-</div>
+</div>

src/modules/pool/components/card/card.component.ts

@@ -1,42 +1,37 @@
-import { Component, EventEmitter, Input, Output} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from "@angular/core";
-
+
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer } from "@angular/platform-browser";
-
+
-import { Champion } from '@models/champion';
+import { Champion } from "@models/champion";
-
+
-
 @Component({
-    selector: 'app-card',
+  selector: "app-card",
-    templateUrl: './card.component.html',
+  templateUrl: "./card.component.html",
-    styleUrls: ['./card.component.scss'],
+  styleUrls: ["./card.component.scss"],
-    standalone: false
+  standalone: false,
-})
+})
-
+export class CardComponent {
-export class CardComponent{
+  @Input() champion: Champion;
-
+  @Input() noChampSelected: boolean;
-  @Input() champion: Champion;
+  @Output() championClicked = new EventEmitter<Champion>();
-  @Input() noChampSelected: boolean;
+
-  @Output() championClicked = new EventEmitter<Champion>();
+  constructor(private sanitizer: DomSanitizer) {}
-
+
-  constructor(
+  /**
-    private sanitizer: DomSanitizer,
+   * Get champion image
-  ) {}
+   * @param name Champion name
-
+   */
-  /**
+  getImage(name) {
-   * Get champion image
+    return this.sanitizer.bypassSecurityTrustStyle(
-   * @param name Champion name
+      `url(${"../../assets/images/champions/" + name + ".png"})`,
-   */
+    );
-  getImage(name) {
+  }
-    return this.sanitizer.bypassSecurityTrustStyle(`url(${'../../assets/images/champions/' + name + '.png'})`);
+
-  }
+  /**
-
+   * Send output to parent with champion clicked
-  /**
+   * @param champion Champion
-   * Send output to parent with champion clicked
+   */
-   * @param champion Champion
+  selectChampion(champion) {
-   */
+    this.championClicked.emit(champion);
-  selectChampion(champion) {
+  }
-    this.championClicked.emit(champion);
+}
-  }
-
-
-}

src/modules/pool/components/pool/pool.component.html

@@ -1,32 +1,37 @@
 <div id="champions">
-    <div id="rolesFilterWrap">
+  <div id="rolesFilterWrap">
-        <div class="roleFilter" *ngFor="let role of roles">
+    @for (role of roles; track role) {
-            <img title="{{role}}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" (click)="selectRole(role)" alt="{{role}}" [ngClass]="{'selectedFilter': checkRoleFilter(role)}">
+      <div class="roleFilter">
-        </div>
+        <img title="{{role}}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" (click)="selectRole(role)" alt="{{role}}" [ngClass]="{'selectedFilter': checkRoleFilter(role)}">
-    </div>
+      </div>
-    <div class="champion" *ngFor="let champion of champions">
+    }
-        <app-card [champion]='champion' [noChampSelected]='noChampSelected' (championClicked)='selectChampion(champion)'></app-card>
+  </div>
-        <div class="clear"></div>
+  @for (champion of champions; track champion) {
+    <div class="champion">
+      <app-card [champion]='champion' [noChampSelected]='noChampSelected' (championClicked)='selectChampion(champion)'></app-card>
+      <div class="clear"></div>
     </div>
+  }
 </div>
 <div class="clear"></div>
 <div id="filters">
-    <form [formGroup]="formFilters">
+  <form [formGroup]="formFilters">
-        <label>
+    <label>
-            Team Size: 
+      Team Size:
-            <input formControlName="teamSize" type="text" disabled/>
+      <input formControlName="teamSize" type="text" disabled/>
-        </label>
+    </label>
-        <button (click)="resetComposition()">Reset</button>
+    <button (click)="resetComposition()">Reset</button>
-        <span id="oneSinergy">1 sinergy</span>
+    <span id="oneSinergy">1 sinergy</span>
-        <span id="twoSinergies">2 sinergies</span>
+    <span id="twoSinergies">2 sinergies</span>
-    </form>
+  </form>
 </div>
 <div class="clear"></div>
 <div id="selectedRoles">
-    <div id="selectedRolesWrap">
+  <div id="selectedRolesWrap">
-        <div class="roleSelectedRoles" *ngFor="let role of rolesPool">
+    @for (role of rolesPool; track role) {
-            <span>{{rolesCount[role]}}</span>
+      <div class="roleSelectedRoles">
-            <img title="{{role}}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" alt="{{role}}" 
+        <span>{{rolesCount[role]}}</span>
+        <img title="{{role}}" src="../../assets/images/traits/{{role.toLowerCase()}}.png" alt="{{role}}"
             [ngClass]="{
                 'bonus1': bonusesPool[role] && bonusesPool[role].units === 1 && bonusesPool[role].maxUnits !== 1,
                 'bonus1e':bonusesPool[role] && bonusesPool[role].units === 1 && bonusesPool[role].maxUnits === 1,
@@ -42,15 +47,20 @@
                 'bonus8': bonusesPool[role] && bonusesPool[role].units === 8,
                 'bonus9': bonusesPool[role] && bonusesPool[role].units === 9
             }">
-        </div>
+      </div>
-        <div class="clear"></div>
+    }
-    </div>
     <div class="clear"></div>
+  </div>
+  <div class="clear"></div>
 </div>
 <div class="clear"></div>
 <div id="bonuses">
-    <p *ngFor="let role of rolesPool">
+  @for (role of rolesPool; track role) {
-        <span *ngIf="bonusesPool[role]"> <b>{{bonusesPool[role].role | titlecase}}-{{bonusesPool[role].units}}&nbsp;:</b>&nbsp;{{bonusesPool[role].description}} </span>
+    <p>
+      @if (bonusesPool[role]) {
+        <span> <b>{{bonusesPool[role].role | titlecase}}-{{bonusesPool[role].units}}&nbsp;:</b>&nbsp;{{bonusesPool[role].description}} </span>
+      }
     </p>
+  }
 </div>
 <div class="clear"></div>

tsconfig.json

@@ -8,7 +8,7 @@
     "declaration": false,
     "experimentalDecorators": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "typeRoots": [