geonetwork-ui 2.2.0 → 2.3.0-dev.139106e0

package/src/libs/feature/notifications/src/lib/notifications-container/notifications-container.component.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { NotificationsService } from '../notifications.service'
+import { NotificationComponent } from '../../../../../../libs/ui/elements/src'
+import {
+  animate,
+  keyframes,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations'
+
+@Component({
+  selector: 'gn-ui-notifications-container',
+  standalone: true,
+  imports: [CommonModule, NotificationComponent],
+  templateUrl: './notifications-container.component.html',
+  styleUrls: ['./notifications-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('enterExit', [
+      transition(':enter', [
+        animate(
+          '150ms',
+          keyframes([
+            style({ transform: 'scale(1)', opacity: 0 }),
+            style({ transform: 'scale(1.03)', opacity: 0.5 }),
+            style({ transform: 'scale(1)', opacity: 1 }),
+          ])
+        ),
+      ]),
+      transition(':leave', [
+        animate('200ms', style({ transform: 'translateX(50px)', opacity: 0 })),
+      ]),
+    ]),
+  ],
+})
+export class NotificationsContainerComponent {
+  constructor(protected notificationsService: NotificationsService) {}
+
+  trackById(index: number, notification: { id: number }) {
+    return notification.id
+  }
+}

