geonetwork-ui 2.3.0-dev.f736344f → 2.3.0-dev.ff2a9db7

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

@@ -0,0 +1,193 @@
+import { CommonModule } from '@angular/common'
+import { HttpClient } from '@angular/common/http'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  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'
+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'
+
+@Component({
+  selector: 'gn-ui-image-input',
+  templateUrl: './image-input.component.html',
+  styleUrls: ['./image-input.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    MatIconModule,
+    FilesDropDirective,
+    MatProgressSpinnerModule,
+    TranslateModule,
+  ],
+})
+export class ImageInputComponent {
+  @Input() maxSizeMB: number
+  @Input() previewUrl?: string
+  @Input() altText?: string
+  @Input() uploadProgress?: number
+  @Input() uploadError?: boolean
+  @Output() fileChange: EventEmitter<File> = new EventEmitter()
+  @Output() urlChange: EventEmitter<string> = new EventEmitter()
+  @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
+  @Output() delete: EventEmitter<void> = new EventEmitter()
+  @Output() altTextChange: EventEmitter<string> = new EventEmitter()
+
+  dragFilesOver = false
+  showUrlInput = false
+  downloadError = false
+  showAltTextInput = false
+
+  urlInputValue?: string
+  lastUploadType?: 'file' | 'url'
+  lastUploadContent?: string | File
+
+  constructor(private http: HttpClient, private cd: ChangeDetectorRef) {}
+
+  getPrimaryText() {
+    if (this.uploadError) {
+      return marker('input.image.uploadErrorLabel')
+    }
+    if (this.uploadProgress) {
+      return marker('input.image.uploadProgressLabel')
+    }
+    return marker('input.image.selectFileLabel')
+  }
+
+  getSecondaryText() {
+    if (this.uploadError) {
+      return marker('input.image.uploadErrorRetry')
+    }
+    if (this.uploadProgress) {
+      return marker('input.image.uploadProgressCancel')
+    }
+    return marker('input.image.dropFileLabel')
+  }
+
+  handleDragFilesOver(dragFilesOver: boolean) {
+    if (!this.showUrlInput) {
+      this.dragFilesOver = dragFilesOver
+      this.cd.markForCheck()
+    }
+  }
+
+  handleDropFiles(files: File[]) {
+    if (!this.showUrlInput) {
+      const validFiles = this.filterTypeImage(files)
+      if (validFiles.length > 0) {
+        this.resizeAndEmit(validFiles[0])
+      }
+    }
+  }
+
+  handleFileInput(event: Event) {
+    const inputFiles = Array.from((event.target as HTMLInputElement).files)
+    const validFiles = this.filterTypeImage(inputFiles)
+    if (validFiles.length > 0) {
+      this.resizeAndEmit(validFiles[0])
+    }
+  }
+
+  displayUrlInput() {
+    this.uploadCancel.emit()
+    this.showUrlInput = true
+  }
+
+  handleUrlChange(event: Event) {
+    this.downloadError = false
+    this.urlInputValue = (event.target as HTMLInputElement).value
+  }
+
+  async downloadUrl() {
+    const name = this.urlInputValue.split('/').pop()
+
+    try {
+      const response = await firstValueFrom(
+        this.http.head(this.urlInputValue, { 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({
+          next: (blob) => {
+            this.cd.markForCheck()
+            const file = new File([blob], name)
+            this.fileChange.emit(file)
+          },
+          error: () => {
+            this.downloadError = true
+            this.cd.markForCheck()
+            this.urlChange.emit(this.urlInputValue)
+          },
+        })
+      }
+    } catch {
+      this.downloadError = true
+      this.cd.markForCheck()
+      return
+    }
+  }
+
+  handleSecondaryTextClick() {
+    if (this.uploadError) {
+      this.handleRetry()
+    } else if (this.uploadProgress) {
+      this.handleCancel()
+    }
+  }
+
+  handleCancel() {
+    this.uploadCancel.emit()
+  }
+
+  handleRetry() {
+    switch (this.lastUploadType) {
+      case 'file':
+        this.fileChange.emit(this.lastUploadContent as File)
+        break
+      case 'url':
+        this.urlChange.emit(this.lastUploadContent as string)
+        break
+    }
+  }
+
+  handleDelete() {
+    this.delete.emit()
+  }
+
+  toggleAltTextInput() {
+    this.showAltTextInput = !this.showAltTextInput
+  }
+
+  handleAltTextChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    this.altTextChange.emit(input.value)
+  }
+
+  private filterTypeImage(files: File[]) {
+    return files.filter((file) => {
+      return file.type.startsWith('image/')
+    })
+  }
+
+  private resizeAndEmit(imageToResize: File) {
+    const maxSizeBytes = megabytesToBytes(this.maxSizeMB)
+    downgradeImage(imageToResize, maxSizeBytes).then((resizedImage) => {
+      const fileToEmit = new File([resizedImage], imageToResize.name)
+      this.fileChange.emit(fileToEmit)
+    })
+  }
+}

package/src/libs/ui/inputs/src/lib/previous-next-buttons/previous-next-buttons.component.css

@@ -0,0 +1,6 @@
+:host {
+  --gn-ui-button-rounded: 100%;
+  --gn-ui-button-width: 8px;
+  --gn-ui-button-height: 8px;
+  --gn-ui-button-padding: 12px;
+}

package/src/libs/ui/inputs/src/lib/previous-next-buttons/previous-next-buttons.component.html

@@ -0,0 +1,26 @@
+<div class="flex flex-row gap-x-4 items-center">
+  <gn-ui-button
+    data-test="previousButton"
+    [type]="isFirst ? 'default' : 'outline'"
+    [disabled]="isFirst"
+    (buttonClick)="previousButtonClicked()"
+  >
+    <mat-icon
+      class="material-symbols-outlined text-[14px] text-center pt-[5px]"
+    >
+      arrow_back
+    </mat-icon>
+  </gn-ui-button>
+  <gn-ui-button
+    data-test="nextButton"
+    [type]="isLast ? 'default' : 'outline'"
+    [disabled]="isLast"
+    (buttonClick)="nextButtonClicked()"
+  >
+    <mat-icon
+      class="material-symbols-outlined text-[14px] text-center pt-[5px]"
+    >
+      arrow_forward
+    </mat-icon>
+  </gn-ui-button>
+</div>

package/src/libs/ui/inputs/src/lib/previous-next-buttons/previous-next-buttons.component.ts

@@ -0,0 +1,32 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { ButtonComponent } from '../button/button.component'
+import { MatIconModule } from '@angular/material/icon'
+
+@Component({
+  selector: 'gn-ui-previous-next-buttons',
+  templateUrl: './previous-next-buttons.component.html',
+  styleUrls: ['./previous-next-buttons.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ButtonComponent, MatIconModule],
+})
+export class PreviousNextButtonsComponent {
+  @Input() isFirst: boolean
+  @Input() isLast: boolean
+
+  @Output() directionButtonClicked: EventEmitter<string> = new EventEmitter()
+
+  previousButtonClicked() {
+    this.directionButtonClicked.next('previous')
+  }
+
+  nextButtonClicked() {
+    this.directionButtonClicked.next('next')
+  }
+}

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

@@ -2,11 +2,12 @@
   <textarea
     #input
     name="textArea"
+    [disabled]="disabled"
     [placeholder]="placeholder"
     [value]="value"
     (change)="handleChange($event)"
     (input)="handleChange($event)"
-    class="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"
+    [class]="classList"
     [attr.required]="required || null"
   ></textarea>
 </div>

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

@@ -15,7 +15,12 @@ import { distinctUntilChanged } from 'rxjs/operators'
   standalone: true,
 })
 export class TextAreaComponent implements AfterViewInit {
+  private readonly baseClasses: string
+  private readonly disabledClasses: string
+
   @Input() value = ''
+  @Input() disabled = false
+  @Input() extraClass = ''
   @Input() placeholder: string
   @Input() required = false
 
@@ -24,6 +29,30 @@ 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,6 +1,6 @@
 <input
   #input
-  class="appearance-none border border-gray-300 rounded w-full p-2 text-gray-700 leading-tight focus:outline-none focus:border-primary"
+  [class]="classList"
   type="text"
   [value]="value"
   (change)="handleChange($event)"
@@ -8,4 +8,5 @@
   [placeholder]="hint"
   [attr.aria-label]="hint"
   [attr.required]="required || null"
+  [disabled]="disabled"
 />

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

@@ -14,14 +14,30 @@ import { Subject } from 'rxjs'
   styleUrls: ['./text-input.component.css'],
 })
 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() 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

