Use unique tracking variable

package.json

@@ -25,51 +25,51 @@
     "tx": "node scripts/tx.js"
   },
   "dependencies": {
-    "@angular/animations": "^18.0.1",
-    "@angular/cdk": "^18.0.1",
-    "@angular/common": "^18.0.1",
-    "@angular/compiler": "^18.0.1",
-    "@angular/core": "^18.0.1",
-    "@angular/forms": "^18.0.1",
-    "@angular/material": "^18.0.1",
-    "@angular/platform-browser": "^18.0.1",
-    "@angular/platform-browser-dynamic": "^18.0.1",
-    "@angular/router": "^18.0.1",
+    "@angular/animations": "^18.0.2",
+    "@angular/cdk": "^18.0.2",
+    "@angular/common": "^18.0.2",
+    "@angular/compiler": "^18.0.2",
+    "@angular/core": "^18.0.2",
+    "@angular/forms": "^18.0.2",
+    "@angular/material": "^18.0.2",
+    "@angular/platform-browser": "^18.0.2",
+    "@angular/platform-browser-dynamic": "^18.0.2",
+    "@angular/router": "^18.0.2",
     "@fontsource/roboto": "^5.0.13",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
     "core-js": "^3.37.1",
     "material-icons": "^1.13.12",
     "rxjs": "^7.8.1",
-    "zone.js": "^0.14.6"
+    "zone.js": "^0.14.7"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.2",
-    "@angular-devkit/core": "^18.0.2",
-    "@angular-devkit/schematics": "^18.0.2",
+    "@angular-devkit/build-angular": "^18.0.3",
+    "@angular-devkit/core": "^18.0.3",
+    "@angular-devkit/schematics": "^18.0.3",
     "@angular-eslint/builder": "^18.0.1",
     "@angular-eslint/eslint-plugin": "^18.0.1",
     "@angular-eslint/eslint-plugin-template": "^18.0.1",
     "@angular-eslint/schematics": "^18.0.1",
     "@angular-eslint/template-parser": "^18.0.1",
-    "@angular/cli": "~18.0.2",
-    "@angular/compiler-cli": "^18.0.1",
-    "@angular/language-service": "^18.0.1",
+    "@angular/cli": "~18.0.3",
+    "@angular/compiler-cli": "^18.0.2",
+    "@angular/language-service": "^18.0.2",
     "@chiragrupani/karma-chromium-edge-launcher": "^2.4.1",
-    "@transifex/api": "^7.1.0",
+    "@transifex/api": "^7.1.1",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",
     "@types/jest": "^29.5.12",
-    "@types/node": "~20.14.1",
+    "@types/node": "~20.14.2",
     "@typescript-eslint/eslint-plugin": "7.12.0",
     "@typescript-eslint/parser": "7.12.0",
     "@typescript-eslint/utils": "7.12.0",
     "axios": "^1.7.2",
-    "browserslist": "^4.23.0",
+    "browserslist": "^4.23.1",
     "browserslist-useragent-regexp": "^4.1.3",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "~2.29.1",
-    "eslint-plugin-jsdoc": "~48.2.7",
+    "eslint-plugin-jsdoc": "~48.2.9",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "jasmine-core": "~5.1.2",
     "jasmine-spec-reporter": "~7.0.0",

src/app/components/chord-view/chord-view.component.html

@@ -4,7 +4,7 @@
   [style.--openlp-stage-font-scale]="fontScale">
   <div class="overlay-content">
     <div class="tags">
-      @for (tag of tags; track tag) {
+      @for (tag of tags; track $index) {
         <span [class.active]="tag.active">{{ tag.text }}</span>
       }
     </div>
@@ -22,7 +22,7 @@
         </app-stage-view-item>
       }
       <div class="nextSlides">
-        @for (slide of nextSlides; track trackByIndex) {
+        @for (slide of nextSlides; track $index) {
           <ng-container>
             @if (slide?.chords) {
               <app-chord-view-item

src/app/components/search/search-options/search-options.component.html

@@ -4,7 +4,7 @@
     (selectionChange)="setSearchOption($event)"
     name="selectedSearchOption"
     [placeholder]="searchOptionsTitle">
-    @for (option of searchOptions; track option) {
+    @for (option of searchOptions; track $index) {
       <mat-option
         name="searchOptions"
         [value]="option">

src/app/components/search/search.component.html

@@ -42,7 +42,7 @@
     <h3>{{ 'SEARCH_RESULTS' | translate | titlecase }}:</h3>
     @if (searchResults.length) {
       <table>
-        @for (item of searchResults; track item) {
+        @for (item of searchResults; track $index) {
           <tr>
             <td>{{ item[1] }}</td>
             <td>

src/app/components/service/service-list/service-list.component.html

@@ -1,6 +1,6 @@
 @if (items?.length) {
   <ng-container>
-    @for (item of items; track item) {
+    @for (item of items; track item.id) {
       <openlp-service-item
         [item]="item"
         [selected]="item.selected"

src/app/components/stage-view/stage-view.component.html

@@ -4,7 +4,7 @@
   [style.--openlp-stage-font-scale]="fontScale">
   <div class="overlay-content">
     <div class="tags">
-      @for (tag of tags; track tag) {
+      @for (tag of tags; track $index) {
         <span [class.active]="tag.active">{{ tag.text }}</span>
       }
     </div>
@@ -14,7 +14,7 @@
         [active]="true">
       </app-stage-view-item>
       <div class="nextSlides">
-        @for (slide of nextSlides; track trackByIndex) {
+        @for (slide of nextSlides; track $index) {
           <app-stage-view-item [slide]="slide">
           </app-stage-view-item>
         }

src/app/components/themes/themes.component.html

@@ -12,7 +12,7 @@
   </div>
   @if (isThemeLevelSupported()) {
     <div class="theme-container content">
-      @for (theme of themeList; track theme) {
+      @for (theme of themeList; track theme.name) {
         <div>
           <mat-card
             class="theme-card"