geonetwork-ui 2.5.0-dev.17046547b → 2.5.0-dev.1f2cf2cee

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

@@ -5,31 +5,48 @@
   >
     <ng-icon name="iconoirSearch" class="text-primary search"></ng-icon>
   </div>
-  <input
-    #searchInput
-    type="text"
-    class="gn-ui-text-input"
-    [ngClass]="{
-      'px-[--icon-width]': !allowSubmit,
-    }"
-    [placeholder]="placeholder"
-    [formControl]="control"
-    [matAutocomplete]="auto"
-    (keyup.enter)="handleEnter(searchInput.value)"
-  />
+  <div class="flex flex-row">
+    <input
+      #searchInput
+      type="text"
+      class="gn-ui-text-input"
+      (input)="handleInput($event)"
+      [placeholder]="placeholder"
+      [formControl]="control"
+      [matAutocomplete]="auto"
+      (keyup.enter)="handleEnter(searchInput.value)"
+      [ngClass]="{
+        'text-primary': searchActive && enterButton,
+        'text-gray-900': !searchActive,
+        'px-[--icon-width]': !allowSubmit,
+      }"
+    />
+    <gn-ui-button
+      type="gray"
+      *ngIf="searchInput.value && displayEnterBtn"
+      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>
   <gn-ui-button
-    type="light"
-    extraClass="border-0 text-primary-lightest hover:text-primary focus:text-primary absolute inset-y-[--icon-padding] {{
-      allowSubmit
-        ? 'right-[calc(var(--icon-width)+var(--icon-padding))]'
-        : 'right-[--icon-padding]'
-    }}"
+    type="primary"
+    [extraClass]="getExtraClass()"
     data-test="clear-btn"
     *ngIf="searchInput.value"
     aria-label="Clear"
     (buttonClick)="clear()"
   >
-    <ng-icon name="matClose"></ng-icon>
+    <ng-icon class="text-white" name="matClose"></ng-icon>
   </gn-ui-button>
   <gn-ui-button
     type="light"

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

@@ -41,7 +41,7 @@ import {
   provideIcons,
   provideNgIconsConfig,
 } from '@ng-icons/core'
-import { iconoirSearch } from '@ng-icons/iconoir'
+import { iconoirLongArrowDownLeft, iconoirSearch } from '@ng-icons/iconoir'
 import { matClose } from '@ng-icons/material-icons/baseline'
 
 export type AutocompleteItem = unknown
@@ -65,9 +65,10 @@ export type AutocompleteItem = unknown
     provideIcons({
       iconoirSearch,
       matClose,
+      iconoirLongArrowDownLeft,
     }),
     provideNgIconsConfig({
-      size: '1.5rem',
+      size: '1.75rem',
     }),
   ],
 })
@@ -75,6 +76,7 @@ export class AutocompleteComponent
   implements OnInit, AfterViewInit, OnDestroy, OnChanges
 {
   @Input() placeholder: string
+  @Input() enterButton = false
   @Input() action: (value: string) => Observable<AutocompleteItem[]>
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
@@ -87,6 +89,7 @@ export class AutocompleteComponent
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
+  @Output() isSearchActive = new EventEmitter<boolean>()
   @ViewChild(MatAutocompleteTrigger) triggerRef: MatAutocompleteTrigger
   @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete
   @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
@@ -101,15 +104,36 @@ export class AutocompleteComponent
   subscription = new Subscription()
   private lastPosition: DOMRect | null = null
   private intervalIdPosition: number | undefined
+  enterBtnPosition = 0
+  searchActive = false
 
   @Input() displayWithFn: (item: AutocompleteItem) => string = (item) =>
     item.toString()
 
+  get displayEnterBtn() {
+    return this.enterButton && this.allowSubmit && !this.searchActive
+  }
+
   displayWithFnInternal = (item?: AutocompleteItem) => {
     if (item === null || item === undefined) return null
     return this.displayWithFn(item)
   }
 
+  getExtraClass(): string {
+    if (this.allowSubmit) {
+      if (this.enterButton) {
+        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+var(--icon-padding))] inset-y-[--icon-padding]'
+      } else {
+        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+0.25*var(--icon-width))] inset-y-[calc(0.25*var(--icon-width))]'
+      }
+    } else {
+      if (!this.enterButton) {
+        return 'border rounded-lg absolute w-8 h-8 right-2 inset-y-2'
+      }
+    }
+    return 'border rounded-lg absolute w-8 h-8'
+  }
+
   constructor(private cdRef: ChangeDetectorRef) {}
   ngOnChanges(changes: SimpleChanges): void {
     const { value } = changes
@@ -117,6 +141,13 @@ export class AutocompleteComponent
       const previousTextValue = this.displayWithFnInternal(value.previousValue)
       const currentTextValue = this.displayWithFnInternal(value.currentValue)
       if (previousTextValue !== currentTextValue) {
+        if (currentTextValue) {
+          this.searchActive = true
+          this.isSearchActive.emit(true)
+        } else {
+          this.searchActive = false
+          this.isSearchActive.emit(false)
+        }
         this.updateInputValue(value.currentValue)
       }
     }