@@ -20,16 +20,6 @@ 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 {
-  FormFieldArrayComponent,
-  FormFieldComponent,
-  FormFieldFileComponent,
-  FormFieldObjectComponent,
-  FormFieldRichComponent,
-  FormFieldSimpleComponent,
-  FormFieldSpatialExtentComponent,
-  FormFieldTemporalExtentComponent,
-} from './form-field'
 import { CheckToggleComponent } from './check-toggle/check-toggle.component'
 import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.component'
 import { MatTooltipModule } from '@angular/material/tooltip'
@@ -42,10 +32,10 @@ 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: [
-    DropdownSelectorComponent,
     AutocompleteComponent,
     TextInputComponent,
     DragAndDropFileInputComponent,
@@ -54,19 +44,9 @@ import { EditableLabelDirective } from './editable-label/editable-label.directiv
     StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
-    FormFieldComponent,
-    FormFieldSimpleComponent,
-    FormFieldArrayComponent,
-    FormFieldObjectComponent,
-    FormFieldRichComponent,
-    FormFieldFileComponent,
-    FormFieldSpatialExtentComponent,
-    FormFieldTemporalExtentComponent,
-    CheckToggleComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
     SearchInputComponent,
-    DateRangePickerComponent,
   ],
   imports: [
     CommonModule,
@@ -89,6 +69,10 @@ import { EditableLabelDirective } from './editable-label/editable-label.directiv
     EditableLabelDirective,
     TextAreaComponent,
     ButtonComponent,
+    ImageInputComponent,
+    DropdownSelectorComponent,
+    DateRangePickerComponent,
+    CheckToggleComponent,
   ],
   exports: [
     DropdownSelectorComponent,
@@ -102,13 +86,13 @@ import { EditableLabelDirective } from './editable-label/editable-label.directiv
     StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
-    FormFieldComponent,
     CheckToggleComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
     SearchInputComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
+    ImageInputComponent,
   ],
 })
 export class UiInputsModule {}

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

