geonetwork-ui 2.4.0-dev.ac57b75b → 2.4.0-dev.c2a3cdd1

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>

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

@@ -0,0 +1,92 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { ButtonComponent } from '../button/button.component'
+import { FilesDropDirective } from '../files-drop/files-drop.directive'
+import { TranslateModule } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { UrlInputComponent } from '../url-input/url-input.component'
+
+@Component({
+  selector: 'gn-ui-file-input',
+  templateUrl: './file-input.component.html',
+  styleUrls: ['./file-input.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    MatIconModule,
+    FilesDropDirective,
+    MatProgressSpinnerModule,
+    TranslateModule,
+    UrlInputComponent,
+  ],
+})
+export class FileInputComponent {
+  @Input() maxSizeMB: number
+  @Input() uploadProgress?: number
+  @Output() fileChange: EventEmitter<File> = new EventEmitter()
+  @Output() urlChange: EventEmitter<string> = new EventEmitter()
+  @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
+
+  dragFilesOver = false
+
+  get isUploadInProgress() {
+    return this.uploadProgress !== undefined
+  }
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  getPrimaryText() {
+    if (this.uploadProgress) {
+      return marker('input.file.uploadProgressLabel')
+    }
+    return marker('input.file.selectFileLabel')
+  }
+
+  getSecondaryText() {
+    if (this.uploadProgress) {
+      return marker('input.file.uploadProgressCancel')
+    }
+    return marker('input.file.dropFileLabel')
+  }
+
+  handleDragFilesOver(dragFilesOver: boolean) {
+    this.dragFilesOver = dragFilesOver
+    this.cd.markForCheck()
+  }
+
+  handleDropFiles(files: File[]) {
+    if (files.length > 0) {
+      this.fileChange.emit(files[0])
+    }
+  }
+
+  handleFileInput(event: Event) {
+    this.handleDropFiles(Array.from((event.target as HTMLInputElement).files))
+  }
+
+  handleUrlChange(url: string) {
+    this.urlChange.emit(url)
+  }
+
+  handleSecondaryTextClick(event: Event) {
+    if (this.uploadProgress) {
+      this.handleCancel()
+      event.preventDefault()
+    }
+  }
+
+  handleCancel() {
+    this.uploadCancel.emit()
+  }
+}

package/src/libs/ui/inputs/src/lib/image-input/image-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/image-input/image-input.component.html

@@ -5,42 +5,42 @@
   <div class="w-full h-full flex flex-col gap-2">
     <div class="flex-1 group relative">
       <img
-        class="w-full h-full object-cover border-2 border-gray-300 rounded-lg"
+        class="w-full object-cover border-2 border-gray-300 rounded-lg h-[172px]"
         [alt]="altText"
         loading="lazy"
         [src]="previewUrl"
       />
       <gn-ui-button
-        [extraClass]="
-          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'
-        "
+        type="outline"
+        style="--gn-ui-button-height: 40px; --gn-ui-button-width: 40px"
+        extraClass="absolute right-2 bottom-2 invisible group-hover:visible bg-background"
         (buttonClick)="handleDelete()"
       >
         <mat-icon class="material-symbols-outlined">delete</mat-icon>
       </gn-ui-button>
     </div>
-    <input
+    <gn-ui-text-input
       *ngIf="showAltTextInput"
-      type="text"
-      class="py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium"
       [placeholder]="'input.image.altTextPlaceholder' | translate"
-      [value]="altText"
-      (change)="handleAltTextChange($event)"
-    />
-    <div class="flex flex-row gap-2">
-      <gn-ui-button
-        [extraClass]="'bg-gray-200 font-bold'"
-        (buttonClick)="handleDelete()"
-      >
-        <mat-icon class="material-symbols-outlined me-1">delete</mat-icon>
+      [value]="altText ?? ''"
+      (valueChange)="handleAltTextChange($event)"
+      extraClass="gn-ui-editor-textarea"
+    ></gn-ui-text-input>
+    <div class="flex flex-row gap-2 mt-2">
+      <gn-ui-button type="gray" (buttonClick)="handleDelete()">
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >delete</mat-icon
+        >
         {{ 'input.image.delete' | translate }}
       </gn-ui-button>
       <gn-ui-button
         *ngIf="!showAltTextInput"
-        [extraClass]="'bg-gray-200 font-bold'"
+        type="gray"
         (buttonClick)="toggleAltTextInput()"
       >
