geonetwork-ui 2.8.0-dev.5186798f7 → 2.8.0-dev.545b19356

package/src/libs/ui/elements/src/lib/stac-items-result-grid/stac-items-result-grid.component.ts

@@ -1,11 +1,10 @@
-import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { StacItem } from '@camptocamp/ogc-client'
 
 @Component({
   selector: 'gn-ui-stac-items-result-grid',
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
   templateUrl: './stac-items-result-grid.component.html',
   styleUrl: './stac-items-result-grid.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts

@@ -3,16 +3,15 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
-  Inject,
   InjectionToken,
   Input,
   OnChanges,
   OnInit,
-  Optional,
   SimpleChanges,
   ViewChild,
   Output,
   EventEmitter,
+  inject,
 } from '@angular/core'
 
 export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
@@ -36,6 +35,10 @@ const DEFAULT_PLACEHOLDER =
   imports: [CommonModule],
 })
 export class ThumbnailComponent implements OnInit, OnChanges {
+  private optionalPlaceholderUrl = inject(THUMBNAIL_PLACEHOLDER, {
+    optional: true,
+  })
+
   @Input() thumbnailUrl: string | string[]
   @Input() fit: FitOptions | FitOptions[] = 'cover'
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
@@ -49,12 +52,6 @@ export class ThumbnailComponent implements OnInit, OnChanges {
   }
   private images: ThumbnailImageObject[] = []
 
-  constructor(
-    @Optional()
-    @Inject(THUMBNAIL_PLACEHOLDER)
-    private optionalPlaceholderUrl: string
-  ) {}
-
   ngOnInit() {
     this.updateImageList()
   }

package/src/libs/ui/elements/src/lib/user-feedback-item/user-feedback-item.component.html

@@ -1,71 +1,80 @@
-<div
-  *ngIf="userFeedbackParent.published"
-  class="flex flex-col bg-white rounded w-full"
-  [ngClass]="[isAnAnswer ? 'ps-4 ' : 'p-4']"
->
-  <div class="flex flex-row">
-    <div class="avatar">
-      <img
-        class="rounded-full"
-        [src]="userFeedbackParent.avatarUrl"
-        alt="avatar"
-      />
-    </div>
-    <div class="p-4 flex flex-col">
-      <span>{{ userFeedbackParent.authorName }}</span>
-      <span [gnUiHumanizeDate]="userFeedbackParent.date"></span>
-    </div>
-  </div>
-  <div data-cy="commentText" class="mt-4 whitespace-pre-line">
-    {{ userFeedbackParent.comment }}
-  </div>
+@if (userFeedbackParent.published) {
   <div
-    class="w-full"
-    *ngFor="let userFeedBacksAnswer of userFeedBacksAnswers; let last = last"
+    class="flex flex-col bg-white rounded w-full"
+    [ngClass]="[isAnAnswer ? 'ps-4 ' : 'p-4']"
   >
-    <hr class="-mx-4 my-6" />
-    <gn-ui-user-feedback-item
-      [userFeedbackParent]="userFeedBacksAnswer"
-      [isLastComment]="last"
-    ></gn-ui-user-feedback-item>
-  </div>
-
-  <div *ngIf="activeUser" class="mt-2 flex flex-col">
-    <hr class="-mx-4 my-4" />
-    <div
-      id="new-comment-buttons"
-      class="flex flex-row gap-2 items-center justify-end"
-    >
-      <gn-ui-text-area
-        [disabled]="isAddUserFeedbackLoading"
-        [(value)]="newAnswer"
-        (valueChange)="onNewAnswerValueChange()"
-        (keyup.control.enter)="publishNewAnswer()"
-        [placeholder]="
-          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate
-        "
-        class="grow"
-        extraClass="bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9"
-      ></gn-ui-text-area>
-      <div *ngIf="!isAnswerEmpty" class="flex flex-row justify-end">
-        <gn-ui-button
-          [disabled]="isAddUserFeedbackLoading"
-          [type]="'outline'"
-          (buttonClick)="publishNewAnswer()"
-          [title]="
-            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate
-          "
-          extraClass="!p-[0.5em] text-primary-darker border-primary-darker h-9"
+    <div class="flex flex-row">
+      <div class="avatar">
+        <img
+          class="rounded-full"
+          [src]="userFeedbackParent.avatarUrl"
+          alt="avatar"
+        />
+      </div>
+      <div class="p-4 flex flex-col">
+        <span>{{ userFeedbackParent.authorName }}</span>
+        <span [gnUiHumanizeDate]="userFeedbackParent.date"></span>
+      </div>
+    </div>
+    <div data-cy="commentText" class="mt-4 whitespace-pre-line">
+      {{ userFeedbackParent.comment }}
+    </div>
+    @for (
+      userFeedBacksAnswer of userFeedBacksAnswers;
+      track userFeedBacksAnswer;
+      let last = $last
+    ) {
+      <div class="w-full">
+        <hr class="-mx-4 my-6" />
+        <gn-ui-user-feedback-item
+          [userFeedbackParent]="userFeedBacksAnswer"
+          [isLastComment]="last"
+        ></gn-ui-user-feedback-item>
+      </div>
+    }
+    @if (activeUser) {
+      <div class="mt-2 flex flex-col">
+        <hr class="-mx-4 my-4" />
+        <div
+          id="new-comment-buttons"
+          class="flex flex-row gap-2 items-center justify-end"
         >
-          <ng-icon *ngIf="!isAddUserFeedbackLoading" name="matSendOutline">
-          </ng-icon>
-          <ng-container *ngIf="isAddUserFeedbackLoading">
-            <div class="flex justify-center w-full">
-              <gn-ui-spinning-loader></gn-ui-spinning-loader>
+          <gn-ui-text-area
+            [disabled]="isAddUserFeedbackLoading"
+            [(value)]="newAnswer"
+            (valueChange)="onNewAnswerValueChange()"
+            (keyup.control.enter)="publishNewAnswer()"
+            [placeholder]="
+              'record.metadata.userFeedbacks.newAnswer.placeholder' | translate
+            "
+            class="grow"
+            extraClass="bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9"
+          ></gn-ui-text-area>
+          @if (!isAnswerEmpty) {
+            <div class="flex flex-row justify-end">
+              <gn-ui-button
+                [disabled]="isAddUserFeedbackLoading"
+                [type]="'outline'"
+                (buttonClick)="publishNewAnswer()"
+                [title]="
+                  'record.metadata.userFeedbacks.newAnswer.buttonTitle'
+                    | translate
+                "
+                extraClass="!p-[0.5em] text-primary-darker border-primary-darker h-9"
+              >
+                @if (!isAddUserFeedbackLoading) {
+                  <ng-icon name="matSendOutline"> </ng-icon>
+                }
+                @if (isAddUserFeedbackLoading) {
+                  <div class="flex justify-center w-full">
+                    <gn-ui-spinning-loader></gn-ui-spinning-loader>
+                  </div>
+                }
+              </gn-ui-button>
             </div>
-          </ng-container>
-        </gn-ui-button>
+          }
+        </div>
       </div>
-    </div>
+    }
   </div>
-</div>
+}

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -1,10 +1,11 @@
 <span class="w-full inline-block relative">
-  <div
-    class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none"
-    *ngIf="!allowSubmit"
-  >
-    <ng-icon name="iconoirSearch" class="text-primary search"></ng-icon>
-  </div>
+  @if (!allowSubmit) {
+    <div
+      class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none"
+    >
+      <ng-icon name="iconoirSearch" class="text-primary search"></ng-icon>
+    </div>
+  }
   <div class="flex flex-row">
     <input
       #searchInput
@@ -21,54 +22,58 @@
         'px-[--icon-width]': !allowSubmit,
       }"
     />
