geonetwork-ui 2.8.0-dev.8cb6904b7 → 2.8.0-dev.926fc0ab1

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

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+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'
+
+@Component({
+  selector: 'gn-ui-date-range-inputs',
+  standalone: true,
+  imports: [TranslateDirective, DatePickerComponent],
+  templateUrl: './date-range-inputs.component.html',
+  styleUrl: './date-range-inputs.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DateRangeInputsComponent {
+  @Input() temporalExtent: DatasetTemporalExtent | null
+  @Output() temporalExtentChange =
+    new EventEmitter<DatasetTemporalExtent | null>()
+
+  onStartDateChange(date: Date) {
+    this.temporalExtent = {
+      ...this.temporalExtent,
+      start: date,
+    }
+    this.temporalExtentChange.emit(this.temporalExtent)
+  }
+
+  onEndDateChange(date: Date) {
+    this.temporalExtent = {
+      ...this.temporalExtent,
+      end: date,
+    }
+    this.temporalExtentChange.emit(this.temporalExtent)
+  }
+}

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

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html

@@ -12,20 +12,22 @@
     <div class="text-left font-medium truncate py-1">
       {{ title }}
     </div>
-    <div
-      *ngIf="hasSelectedChoices"
-      class="gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count"
-    >
-      {{ selected.length }}
-    </div>
+    @if (hasSelectedChoices) {
+      <div
+        class="gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count"
+      >
+        {{ selected.length }}
+      </div>
+    }
   </div>
   <button class="h-6 w-6" data-cy="clearSelection">
-    <ng-icon
-      class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
-      *ngIf="hasSelectedChoices && !overlayOpen"
-      (click)="clearSelection($event)"
-      name="matClose"
-    ></ng-icon>
+    @if (hasSelectedChoices && !overlayOpen) {
+      <ng-icon
+        class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+        (click)="clearSelection($event)"
+        name="matClose"
+      ></ng-icon>
+    }
   </button>
   <ng-icon
     [name]="overlayOpen ? 'matExpandLess' : 'matExpandMore'"
@@ -61,59 +63,64 @@
     <div
       class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
     >
-      <button
-        type="button"
-        *ngFor="let selected of selectedChoices"
-        [title]="selected.label"
-        class="max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1"
-        (click)="select(selected, false)"
-      >
-        <div class="text-sm truncate leading-[26px] px-2">
-          {{ selected.label }}
-        </div>
-        <div
-          class="flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0"
-        >
-          <ng-icon
-            name="matClose"
-            class="!h-[12px] !w-[11px] text-[12px]"
-          ></ng-icon>
-        </div>
-      </button>
-
-      <div *ngIf="allowSearch" class="w-[50%] relative grow shrink">
-        <input
-          #searchFieldInput
-          class="w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none"
-          [(ngModel)]="searchInputValue"
-          [placeholder]="'multiselect.filter.placeholder' | translate"
-        />
+      @for (selected of selectedChoices; track selected) {
         <button
-          *ngIf="!!searchInputValue"
-          class="absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2"
-          (click)="clearSearchInputValue($event)"
+          type="button"
+          [title]="selected.label"
+          class="max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1"
+          (click)="select(selected, false)"
         >
-          <ng-icon class="!h-[10px] !w-[12px] text-[12px]" name="matClose">
-          </ng-icon>
+          <div class="text-sm truncate leading-[26px] px-2">
+            {{ selected.label }}
+          </div>
+          <div
+            class="flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0"
+          >
+            <ng-icon
+              name="matClose"
+              class="!h-[12px] !w-[11px] text-[12px]"
+            ></ng-icon>
+          </div>
         </button>
-      </div>
+      }
+
+      @if (allowSearch) {
+        <div class="w-[50%] relative grow shrink">
+          <input
+            #searchFieldInput
+            class="w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none"
+            [(ngModel)]="searchInputValue"
+            [placeholder]="'multiselect.filter.placeholder' | translate"
+          />
+          @if (!!searchInputValue) {
+            <button
+              class="absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2"
+              (click)="clearSearchInputValue($event)"
+            >
+              <ng-icon class="!h-[10px] !w-[12px] text-[12px]" name="matClose">
+              </ng-icon>
+            </button>
+          }
+        </div>
+      }
     </div>
 
-    <label
-      *ngFor="let choice of filteredChoicesByText"
-      [title]="choice.label"
-      class="flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors"
-    >
-      <input
-        class="w-[18px] h-[18px] align-text-top shrink-0"
-        type="checkbox"
-        #checkBox
-        [checked]="isSelected(choice)"
-        (change)="select(choice, checkBox.checked)"
-      />
-      <span class="ml-[8px] text-[14px] truncate">
-        {{ choice.label }}
-      </span>
-    </label>
+    @for (choice of filteredChoicesByText; track choice) {
+      <label
+        [title]="choice.label"
+        class="flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors"
+      >
+        <input
+          class="w-[18px] h-[18px] align-text-top shrink-0"
+          type="checkbox"
+          #checkBox
+          [checked]="isSelected(choice)"
+          (change)="select(choice, checkBox.checked)"
+        />
+        <span class="ml-[8px] text-[14px] truncate">
+          {{ choice.label }}
+        </span>
+      </label>
+    }
   </div>
 </ng-template>

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

@@ -8,6 +8,7 @@ import {
   QueryList,
   ViewChild,
   ViewChildren,
+  inject,
 } from '@angular/core'
 import {
   CdkConnectedOverlay,
@@ -26,7 +27,7 @@ import { ButtonComponent } from '../button/button.component'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { FormsModule } from '@angular/forms'
 import { TranslatePipe } from '@ngx-translate/core'
-import { CommonModule } from '@angular/common'
+
 import {
   matClose,
   matExpandLess,
@@ -38,14 +39,7 @@ import {
   templateUrl: './dropdown-multiselect.component.html',
   styleUrls: ['./dropdown-multiselect.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    CommonModule,
-    ButtonComponent,
-    NgIcon,
-    OverlayModule,
-    FormsModule,
-    TranslatePipe,
-  ],
+  imports: [ButtonComponent, NgIcon, OverlayModule, FormsModule, TranslatePipe],
   providers: [
     provideIcons({
       matClose,
@@ -56,6 +50,8 @@ import {
   standalone: true,
 })
 export class DropdownMultiselectComponent {
+  private scrollStrategies = inject(ScrollStrategyOptions)
+
   @Input() title: string
   @Input() choices: Choice[]
   @Input() selected: unknown[] = []
@@ -117,8 +113,6 @@ export class DropdownMultiselectComponent {
     )
   }
 
-  constructor(private scrollStrategies: ScrollStrategyOptions) {}
-
   private setFocus() {
     setTimeout(() => {
       this.searchFieldInput.nativeElement.focus()

package/src/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html

@@ -1,11 +1,12 @@
 <div class="flex flex-col sm:flex-row sm:items-center relative w-full">
-  <span
-    *ngIf="showTitle"
-    class="tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap"
-    [attr.for]="id"
-  >
-    {{ title }}
-  </span>
+  @if (showTitle) {
+    <span
+      class="tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap"
+      [attr.for]="id"
+    >
+      {{ title }}
+    </span>
+  }
   <gn-ui-button
     type="outline"
     class="grow min-w-0"
@@ -52,25 +53,26 @@
     [attr.aria-label]="title"
     (keydown)="handleOverlayKeydown($event)"
   >
-    <button
-      #choiceInputs
-      type="button"
-      *ngFor="let choice of choices"
-      [title]="choice.label | translate"
-      class="flex px-5 py-1 w-full text-start cursor-pointer transition-colors"
-      [ngClass]="
-        isSelected(choice)
-          ? 'text-white bg-primary hover:text-white hover:bg-primary-darker focus:text-white focus:bg-primary-darker'
-          : 'text-gray-900 hover:text-primary-darkest hover:bg-gray-50 focus:text-primary-darkest focus:bg-gray-50'
-      "
-      (click)="onSelectValue(choice)"
-      (keydown)="selectIfEnter($event, choice)"
-      [attr.data-cy-value]="choice.value.toString()"
-      [attr.data-cy-active]="isSelected(choice) ? 'true' : undefined"
-    >
-      <span class="text-[14px]">
-        {{ choice.label | translate }}
-      </span>
-    </button>
+    @for (choice of choices; track choice) {
+      <button
+        #choiceInputs
+        type="button"
+        [title]="choice.label | translate"
+        class="flex px-5 py-1 w-full text-start cursor-pointer transition-colors"
+        [ngClass]="
+          isSelected(choice)
+            ? 'text-white bg-primary hover:text-white hover:bg-primary-darker focus:text-white focus:bg-primary-darker'
+            : 'text-gray-900 hover:text-primary-darkest hover:bg-gray-50 focus:text-primary-darkest focus:bg-gray-50'
+        "
+        (click)="onSelectValue(choice)"
+        (keydown)="selectIfEnter($event, choice)"
+        [attr.data-cy-value]="choice.value.toString()"
+        [attr.data-cy-active]="isSelected(choice) ? 'true' : undefined"
+      >
+        <span class="text-[14px]">
+          {{ choice.label | translate }}
+        </span>
+      </button>
+    }
   </div>
 </ng-template>

package/src/libs/ui/inputs/src/lib/editable-label/editable-label.directive.ts

@@ -7,6 +7,7 @@ import {
   OnChanges,
   Output,
   Renderer2,
+  inject,
 } from '@angular/core'
 
 @Directive({
@@ -14,16 +15,14 @@ import {
   standalone: true,
 })
 export class EditableLabelDirective implements OnChanges, AfterViewInit {
+  private el = inject(ElementRef)
+  private renderer = inject(Renderer2)
+
   @Input() gnUiEditableLabel?: string
   @Output() editableLabelChanged = new EventEmitter<string>()
 
   appendedInput: HTMLInputElement
 
-  constructor(
-    private el: ElementRef,
-    private renderer: Renderer2
-  ) {}
-
   ngOnChanges() {
     if (this.appendedInput) {
       this.renderer.setProperty(

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

@@ -21,43 +21,43 @@
       [disabled]="isUploadInProgress || disabled"
     />
 
-    <div
-      class="w-14 h-14 rounded-md bg-gray-50 grid"
-      *ngIf="!isUploadInProgress"
-    >
-      <ng-icon
-        *ngIf="!dragFilesOver"
-        class="place-self-center text-primary"
-        name="iconoirCloudUpload"
-      ></ng-icon>
-      <ng-icon
-        *ngIf="dragFilesOver"
-        class="place-self-center text-primary"
-        name="iconoirFramePlusIn"
-      ></ng-icon>
-    </div>
-    <div
-      *ngIf="isUploadInProgress"
-      class="w-14 h-14 grid items-center justify-center relative"
-    >
-      <div class="text-gray-100 absolute">
-        <mat-progress-spinner
-          class="place-self-center"
-          [diameter]="56"
-          mode="determinate"
-          [value]="100"
-        ></mat-progress-spinner>
+    @if (!isUploadInProgress) {
+      <div class="w-14 h-14 rounded-md bg-gray-50 grid">
+        @if (!dragFilesOver) {
+          <ng-icon
+            class="place-self-center text-primary"
+            name="iconoirCloudUpload"
+          ></ng-icon>
+        }
+        @if (dragFilesOver) {
+          <ng-icon
+            class="place-self-center text-primary"
+            name="iconoirFramePlusIn"
+          ></ng-icon>
+        }
       </div>
-      <div class="text-primary absolute">
-        <mat-progress-spinner
-          class="place-self-center"
-          [diameter]="56"
-          mode="determinate"
-          [value]="uploadProgress"
-        ></mat-progress-spinner>
+    }
+    @if (isUploadInProgress) {
+      <div class="w-14 h-14 grid items-center justify-center relative">
+        <div class="text-gray-100 absolute">
+          <mat-progress-spinner
+            class="place-self-center"
+            [diameter]="56"
+            mode="determinate"
+            [value]="100"
+          ></mat-progress-spinner>
+        </div>
+        <div class="text-primary absolute">
+          <mat-progress-spinner
+            class="place-self-center"
+            [diameter]="56"
+            mode="determinate"
+            [value]="uploadProgress"
+          ></mat-progress-spinner>
+        </div>
+        <span class="text-sm text-main font-bold">{{ uploadProgress }}%</span>
       </div>
-      <span class="text-sm text-main font-bold">{{ uploadProgress }}%</span>
-    </div>
+    }
     <div class="flex flex-col items-center gap-1">
       <p class="font-medium">
         {{ getPrimaryText() | translate: { sizeMB: maxSizeMB.toFixed(0) } }}

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

@@ -6,6 +6,7 @@ import {
   EventEmitter,
   Input,
   Output,
+  inject,
 } from '@angular/core'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 import { FilesDropDirective } from '../files-drop/files-drop.directive'
@@ -45,6 +46,8 @@ import { iconoirCloudUpload, iconoirFramePlusIn } from '@ng-icons/iconoir'
   ],
 })
 export class FileInputComponent {
+  private cd = inject(ChangeDetectorRef)
+
   @Input() maxSizeMB: number
   @Input() uploadProgress?: number
   @Output() fileChange: EventEmitter<File> = new EventEmitter()
@@ -58,8 +61,6 @@ export class FileInputComponent {
     return this.uploadProgress !== undefined
   }
 
-  constructor(private cd: ChangeDetectorRef) {}
-
   getPrimaryText() {
     if (this.uploadProgress) {
       return marker('input.file.uploadProgressLabel')

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.html

@@ -1,23 +1,25 @@
 <ul class="flex flex-wrap list-none gap-2">
-  <li *ngFor="let choice of choices">
-    <label
-      class=""
-      [ngClass]="{
-        selected: isSelected(choice),
-      }"
-    >
-      <input
-        class="hidden"
-        type="checkbox"
-        #checkBox
-        [checked]="isSelected(choice)"
-        (change)="select(choice, checkBox.checked)"
-        [attr.data-cy]="'inlineFilter-' + choice.value"
-      />
-      <ng-container
-        *ngTemplateOutlet="itemTemplate; context: { $implicit: choice }"
+  @for (choice of choices; track choice) {
+    <li>
+      <label
+        class=""
+        [ngClass]="{
+          selected: isSelected(choice),
+        }"
       >
-      </ng-container>
-    </label>
-  </li>
+        <input
+          class="hidden"
+          type="checkbox"
+          #checkBox
+          [checked]="isSelected(choice)"
+          (change)="select(choice, checkBox.checked)"
+          [attr.data-cy]="'inlineFilter-' + choice.value"
+        />
+        <ng-container
+          *ngTemplateOutlet="itemTemplate; context: { $implicit: choice }"
+        >
+        </ng-container>
+      </label>
+    </li>
+  }
 </ul>

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.html

@@ -1,49 +1,50 @@
-<div
-  class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
-  *ngIf="
-    (isMobile$ | async) === false || featureCatalog?.featureTypes?.length > 1
-  "
->
+@if (
+  (isMobile$ | async) === false || featureCatalog?.featureTypes?.length > 1
+) {
   <div
-    class="relative shrink-0"
-    *ngIf="featureCatalog?.featureTypes?.length > 1"
+    class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
   >
-    <input
-      type="text"
-      [placeholder]="'search.filter.into.feature.catalog' | translate"
-      class="w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md"
-      [(ngModel)]="searchTerm"
-      (ngModelChange)="filterAction(searchTerm)"
-    />
-    <ng-icon
-      class="absolute right-2.5 top-1 w-6 h-6 text-black"
-      name="iconoirSearch"
-    ></ng-icon>
+    @if (featureCatalog?.featureTypes?.length > 1) {
+      <div class="relative shrink-0">
+        <input
+          type="text"
+          [placeholder]="'search.filter.into.feature.catalog' | translate"
+          class="w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md"
+          [(ngModel)]="searchTerm"
+          (ngModelChange)="filterAction(searchTerm)"
+        />
+        <ng-icon
+          class="absolute right-2.5 top-1 w-6 h-6 text-black"
+          name="iconoirSearch"
+        ></ng-icon>
+      </div>
+    }
+    @if ((isMobile$ | async) === false) {
+      <div class="text-sm px-1 ml-auto inline">
+        @if (featureCatalog?.featureTypes?.length > 1) {
+          <span
+            class="text-sm font-medium text-gray-900"
+            data-cy="total-objects-label"
+            translate
+            >record.feature.catalog.number.total.object</span
+          ><span
+            class="text-sm font-bold px-1 text-gray-900"
+            data-cy="total-objects"
+            >{{ totalObjects }}</span
+          >
+          <span class="px-1.5">|</span>
+        }
+        <span
+          class="text-sm font-medium px-1 text-gray-900"
+          data-cy="total-attributes-label"
+          translate
+          >record.feature.catalog.number.total.attribute</span
+        ><span
+          class="text-sm font-bold text-gray-900"
+          data-cy="total-attributes"
+          >{{ totalAttributes }}</span
+        >
+      </div>
+    }
   </div>
-  <div
-    *ngIf="(isMobile$ | async) === false"
-    class="text-sm px-1 ml-auto inline"
-  >
-    <ng-container *ngIf="featureCatalog?.featureTypes?.length > 1">
-      <span
-        class="text-sm font-medium text-gray-900"
-        data-cy="total-objects-label"
-        translate
-        >record.feature.catalog.number.total.object</span
-      ><span
-        class="text-sm font-bold px-1 text-gray-900"
-        data-cy="total-objects"
-        >{{ totalObjects }}</span
-      >
-      <span class="px-1.5">|</span>
-    </ng-container>
-    <span
-      class="text-sm font-medium px-1 text-gray-900"
-      data-cy="total-attributes-label"
-      translate
-      >record.feature.catalog.number.total.attribute</span
-    ><span class="text-sm font-bold text-gray-900" data-cy="total-attributes">{{
-      totalAttributes
-    }}</span>
-  </div>
-</div>
+}

package/src/libs/ui/inputs/src/lib/search-input/search-input.component.html

@@ -13,13 +13,14 @@
   >
     <ng-icon name="matSearch"></ng-icon>
   </div>
-  <button
-    *ngIf="rawChange | async"
-    type="button"
-    class="text-primary-lightest hover:text-primary absolute transition-all duration-100 inset-y-0 right-0 pr-2.5"
-    aria-label="Clear"
-    (click)="clear()"
-  >
-    <ng-icon name="matClose" class="align-middle"></ng-icon>
-  </button>
+  @if (rawChange | async) {
+    <button
+      type="button"
+      class="text-primary-lightest hover:text-primary absolute transition-all duration-100 inset-y-0 right-0 pr-2.5"
+      aria-label="Clear"
+      (click)="clear()"
+    >
+      <ng-icon name="matClose" class="align-middle"></ng-icon>
+    </button>
+  }
 </div>

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

@@ -10,10 +10,12 @@
     }"
   >
     <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>
-    <span *ngIf="displayLabel" class="mx-2 text-[16px] content-center">{{
-      (toggled ? 'favorite.starToggle.remove' : 'favorite.starToggle.add')
-        | translate
-    }}</span>
+    @if (displayLabel) {
+      <span class="mx-2 text-[16px] content-center">{{
+        (toggled ? 'favorite.starToggle.remove' : 'favorite.starToggle.add')
+          | translate
+      }}</span>
+    }
   </gn-ui-button>
   <svg
     #starOverlay