geonetwork-ui 2.8.0-dev.e9cfb9381 → 2.8.0-dev.fc22fb9a8

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.ts

@@ -8,6 +8,7 @@ import {
   QueryList,
   ViewChildren,
   ViewContainerRef,
+  inject,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent, CheckToggleComponent } from '../../../../../../../libs/ui/inputs/src'
@@ -80,6 +81,14 @@ const extraFlagMap: { [key: string]: string } = {
   styleUrl: './multilingual-panel.component.css',
 })
 export class MultilingualPanelComponent implements OnDestroy {
+  facade = inject(EditorFacade)
+  dialog = inject(MatDialog)
+  private translateService = inject(TranslateService)
+  private recordsRepository = inject(RecordsRepositoryInterface)
+  private overlay = inject(Overlay)
+  private viewContainerRef = inject(ViewContainerRef)
+  private cdr = inject(ChangeDetectorRef)
+
   isMultilingual: boolean
   _record: CatalogRecord
   editTranslations: boolean
@@ -105,16 +114,6 @@ export class MultilingualPanelComponent implements OnDestroy {
     .getApplicationLanguages()
     .pipe(map((languages) => this.sortLanguages(languages)))
 
-  constructor(
-    public facade: EditorFacade,
-    public dialog: MatDialog,
-    private translateService: TranslateService,
-    private recordsRepository: RecordsRepositoryInterface,
-    private overlay: Overlay,
-    private viewContainerRef: ViewContainerRef,
-    private cdr: ChangeDetectorRef
-  ) {}
-
   ngOnDestroy() {
     this.subscription.unsubscribe()
   }

package/src/libs/feature/editor/src/lib/components/online-resource-card/online-resource-card.component.html

@@ -8,21 +8,23 @@
     <div class="text-[16px] font-bold text-main" data-test="card-title">
       {{ title }}
     </div>
-    <div
-      class="text-[14px] text-gray-900"
-      *ngIf="subtitle"
-      data-test="card-subtitle"
-    >
-      <span>{{ subtitle }}</span>
-      <span *ngIf="fileSize">
-        •
-        {{
-          'editor.record.form.field.onlineResource.fileSize'
-            | translate: { sizeMB: fileSize }
-        }}</span
-      >
-      <span *ngIf="identifierInService"> • {{ identifierInService }}</span>
-    </div>
+    @if (subtitle) {
+      <div class="text-[14px] text-gray-900" data-test="card-subtitle">
+        <span>{{ subtitle }}</span>
+        @if (fileSize) {
+          <span>
+            •
+            {{
+              'editor.record.form.field.onlineResource.fileSize'
+                | translate: { sizeMB: fileSize }
+            }}</span
+          >
+        }
+        @if (identifierInService) {
+          <span> • {{ identifierInService }}</span>
+        }
+      </div>
+    }
     <button
       class="gn-ui-link text-[14px]"
       translate

package/src/libs/feature/editor/src/lib/components/online-resource-card/online-resource-card.component.ts

@@ -5,7 +5,7 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { CommonModule } from '@angular/common'
+
 import {
   DatasetDownloadDistribution,
   OnlineLinkResource,
@@ -23,7 +23,7 @@ import { iconoirAttachment } from '@ng-icons/iconoir'
 @Component({
   selector: 'gn-ui-online-resource-card',
   standalone: true,
-  imports: [CommonModule, TranslateDirective, TranslatePipe, NgIconComponent],
+  imports: [TranslateDirective, TranslatePipe, NgIconComponent],
   providers: [
     provideIcons({
       iconoirAttachment,

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.html

@@ -2,14 +2,15 @@
   <h3 class="text-[16px] font-bold text-main mb-[12px]" translate>
     editor.record.form.field.onlineResource.edit.protocol
   </h3>
-  <span
-    *ngIf="protocolHint"
-    class="material-symbols-outlined m-2 gn-ui-icon-small"
-    [matTooltip]="protocolHint"
-    matTooltipPosition="above"
-  >
-    help
-  </span>
+  @if (protocolHint) {
+    <span
+      class="material-symbols-outlined m-2 gn-ui-icon-small"
+      [matTooltip]="protocolHint"
+      matTooltipPosition="above"
+    >
+      help
+    </span>
+  }
 </div>
 <div class="flex flex-row items-center gap-4 h-[48px]">
   <mat-radio-group
@@ -19,12 +20,11 @@
     [disabled]="disabled"
     (change)="resetAllFormFields()"
   >
-    <mat-radio-button
-      *ngFor="let protocolOption of protocolOptions"
-      [value]="protocolOption.value"
-    >
-      {{ protocolOption.label | translate }}
-    </mat-radio-button>
+    @for (protocolOption of protocolOptions; track protocolOption) {
+      <mat-radio-button [value]="protocolOption.value">
+        {{ protocolOption.label | translate }}
+      </mat-radio-button>
+    }
   </mat-radio-group>
 </div>
 
@@ -38,54 +38,61 @@
     [showValidateButton]="activeLayerSuggestion"
     [resetUrlOnChange]="resetUrlOnChange"
   >
-    <ng-content *ngIf="activeLayerSuggestion">
-      <ng-icon name="iconoirRefresh"></ng-icon>
-    </ng-content>
+    @if (activeLayerSuggestion) {
+      <ng-content>
+        <ng-icon name="iconoirRefresh"></ng-icon>
+      </ng-content>
+    }
   </gn-ui-url-input>
 
-  <p class="text-sm text-red-500 pl-4" *ngIf="errorMessage" translate>
-    editor.record.form.field.onlineResource.edit.identifier.error
-  </p>
+  @if (errorMessage) {
+    <p class="text-sm text-red-500 pl-4" translate>
+      editor.record.form.field.onlineResource.edit.identifier.error
+    </p>
+  }
 
-  <gn-ui-text-input
-    class="grow border-b border-gray-300 pb-4"
-    [(value)]="_service.identifierInService"
-    [placeholder]="getIdentifierPlaceholder() | translate"
-    data-cy="identifier-in-service"
-    [disabled]="disabled"
-    *ngIf="
+  @if (
+    !activeLayerSuggestion ||
+    (_service.url && errorMessage) ||
+    (modifyMode && (layers$ | async).length === 0)
+  ) {
+    <gn-ui-text-input
+      class="grow border-b border-gray-300 pb-4"
+      [(value)]="_service.identifierInService"
+      [placeholder]="getIdentifierPlaceholder() | translate"
+      data-cy="identifier-in-service"
+      [disabled]="disabled"
+    ></gn-ui-text-input>
+  }
+  @if (activeLayerSuggestion && (layers$ | async)?.length > 0) {
+    <gn-ui-autocomplete
+      class="border-b border-gray-300 pb-4"
+      [placeholder]="
+        'editor.record.form.field.onlineResource.edit.identifier.select.label'
+          | translate
+      "
+      [action]="autoCompleteAction"
+      (itemSelected)="handleSelectValue($event)"
+      [displayWithFn]="displayWithFn"
+      [minCharacterCount]="0"
+      [clearOnSelection]="false"
+    >
+    </gn-ui-autocomplete>
+  }
+  @if (
+    !modifyMode &&
+    ((activeLayerSuggestion && (layers$ | async)) ||
       !activeLayerSuggestion ||
-      (_service.url && errorMessage) ||
-      (modifyMode && (layers$ | async).length === 0)
-    "
-  ></gn-ui-text-input>
-  <gn-ui-autocomplete
-    class="border-b border-gray-300 pb-4"
-    [placeholder]="
-      'editor.record.form.field.onlineResource.edit.identifier.select.label'
-        | translate
-    "
-    [action]="autoCompleteAction"
-    (itemSelected)="handleSelectValue($event)"
-    [displayWithFn]="displayWithFn"
-    [minCharacterCount]="0"
-    [clearOnSelection]="false"
-    *ngIf="activeLayerSuggestion && (layers$ | async)?.length > 0"
-  >
-  </gn-ui-autocomplete>
-  <gn-ui-button
-    (buttonClick)="submit()"
-    [disabled]="disabled || !_service.identifierInService"
-    type="primary"
-    *ngIf="
-      !modifyMode &&
-      ((activeLayerSuggestion && (layers$ | async)) ||
-        !activeLayerSuggestion ||
-        (_service.url && errorMessage))
-    "
-  >
-    <span class="text-white font-bold" translate>
-      editor.record.form.field.onlineResource.edit.identifier.submit</span
+      (_service.url && errorMessage))
+  ) {
+    <gn-ui-button
+      (buttonClick)="submit()"
+      [disabled]="disabled || !_service.identifierInService"
+      type="primary"
     >
-  </gn-ui-button>
+      <span class="text-white font-bold" translate>
+        editor.record.form.field.onlineResource.edit.identifier.submit</span
+      >
+    </gn-ui-button>
+  }
 </div>

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.ts

@@ -6,6 +6,7 @@ import {
   EventEmitter,
   Input,
   Output,
+  inject,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { MatRadioModule } from '@angular/material/radio'
@@ -69,6 +70,8 @@ marker(
   ],
 })
 export class OnlineServiceResourceInputComponent {
+  private cdr = inject(ChangeDetectorRef)
+
   _service: DatasetServiceDistribution
   @Input() set service(service: DatasetServiceDistribution) {
     this._service = { ...service }
@@ -120,8 +123,6 @@ export class OnlineServiceResourceInputComponent {
     },
   ]
 
-  constructor(private cdr: ChangeDetectorRef) {}
-
   get activeLayerSuggestion() {
     return !['wps', 'GPFDL', 'esriRest', 'other'].includes(
       this._service.accessServiceProtocol

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-constraints/form-field-constraints.component.ts

@@ -6,7 +6,7 @@ import {
   OnInit,
   Output,
 } from '@angular/core'
-import { CommonModule } from '@angular/common'
+
 import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
 import { ConstraintCardComponent } from '../../../constraint-card/constraint-card.component'
 import {
@@ -33,7 +33,6 @@ marker('editor.record.form.constraint.header.otherConstraints')
 @Component({
   selector: 'gn-ui-form-field-constraints',
   imports: [
-    CommonModule,
     SortableListComponent,
     ConstraintCardComponent,
     ButtonComponent,

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-constraints-shortcuts/form-field-constraints-shortcuts.component.html

@@ -13,22 +13,23 @@
   </gn-ui-check-toggle>
 </div>
 
-<div
-  *ngIf="(anyToggleActivated$ | async) === false"
-  class="flex flex-row flex-wrap gap-2"
-  data-cy="constraints-shortcut-btns"
->
-  <ng-container *ngFor="let constraint of constraintButtonChoices">
-    <gn-ui-button
-      type="gray"
-      (buttonClick)="addConstraintSectionToDisplay(constraint)"
-      [disabled]="isConstraintButtonDisabled$(constraint) | async"
-    >
-      <ng-icon name="iconoirPlus" class="text-primary"></ng-icon>
-      &nbsp;
-      <span>{{
-        'editor.record.form.constraint.' + constraint | translate
-      }}</span>
-    </gn-ui-button>
-  </ng-container>
-</div>
+@if ((anyToggleActivated$ | async) === false) {
+  <div
+    class="flex flex-row flex-wrap gap-2"
+    data-cy="constraints-shortcut-btns"
+  >
+    @for (constraint of constraintButtonChoices; track constraint) {
+      <gn-ui-button
+        type="gray"
+        (buttonClick)="addConstraintSectionToDisplay(constraint)"
+        [disabled]="isConstraintButtonDisabled$(constraint) | async"
+      >
+        <ng-icon name="iconoirPlus" class="text-primary"></ng-icon>
+        &nbsp;
+        <span>{{
+          'editor.record.form.constraint.' + constraint | translate
+        }}</span>
+      </gn-ui-button>
+    }
+  </div>
+}

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-constraints-shortcuts/form-field-constraints-shortcuts.component.ts

@@ -3,6 +3,7 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  inject,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { EditorFacade } from '../../../../+state/editor.facade'
@@ -69,6 +70,8 @@ export type ConstraintChoice =
 export class FormFieldConstraintsShortcutsComponent
   implements OnInit, OnDestroy
 {
+  private editorFacade = inject(EditorFacade)
+
   legalConstraints$ = this.editorFacade.record$.pipe(
     map((record) => record?.legalConstraints ?? [])
   )
@@ -109,8 +112,6 @@ export class FormFieldConstraintsShortcutsComponent
 
   onDestroy$ = new Subject<void>()
 
-  constructor(private editorFacade: EditorFacade) {}
-
   ngOnInit(): void {
     // hide all constraints if any toggle is activated
     this.anyToggleActivated$

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.html

@@ -9,15 +9,13 @@
   >
   </gn-ui-autocomplete>
 
-  <ng-container *ngIf="contacts.length > 0; else noContact">
-    <ng-container *ngIf="contacts.length === 1">
-      <ng-container *ngFor="let contact of contacts; let index = index">
-        <gn-ui-contact-card
-          [contact]="contact"
-        ></gn-ui-contact-card> </ng-container
-    ></ng-container>
-
-    <ng-container *ngIf="contacts.length > 1">
+  @if (contacts.length > 0) {
+    @if (contacts.length === 1) {
+      @for (contact of contacts; track contact; let index = $index) {
+        <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+      }
+    }
+    @if (contacts.length > 1) {
       <gn-ui-sortable-list
         [items]="contacts"
         (itemsOrderChange)="handleContactsChanged($event)"
@@ -26,15 +24,13 @@
       <ng-template #contactTemplate let-contact>
         <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
       </ng-template>
-    </ng-container>
-  </ng-container>
+    }
+  } @else {
+    <div
+      class="p-4 text-sm border border-primary bg-primary-lightest rounded-lg"
+      translate
+    >
+      editor.record.form.field.contacts.noContact
+    </div>
+  }
 </div>
-
-<ng-template #noContact>
-  <div
-    class="p-4 text-sm border border-primary bg-primary-lightest rounded-lg"
-    translate
-  >
-    editor.record.form.field.contacts.noContact
-  </div>
-</ng-template>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts/form-field-contacts.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -9,6 +8,7 @@ import {
   OnDestroy,
   Output,
   SimpleChanges,
+  inject,
 } from '@angular/core'
 import { AutocompleteComponent } from '../../../../../../../../../libs/ui/inputs/src'
 import {
@@ -39,7 +39,6 @@ import { SortableListComponent } from '../../../../../../../../../libs/ui/layout
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    CommonModule,
     AutocompleteComponent,
     TranslateDirective,
     TranslatePipe,
@@ -48,6 +47,10 @@ import { SortableListComponent } from '../../../../../../../../../libs/ui/layout
   ],
 })
 export class FormFieldContactsComponent implements OnDestroy, OnChanges {
+  private platformServiceInterface = inject(PlatformServiceInterface)
+  private organizationsServiceInterface = inject(OrganizationsServiceInterface)
+  private changeDetectorRef = inject(ChangeDetectorRef)
+
   @Input() value: Individual[]
   @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
 
@@ -59,11 +62,7 @@ export class FormFieldContactsComponent implements OnDestroy, OnChanges {
 
   allOrganizations: Map<string, Organization> = new Map()
 
-  constructor(
-    private platformServiceInterface: PlatformServiceInterface,
-    private organizationsServiceInterface: OrganizationsServiceInterface,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
+  constructor() {
     this.allUsers$ = this.platformServiceInterface.getUsers()
   }
 

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.html

@@ -1,69 +1,64 @@
 <div class="flex flex-col gap-3">
   <div class="flex flex-row flex-wrap gap-2" data-test="rolesToPick">
-    <ng-container *ngFor="let role of rolesToPick">
+    @for (role of rolesToPick; track role) {
       <gn-ui-button type="gray" (buttonClick)="addRoleToDisplay(role)">
         <ng-icon name="iconoirPlus" class="text-primary"></ng-icon>
         &nbsp;
         <span translate>{{ roleToLabel(role) }}</span>
       </gn-ui-button>
-    </ng-container>
+    }
   </div>
-  <div
-    class="mt-8"
-    *ngIf="
-      roleSectionsToDisplay && roleSectionsToDisplay.length > 0;
-      else noContact
-    "
-    data-test="displayedRoles"
-  >
-    <div
-      *ngFor="
-        let role of roleSectionsToDisplay;
-        let index = index;
-        let isLast = last
-      "
-      class="flex flex-col gap-4"
-    >
-      <div class="flex flex-row justify-between">
-        <span class="font-bold text-base" translate>{{
-          roleToLabel(role)
-        }}</span>
-      </div>
-
-      <gn-ui-autocomplete
-        *ngIf="role !== 'unspecified' && role !== 'other'"
-        [placeholder]="
-          'editor.record.form.field.contactsForResource.placeholder' | translate
-        "
-        [action]="autoCompleteAction"
-        (itemSelected)="addContact($event, role)"
-        [displayWithFn]="displayWithFn"
-        [minCharacterCount]="1"
-        [clearOnSelection]="true"
-        [allowSubmit]="false"
-      >
-      </gn-ui-autocomplete>
-
-      <ng-container *ngIf="contactsForRessourceByRole.get(role) as contacts">
-        <gn-ui-sortable-list
-          [items]="contacts"
-          (itemsOrderChange)="handleContactsChanged($event, role)"
-          [elementTemplate]="contactTemplate"
-        ></gn-ui-sortable-list>
-        <ng-template #contactTemplate let-contact>
-          <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
-        </ng-template>
-      </ng-container>
-
-      <hr class="border-t-[#D6D3D1] mt-4 mb-6" *ngIf="!isLast" />
+  @if (roleSectionsToDisplay && roleSectionsToDisplay.length > 0) {
+    <div class="mt-8" data-test="displayedRoles">
+      @for (
+        role of roleSectionsToDisplay;
+        track role;
+        let index = $index;
+        let isLast = $last
+      ) {
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-row justify-between">
+            <span class="font-bold text-base" translate>{{
+              roleToLabel(role)
+            }}</span>
+          </div>
+          @if (role !== 'unspecified' && role !== 'other') {
+            <gn-ui-autocomplete
+              [placeholder]="
+                'editor.record.form.field.contactsForResource.placeholder'
+                  | translate
+              "
+              [action]="autoCompleteAction"
+              (itemSelected)="addContact($event, role)"
+              [displayWithFn]="displayWithFn"
+              [minCharacterCount]="1"
+              [clearOnSelection]="true"
+              [allowSubmit]="false"
+            >
+            </gn-ui-autocomplete>
+          }
+          @if (contactsForRessourceByRole.get(role); as contacts) {
+            <gn-ui-sortable-list
+              [items]="contacts"
+              (itemsOrderChange)="handleContactsChanged($event, role)"
+              [elementTemplate]="contactTemplate"
+            ></gn-ui-sortable-list>
+            <ng-template #contactTemplate let-contact>
+              <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+            </ng-template>
+          }
+          @if (!isLast) {
+            <hr class="border-t-[#D6D3D1] mt-4 mb-6" />
+          }
+        </div>
+      }
     </div>
-  </div>
-  <ng-template #noContact>
+  } @else {
     <div
       class="p-4 border border-primary bg-primary-lightest rounded-lg"
       translate
     >
       editor.record.form.field.contactsForResource.noContact
     </div>
-  </ng-template>
+  }
 </div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -7,6 +6,7 @@ import {
   OnChanges,
   OnInit,
   Output,
+  inject,
 } from '@angular/core'
 import {
   Individual,
@@ -47,7 +47,6 @@ import { iconoirPlus } from '@ng-icons/iconoir'
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    CommonModule,
     AutocompleteComponent,
     ContactCardComponent,
     SortableListComponent,
@@ -66,6 +65,9 @@ import { iconoirPlus } from '@ng-icons/iconoir'
 export class FormFieldContactsForResourceComponent
   implements OnChanges, OnInit
 {
+  private platformServiceInterface = inject(PlatformServiceInterface)
+  private organizationsServiceInterface = inject(OrganizationsServiceInterface)
+
   @Input() value: Individual[]
   @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
 
@@ -80,11 +82,6 @@ export class FormFieldContactsForResourceComponent
 
   allOrganizations: Map<string, Organization> = new Map()
 
-  constructor(
-    private platformServiceInterface: PlatformServiceInterface,
-    private organizationsServiceInterface: OrganizationsServiceInterface
-  ) {}
-
   ngOnChanges() {
     this.updateContactsForRessource()
     this.manageRoleSectionsToDisplay(this.value)

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-keywords/form-field-keywords.component.ts

@@ -1,10 +1,10 @@
-import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Input,
   Output,
+  inject,
 } from '@angular/core'
 import { Keyword } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { GenericKeywordsComponent } from '../../../generic-keywords/generic-keywords.component'
@@ -20,9 +20,11 @@ import { SPATIAL_SCOPES } from '../../../../fields.config'
   styleUrls: ['./form-field-keywords.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, GenericKeywordsComponent, TranslatePipe],
+  imports: [GenericKeywordsComponent, TranslatePipe],
 })
 export class FormFieldKeywordsComponent {
+  private editorFacade = inject(EditorFacade)
+
   @Input() value: Keyword[]
   @Output() valueChange: EventEmitter<Keyword[]> = new EventEmitter()
 
@@ -40,8 +42,6 @@ export class FormFieldKeywordsComponent {
     )
   }
 
-  constructor(private editorFacade: EditorFacade) {}
-
   async handleKeywordsChange(keywords: Keyword[]) {
     const filteredKeywords = await firstValueFrom(
       this.editorFacade.record$.pipe(