package/src/libs/feature/notifications/src/lib/notifications.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core'
+import { NotificationContent } from './notification.model'
+import { BehaviorSubject } from 'rxjs'
+
+type NotificationWithIdentity = NotificationContent & { id: number }
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationsService {
+  notifications$ = new BehaviorSubject<NotificationWithIdentity[]>([])
+
+  showNotification(content: NotificationContent, timeoutMs?: number) {
+    const id = Math.floor(Math.random() * 1000000)
+    this.notifications$.next([...this.notifications$.value, { ...content, id }])
+    if (typeof timeoutMs === 'undefined') return
+    setTimeout(() => {
+      this.removeNotificationById(id)
+    }, timeoutMs)
+  }
+
+  removeNotificationById(id: number) {
+    this.notifications$.next(
+      this.notifications$.value.filter((n) => n.id !== id)
+    )
+  }
+}

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -188,7 +188,11 @@ export class MapViewComponent implements OnInit, OnDestroy {
       link.type === 'service' &&
       link.accessServiceProtocol === 'wmts'
     ) {
-      return this.mapUtils.getWmtsLayerFromCapabilities(link)
+      return of({
+        url: link.url.toString(),
+        type: MapContextLayerTypeEnum.WMTS,
+        name: link.name,
+      })
     } else if (
       (link.type === 'service' &&
         (link.accessServiceProtocol === 'wfs' ||

package/src/libs/feature/search/src/lib/results-table/results-table.component.html

@@ -50,20 +50,20 @@
         [title]="formats.join(', ')"
       >
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[0])"
           *ngIf="formats[0]"
         >
           {{ formats[0] }}
         </span>
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[1])"
           *ngIf="formats[1]"
         >
           {{ formats[1] }}
         </span>
-        <div class="flex-shrink-0" *ngIf="formats.slice(2).length > 0">
+        <div class="shrink-0" *ngIf="formats.slice(2).length > 0">
           <span>+{{ formats.slice(2).length }}</span>
         </div>
       </div>

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -4,7 +4,7 @@
     [title]="organisation.name"
   >
     <div
-      class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36"
+      class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
@@ -13,20 +13,20 @@
       >
       </gn-ui-thumbnail>
     </div>
-    <div class="px-3 pb-2 capitalize flex flex-col flex-grow overflow-hidden">
+    <div class="px-3 pb-2 capitalize flex flex-col grow overflow-hidden">
       <span
-        class="flex-shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors"
+        class="shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors"
         data-cy="organizationName"
       >
         {{ organisation.name }}</span
       >
       <p
-        class="abstract mt-4 mb-5 sm:mb-2 sm:mt-0 flex-grow flex-shrink-1 overflow-hidden"
+        class="abstract mt-4 mb-5 sm:mb-2 sm:mt-0 grow shrink-1 overflow-hidden"
         data-cy="organizationDesc"
       >
         {{ organisation.description }}
       </p>
-      <div class="flex-shrink-0 text-primary opacity-50 flex leading-6">
+      <div class="shrink-0 text-primary opacity-50 flex leading-6">
         <mat-icon class="material-symbols-outlined text-primary opacity-50 mr-1"
           >folder_open
         </mat-icon>

package/src/libs/ui/elements/src/index.ts

@@ -1,24 +1,24 @@
-export * from './lib/ui-elements.module'
-export * from './lib/metadata-info/metadata-info.component'
-export * from './lib/metadata-contact/metadata-contact.component'
-export * from './lib/metadata-catalog/metadata-catalog.component'
-export * from './lib/metadata-quality/metadata-quality.component'
-export * from './lib/metadata-quality-item/metadata-quality-item.component'
-export * from './lib/search-results-error/search-results-error.component'
-export * from './lib/thumbnail/thumbnail.component'
-export * from './lib/content-ghost/content-ghost.component'
-export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/api-card/api-card.component'
 export * from './lib/avatar/avatar.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
+export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
+export * from './lib/markdown-editor/markdown-editor.component'
+export * from './lib/markdown-parser/markdown-parser.component'
+export * from './lib/max-lines/max-lines.component'
+export * from './lib/metadata-catalog/metadata-catalog.component'
+export * from './lib/metadata-contact/metadata-contact.component'
+export * from './lib/metadata-info/metadata-info.component'
+export * from './lib/metadata-quality-item/metadata-quality-item.component'
+export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
+export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/search-results-error/search-results-error.component'
+export * from './lib/thumbnail/thumbnail.component'
+export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
-export * from './lib/max-lines/max-lines.component'
-export * from './lib/record-api-form/record-api-form.component'
-export * from './lib/markdown-parser/markdown-parser.component'
-export * from './lib/image-overlay-preview/image-overlay-preview.component'
+export * from './lib/notification/notification.component'

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html

@@ -6,7 +6,7 @@
     *ngIf="imageUrl"
     [showContent]="imageUrl !== undefined"
     data-cy="record-thumbnail"
-    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
+    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.css

@@ -1,5 +0,0 @@
-.icon-small {
-  font-size: 16px;
-  height: 16px;
-  width: 16px;
-}

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html

@@ -1,25 +1,4 @@
 <div class="h-full flex flex-col">
-  <div class="flex-none w-full flex flex-row items-center">
-    <p class="flex-none font-bold">{{ label }}</p>
-    <div class="flex-1 flex justify-end items-center">
-      <gn-ui-button
-        [extraClass]="getButtonExtraClass()"
-        (buttonClick)="togglePreview()"
-      >
-        <span class="material-symbols-outlined mr-1 icon-small">{{
-          preview ? 'visibility' : 'visibility_off'
-        }}</span>
-        {{ preview ? 'WYSIWYG' : 'Markdown' }}
-      </gn-ui-button>
-      <span
-        class="material-symbols-outlined m-2 icon-small"
-        [matTooltip]="tooltip"
-        matTooltipPosition="above"
-      >
-        help
-      </span>
-    </div>
-  </div>
   <p class="flex-none mb-2 font-medium text-sm text-gray-900">
     {{ helperText }}
   </p>

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts

@@ -31,26 +31,13 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   ],
 })
 export class MarkdownEditorComponent {
-  @Input() label: string
-  @Input() tooltip?: string
+  @Input() preview = false
   @Input() helperText?: string
   @Input() placeholder: string
   @Input() textContent: string
   @Output() textContentChanged: EventEmitter<string> =
     new EventEmitter<string>()
 
-  preview = false
-
-  getButtonExtraClass() {
-    return `${
-      this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'
-    } rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`
-  }
-
-  togglePreview() {
-    this.preview = !this.preview
-  }
-
   textContentChangedHandler(textContent: string) {
     this.textContent = textContent
     this.textContentChanged.emit(this.textContent)

package/src/libs/ui/elements/src/lib/notification/notification.component.html

@@ -0,0 +1,52 @@
+<div
+  class="p-[16px] flex flex-row gap-[16px] items-start border border-gray-200 shadow-md rounded bg-background"
+>
+  <div
+    role="alert"
+    class="rounded-full text-white p-[6px] w-[32px] h-[32px] flex shrink-0"
+    [ngClass]="{
+      'bg-red-500': type === 'error',
+      'bg-yellow-500': type === 'warning',
+      'bg-green-500': type === 'success',
+      'bg-blue-500': type === 'info'
+    }"
+    [ngSwitch]="type"
+  >
+    <mat-icon class="material-symbols-outlined !w-[18px] !h-[18px] text-[20px]">
+      <ng-container *ngSwitchCase="'success'">check_circle</ng-container>
+      <ng-container *ngSwitchCase="'info'">info</ng-container>
+      <ng-container *ngSwitchCase="'warning'">warning</ng-container>
+      <ng-container *ngSwitchCase="'error'">error</ng-container>
+    </mat-icon>
+  </div>
+  <div
+    class="flex flex-col items-start gap-[4px] pt-[3px] grow shrink overflow-hidden"
+  >
+    <div class="font-bold text-[16px] text-gray-900">
+      {{ title }}
+    </div>
+    <div class="text-[14px] text-gray-800">
+      {{ text }}
+    </div>
+    <a
+      href
+      *ngIf="closeMessage"
+      class="text-[14px] gn-ui-link"
+      (click)="handleClose($event)"
+    >
+      {{ closeMessage }}
+    </a>
+  </div>
+  <gn-ui-button
+    type="light"
+    class="shrink-0"
+    (buttonClick)="handleClose()"
+    [style.--gn-ui-button-padding]="0"
+    [style.--gn-ui-button-width]="'21px'"
+    [style.--gn-ui-button-height]="'21px'"
+  >
+    <mat-icon class="material-symbols-outlined text-[22px] !w-[21px] !h-[21px]"
+      >close</mat-icon
+    >
+  </gn-ui-button>
+</div>

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

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-notification',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, ButtonComponent],
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationComponent {
+  @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info'
+  @Input() title: string
+  @Input() text: string
+  @Input() closeMessage?: string
+  @Output() notificationClose = new EventEmitter<void>()
+
+  handleClose(event?: Event) {
+    event?.preventDefault()
+    this.notificationClose.emit()
+  }
+}

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html

@@ -13,7 +13,7 @@
         </p>
       </button>
     </div>
-    <div class="flex flex-row flex-wrap justify-between flex-grow gap-5">
+    <div class="flex flex-row flex-wrap justify-between grow gap-5">
       <div class="flex flex-col gap-3">
         <p class="text-[14px]" translate>record.metadata.api.form.limit</p>
         <div class="flex flex-row items-center gap-2">

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -18,20 +19,21 @@ export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
   'thumbnail-placeholder'
 )
 
