geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.73bac9979

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

@@ -5,42 +5,40 @@
   <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()"
+        [disabled]="disabled"
       >
-        <mat-icon class="material-symbols-outlined">delete</mat-icon>
+        <ng-icon name="iconoirBin"></ng-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"
+      [disabled]="disabled"
+    ></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"
-        [extraClass]="'bg-gray-200 font-bold'"
+        type="gray"
         (buttonClick)="toggleAltTextInput()"
       >
-        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        <ng-icon name="iconoirPlus" class="me-1 text-primary"></ng-icon>
         {{ 'input.image.displayAltTextInput' | translate }}
       </gn-ui-button>
     </div>
@@ -51,96 +49,110 @@
   <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"
+      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-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">
+      <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'"
+            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
-        >
+        <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]="
-            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 || disabled
+        "
       />
     </label>
-    <div *ngIf="!showUrlInput" class="flex-none">
+
+    <div *ngIf="!showUrlInput" class="flex-none mt-2">
       <gn-ui-button
-        [extraClass]="'bg-gray-200 font-bold'"
         (buttonClick)="displayUrlInput()"
+        type="gray"
+        [disabled]="disabled"
+        [extraClass]="disabled && 'cursor-not-allowed'"
       >
-        <mat-icon class="material-symbols-outlined me-1">link</mat-icon>
+        <ng-icon class="me-1 text-primary" name="iconoirLink"></ng-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"
+      (uploadClick)="downloadUrl($event)"
+      [disabled]="isUploadInProgress || disabled"
+    >
+    </gn-ui-url-input>
   </div>
 </ng-template>

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

@@ -8,7 +8,6 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
 import { firstValueFrom } from 'rxjs'
@@ -16,6 +15,21 @@ 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'
+import { TextInputComponent } from '../text-input/text-input.component'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  iconoirFramePlusIn,
+  iconoirMediaImage,
+  iconoirMediaImageXmark,
+  iconoirBin,
+  iconoirPlus,
+  iconoirLink,
+} from '@ng-icons/iconoir'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -26,10 +40,25 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
   imports: [
     CommonModule,
     ButtonComponent,
-    MatIconModule,
     FilesDropDirective,
     MatProgressSpinnerModule,
     TranslateModule,
+    UrlInputComponent,
+    TextInputComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirMediaImage,
+      iconoirFramePlusIn,
+      iconoirMediaImageXmark,
+      iconoirBin,
+      iconoirPlus,
+      iconoirLink,
+    }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
 })
 export class ImageInputComponent {
@@ -38,6 +67,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 +79,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 +140,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 +162,7 @@ export class ImageInputComponent {
           error: () => {
             this.downloadError = true
             this.cd.markForCheck()
-            this.urlChange.emit(this.urlInputValue)
+            this.urlChange.emit(url)
           },
         })
       }
@@ -141,11 +173,12 @@ export class ImageInputComponent {
     }
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadError) {
       this.handleRetry()
     } else if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 
@@ -172,9 +205,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/navigation-button/navigation-button.component.html

@@ -1,9 +1,7 @@
 <button
   class="group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 rounded content-center"
 >
-  <mat-icon class="material-symbols-outlined align-middle w-[18px]">{{
-    icon
-  }}</mat-icon>
+  <ng-icon [name]="icon" class="align-middle w-[18px]"></ng-icon>
   <span
     class="mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75"
     >{{ label.toUpperCase() }}</span

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