-        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >add</mat-icon
+        >
         {{ 'input.image.displayAltTextInput' | translate }}
       </gn-ui-button>
     </div>
@@ -51,96 +51,104 @@
   <div class="w-full h-full flex flex-col gap-2">
     <label
       gnUiFilesDrop
-      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4 hover:cursor-pointer"
+      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 && !uploadError && !showUrlInput
+      }"
+      [attr.tabindex]="
+        isUploadInProgress || uploadError || showUrlInput ? null : 0
+      "
+      (keydown.enter)="fileInput.click()"
       (dragFilesOver)="handleDragFilesOver($event)"
       (dropFiles)="handleDropFiles($event)"
     >
-      <div class="w-14 h-14 rounded-md bg-gray-200 grid">
+      <div
+        class="w-14 h-14 rounded-md bg-gray-50 grid"
+        *ngIf="!isUploadInProgress && !uploadError"
+      >
         <mat-icon
-          *ngIf="!dragFilesOver && !uploadProgress && !uploadError"
-          class="material-symbols-outlined place-self-center text-blue-500"
+          *ngIf="!dragFilesOver"
+          class="material-symbols-outlined place-self-center text-primary"
           >image</mat-icon
         >
         <mat-icon
-          *ngIf="dragFilesOver && !uploadProgress && !uploadError"
-          class="material-symbols-outlined place-self-center text-blue-500"
+          *ngIf="dragFilesOver"
+          class="material-symbols-outlined place-self-center text-primary"
           >add_box</mat-icon
         >
-        <div *ngIf="uploadProgress">
+      </div>
+
+      <div
+        *ngIf="isUploadInProgress && !uploadError"
+        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'"
+            mode="determinate"
             [value]="uploadProgress"
           ></mat-progress-spinner>
-          <span
-            class="text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]"
-          >
-            {{ uploadProgress }}%
-          </span>
         </div>
+        <span class="text-sm text-main font-bold">{{ uploadProgress }}%</span>
+      </div>
+
+      <div class="w-14 h-14 rounded-md bg-gray-50 grid" *ngIf="uploadError">
         <mat-icon
-          *ngIf="uploadError"
           class="material-symbols-outlined place-self-center text-rose-500"
           >broken_image</mat-icon
         >
       </div>
+
       <div class="flex flex-col items-center gap-1">
         <p class="font-medium">{{ getPrimaryText() | translate }}</p>
         <p
           class="text-sm"
           [class]="
-            uploadProgress || uploadError
+            isUploadInProgress || uploadError
               ? 'font-bold text-blue-500 cursor-pointer'
               : 'font-medium text-gray-500'
           "
-          (click)="handleSecondaryTextClick()"
+          (click)="handleSecondaryTextClick($event)"
         >
           {{ getSecondaryText() | translate }}
         </p>
       </div>
       <input
+        #fileInput
         type="file"
         class="hidden"
         (change)="handleFileInput($event)"
-        [disabled]="showUrlInput || uploadProgress || uploadError"
+        [disabled]="showUrlInput || isUploadInProgress || uploadError"
       />
     </label>
-    <div *ngIf="!showUrlInput" class="flex-none">
-      <gn-ui-button
-        [extraClass]="'bg-gray-200 font-bold'"
-        (buttonClick)="displayUrlInput()"
-      >
-        <mat-icon class="material-symbols-outlined me-1">link</mat-icon>
+
+    <div *ngIf="!showUrlInput" class="flex-none mt-2">
+      <gn-ui-button (buttonClick)="displayUrlInput()" type="gray">
+        <mat-icon class="material-symbols-outlined me-1 text-primary"
+          >link</mat-icon
+        >
         {{ 'input.image.displayUrlInput' | translate }}
       </gn-ui-button>
     </div>
-    <div *ngIf="showUrlInput" class="flex-none flex flex-col gap-2">
-      <div class="h-2"></div>
-      <div class="flex gap-2 items-center">
-        <div class="flex-1 flex rounded-lg">
-          <span
-            class="material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300"
-            >link</span
-          >
-          <input
-            type="text"
-            class="py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium"
-            placeholder="https://exemple.com/image.jpg"
-            (change)="handleUrlChange($event)"
-          />
-          <gn-ui-button
-            class="px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white"
-            [extraClass]="
-              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'
-            "
-            [disabled]="!urlInputValue || downloadError"
-            (buttonClick)="downloadUrl()"
-          >
-            <mat-icon class="material-symbols-outlined">arrow_upward</mat-icon>
-          </gn-ui-button>
-        </div>
-      </div>
-    </div>
+
+    <gn-ui-url-input
+      *ngIf="showUrlInput"
+      class="mt-3.5"
+      (valueChange)="downloadUrl($event)"
+      [disabled]="isUploadInProgress"
+    >
+    </gn-ui-url-input>
   </div>
 </ng-template>

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

