geonetwork-ui 2.4.0-dev.42a43a29 → 2.4.0-dev.4892c308

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

@@ -1,28 +1,35 @@
-:host {
-  --input-height: 3.5em;
+span {
+  --icon-padding: var(--gn-ui-text-input-border-size, 2px);
+  --icon-width: calc(var(--gn-ui-text-input-padding, 0.6em) * 2 + 1.25em);
 }
-.clear-btn {
-  width: var(--input-height);
-  height: 100%;
+/* this is because we don't want to change the popup alert font size */
+span > *:not(gn-ui-popup-alert) {
+  font-size: var(--gn-ui-text-input-font-size, 1em);
 }
-.search-btn {
-  width: var(--input-height);
-  height: 100%;
-  border-left-width: 0.1em;
+
+input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+gn-ui-button {
+  --gn-ui-button-rounded: 0;
+  --gn-ui-button-width: var(--icon-width);
+  --gn-ui-button-padding: 0;
+  font-size: 1em;
 }
 mat-icon {
   width: 100%;
   height: 100%;
-  padding: 0.65em;
-  font-size: 1.5em;
-}
-input {
-  height: var(--input-height);
-  padding: 1.05em;
-  padding-right: calc(2 * var(--input-height));
+  font-size: calc(
+    0.9em + 11px
+  ); /* this formula gives a good icon size across different font size values */
+  line-height: 0.8em;
+  display: grid;
+  align-items: center;
+  justify-content: center;
 }
-input:placeholder-shown {
-  text-overflow: ellipsis;
+gn-ui-button:last-of-type {
+  --gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, 0.25em)
+    var(--gn-ui-text-input-rounded, 0.25em) 0;
 }
 
 .mat-mdc-option.suggestion.mat-mdc-option-active {

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

@@ -1,34 +1,47 @@
-<div class="relative">
+<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"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"> search </mat-icon>
+  </div>
   <input
     #searchInput
     type="text"
-    class="appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]"
+    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 absolute inset-y-0 right-0">
-    <button
-      type="button"
-      class="text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100 clear-btn"
-      *ngIf="searchInput.value"
-      aria-label="Clear"
-      (click)="clear()"
-    >
-      <mat-icon class="material-symbols-outlined">close</mat-icon>
-    </button>
-    <button
-      type="button"
-      class="text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 transition-all duration-100 search-btn rounded-r"
-      aria-label="Trigger search"
-      *ngIf="allowSubmit"
-      data-test="autocomplete-submit-btn"
-      (click)="handleClickSearch()"
-    >
-      <mat-icon class="material-symbols-outlined">search</mat-icon>
-    </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]'
+    }}"
+    data-test="clear-btn"
+    *ngIf="searchInput.value"
+    aria-label="Clear"
+    (buttonClick)="clear()"
+  >
+    <mat-icon class="material-symbols-outlined">close</mat-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)="handleClickSearch()"
+  >
+    <mat-icon class="material-symbols-outlined">search</mat-icon>
+  </gn-ui-button>
+
   <gn-ui-popup-alert
     *ngIf="error"
     class="absolute mt-2 w-full top-[100%] left-0"
@@ -39,7 +52,8 @@
     <span translate>search.autocomplete.error</span>
     {{ error }}
   </gn-ui-popup-alert>
-</div>
+</span>
+
 <mat-autocomplete
   #auto="matAutocomplete"
   (optionSelected)="handleSelection($event)"

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

@@ -36,6 +36,7 @@ import { MatIconModule } from '@angular/material/icon'
 import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
 import { CommonModule } from '@angular/common'
 import { TranslateModule } from '@ngx-translate/core'
+import { ButtonComponent } from '../button/button.component'
 
 export type AutocompleteItem = unknown
 
@@ -52,6 +53,7 @@ export type AutocompleteItem = unknown
     CommonModule,
     TranslateModule,
     ReactiveFormsModule,
+    ButtonComponent,
   ],
 })
 export class AutocompleteComponent
@@ -61,9 +63,11 @@ export class AutocompleteComponent
   @Input() action: (value: string) => Observable<AutocompleteItem[]>
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
+  @Input() preventCompleteOnSelection = false
   @Input() autoFocus = false
   @Input() minCharacterCount? = 3