+type FitOptions = 'cover' | 'contain' | 'scale-down'
 type ThumbnailImageObject = {
   url: string
-  fit?: 'cover' | 'contain' | 'scale-down'
+  fit?: FitOptions
 }
 
 const DEFAULT_PLACEHOLDER =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH5gkNDCUFYjA1nwAAA1pJREFUeNrtnW2TmjAURh8CLlTdrmun///3tZ22+zLuYlehH7jsMGogwRiiec4MM44K6D3x3hAwAIQQQgghhJDYSM5cPwNQAMgBpACUg22GTg2gArAD8A9AKY+9CsgALAF8YRsGALwDeAWw9yGgALCKoKWP+WU8iwxjUsudLBj83sZciIiPSwhoWz7pJ5dUZFQXlEXOZ/DNeTBt3JnhBpc9aacGsOn0BuoIUk3b+5trGnEC4B7Ak4sUlInRU+wB/JbgVxG18KrTBc01EmYmcTFJQUVPy/9zTh/4BthLDOqeenB2DdBtZBN58LsSNpcUoEtTJWM/GIvMhQDde9j6h2OhXAjo6/2Q/lgkLgSQC0IBFEABZEKyiaQv5AAv7fSlS+lPVxRwOXTnEtoTPAs04yfRHGMoz8F/HOiaJfKeggLc78dmOHsVS33y9SUXsDuLlsg6FOAw/fhYhwI0pJ7WoQASpoC9p3UoQEPpaR0K0LCB3fB1e6KfAhxRweAKgQ5PsQxJ+CzCJYC/A7+EWt4TzVCE77GgEsBPHA/G7QBswcE4b+noVRZ2QxkCCqAAQgEUQCiAAggFUAChAAogFEABhAJcfT9FAdOxQuB/ML9lAfdo/qWYy2MK8EiO5mrrliUCvdIudAEzWWzQzWuxwjRnAK9WwAzAWhZTCe3l7cryNQrQBL/txZhKGGrlwc36ogIPfvdzfhuQsDDM80EVZXUFwe+mEJ2EOwBfLfYTTFFWVxL8Qwl3nedSye1jjhEyCjAPflfCWiScU1iDKMrqyoJ/KOFxRDf1sCg/xCxgTPC7EnIHn6GYsiirKw2+ayYryorBn7YoKwb/qCgntywg1OBPdqSsGPyTRXnp07gvPgD8AAl6KIICCAVQAAlLwOg5MSNi9NyqJgKqAHpQoZNZxs5KgG7SDN7AZzgWOxcCtprn5/wVfLb+uWXsrASUPXlvHbmETGKQjBVgMitVJTuaaQS2t/GoEMeE3onEor2jlK4RvwN4G1u9T4n6zp6PMTWAXzCYdCq12OCOhdeYZzT3mIErAW1Fr+HmNOAt82KSesYIAJoRzR2aIVumo+Ms8WwT/HOOZlM0Y+Zzxv2zp/gCTzfzPOyGtdfgp7LEcDvbvSxbWXg/HUIIIYQQQogx/wHLoX7NoCMFPwAAAABJRU5ErkJggg=='
 