@@ -1,8 +1,10 @@
-export * from './lib/ui-layout.module'
 export * from './lib/anchor-link/anchor-link.directive'
 export * from './lib/carousel/carousel.component'
-export * from './lib/expandable-panel/expandable-panel.component'
-export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/expandable-panel-button/expandable-panel-button.component'
-export * from './lib/interactive-table/interactive-table.component'
+export * from './lib/expandable-panel/expandable-panel.component'
+export * from './lib/form-field-wrapper/form-field-wrapper.component'
 export * from './lib/interactive-table/interactive-table-column/interactive-table-column.component'
+export * from './lib/interactive-table/interactive-table.component'
+export * from './lib/sticky-header/sticky-header.component'
+export * from './lib/block-list/block-list.component'
+export * from './lib/ui-layout.module'

package/src/libs/ui/layout/src/lib/block-list/block-list.component.css

@@ -0,0 +1,23 @@
+:host .block-list-container ::ng-deep > * {
+  flex-shrink: 0;
+}
+
+:host {
+  position: relative;
+}
+
+.list-page-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  position: relative;
+}
+
+.list-page-dot:after {
+  content: '';
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  width: 20px;
+  height: 20px;
+}

package/src/libs/ui/layout/src/lib/block-list/block-list.component.html

@@ -0,0 +1,20 @@
+<div
+  class="block-list-container flex flex-col"
+  #blockContainer
+  [ngClass]="containerClass"
+  [ngStyle]="{ minHeight: minHeight + 'px' }"
+>
+  <ng-content></ng-content>
+</div>
+<div
+  *ngIf="pagesCount > 1"
+  class="absolute flex flex-row justify-center gap-[14px] p-1"
+  [ngClass]="paginationContainerClass"
+>
+  <button
+    *ngFor="let page of pages"
+    class="list-page-dot"
+    (click)="goToPage(page)"
+    [ngClass]="currentPage === page ? 'bg-primary' : 'bg-gray-400'"
+  ></button>
+</div>