-  @Input() allowSubmit = true
+  // this will show a submit button next to the input; if false, a search icon will appear on the left
+  @Input() allowSubmit = false
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
@@ -206,13 +210,24 @@ export class AutocompleteComponent
     this.inputSubmitted.emit(this.inputRef.nativeElement.value)
   }
 
+  /**
+   * This function is triggered when an item is selected in the list of displayed items.
+   * If preventCompleteOnSelection is true then the input will be left as entered by the user.
+   * If preventCompleteOnSelection is false (by default) then the input will be completed with the item selected by the user.
+   * If clearOnSelection is true then the input will be cleared upon selection.
+   * @param event
+   */
   handleSelection(event: MatAutocompleteSelectedEvent) {
     this.cancelEnter = true
     this.itemSelected.emit(event.option.value)
-    if (this.clearOnSelection) {
-      this.lastInputValue$.pipe(first()).subscribe((any) => {
-        this.inputRef.nativeElement.value = any
+    if (this.preventCompleteOnSelection) {
+      this.lastInputValue$.pipe(first()).subscribe((lastInputValue) => {
+        this.inputRef.nativeElement.value = lastInputValue
       })
+      return
+    }
+    if (this.clearOnSelection) {
+      this.inputRef.nativeElement.value = ''
     }
   }
 }

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

@@ -8,11 +8,19 @@
 >
   <span><ng-content></ng-content></span>
   <gn-ui-button
-    class="material-symbols-outlined cursor-pointer text-xs"
+    type="light"
     *ngIf="removable"
     (buttonClick)="removeBadge()"
-    extraClass="p-1 bg-transparent border-0 border-transparent "
+    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: white;
+    "
   >
-    close
+    <mat-icon class="material-symbols-outlined leading-[1.1]">close</mat-icon>
   </gn-ui-button>
 </div>

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

@@ -7,6 +7,7 @@ import {
   Output,
 } from '@angular/core'
 import { ButtonComponent } from '../button/button.component'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-badge',
@@ -14,7 +15,7 @@ import { ButtonComponent } from '../button/button.component'
   styleUrls: ['./badge.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ButtonComponent],
+  imports: [CommonModule, ButtonComponent, MatIconModule],
 })
 export class BadgeComponent {
   @Input() clickable? = false

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

@@ -18,7 +18,14 @@ export class ButtonComponent {
   private btnClass = 'gn-ui-btn-default'
 
   @Input() set type(
-    value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'
+    value:
+      | 'primary'
+      | 'secondary'
+      | 'default'
+      | 'outline'
+      | 'light'
+      | 'gray'
+      | 'black'
   ) {
     // btn-classes are written in full to be picked up by tailwind
     switch (value) {
@@ -34,6 +41,13 @@ export class ButtonComponent {
       case 'light':
         this.btnClass = 'gn-ui-btn-light'
         break
+      case 'gray':
+        this.btnClass = 'gn-ui-btn-gray'
+        break
+      case 'black':
+        this.btnClass = 'gn-ui-btn-black'
+        break
+      case 'default':
       default:
         this.btnClass = 'gn-ui-btn-default'
         break

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

@@ -1,3 +1,8 @@
-mat-datepicker-toggle {
-  @apply text-primary;
+:host {
+  --gn-ui-button-rounded: 8px;
+  --gn-ui-button-width: 32px;
+  --gn-ui-button-padding: 0;
+
+  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6em) - 6px);
+  --text-padding: calc(var(--side-padding) + 40px);
 }

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

@@ -1,12 +1,20 @@
-<div
-  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
->
+<span class="w-full inline-block relative">
   <input
-    class="pl-3"
+    class="gn-ui-text-input pr-[var(--text-padding)]"
     [matDatepicker]="picker"
     [value]="date"
     (dateChange)="dateChange.emit($event.value)"
   />
-  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-</div>
+  <gn-ui-button
+    type="light"
+    class="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10"
+    (buttonClick)="picker.open()"
+    data-cy="date-picker-button"
+    extraClass="h-full"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"
+      >calendar_today</mat-icon
+    >
+  </gn-ui-button>
+</span>
 <mat-datepicker #picker></mat-datepicker>

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

@@ -8,6 +8,7 @@ import {
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-date-picker',
@@ -15,7 +16,12 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./date-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
+  imports: [
+    MatIconModule,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    ButtonComponent,
+  ],
 })
 export class DatePickerComponent {
   @Input() date: Date

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

@@ -1,3 +1,8 @@
-mat-datepicker-toggle {
-  @apply text-primary;
+:host {
+  --gn-ui-button-rounded: 8px;
+  --gn-ui-button-width: 32px;
+  --gn-ui-button-padding: 0;
+
+  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6em) - 6px);
+  --text-padding: calc(var(--side-padding) + 40px);
 }

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

@@ -1,24 +1,29 @@
-<div
-  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
->
-  <div class="pl-3 flex justify-center">
-    <mat-date-range-input [rangePicker]="picker" class="w-full">
-      <input
-        matStartDate
-        placeholder="Start date"
-        [value]="startDate"
-        (dateInput)="startDateChange.emit($event.value)"
-      />
-      <input
-        matEndDate
-        placeholder="End date"
-        [value]="endDate"
-        (dateInput)="endDateChange.emit($event.value)"
-      />
-    </mat-date-range-input>
-  </div>
-  <mat-datepicker-toggle matSuffix [for]="picker">
-    <mat-icon>calendar_today</mat-icon>
-  </mat-datepicker-toggle>
-</div>
+<span class="w-full inline-block relative">
+  <mat-date-range-input [rangePicker]="picker" class="gn-ui-text-input">
+    <input
+      matStartDate
+      placeholder="Start date"
+      [value]="startDate"
+      (dateInput)="startDateChange.emit($event.value)"
+    />
+    <input
+      matEndDate
+      placeholder="End date"
+      [value]="endDate"
+      (dateInput)="endDateChange.emit($event.value)"
+    />
+  </mat-date-range-input>
+
+  <gn-ui-button
+    type="light"
+    class="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10"
+    (buttonClick)="picker.open()"
+    extraClass="h-full"
+    data-cy="date-picker-button"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"
+      >date_range</mat-icon
+    >
+  </gn-ui-button>
+</span>
 <mat-date-range-picker #picker></mat-date-range-picker>

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

@@ -8,6 +8,7 @@ import {
 import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-date-range-picker',
@@ -15,7 +16,12 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./date-range-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
+  imports: [
+    MatIconModule,
+    MatNativeDateModule,
+    MatDatepickerModule,
+    ButtonComponent,
+  ],
 })
 export class DateRangePickerComponent {
   @Input() startDate: Date

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

@@ -1,48 +1,62 @@
 import {
+  AfterViewInit,
   Directive,
   ElementRef,
-  Renderer2,
-  AfterViewInit,
   EventEmitter,
-  Output,
   Input,
+  OnChanges,
+  Output,
+  Renderer2,
 } from '@angular/core'
 
 @Directive({
   selector: '[gnUiEditableLabel]',
   standalone: true,
 })
-export class EditableLabelDirective implements AfterViewInit {
+export class EditableLabelDirective implements OnChanges, AfterViewInit {
+  @Input() gnUiEditableLabel?: string
   @Output() editableLabelChanged = new EventEmitter<string>()
-  @Input() gnUiEditableLabel?: boolean
+
+  appendedInput: HTMLInputElement
 
   constructor(private el: ElementRef, private renderer: Renderer2) {}
 
+  ngOnChanges() {
+    if (this.appendedInput) {
+      this.renderer.setProperty(
+        this.appendedInput,
+        'value',
+        this.gnUiEditableLabel
+      )
+    }
+  }
+
   ngAfterViewInit() {
-    if (this.gnUiEditableLabel !== false) {
-      const appendedInput = this.renderer.createElement('input')
-
-      this.renderer.setStyle(appendedInput, 'background', 'inherit')
-      this.renderer.setStyle(appendedInput, 'color', 'inherit')
-      this.renderer.setStyle(appendedInput, 'font', 'inherit')
-      this.renderer.setStyle(appendedInput, 'border', 'inherit')
-      this.renderer.setStyle(appendedInput, 'width', '100%')
-      this.renderer.setStyle(appendedInput, 'padding', 'inherit')
-      this.renderer.setStyle(appendedInput, 'margin', '0')
-      this.renderer.setStyle(appendedInput, 'height', 'inherit')
-      this.renderer.setStyle(appendedInput, 'line-height', 'inherit')
-      this.renderer.setStyle(appendedInput, 'text-decoration', 'inherit')
-
-      const hostContent = this.el.nativeElement.textContent || ''
-      const formattedContent = hostContent.replace(/\s+/g, ' ').trim()
-      this.renderer.setProperty(appendedInput, 'value', formattedContent)
-      this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '')
-
-      this.renderer.listen(appendedInput, 'input', (event) => {
+    if (this.gnUiEditableLabel !== undefined) {
+      this.appendedInput = this.renderer.createElement('input')
+
+      this.renderer.setStyle(this.appendedInput, 'background', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'color', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'font', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'border', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'width', '100%')
+      this.renderer.setStyle(this.appendedInput, 'padding', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'margin', '0')
+      this.renderer.setStyle(this.appendedInput, 'height', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'line-height', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'text-decoration', 'inherit')
+
+      this.renderer.setProperty(
+        this.appendedInput,
+        'value',
+        this.gnUiEditableLabel
+      )
+
+      this.renderer.listen(this.appendedInput, 'input', (event) => {
         this.editableLabelChanged.emit(event.target.value)
       })
 
-      this.renderer.appendChild(this.el.nativeElement, appendedInput)
+      this.renderer.appendChild(this.el.nativeElement, this.appendedInput)
     }
   }
 }

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

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

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

@@ -0,0 +1,89 @@
+<div class="w-full flex flex-col gap-[16px]">
+  <label
+    gnUiFilesDrop
+    class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100"
+    [ngClass]="{
+      'border-primary-lighter bg-primary-white': dragFilesOver,
+      'border-gray-300': !dragFilesOver,
+      'cursor-pointer hover:border-gray-500': !isUploadInProgress
+    }"
+    [attr.tabindex]="isUploadInProgress ? null : 0"
+    (dragFilesOver)="handleDragFilesOver($event)"
+    (dropFiles)="handleDropFiles($event)"
+    (keydown.enter)="fileInput.click()"
+  >
+    <div
+      class="w-14 h-14 rounded-md bg-gray-50 grid"
+      *ngIf="!isUploadInProgress"
+    >
+      <mat-icon
+        *ngIf="!dragFilesOver"
+        class="material-symbols-outlined place-self-center text-primary"
+        >cloud_upload</mat-icon
+      >
+      <mat-icon
+        *ngIf="dragFilesOver"
+        class="material-symbols-outlined place-self-center text-primary"
+        >add_box</mat-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>
+      </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>
+    <div class="flex flex-col items-center gap-1">
+      <p class="font-medium">
+        {{ getPrimaryText() | translate: { sizeMB: maxSizeMB.toFixed(0) } }}
+      </p>
+      <p
+        class="text-sm"
+        [class]="
+          isUploadInProgress
+            ? 'font-bold text-primary cursor-pointer'
+            : 'font-medium text-gray-500'
+        "
+        (click)="handleSecondaryTextClick($event)"
+      >
+        {{ getSecondaryText() | translate }}
+      </p>
+    </div>
+    <p class="w-full flex flex-row items-center justify-stretch gap-[16px]">
+      <span class="border-b border-gray-300 grow"></span>
+      <span class="text-sm font-medium text-gray-500 or-input-url" translate>
+        input.file.orInputUrl</span
+      >
+      <span class="border-b border-gray-300 grow"></span>
+    </p>
+    <input
+      #fileInput
+      type="file"
+      class="hidden"
+      (change)="handleFileInput($event)"
+      [disabled]="isUploadInProgress"
+    />
+
+    <gn-ui-url-input
+      class="w-full"
+      [disabled]="isUploadInProgress"
+      (valueChange)="handleUrlChange($event)"
+    ></gn-ui-url-input>
+  </label>
+</div>