@@ -16,7 +16,8 @@ import { ButtonComponent } from '../button/button.component'
 import { FilesDropDirective } from '../files-drop/files-drop.directive'
 import { TranslateModule } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import { UrlInputComponent } from '../url-input/url-input.component'
+import { TextInputComponent } from '../text-input/text-input.component'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -31,13 +32,13 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms'
     FilesDropDirective,
     MatProgressSpinnerModule,
     TranslateModule,
-    ReactiveFormsModule,
+    UrlInputComponent,
+    TextInputComponent,
   ],
 })
 export class ImageInputComponent {
-  @Input() formControl!: FormControl
   @Input() maxSizeMB: number
-  @Input() previewUrl?: URL
+  @Input() previewUrl?: string
   @Input() altText?: string
   @Input() uploadProgress?: number
   @Input() uploadError?: boolean
@@ -52,10 +53,13 @@ export class ImageInputComponent {
   downloadError = false
   showAltTextInput = false
 
-  urlInputValue?: string
   lastUploadType?: 'file' | 'url'
   lastUploadContent?: string | File
 
+  get isUploadInProgress() {
+    return this.uploadProgress !== undefined
+  }
+
   constructor(private http: HttpClient, private cd: ChangeDetectorRef) {}
 
   getPrimaryText() {
@@ -107,34 +111,29 @@ export class ImageInputComponent {
     this.showUrlInput = true
   }
 
-  handleUrlChange(event: Event) {
+  async downloadUrl(url: string) {
     this.downloadError = false
-    this.urlInputValue = (event.target as HTMLInputElement).value
-  }
-
-  async downloadUrl() {
-    const name = this.urlInputValue.split('/').pop()
+    const name = url.split('/').pop()
 
     try {
       const response = await firstValueFrom(
-        this.http.head(this.urlInputValue, { observe: 'response' })
+        this.http.head(url, { observe: 'response' })
       )
       if (
         response.headers.get('content-type')?.startsWith('image/') &&
         parseInt(response.headers.get('content-length')) <
           megabytesToBytes(this.maxSizeMB)
       ) {
-        this.http.get(this.urlInputValue, { responseType: 'blob' }).subscribe({
+        this.http.get(url, { responseType: 'blob' }).subscribe({
           next: (blob) => {
             this.cd.markForCheck()
             const file = new File([blob], name)
             this.fileChange.emit(file)
           },
-          error: (error) => {
-            console.error(error)
+          error: () => {
             this.downloadError = true
             this.cd.markForCheck()
-            this.urlChange.emit(this.urlInputValue)
+            this.urlChange.emit(url)
           },
         })
       }
@@ -145,11 +144,12 @@ export class ImageInputComponent {
     }
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadError) {
       this.handleRetry()
     } else if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 
@@ -169,7 +169,6 @@ export class ImageInputComponent {
   }
 
   handleDelete() {
-    this.formControl.markAsDirty()
     this.delete.emit()
   }
 
@@ -177,9 +176,8 @@ export class ImageInputComponent {
     this.showAltTextInput = !this.showAltTextInput
   }
 
-  handleAltTextChange(event: Event) {
-    const input = event.target as HTMLInputElement
-    this.altTextChange.emit(input.value)
+  handleAltTextChange(altText: string) {
+    this.altTextChange.emit(altText)
   }
 
   private filterTypeImage(files: File[]) {

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css

@@ -11,15 +11,16 @@
 }
 
 .mat-button-toggle-appearance-standard {
-  color: var(--color-main);
+  color: black;
   background-color: var(--color-gray-200);
   border-radius: 4px;
   border-left: none;
+  font-family: var(--font-family-main);
 }
 
 .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
-  background-color: var(--color-main);
-  color: var(--color-primary-white);
+  background-color: black;
+  color: var(--color-background);
 }
 
 button.mat-button-toggle-button.mat-focus-indicator.mat-button-toggle-label-content {

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

@@ -6,7 +6,6 @@
   <mat-button-toggle
     *ngFor="let option of options"
     [aria-label]="option.label"
-    [value]="option.value"
     [checked]="option.checked"
     (change)="onChange(option)"
     [class]="extraClasses"