refactor: enhance site dropdown component structure and improve template syntax

- Updated the HTML structure for better readability and maintainability.
- Replaced the ngFor syntax with a more concise @for syntax.
- Improved the conditional rendering syntax for loading state.
- Removed unused CommonModule import from the component.

lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html

@@ -1,26 +1,30 @@
 <div id="site-dropdown-container" class="adf-site-dropdown-container">
-    <mat-form-field class="adf-sites-dropdown-form-field">
+  <mat-form-field class="adf-sites-dropdown-form-field">
-        <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
+    <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
-        <mat-select
+    <mat-select
-            adf-infinite-select-scroll
+      adf-infinite-select-scroll
-            (scrollEnd)="loadAllOnScroll()"
+      (scrollEnd)="loadAllOnScroll()"
-            #siteSelect
+      #siteSelect
-            data-automation-id="site-my-files-option"
+      data-automation-id="site-my-files-option"
-            class="adf-site-dropdown-list-element"
+      class="adf-site-dropdown-list-element"
-            id="site-dropdown"
+      id="site-dropdown"
-            placeholder="{{placeholder | translate}}"
+      placeholder="{{placeholder | translate}}"
-            [(value)]="selected"
+      [(value)]="selected"
-            placeholder="{{placeholder | translate}}"
+      placeholder="{{placeholder | translate}}"
-            (selectionChange)="selectedSite($event)">
+      (selectionChange)="selectedSite($event)">
-            <mat-select-trigger class="adf-sites-dropdown-select-trigger">
+      <mat-select-trigger class="adf-sites-dropdown-select-trigger">
-                {{ selected?.entry.title | translate}}
+        {{ selected?.entry?.title | translate}}
-            </mat-select-trigger>
+      </mat-select-trigger>
-            <mat-option *ngFor="let site of siteList?.list.entries;" [value]="site">
+      @for (site of siteList?.list?.entries; track site?.entry?.id) {
-                {{ site.entry.title | translate}}
+        <mat-option [value]="site">
-            </mat-option>
+          {{ site.entry.title | translate}}
-            <mat-option *ngIf="showLoading()" disabled="true" data-automation-id="site-loading">
+        </mat-option>
-                {{ 'ADF_DROPDOWN.LOADING' | translate}}
+      }
-            </mat-option>
+      @if (showLoading()) {
-        </mat-select>
+        <mat-option disabled="true" data-automation-id="site-loading">
-    </mat-form-field>
+          {{ 'ADF_DROPDOWN.LOADING' | translate}}
+        </mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
 </div>

lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.ts

@@ -22,11 +22,8 @@ import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { SitesService } from '../../common/services/sites.service';
-import { CommonModule } from '@angular/common';
-import { MatFormFieldModule } from '@angular/material/form-field';
 
-/* eslint-disable no-shadow */
+import { MatFormFieldModule } from '@angular/material/form-field';
-/* eslint-disable @typescript-eslint/naming-convention */
 
 export const Relations = {
     Members: 'members',
@@ -37,7 +34,7 @@ export type Relations = (typeof Relations)[keyof typeof Relations];
 
 @Component({
     selector: 'adf-sites-dropdown',
-    imports: [CommonModule, TranslatePipe, MatFormFieldModule, MatSelectModule, InfiniteSelectScrollDirective],
+    imports: [TranslatePipe, MatFormFieldModule, MatSelectModule, InfiniteSelectScrollDirective],
     templateUrl: './sites-dropdown.component.html',
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-sites-dropdown' }