@@ -256,6 +287,8 @@ export class AutocompleteComponent
 
   clear(): void {
     this.inputRef.nativeElement.value = ''
+    this.searchActive = false
+    this.isSearchActive.emit(false)
     this.inputCleared.emit()
     this.selectionSubject
       .pipe(take(1))
@@ -265,6 +298,8 @@ export class AutocompleteComponent
 
   handleEnter(any: string) {
     if (!this.cancelEnter && this.allowSubmit) {
+      this.isSearchActive.emit(true)
+      this.searchActive = true
       this.inputSubmitted.emit(any)
     }
   }
@@ -294,4 +329,10 @@ export class AutocompleteComponent
       this.control.setValue('')
     }
   }
+
+  handleInput(event: InputEvent) {
+    this.searchActive = false
+    this.isSearchActive.emit(false)
+    this.enterBtnPosition = event.target['value'].length * 8 + 80
+  }
 }

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

@@ -31,7 +31,7 @@ import { iconoirArrowUp, iconoirLink } from '@ng-icons/iconoir'
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class UrlInputComponent {
+export class UrlInputComponent implements OnChanges {
   @Input() set value(v: string) {
     // we're making sure to only update the input if the URL representation of it has changed; otherwise we keep it identical
     // to avoid glitches when starting to write a URL and having some characters added/replaced automatically
@@ -48,6 +48,7 @@ export class UrlInputComponent {
   @Input() placeholder = 'https://'
   @Input() disabled: boolean
   @Input() showValidateButton = true
+  @Input() resetUrlOnChange: number
 
   /**
    * This will emit null if the field is emptied
@@ -59,6 +60,12 @@ export class UrlInputComponent {
 
   constructor(private cd: ChangeDetectorRef) {}
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['resetUrlOnChange']) {
+      this.inputValue = ''
+    }
+  }
+
   handleInput(event: Event) {
     const value = (event.target as HTMLInputElement).value
     this.inputValue = value

package/src/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html

@@ -64,7 +64,7 @@
       class="col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]"
     >
       <gn-ui-metadata-quality
-        smaller="true"
+        [smaller]="true"
         [metadata]="record"
         [metadataQualityDisplay]="metadataQualityDisplay"
       ></gn-ui-metadata-quality>

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.html

@@ -1,12 +1,37 @@
-<div class="flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg">
-  <div
-    [style.width.%]="progress"
-    class="flex {{
-      color.innerBar
-    }} my-1 mx-1 transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl"
-  >
-    <div class="flex items-center pl-2 py-1 {{ color.text }} font-bold text-4">
-      {{ progress }}%
+<ng-container [ngSwitch]="type">
+  <!-- Light Theme -->
+  <ng-container *ngSwitchCase="'light'">
+    <div class="flex items-center relative">
+      <div
+        class="flex-shrink-0 {{ color.text }} text-xs font-medium mr-2
+             text-opacity-100 !text-slate-800"
+      >
+        {{ progress }}%
+      </div>
+      <div class="flex-grow h-[6px] w-full {{ color.outerBar }} rounded-full">
+        <div
+          [style.width.%]="progress"
+          class="{{ color.innerBar }} transition-width duration-500
+               ease-in-out rounded-full shadow-sm h-full"
+        ></div>
+      </div>
     </div>
-  </div>
-</div>
+  </ng-container>
+
+  <!-- Default / Primary / Secondary Themes -->
+  <ng-container *ngSwitchDefault>
+    <div class="flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg">
+      <div
+        [style.width.%]="progress"
+        class="flex {{ color.innerBar }} my-1 mx-1 transition-width
+               duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl"
+      >
+        <div
+          class="flex items-center pl-2 py-1 {{ color.text }} font-bold text-4"
+        >
+          {{ progress }}%
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'
 
 interface ColorScheme {
   outerBar: string
@@ -11,10 +12,11 @@ interface ColorScheme {
   templateUrl: './progress-bar.component.html',
   styleUrls: ['./progress-bar.component.css'],
   standalone: true,
+  imports: [NgSwitch, NgSwitchCase, NgSwitchDefault],
 })
 export class ProgressBarComponent {
   @Input() value = 0
-  @Input() type: 'primary' | 'secondary' | 'default' = 'default'
+  @Input() type: 'primary' | 'secondary' | 'default' | 'light' = 'default'
 
   get progress() {
     return this.value > 0 ? (this.value < 100 ? this.value : 100) : 0
@@ -40,6 +42,12 @@ export class ProgressBarComponent {
           innerBar: 'bg-secondary-lighter',
           text: 'text-white',
         }
+      case 'light':
+        return {
+          outerBar: 'bg-primary-white',
+          innerBar: 'bg-primary',
+          text: 'text-main',
+        }
     }
   }
 }

package/translations/de.json

@@ -472,7 +472,7 @@
   "search.error.receivedError": "Ein Fehler ist aufgetreten",
   "search.error.recordHasnolink": "",
   "search.error.recordNotFound": "Der Datensatz mit der Kennung \"{ id }\" konnte nicht gefunden werden.",
-  "search.field.any.placeholder": "Suche Datensätze ...",
+  "search.field.any.placeholder": "Suche im katalog ...",
   "search.field.sortBy": "Sortieren nach:",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",

package/translations/en.json

@@ -472,7 +472,7 @@
   "search.error.receivedError": "An error was received",
   "search.error.recordHasnolink": "This dataset currently has no link yet, please come back later.",
   "search.error.recordNotFound": "The dataset with identifier \"{ id }\" could not be found.",
-  "search.field.any.placeholder": "Search datasets ...",
+  "search.field.any.placeholder": "Search in the catalog ...",
   "search.field.sortBy": "Sort by:",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",

package/translations/fr.json

@@ -472,7 +472,7 @@
   "search.error.receivedError": "Erreur retournée",
   "search.error.recordHasnolink": "Ce jeu de données n'a pas encore de lien, réessayez plus tard s'il vous plaît.",
   "search.error.recordNotFound": "Cette donnée n'a pu être trouvée.",
-  "search.field.any.placeholder": "Rechercher un jeu de données...",
+  "search.field.any.placeholder": "Rechercher dans le catalogue...",
   "search.field.sortBy": "Trier par :",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",

package/translations/it.json

@@ -472,7 +472,7 @@
   "search.error.receivedError": "Errore restituito",
   "search.error.recordHasnolink": "Questo dataset non ha ancora alcun collegamento, riprova più tardi.",
   "search.error.recordNotFound": "Impossibile trovare questi dati.",
-  "search.field.any.placeholder": "Cerca un dataset...",
+  "search.field.any.placeholder": "Cerca del catalogo...",
   "search.field.sortBy": "Ordina per:",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",