+    @if (searchInput.value && displayEnterBtn) {
+      <gn-ui-button
+        type="gray"
+        extraClass="w-32 h-8 !opacity-100"
+        [ngStyle]="{ left: enterBtnPosition + 'px' }"
+        class="absolute"
+        disabled="true"
+      >
+        <ng-icon
+          name="iconoirLongArrowDownLeft"
+          class="!w-4 text-gray-900 font-bold"
+        ></ng-icon>
+        <span translate class="text-bold text-gray-900 font-bold">
+          Enter to search
+        </span>
+      </gn-ui-button>
+    }
+  </div>
+  @if (searchInput.value) {
     <gn-ui-button
-      type="gray"
-      *ngIf="searchInput.value && displayEnterBtn"
-      extraClass="w-32 h-8 !opacity-100"
-      [ngStyle]="{ left: enterBtnPosition + 'px' }"
-      class="absolute"
-      disabled="true"
+      type="primary"
+      [extraClass]="getExtraClass()"
+      data-test="clear-btn"
+      aria-label="Clear"
+      (buttonClick)="clear()"
     >
-      <ng-icon
-        name="iconoirLongArrowDownLeft"
-        class="!w-4 text-gray-900 font-bold"
-      ></ng-icon>
-      <span translate class="text-bold text-gray-900 font-bold">
-        Enter to search
-      </span>
+      <ng-icon class="text-white" name="matClose"></ng-icon>
     </gn-ui-button>
-  </div>
-  <gn-ui-button
-    type="primary"
-    [extraClass]="getExtraClass()"
-    data-test="clear-btn"
-    *ngIf="searchInput.value"
-    aria-label="Clear"
-    (buttonClick)="clear()"
-  >
-    <ng-icon class="text-white" name="matClose"></ng-icon>
-  </gn-ui-button>
-  <gn-ui-button
-    type="light"
-    extraClass="border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]"
-    aria-label="Trigger search"
-    *ngIf="allowSubmit"
-    data-test="autocomplete-submit-btn"
-    (buttonClick)="handleSearch()"
-  >
-    <ng-icon name="iconoirSearch"></ng-icon>
-  </gn-ui-button>
+  }
+  @if (allowSubmit) {
+    <gn-ui-button
+      type="light"
+      extraClass="border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]"
+      aria-label="Trigger search"
+      data-test="autocomplete-submit-btn"
+      (buttonClick)="handleSearch()"
+    >
+      <ng-icon name="iconoirSearch"></ng-icon>
+    </gn-ui-button>
+  }
 