-type FitOptions = 'cover' | 'contain' | 'scale-down'
-
 @Component({
   selector: 'gn-ui-thumbnail',
   templateUrl: './thumbnail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class ThumbnailComponent implements OnInit, OnChanges {
   @Input() thumbnailUrl: string | string[]

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -46,6 +46,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     FormsModule,
     NgOptimizedImage,
     MarkdownParserComponent,
+    ThumbnailComponent,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -61,7 +62,6 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     MetadataQualityItemComponent,
     SearchResultsErrorComponent,
     PaginationComponent,
-    ThumbnailComponent,
     AvatarComponent,
     UserPreviewComponent,
     GnUiLinkifyDirective,

package/src/libs/ui/inputs/src/index.ts

@@ -11,7 +11,6 @@ export * from './lib/button/button.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/check-toggle/check-toggle.component'
 export * from './lib/ui-inputs.module'
-export * from './lib/form-field'
 export * from './lib/copy-text-button/copy-text-button.component'
 export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
 export * from './lib/navigation-button/navigation-button.component'

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

@@ -15,7 +15,7 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
   standalone: true,
 })
 export class ButtonComponent {
-  private btnClass: string
+  private btnClass = 'gn-ui-btn-default'
 
   @Input() set type(
     value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'

package/src/libs/ui/inputs/src/lib/files-drop/files-drop.directive.ts

@@ -0,0 +1,45 @@
+import { Directive, HostListener, Output, EventEmitter } from '@angular/core'
+
+@Directive({
+  selector: '[gnUiFilesDrop]',
+  standalone: true,
+})
+export class FilesDropDirective {
+  @Output() dragFilesOver: EventEmitter<boolean> = new EventEmitter()
+  @Output() dropFiles: EventEmitter<File[]> = new EventEmitter()
+
+  dragEnterCounter = 0
+
+  @HostListener('dragenter', ['$event'])
+  _onDragEnter(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter++
+    this.dragFilesOver.emit(true)
+  }
+
+  @HostListener('dragover', ['$event'])
+  _onDragOver(event: DragEvent) {
+    event.preventDefault()
+  }
+
+  @HostListener('dragleave', ['$event'])
+  _onDragLeave(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = Math.max(0, this.dragEnterCounter - 1)
+    if (this.dragEnterCounter === 0) {
+      this.dragFilesOver.emit(false)
+    }
+  }
+
+  @HostListener('drop', ['$event'])
+  _onDrop(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = 0
+    this.dragFilesOver.emit(false)
+
+    const files = Array.from(event.dataTransfer.files)
+    if (files.length > 0) {
+      this.dropFiles.emit(files)
+    }
+  }
+}

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

@@ -0,0 +1,146 @@
+<ng-container *ngIf="previewUrl; then withImage; else withoutImage">
+</ng-container>
+
+<ng-template #withImage>
+  <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"
+        [alt]="altText"
+        loading="lazy"
+        [src]="previewUrl"
+      />
+      <gn-ui-button
+        [extraClass]="
+          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'
+        "
+        (buttonClick)="handleDelete()"
+      >
+        <mat-icon class="material-symbols-outlined">delete</mat-icon>
+      </gn-ui-button>
+    </div>
+    <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>
+        {{ 'input.image.delete' | translate }}
+      </gn-ui-button>
+      <gn-ui-button
+        *ngIf="!showAltTextInput"
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="toggleAltTextInput()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        {{ 'input.image.displayAltTextInput' | translate }}
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #withoutImage>
+  <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"
+      (dragFilesOver)="handleDragFilesOver($event)"
+      (dropFiles)="handleDropFiles($event)"
+    >
+      <div class="w-14 h-14 rounded-md bg-gray-200 grid">
+        <mat-icon
+          *ngIf="!dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >image</mat-icon
+        >
+        <mat-icon
+          *ngIf="dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >add_box</mat-icon
+        >
+        <div *ngIf="uploadProgress">
+          <mat-progress-spinner
+            class="place-self-center"
+            [diameter]="56"
+            [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>
+        <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
+              ? 'font-bold text-blue-500 cursor-pointer'
+              : 'font-medium text-gray-500'
+          "
+          (click)="handleSecondaryTextClick()"
+        >
+          {{ getSecondaryText() | translate }}
+        </p>
+      </div>
+      <input
+        type="file"
+        class="hidden"
+        (change)="handleFileInput($event)"
+        [disabled]="showUrlInput || uploadProgress || 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>
+        {{ '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>
+  </div>
+</ng-template>