NG0956 Tracking expression caused re-creation of the DOM structure.

projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html

@@ -2,7 +2,7 @@
   @if (itemLayers.length > 0) {
     <div class="layerlist">
       <div class="list-group">
-        @for (itemLayer of itemLayers; track itemLayer) {
+        @for (itemLayer of itemLayers; track itemLayer.code) {
           <div class="list-group-item list-group-item-action p-2 text-truncate" [ngClass]="{'active' : selectedLayer==itemLayer}">
             <div (click)="handleSelectLayer($event,itemLayer)"  [title]="itemLayer.item.name">{{itemLayer.item.name}}</div>
             @if (selectedLayer==itemLayer && !baseLayers) {

projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html

@@ -7,7 +7,7 @@
           <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
           @if (layers.length>0 ) {
             <ul class="value-list p-0 mb-0">
-              @for (layerValue of layers; track layerValue) {
+              @for (layerValue of layers; track layerValue.layerName) {
                 <li class="border-top pt-1 pb-1 value">
                   <div>{{layerValue.layerName}}</div>
                   <div>{{layerValue.date|date}}</div>

projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html

@@ -7,7 +7,7 @@
       @if (features; as features) {
         <div>
           <div class="cropfields">
-            @for (feature of features; track feature) {
+            @for (feature of features; track feature.id_) {
               <div class="row m-0 ps-3 pe-3" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
                 <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
               </div>

projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html

@@ -5,7 +5,7 @@
     @if (features; as features) {
       <div>
         <div class="farms">
-          @for (feature of features; track feature) {
+          @for (feature of features; track feature.id_) {
             <div class="row m-0 ps-3 pe-3"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
               <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
             </div>

projects/common-map/src/fm-map/components/feature-list-observation/feature-list-observation.component.html

@@ -7,7 +7,7 @@
       @if (features; as features) {
         <div>
           <div class="cropfields">
-            @for (feature of features; track feature) {
+            @for (feature of features; track feature.id_) {
               <div class="row m-0 ps-3 pe-3" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
                 <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
               </div>

projects/common-map/src/fm-map/components/feature-list/feature-list.component.html

@@ -1,7 +1,7 @@
 @if (features; as features) {
   <div>
     <fm-back-button></fm-back-button>
-    @for (feature of features; track feature) {
+    @for (feature of features; track feature.id_) {
       <div class="row m-0 ps-3 pe-3" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
         <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
       </div>

projects/common-map/src/fm-map/components/item-list/item-list.component.html

@@ -1,6 +1,6 @@
 @if (items; as items) {
   <div class="widget-container pt-0">
-    @for (item of items; track item) {
+    @for (item of items; track item.code) {
       <div class="widget" (click)="handleItemClick(item)">
         <div class="content">
           <fm-map-item-list-item-container [item]="item" class="item-container"></fm-map-item-list-item-container>

projects/common-map/src/fm-map/components/item-widget-list/item-widget-list.component.html

@@ -1,6 +1,6 @@
 @if (widgets; as widgets) {
   <div class="widget-container pt-0">
-    @for (widget of widgets; track widget) {
+    @for (widget of widgets; track widget.item.code) {
       <div class="widget">
         <div class="content">
           <ng-template #widgetTemplate></ng-template>

projects/common/src/fm/components/gradient-select/gradient-select.component.html

@@ -11,7 +11,7 @@
     <div class="gradient-list" [ngClass]="{'visible':listVisible}">
       @if (gradientItems) {
         <ul>
-          @for (item of gradientItems; track item) {
+          @for (item of gradientItems; track item.code) {
             <li (click)="handleSelect(item)" [ngClass]="{'bg-primary':isSelected(item),'text-white':isSelected(item)} ">
               <div>{{item?.name}}</div>
               <div><fm-gradient [gradientItem]="item"></fm-gradient></div>

projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html

@@ -13,7 +13,7 @@
       <div [ngClass]="{'minimized': uploadService.isMinimized }">
         <div class="card-block p-3">
           <ul class="list-unstyled">
-            @for (file of uploadService.files; track file) {
+            @for (file of uploadService.files; track file.identifier) {
               <li class="upload-file busy" [ngClass]="{'done': file.success,'busy':file.success == false,'error': file.error }">
                 @if (file.success == false) {
                   <div><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fal fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fal fa-check"></span></div>