-  <gn-ui-popup-alert
-    *ngIf="error"
-    class="absolute mt-2 w-full top-[100%] left-0"
-    icon="matErrorOutlineOutline"
-    position="top"
-    type="warning"
-  >
-    <span translate>search.autocomplete.error</span>
-    {{ error }}
-  </gn-ui-popup-alert>
+  @if (error) {
+    <gn-ui-popup-alert
+      class="absolute mt-2 w-full top-[100%] left-0"
+      icon="matErrorOutlineOutline"
+      position="top"
+      type="warning"
+    >
+      <span translate>search.autocomplete.error</span>
+      {{ error }}
+    </gn-ui-popup-alert>
+  }
 </span>
 
 <mat-autocomplete
@@ -76,11 +81,9 @@
   (optionSelected)="handleSelection($event)"
   [displayWith]="displayWithFnInternal"
 >
-  <mat-option
-    *ngFor="let suggestion of suggestions$ | async"
-    [value]="suggestion"
-    class="p-2 suggestion text-start"
-  >
-    {{ displayWithFnInternal(suggestion) }}
-  </mat-option>
+  @for (suggestion of suggestions$ | async; track suggestion) {
+    <mat-option [value]="suggestion" class="p-2 suggestion text-start">
+      {{ displayWithFnInternal(suggestion) }}
+    </mat-option>
+  }
 </mat-autocomplete>

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts

@@ -12,6 +12,7 @@ import {
   Output,
   SimpleChanges,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
 import {
@@ -75,6 +76,8 @@ export type AutocompleteItem = unknown
 export class AutocompleteComponent
   implements OnInit, AfterViewInit, OnDestroy, OnChanges
 {
+  private cdRef = inject(ChangeDetectorRef)
+
   @Input() placeholder: string
   @Input() enterButton = false
   @Input() action: (value: string) => Observable<AutocompleteItem[]>
@@ -133,8 +136,6 @@ export class AutocompleteComponent
     }
     return 'border rounded-lg absolute w-8 h-8'
   }
-
-  constructor(private cdRef: ChangeDetectorRef) {}
   ngOnChanges(changes: SimpleChanges): void {
     const { value } = changes
     if (value) {

package/src/libs/ui/inputs/src/lib/badge/badge.component.html

@@ -7,20 +7,21 @@
   "
 >
   <span><ng-content></ng-content></span>
-  <gn-ui-button
-    type="light"
-    *ngIf="removable"
-    (buttonClick)="removeBadge()"
-    extraClass="text-xs border-0 px-0 py-0"
-    style="
-      --gn-ui-button-padding: 0;
-      --gn-ui-button-font-size: 0.8em;
-      --gn-ui-button-width: 1.4em;
-      --gn-ui-button-height: 1.4em;
-      --gn-ui-button-rounded: 1.4em;
-      --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
-    "
-  >
-    <ng-icon name="matClose"></ng-icon>
-  </gn-ui-button>
+  @if (removable) {
+    <gn-ui-button
+      type="light"
+      (buttonClick)="removeBadge()"
+      extraClass="text-xs border-0 px-0 py-0"
+      style="
+        --gn-ui-button-padding: 0;
+        --gn-ui-button-font-size: 0.8em;
+        --gn-ui-button-width: 1.4em;
+        --gn-ui-button-height: 1.4em;
+        --gn-ui-button-rounded: 1.4em;
+        --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
+      "
+    >
+      <ng-icon name="matClose"></ng-icon>
+    </gn-ui-button>
+  }
 </div>

package/src/libs/ui/inputs/src/lib/check-toggle/check-toggle.component.html

@@ -1,8 +1,8 @@
 <label
-  class="inline-flex relative items-start cursor-pointer"
+  class="flex relative items-center cursor-pointer w-full"
   [title]="title || label"
 >
-  <span class="shrink-0">
+  <span class="shrink-0 relative">
     <input
       type="checkbox"
       class="sr-only peer"
@@ -18,5 +18,5 @@
       "
     ></div>
   </span>
-  <span class="ml-3 mt-[2px] text-sm font-medium">{{ label }}</span>
+  <span class="ml-3 mt-[2px] text-sm font-medium flex-1">{{ label }}</span>
 </label>

package/src/libs/ui/inputs/src/lib/checkbox/checkbox.component.css

@@ -11,14 +11,14 @@
 }
 
 mat-checkbox {
-  --mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
-  --mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);
-  --mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);
-  --mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
-  --mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);
-  --mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);
-  --mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);
-  --mdc-checkbox-selected-pressed-state-layer-color: var(
+  --mat-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
+  --mat-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);
+  --mat-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);
+  --mat-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);
+  --mat-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);
+  --mat-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);
+  --mat-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);
+  --mat-checkbox-selected-pressed-state-layer-color: var(
     --gn-ui-checkbox-color
   );
 }

package/src/libs/ui/inputs/src/lib/copy-text-button/copy-text-button.component.html

@@ -1,18 +1,20 @@
 <div class="flex">
-  <input
-    *ngIf="displayText && rows <= 1"
-    type="text"
-    class="grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate"
-    value="{{ text }}"
-    readonly
-  />
-  <textarea
-    *ngIf="displayText && rows > 1"
-    [rows]="rows"
-    class="grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max"
-    readonly
-    >{{ text }}</textarea
-  >
+  @if (displayText && rows <= 1) {
+    <input
+      type="text"
+      class="grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate"
+      value="{{ text }}"
+      readonly
+    />
+  }
+  @if (displayText && rows > 1) {
+    <textarea
+      [rows]="rows"
+      class="grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max"
+      readonly
+      >{{ text }}</textarea
+    >
+  }
   <button
     type="button"
     (click)="copyText($event)"

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts

@@ -4,6 +4,7 @@ import {
   EventEmitter,
   Input,
   Output,
+  inject,
 } from '@angular/core'
 import {
   DateAdapter,
@@ -44,13 +45,13 @@ import { TranslateService } from '@ngx-translate/core'
   ],
 })
 export class DatePickerComponent {
+  private dateAdapter = inject<DateAdapter<Date>>(DateAdapter)
+  private translate = inject(TranslateService)
+
   @Input() date: Date
   @Output() dateChange = new EventEmitter<Date>()
 
-  constructor(
-    private dateAdapter: DateAdapter<Date>,
-    private translate: TranslateService
-  ) {
+  constructor() {
     this.dateAdapter.setLocale(this.translate.currentLang)
   }
 }

package/src/libs/ui/inputs/src/lib/date-range-dropdown/date-range-dropdown.component.ts

@@ -7,8 +7,9 @@ import {
   Input,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
-import { CommonModule } from '@angular/common'
+
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { ButtonComponent } from '../button/button.component'
@@ -20,7 +21,6 @@ import { matExpandLess, matExpandMore } from '@ng-icons/material-icons/baseline'
   selector: 'gn-ui-date-range-dropdown',
   standalone: true,
   imports: [
-    CommonModule,
     NgIconComponent,
     MatNativeDateModule,
     MatDatepickerModule,
@@ -36,6 +36,9 @@ import { matExpandLess, matExpandMore } from '@ng-icons/material-icons/baseline'
   styleUrls: ['./date-range-dropdown.component.css'],
 })
 export class DateRangeDropdownComponent implements AfterViewChecked {
+  private overlayContainer = inject(OverlayContainer)
+  private cdr = inject(ChangeDetectorRef)
+
   @Input() title: string
   @Input() startDate: Date
   @Input() endDate: Date
@@ -45,19 +48,17 @@ export class DateRangeDropdownComponent implements AfterViewChecked {
   @ViewChild('picker') picker: ElementRef
   isPickerDisplayed = false
 
-  constructor(
-    private overlayContainer: OverlayContainer,
-    private cdr: ChangeDetectorRef
-  ) {}
-
   ngAfterViewChecked() {
     this.checkPickerOverlay()
   }
 
   checkPickerOverlay() {
     const overlayContainerElement = this.overlayContainer.getContainerElement()
-    this.isPickerDisplayed =
-      overlayContainerElement.querySelector('.mat-datepicker-content') !== null
-    this.cdr.detectChanges()
+    setTimeout(() => {
+      this.isPickerDisplayed =
+        overlayContainerElement.querySelector('.mat-datepicker-content') !==
+        null
+      this.cdr.detectChanges()
+    }, 200) // FIXME: find a better way to deal with animation delay
   }
 }

package/src/libs/ui/inputs/src/lib/date-range-inputs/date-range-inputs.component.ts

@@ -8,12 +8,11 @@ import {
 import { DatePickerComponent } from '../date-picker/date-picker.component'
 import { DatasetTemporalExtent } from '../../../../../../libs/common/domain/src/lib/model/record/metadata.model'
 import { TranslateDirective } from '@ngx-translate/core'
-import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-date-range-inputs',
   standalone: true,
-  imports: [CommonModule, TranslateDirective, DatePickerComponent],
+  imports: [TranslateDirective, DatePickerComponent],
   templateUrl: './date-range-inputs.component.html',
   styleUrl: './date-range-inputs.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.html

@@ -5,10 +5,14 @@
     (change)="selectFile($event)"
     [accept]="accept"
   >
-    <div *ngIf="!fileName" class="text-gray-900 pl-2 py-2" translate="">
-      {{ placeholder }}
-    </div>
+    @if (!fileName) {
+      <div class="text-gray-900 pl-2 py-2" translate="">
+        {{ placeholder }}
+      </div>
+    }
 
-    <div *ngIf="fileName" class="text-gray-900 pl-2 py-2">{{ fileName }}</div>
+    @if (fileName) {
+      <div class="text-gray-900 pl-2 py-2">{{ fileName }}</div>
+    }
   </ngx-dropzone>
 </div>

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.ts

@@ -1,7 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { NgxDropzoneModule } from 'ngx-dropzone'
-import { CommonModule } from '@angular/common'
 
 export const placeholder = 'dropFile'
 marker('dropFile')
@@ -11,7 +10,7 @@ marker('dropFile')
   templateUrl: './drag-and-drop-file-input.component.html',
   styleUrls: ['./drag-and-drop-file-input.component.css'],
   standalone: true,
-  imports: [NgxDropzoneModule, CommonModule],
+  imports: [NgxDropzoneModule],
 })
 export class DragAndDropFileInputComponent {
   @Input() placeholder = placeholder