package/src/libs/ui/layout/src/lib/block-list/block-list.component.ts

@@ -0,0 +1,84 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  ElementRef,
+  Input,
+  QueryList,
+  ViewChild,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-block-list',
+  templateUrl: './block-list.component.html',
+  styleUrls: ['./block-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class BlockListComponent implements AfterViewInit {
+  @Input() pageSize = 5
+  @Input() containerClass = ''
+  @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
+  @ContentChildren('block', { read: ElementRef }) blocks: QueryList<
+    ElementRef<HTMLElement>
+  >
+  @ViewChild('blockContainer') blockContainer: ElementRef<HTMLElement>
+
+  protected minHeight = 0
+
+  protected currentPage = 0
+  protected get pages() {
+    return new Array(this.pagesCount).fill(0).map((_, i) => i)
+  }
+
+  get isFirstPage() {
+    return this.currentPage === 0
+  }
+  get isLastPage() {
+    return this.currentPage === this.pagesCount - 1
+  }
+  get pagesCount() {
+    return this.blocks ? Math.ceil(this.blocks.length / this.pageSize) : 1
+  }
+
+  constructor(private changeDetector: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.blocks.changes.subscribe(this.refreshBlocksVisibility)
+    this.refreshBlocksVisibility()
+
+    // we store the first height as the min-height of the list container
+    this.minHeight = this.blockContainer.nativeElement.clientHeight
+    this.changeDetector.detectChanges()
+  }
+
+  protected refreshBlocksVisibility = () => {
+    this.blocks.forEach((block, index) => {
+      block.nativeElement.style.display =
+        index >= this.currentPage * this.pageSize &&
+        index < (this.currentPage + 1) * this.pageSize
+          ? null
+          : 'none'
+    })
+  }
+
+  public goToPage(index: number) {
+    this.currentPage = Math.max(Math.min(index, this.pagesCount - 1), 0)
+    this.changeDetector.detectChanges()
+    this.refreshBlocksVisibility()
+  }
+
+  public previousPage() {
+    if (this.isFirstPage) return
+    this.goToPage(this.currentPage - 1)
+  }
+
+  public nextPage() {
+    if (this.isLastPage) return
+    this.goToPage(this.currentPage + 1)
+  }
+}

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -1,20 +1,24 @@
 :host .carousel-container ::ng-deep > * {
   flex-shrink: 0;
 }
+
 :host {
   position: relative;
+  display: block;
 }
+
 .carousel-step-dot {
   width: 6px;
   height: 6px;
   border-radius: 6px;
   position: relative;
 }
+
 .carousel-step-dot:after {
   content: '';
   position: absolute;
-  left: -4px;
-  top: -4px;
-  width: 14px;
-  height: 14px;
+  left: -7px;
+  top: -7px;
+  width: 20px;
+  height: 20px;
 }

package/src/libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -1,17 +1,17 @@
-<div #carouselOverflowContainer class="overflow-hidden h-full w-full">
-  <div class="carousel-container flex flex-row" [ngClass]="containerClass">
+<div #carouselOverflowContainer class="w-full">
+  <div class="carousel-container flex" [ngClass]="containerClass">
     <ng-content></ng-content>
   </div>
 </div>
 <div
   *ngIf="steps.length > 1"
-  class="absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1"
+  class="absolute flex flex-row justify-center gap-[14px] p-1"
   [ngClass]="stepsContainerClass"
 >
   <button
     *ngFor="let step of steps; let i = index"
     class="carousel-step-dot"
     (click)="scrollToStep(i)"
-    [ngClass]="selectedStep === i ? 'bg-secondary' : 'bg-gray-400'"
+    [ngClass]="currentStep === i ? 'bg-primary' : 'bg-gray-400'"
   ></button>
 </div>