geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.4e8752d34

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

@@ -6,13 +6,9 @@
     data-test="could-not-reach-api-error"
   >
     <div class="relative opacity-40">
-      <mat-icon class="material-symbols-outlined face">face</mat-icon>
-      <mat-icon class="material-symbols-outlined question-mark1"
-        >question_mark
-      </mat-icon>
-      <mat-icon class="material-symbols-outlined question-mark2"
-        >question_mark
-      </mat-icon>
+      <ng-icon name="matFace" class="face"></ng-icon>
+      <ng-icon name="matQuestionMark" class="question-mark1"></ng-icon>
+      <ng-icon name="matQuestionMark" class="question-mark2"></ng-icon>
     </div>
     <div translate>search.error.couldNotReachApi</div>
   </div>
@@ -21,23 +17,21 @@
     data-test="dataset-has-no-link-error"
   >
     <div class="relative opacity-40">
-      <mat-icon class="material-symbols-outlined face">computer</mat-icon>
+      <ng-icon name="matComputerOutline"></ng-icon>
     </div>
     <div translate>search.error.recordHasnolink</div>
   </div>
   <div *ngIf="type === types.RECEIVED_ERROR" data-test="received-error-error">
     <div class="relative opacity-40">
-      <mat-icon class="material-symbols-outlined face">mood_bad</mat-icon>
+      <ng-icon name="matMoodBad" class="face"></ng-icon>
     </div>
     <div translate>search.error.receivedError</div>
     <div *ngIf="error">{{ error }}</div>
   </div>
   <div *ngIf="type === types.ORGANIZATION_HAS_NO_DATASET">
     <div class="relative opacity-40">
-      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
-      <mat-icon class="material-symbols-outlined computer-question-mark"
-        >question_mark
-      </mat-icon>
+      <ng-icon name="matComputerOutline" class="computer"></ng-icon>
+      <ng-icon name="matQuestionMark" class="computer-question-mark"> </ng-icon>
     </div>
     <div translate>search.error.organizationHasNoDataset</div>
   </div>
@@ -46,10 +40,8 @@
     data-test="record-not-found-error"
   >
     <div class="relative opacity-40">
-      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
-      <mat-icon class="material-symbols-outlined computer-question-mark"
-        >question_mark
-      </mat-icon>
+      <ng-icon name="matComputerOutline" class="computer"></ng-icon>
+      <ng-icon name="matQuestionMark" class="computer-question-mark"> </ng-icon>
     </div>
     <div translate [translateParams]="{ id: recordId }">
       search.error.recordNotFound
@@ -61,10 +53,8 @@
     data-test="org-not-found-error"
   >
     <div class="relative opacity-40">
-      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
-      <mat-icon class="material-symbols-outlined computer-question-mark"
-        >question_mark
-      </mat-icon>
+      <ng-icon name="matComputerOutline" class="computer"></ng-icon>
+      <ng-icon name="matQuestionMark" class="computer-question-mark"> </ng-icon>
     </div>
     <div translate [translateParams]="{ id: recordId }">
       search.error.organizationNotFound

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

