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

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

@@ -0,0 +1,90 @@
+<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 && !disabled,
+      'cursor-not-allowed': disabled,
+    }"
+    [attr.tabindex]="isUploadInProgress || disabled ? null : 0"
+    (dragFilesOver)="handleDragFilesOver($event)"
+    (dropFiles)="handleDropFiles($event)"
+    (keydown.enter)="fileInput.click()"
+  >
+    <input
+      #fileInput
+      type="file"
+      class="hidden"
+      (change)="handleFileInput($event)"
+      [disabled]="isUploadInProgress || disabled"
+    />
+
+    <div
+      class="w-14 h-14 rounded-md bg-gray-50 grid"
+      *ngIf="!isUploadInProgress"
+    >
+      <ng-icon
+        *ngIf="!dragFilesOver"
+        class="place-self-center text-primary"
+        name="iconoirCloudUpload"
+      ></ng-icon>
+      <ng-icon
+        *ngIf="dragFilesOver"
+        class="place-self-center text-primary"
+        name="iconoirFramePlusIn"
+      ></ng-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>
+    <gn-ui-url-input
+      class="w-full"
+      [disabled]="isUploadInProgress || disabled"
+      (uploadClick)="handleUrlChange($event)"
+    ></gn-ui-url-input>
+  </label>
+</div>

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

@@ -0,0 +1,108 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+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'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { iconoirCloudUpload, iconoirFramePlusIn } from '@ng-icons/iconoir'
+
+@Component({
+  selector: 'gn-ui-file-input',
+  templateUrl: './file-input.component.html',
+  styleUrls: ['./file-input.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    FilesDropDirective,
+    MatProgressSpinnerModule,
+    TranslateModule,
+    UrlInputComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirCloudUpload,
+      iconoirFramePlusIn,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+export class FileInputComponent {
+  @Input() maxSizeMB: number
+  @Input() uploadProgress?: number
+  @Input() disabled? = false
+  @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 | null) {
+    if (!url) return
+    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/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)
   }

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

@@ -1,12 +1,13 @@
 <input
   #input
-  [class]="classList"
+  class="gn-ui-text-input"
+  [ngClass]="extraClass"
   type="text"
   [value]="value"
   (change)="handleChange($event)"
   (input)="handleChange($event)"
-  [placeholder]="hint"
-  [attr.aria-label]="hint"
+  [placeholder]="placeholder"
+  [attr.aria-label]="placeholder"
   [attr.required]="required || null"
   [disabled]="disabled"
 />

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

@@ -7,37 +7,25 @@ import {
 } from '@angular/core'
 import { distinctUntilChanged } from 'rxjs/operators'
 import { Subject } from 'rxjs'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-text-input',
   templateUrl: './text-input.component.html',
   styleUrls: ['./text-input.component.css'],
+  standalone: true,
+  imports: [CommonModule],
 })
 export class TextInputComponent implements AfterViewInit {
-  private readonly baseClass = [
-    'appearance-none',
-    'border border-gray-300',
-    'rounded w-full',
-    'p-2',
-    'text-gray-700',
-    'leading-tight',
-    'focus:outline-none',
-    'focus:border-primary',
-  ].join(' ')
-
   @Input() value = ''
   @Input() extraClass = ''
-  @Input() hint: string
+  @Input() placeholder: string
   @Input() required = false
   @Input() disabled: boolean
   rawChange = new Subject<string>()
   @Output() valueChange = this.rawChange.pipe(distinctUntilChanged())
   @ViewChild('input') input
 
-  get classList() {
-    return `${this.baseClass} ${this.extraClass}`
-  }
-
   ngAfterViewInit() {
     this.checkRequired(this.input.nativeElement.value)
   }

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

@@ -1,51 +1,49 @@
+import { OverlayModule } from '@angular/cdk/overlay'
+import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MatAutocompleteModule } from '@angular/material/autocomplete'
+import { MatCheckboxModule } from '@angular/material/checkbox'
+import { MatNativeDateModule } from '@angular/material/core'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { UtilSharedModule } from '../../../../../libs/util/shared/src'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
 import { TranslateModule } from '@ngx-translate/core'
 import { TagInputModule } from 'ngx-chips'
 import { NgxDropzoneModule } from 'ngx-dropzone'
-import { ButtonComponent } from './button/button.component'
 import { BadgeComponent } from './badge/badge.component'
+import { ButtonComponent } from './button/button.component'
+import { CheckToggleComponent } from './check-toggle/check-toggle.component'
+import { CheckboxComponent } from './checkbox/checkbox.component'
 import { ChipsInputComponent } from './chips-input/chips-input.component'
+import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
 import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
+import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
 import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
+import { EditableLabelDirective } from './editable-label/editable-label.directive'
 import { TextAreaComponent } from './text-area/text-area.component'
-import { TextInputComponent } from './text-input/text-input.component'
-import { MatAutocompleteModule } from '@angular/material/autocomplete'
-import { MatIconModule } from '@angular/material/icon'
-import { NavigationButtonComponent } from './navigation-button/navigation-button.component'
-import { StarToggleComponent } from './star-toggle/star-toggle.component'
-import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { OverlayModule } from '@angular/cdk/overlay'
-import { MatCheckboxModule } from '@angular/material/checkbox'
 import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
-import { CheckToggleComponent } from './check-toggle/check-toggle.component'
-import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.component'
-import { MatTooltipModule } from '@angular/material/tooltip'
-import { CommonModule } from '@angular/common'
-import { CheckboxComponent } from './checkbox/checkbox.component'
-import { SearchInputComponent } from './search-input/search-input.component'
-import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
-import { MatFormFieldModule } from '@angular/material/form-field'
-import { MatInputModule } from '@angular/material/input'
-import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MatNativeDateModule } from '@angular/material/core'
-import { EditableLabelDirective } from './editable-label/editable-label.directive'
-import { ImageInputComponent } from './image-input/image-input.component'
 
 @NgModule({
   declarations: [
-    TextInputComponent,
     DragAndDropFileInputComponent,
     ChipsInputComponent,
-    NavigationButtonComponent,
-    StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
-    CopyTextButtonComponent,
     CheckboxComponent,
-    SearchInputComponent,
   ],
   imports: [
     CommonModule,
@@ -56,7 +54,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     TagInputModule,
     UtilSharedModule,
     MatAutocompleteModule,
-    MatIconModule,
     UiWidgetsModule,
     OverlayModule,
     MatCheckboxModule,
@@ -68,30 +65,34 @@ import { ImageInputComponent } from './image-input/image-input.component'
     EditableLabelDirective,
     TextAreaComponent,
     ButtonComponent,
-    ImageInputComponent,
     DropdownSelectorComponent,
     DateRangePickerComponent,
     CheckToggleComponent,
     BadgeComponent,
+    NgIconComponent,
+  ],
+  providers: [
+    provideIcons({
+      matClose,
+      matExpandMore,
+      matExpandLess,
+    }),
+    provideNgIconsConfig({
+      size: '0.9em',
+    }),
   ],
   exports: [
     DropdownSelectorComponent,
     ButtonComponent,
-    TextInputComponent,
     DragAndDropFileInputComponent,
     TextAreaComponent,
     ChipsInputComponent,
-    NavigationButtonComponent,
-    StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckToggleComponent,
-    CopyTextButtonComponent,
     CheckboxComponent,
-    SearchInputComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
-    ImageInputComponent,
     BadgeComponent,
   ],
 })