@@ -1,10 +1,13 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { NgIcon } from '@ng-icons/core'
 
 @Component({
   selector: 'gn-ui-navigation-button',
   templateUrl: './navigation-button.component.html',
   styleUrls: ['./navigation-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIcon],
+  standalone: true,
 })
 export class NavigationButtonComponent {
   @Input() label: string

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

@@ -11,7 +11,7 @@
   <div
     class="absolute inset-y-0 left-0 pl-2.5 flex items-center peer-hover:text-primary peer-focus:text-primary"
   >
-    <mat-icon class="material-symbols-outlined">search</mat-icon>
+    <ng-icon name="matSearch"></ng-icon>
   </div>
   <button
     *ngIf="rawChange | async"
@@ -20,6 +20,6 @@
     aria-label="Clear"
     (click)="clear()"
   >
-    <mat-icon class="material-symbols-outlined align-middle">close</mat-icon>
+    <ng-icon name="matClose" class="align-middle"></ng-icon>
   </button>
 </div>

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

@@ -4,12 +4,27 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { Subject, distinctUntilChanged } from 'rxjs'
+import { distinctUntilChanged, Subject } from 'rxjs'
+import { CommonModule } from '@angular/common'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matClose, matSearch } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-search-input',
   templateUrl: './search-input.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, NgIconComponent],
+  providers: [
+    provideIcons({ matSearch, matClose }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
 })
 export class SearchInputComponent {
   @Input() value = ''

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

@@ -5,15 +5,6 @@ button.disabled {
   color: var(--star-toggle-disabled-color, var(--color-primary));
 }
 
-mat-icon {
-  width: 1em;
-  height: 1em;
-  font-size: 1.5em;
-  margin-top: -0.1em;
-  font-variation-settings: 'opsz' 40;
-  stroke: var(--color-primary-darker);
-}
-
 .star-filled {
   font-variation-settings: 'FILL' 1;
 }

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

@@ -7,14 +7,10 @@
       enabled: toggled,
       'disabled opacity-45': !toggled,
       'transition hover:scale-125 will-change-transform': !disabled,
-      'cursor-default': disabled
+      'cursor-default': disabled,
     }"
   >
-    <mat-icon
-      class="material-symbols-outlined"
-      [ngClass]="{ 'star-filled': toggled }"
-      >star</mat-icon
-    >
+    <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>
   </button>
   <svg
     #starOverlay

package/src/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.ts

@@ -8,12 +8,18 @@ import {
   ViewChild,
 } from '@angular/core'
 import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-star-toggle',
   templateUrl: './star-toggle.component.html',
   styleUrls: ['./star-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, NgIcon],
+  viewProviders: [provideIcons({ matStar, matStarBorder })],
 })
 export class StarToggleComponent {
   @Input() toggled!: boolean

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

@@ -0,0 +1,32 @@
+:host {
+  --mat-standard-button-toggle-height: 32px;
+}
+
+.mat-button-toggle-group-appearance-standard {
+  background-color: var(--color-gray-200);
+  padding: 4px;
+  display: flex;
+  gap: 4px;
+  border-radius: 8px;
+}
+
+.mat-button-toggle-appearance-standard {
+  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: black;
+  color: var(--color-background);
+}
+
+button.mat-button-toggle-button.mat-focus-indicator.mat-button-toggle-label-content {
+  line-height: 32px;
+}
+
+.mat-button-toggle-label-content {
+  line-height: 32px;
+}

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

@@ -0,0 +1,15 @@
+<mat-button-toggle-group
+  #group="matButtonToggleGroup"
+  multiple="false"
+  class="flex w-full"
+  [disabled]="disabled"
+>
+  <mat-button-toggle
+    *ngFor="let option of options"
+    [aria-label]="option.label"
+    [checked]="option.checked"
+    (change)="onChange(option)"
+    [class]="extraClasses"
+    >{{ option.label | translate }}</mat-button-toggle
+  >
+</mat-button-toggle-group>

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

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { MatButtonToggleModule } from '@angular/material/button-toggle'
+import { TranslateModule } from '@ngx-translate/core'
+
+export type SwitchToggleOption = {
+  label: string
+  value?: unknown
+  checked: boolean
+}
+
+@Component({
+  selector: 'gn-ui-switch-toggle',
+  templateUrl: './switch-toggle.component.html',
+  styleUrls: ['./switch-toggle.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatButtonToggleModule, CommonModule, TranslateModule],
+})
+export class SwitchToggleComponent {
+  @Input() options: SwitchToggleOption[]
+  @Input() ariaLabel? = ''
+  @Input() extraClasses? = ''
+  @Input() disabled? = false
+  @Output() selectedValue = new EventEmitter<SwitchToggleOption>()
+
+  onChange(selectedOption: SwitchToggleOption) {
+    this.options.find(
+      (option) => option.label === selectedOption.label
+    ).checked = true
+
+    this.selectedValue.emit(selectedOption)
+  }
+}

package/src/libs/ui/inputs/src/lib/text-area/text-area.component.html

@@ -2,12 +2,13 @@
   <textarea
     #input
     name="textArea"
+    class="gn-ui-text-input leading-tight"
+    [ngClass]="extraClass"
     [disabled]="disabled"
     [placeholder]="placeholder"
-    [value]="value"
+    [value]="value ?? ''"
     (change)="handleChange($event)"
     (input)="handleChange($event)"
-    [class]="classList"
     [attr.required]="required || null"
   ></textarea>
 </div>

package/src/libs/ui/inputs/src/lib/text-area/text-area.component.ts

@@ -7,21 +7,20 @@ import {
 } from '@angular/core'
 import { Subject } from 'rxjs'
 import { distinctUntilChanged } from 'rxjs/operators'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-text-area',
   templateUrl: './text-area.component.html',
   styleUrls: ['./text-area.component.css'],
   standalone: true,
+  imports: [CommonModule],
 })
 export class TextAreaComponent implements AfterViewInit {
-  private readonly baseClasses: string
-  private readonly disabledClasses: string
-
   @Input() value = ''
   @Input() disabled = false
   @Input() extraClass = ''
-  @Input() placeholder: string
+  @Input() placeholder = ''
   @Input() required = false
 
   rawChange = new Subject<string>()
@@ -29,30 +28,6 @@ export class TextAreaComponent implements AfterViewInit {
 
   @ViewChild('input') input
 
-  constructor() {
-    this.baseClasses = [
-      'w-full',
-      'pt-2',
-      'pl-2',
-      'resize-none',
-      'border',
-      'border-gray-800',
-      'rounded italic',
-      'leading-tight',
-      'focus:outline-none',
-      'focus:bg-background',
-      'focus:border-primary',
-    ].join(' ')
-
-    this.disabledClasses = ['cursor-not-allowed'].join(' ')
-  }
-
-  get classList() {
-    return `${this.baseClasses} ${this.extraClass} ${
-      this.disabled ? this.disabledClasses : ''
-    }`
-  }
-
   ngAfterViewInit() {
     this.checkRequired(this.input.nativeElement.value)
   }