@@ -1,4 +1,13 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import {
+  matFace,
+  matMoodBad,
+  matQuestionMark,
+} from '@ng-icons/material-icons/baseline'
+import { matComputerOutline } from '@ng-icons/material-icons/outline'
+import { TranslateModule } from '@ngx-translate/core'
 
 export enum ErrorType {
   COULD_NOT_REACH_API,
@@ -14,6 +23,16 @@ export enum ErrorType {
   templateUrl: './error.component.html',
   styleUrls: ['./error.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, NgIcon, TranslateModule],
+  viewProviders: [
+    provideIcons({
+      matFace,
+      matQuestionMark,
+      matMoodBad,
+      matComputerOutline,
+    }),
+  ],
 })
 export class ErrorComponent {
   @Input() type!: ErrorType

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

@@ -0,0 +1,143 @@
+<ng-container *ngIf="previewUrl; then withImage; else withoutImage">
+</ng-container>
+
+<ng-template #withImage>
+  <div class="w-80 h-full flex flex-col gap-2">
+    <gn-ui-image-overlay-preview class="h-48" [imageUrl]="previewUrl">
+    </gn-ui-image-overlay-preview>
+    <gn-ui-text-input
+      *ngIf="showAltTextInput"
+      [placeholder]="'input.image.altTextPlaceholder' | translate"
+      [value]="altText ?? ''"
+      (valueChange)="handleAltTextChange($event)"
+      extraClass="gn-ui-editor-textarea"
+      [disabled]="true"
+    ></gn-ui-text-input>
+    <div class="flex flex-row gap-2 mt-2">
+      <gn-ui-button type="gray" (buttonClick)="handleDelete()">
+        <ng-icon class="me-1 text-primary" name="iconoirBin"></ng-icon>
+        {{ 'input.image.delete' | translate }}
+      </gn-ui-button>
+      <gn-ui-button
+        *ngIf="!showAltTextInput"
+        type="gray"
+        (buttonClick)="toggleAltTextInput()"
+      >
+        <ng-icon name="iconoirPlus" class="me-1 text-primary"></ng-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="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 && !disabled,
+        'cursor-not-allowed': disabled,
+      }"
+      [attr.tabindex]="
+        isUploadInProgress || uploadError || showUrlInput || disabled ? null : 0
+      "
+      (keydown.enter)="fileInput.click()"
+      (dragFilesOver)="handleDragFilesOver($event)"
+      (dropFiles)="handleDropFiles($event)"
+    >
+      <div
+        class="w-14 h-14 rounded-md bg-gray-50 grid"
+        *ngIf="!isUploadInProgress && !uploadError"
+      >
+        <ng-icon
+          *ngIf="!dragFilesOver"
+          class="place-self-center text-primary"
+          name="iconoirMediaImage"
+        ></ng-icon>
+        <ng-icon
+          *ngIf="dragFilesOver"
+          class="place-self-center text-primary"
+          name="iconoirFramePlusIn"
+        ></ng-icon>
+      </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"
+            [value]="uploadProgress"
+          ></mat-progress-spinner>
+        </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">
+        <ng-icon
+          name="iconoirMediaImageXmark"
+          class="place-self-center text-rose-500"
+        ></ng-icon>
+      </div>
+
+      <div class="flex flex-col items-center gap-1">
+        <p class="font-medium">{{ getPrimaryText() | translate }}</p>
+        <p
+          class="text-sm"
+          [class]="
+            isUploadInProgress || uploadError
+              ? 'font-bold text-blue-500 cursor-pointer'
+              : 'font-medium text-gray-500'
+          "
+          (click)="handleSecondaryTextClick($event)"
+        >
+          {{ getSecondaryText() | translate }}
+        </p>
+      </div>
+      <input
+        #fileInput
+        type="file"
+        class="hidden"
+        (change)="handleFileInput($event)"
+        [disabled]="
+          showUrlInput || isUploadInProgress || uploadError || disabled
+        "
+      />
+    </label>
+
+    <div *ngIf="!showUrlInput" class="flex-none mt-2">
+      <gn-ui-button
+        (buttonClick)="displayUrlInput()"
+        type="gray"
+        [disabled]="disabled"
+        [extraClass]="disabled && 'cursor-not-allowed'"
+      >
+        <ng-icon class="me-1 text-primary" name="iconoirLink"></ng-icon>
+        {{ 'input.image.displayUrlInput' | translate }}
+      </gn-ui-button>
+    </div>
+
+    <gn-ui-url-input
+      *ngIf="showUrlInput"
+      class="mt-3.5"
+      (uploadClick)="downloadUrl($event)"
+      [disabled]="isUploadInProgress || disabled"
+    >
+    </gn-ui-url-input>
+  </div>
+</ng-template>

package/src/libs/ui/{inputs → elements}/src/lib/image-input/image-input.component.ts

@@ -8,14 +8,31 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  ButtonComponent,
+  FilesDropDirective,
+  TextInputComponent,
+  UrlInputComponent,
+} from '../../../../../../libs/ui/inputs/src'
 import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
-import { firstValueFrom } from 'rxjs'
-import { ButtonComponent } from '../button/button.component'
-import { FilesDropDirective } from '../files-drop/files-drop.directive'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  iconoirBin,
+  iconoirFramePlusIn,
+  iconoirLink,
+  iconoirMediaImage,
+  iconoirMediaImageXmark,
+  iconoirPlus,
+} from '@ng-icons/iconoir'
 import { TranslateModule } from '@ngx-translate/core'
-import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { firstValueFrom } from 'rxjs'
+import { ImageOverlayPreviewComponent } from '../image-overlay-preview/image-overlay-preview.component'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -26,10 +43,26 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
   imports: [
     CommonModule,
     ButtonComponent,
-    MatIconModule,
     FilesDropDirective,
     MatProgressSpinnerModule,
     TranslateModule,
+    UrlInputComponent,
+    TextInputComponent,
+    NgIconComponent,
+    ImageOverlayPreviewComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirMediaImage,
+      iconoirFramePlusIn,
+      iconoirMediaImageXmark,
+      iconoirBin,
+      iconoirPlus,
+      iconoirLink,
+    }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
 })
 export class ImageInputComponent {
@@ -38,6 +71,7 @@ export class ImageInputComponent {
   @Input() altText?: string
   @Input() uploadProgress?: number
   @Input() uploadError?: boolean
+  @Input() disabled?: boolean = false
   @Output() fileChange: EventEmitter<File> = new EventEmitter()
   @Output() urlChange: EventEmitter<string> = new EventEmitter()
   @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
@@ -49,11 +83,17 @@ export class ImageInputComponent {
   downloadError = false
   showAltTextInput = false
 
-  urlInputValue?: string
   lastUploadType?: 'file' | 'url'
   lastUploadContent?: string | File
 
-  constructor(private http: HttpClient, private cd: ChangeDetectorRef) {}
+  get isUploadInProgress() {
+    return this.uploadProgress !== undefined
+  }
+
+  constructor(
+    private http: HttpClient,
+    private cd: ChangeDetectorRef
+  ) {}
 
   getPrimaryText() {
     if (this.uploadError) {
@@ -104,24 +144,20 @@ 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)
@@ -130,7 +166,7 @@ export class ImageInputComponent {
           error: () => {
             this.downloadError = true
             this.cd.markForCheck()
-            this.urlChange.emit(this.urlInputValue)
+            this.urlChange.emit(url)
           },
         })
       }
@@ -141,11 +177,12 @@ export class ImageInputComponent {
     }
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadError) {
       this.handleRetry()
     } else if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 
@@ -172,9 +209,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/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html

@@ -1,12 +1,11 @@
 <gn-ui-content-ghost
   [showContent]="imageUrl !== undefined"
-  ghostClass="h-48 mb-3"
+  ghostClass="h-full w-full"
 >
   <div
     *ngIf="imageUrl"
-    [showContent]="imageUrl !== undefined"
     data-cy="record-thumbnail"
-    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"
+    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-full w-full"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"
@@ -21,9 +20,7 @@
         [extraClass]="'!py-2 !px-0'"
         (buttonClick)="openLightbox(imageUrl)"
       >
-        <mat-icon class="material-symbols-outlined font-extralight"
-          >zoom_out_map</mat-icon
-        >
+        <ng-icon name="matZoomOutMap"></ng-icon>
       </gn-ui-button>
     </div>
   </div>

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

@@ -1,10 +1,25 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import * as basicLightbox from 'basiclightbox'
+import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
+import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-image-overlay-preview',
   templateUrl: './image-overlay-preview.component.html',
   styleUrls: ['./image-overlay-preview.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    ContentGhostComponent,
+    ThumbnailComponent,
+    ButtonComponent,
+    NgIcon,
+  ],
+  viewProviders: [provideIcons({ matZoomOutMap })],
 })
 export class ImageOverlayPreviewComponent {
   @Input() imageUrl: string

package/src/libs/ui/elements/src/lib/link-card/link-card.component.html

@@ -23,9 +23,7 @@
       </p>
     </div>
     <div>
-      <mat-icon class="material-symbols-outlined card-icon"
-        >open_in_new</mat-icon
-      >
+      <ng-icon class="card-icon" name="matOpenInNew"></ng-icon>
     </div>
   </ng-container>
   <ng-template #compactTpl>
@@ -35,9 +33,7 @@
       >
         {{ link.name || link.description }}
       </p>
-      <mat-icon class="material-symbols-outlined card-icon flex-shrink-0"
-        >open_in_new</mat-icon
-      >
+      <ng-icon class="card-icon flex-shrink-0" name="matOpenInNew"></ng-icon>
     </div>
   </ng-template>
 </a>

package/src/libs/ui/elements/src/lib/link-card/link-card.component.ts

@@ -1,7 +1,12 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { MatIconModule } from '@angular/material/icon'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { CommonModule } from '@angular/common'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-link-card',
@@ -9,10 +14,16 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./link-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, NgIconComponent],
+  providers: [
+    provideIcons({
+      matOpenInNew,
+    }),
+    provideNgIconsConfig({ size: '1.5em' }),
+  ],
 })
 export class LinkCardComponent {
-  @Input() link: DatasetDistribution
+  @Input() link: DatasetOnlineResource
   @Input() compact = false
 
   get title() {

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

@@ -1,18 +1,14 @@
-<div class="h-full flex flex-col">
-  <p class="flex-none mb-2 font-medium text-sm text-gray-900">
-    {{ helperText }}
-  </p>
-  <div class="flex-1" [hidden]="preview">
-    <gn-ui-text-area
-      [placeholder]="placeholder"
-      [value]="textContent"
-      (valueChange)="textContentChangedHandler($event)"
-    ></gn-ui-text-area>
-  </div>
-  <div
-    class="flex-1 border border-gray-800 rounded overflow-y-scroll"
-    [hidden]="!preview"
-  >
-    <gn-ui-markdown-parser [textContent]="textContent"></gn-ui-markdown-parser>
-  </div>
+<gn-ui-text-area
+  [hidden]="preview"
+  [placeholder]="placeholder"
+  [value]="textContent"
+  [extraClass]="textAreaExtraClass + ' !leading-normal'"
+  (valueChange)="textContentChangedHandler($event)"
+></gn-ui-text-area>
+
+<div
+  class="gn-ui-text-input border-gray-100 hover:border-gray-100"
+  [hidden]="!preview"
+>
+  <gn-ui-markdown-parser [textContent]="textContent"></gn-ui-markdown-parser>
 </div>

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

@@ -10,7 +10,6 @@ import { FormsModule } from '@angular/forms'
 import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
 import { TranslateModule } from '@ngx-translate/core'
 import { ButtonComponent, TextAreaComponent } from '../../../../../../libs/ui/inputs/src'
-import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
 
 @Component({
@@ -22,7 +21,6 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   imports: [
     CommonModule,
     FormsModule,
-    MatIconModule,
     MatTooltipModule,
     ButtonComponent,
     TextAreaComponent,
@@ -32,9 +30,9 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 })
 export class MarkdownEditorComponent {
   @Input() preview = false
-  @Input() helperText?: string
   @Input() placeholder: string
   @Input() textContent: string
+  @Input() textAreaExtraClass = ''
   @Output() textContentChanged: EventEmitter<string> =
     new EventEmitter<string>()
 

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

@@ -2,9 +2,10 @@
 :host ::ng-deep .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  margin: 0px 0px 1.5rem 0px;
+  margin: 0;
   line-height: 1.5;
   word-wrap: break-word;
+  height: 100%;
 }
 
 /** Emphasis **/
@@ -28,6 +29,11 @@
   @apply text-title font-title font-bold;
 }
 
+/** No margin for first child/heading, that cannot be detected by getBoundingClientRect() **/
+:host ::ng-deep .markdown-body :first-child {
+  margin-top: 0;
+}
+
 :host ::ng-deep .markdown-body h1 {
   margin: 0.67em 0;
   padding-bottom: 0.3em;

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

@@ -1 +1,4 @@
-<div class="markdown-body" [innerHTML]="parsedMarkdown"></div>
+<div
+  [class]="whitoutStyles ? '' : 'markdown-body'"
+  [innerHTML]="parsedMarkdown"
+></div>

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

@@ -10,6 +10,7 @@ import { marked } from 'marked'
 })
 export class MarkdownParserComponent {
   @Input() textContent: string
+  @Input() whitoutStyles?: boolean
 
   get parsedMarkdown() {
     return marked.parse(this.textContent)

package/src/libs/ui/elements/src/lib/metadata-catalog/metadata-catalog.component.ts

@@ -1,10 +1,13 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-metadata-catalog',
   templateUrl: './metadata-catalog.component.html',
   styleUrls: ['./metadata-catalog.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [TranslateModule],
 })
 export class MetadataCatalogComponent {
   @Input() sourceLabel: string