geonetwork-ui 2.1.0-initial

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -0,0 +1,51 @@
+<div class="relative">
+  <input
+    #searchInput
+    type="text"
+    class="appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]"
+    [placeholder]="placeholder"
+    [formControl]="control"
+    [matAutocomplete]="auto"
+    (keyup.enter)="handleEnter($event.target.value)"
+  />
+  <button
+    type="button"
+    class="text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0"
+    *ngIf="searchInput.value"
+    aria-label="Clear"
+    (click)="clear()"
+  >
+    <mat-icon class="material-symbols-outlined">close</mat-icon>
+  </button>
+  <button
+    type="button"
+    class="text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0"
+    aria-label="Trigger search"
+    (click)="handleClickSearch()"
+  >
+    <mat-icon class="material-symbols-outlined">search</mat-icon>
+  </button>
+  <gn-ui-popup-alert
+    *ngIf="error"
+    class="absolute mt-2 w-full top-[100%] left-0"
+    icon="error_outline"
+    position="top"
+    type="warning"
+  >
+    <span translate>search.autocomplete.error</span>
+    {{ error }}
+  </gn-ui-popup-alert>
+</div>
+<mat-autocomplete
+  #auto="matAutocomplete"
+  (optionSelected)="handleSelection($event)"
+  [displayWith]="displayWithFn"
+>
+  <mat-option
+    *ngFor="let suggestion of suggestions$ | async"
+    [value]="suggestion"
+    class="p-2 suggestion"
+  >
+    {{ displayWithFn(suggestion) }}
+  </mat-option>
+</mat-autocomplete>

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

@@ -0,0 +1,159 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core'
+import { UntypedFormControl } from '@angular/forms'
+import {
+  MatAutocomplete,
+  MatAutocompleteSelectedEvent,
+  MatAutocompleteTrigger,
+} from '@angular/material/autocomplete'
+import { merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
+import {
+  catchError,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  finalize,
+  first,
+  map,
+  switchMap,
+  take,
+  tap,
+} from 'rxjs/operators'
+
+export type AutocompleteItem = unknown
+
+@Component({
+  selector: 'gn-ui-autocomplete',
+  templateUrl: './autocomplete.component.html',
+  styleUrls: ['./autocomplete.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AutocompleteComponent
+  implements OnInit, AfterViewInit, OnDestroy, OnChanges
+{
+  @Input() placeholder: string
+  @Input() action: (value: string) => Observable<AutocompleteItem[]>
+  @Input() value?: AutocompleteItem
+  @Input() clearOnSelection = false
+  @Output() itemSelected = new EventEmitter<AutocompleteItem>()
+  @Output() inputSubmitted = new EventEmitter<string>()
+  @Output() inputCleared = new EventEmitter<void>()
+  @ViewChild(MatAutocompleteTrigger) triggerRef: MatAutocompleteTrigger
+  @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete
+  @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
+
+  searching: boolean
+  suggestions$: Observable<AutocompleteItem[]>
+  control = new UntypedFormControl()
+  subscription = new Subscription()
+  cancelEnter = true
+  selectionSubject = new ReplaySubject<MatAutocompleteSelectedEvent>(1)
+  lastInputValue$ = new ReplaySubject<string>(1)
+  error: string | null = null
+
+  @Input() displayWithFn: (AutocompleteItem) => string = (item) => item
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { value } = changes
+    if (value) {
+      const previousTextValue = this.displayWithFn(value.previousValue)
+      const currentTextValue = this.displayWithFn(value.currentValue)
+      if (previousTextValue !== currentTextValue) {
+        this.updateInputValue(value.currentValue)
+      }
+    }
+  }
+
+  ngOnInit(): void {
+    this.suggestions$ = merge(
+      this.control.valueChanges.pipe(
+        filter((value) => typeof value === 'string'),
+        filter((value: string) => value.length > 2),
+        debounceTime(400),
+        distinctUntilChanged(),
+        tap(() => (this.searching = true))
+      ),
+      this.control.valueChanges.pipe(
+        filter((value) => typeof value === 'object' && value.title),
+        map((item) => item.title)
+      )
+    ).pipe(
+      switchMap((value) => (value ? this.action(value) : of([]))),
+      catchError((error: Error) => {
+        this.error = error.message
+        return of([])
+      }),
+      finalize(() => (this.searching = false))
+    )
+
+    this.subscription = this.control.valueChanges.subscribe((any) => {
+      if (any !== '') {
+        this.cancelEnter = false
+      }
+    })
+    this.control.valueChanges
+      .pipe(filter((value) => typeof value === 'string'))
+      .subscribe(this.lastInputValue$)
+  }
+
+  ngAfterViewInit(): void {
+    this.autocomplete.optionSelected.subscribe(this.selectionSubject)
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+
+  updateInputValue(value: AutocompleteItem) {
+    if (value) {
+      this.control.setValue(value)
+    }
+    if (this.inputRef) {
+      this.inputRef.nativeElement.value = (value as any)?.title || ''
+    }
+  }
+
+  clear(): void {
+    this.inputRef.nativeElement.value = ''
+    this.inputCleared.emit()
+    this.selectionSubject
+      .pipe(take(1))
+      .subscribe((selection) => selection && selection.option.deselect())
+    this.inputRef.nativeElement.focus()
+    this.triggerRef.closePanel()
+  }
+
+  handleEnter(any: string) {
+    if (!this.cancelEnter) {
+      this.inputSubmitted.emit(any)
+      this.triggerRef.closePanel()
+    }
+  }
+
+  handleClickSearch() {
+    this.inputSubmitted.emit(this.inputRef.nativeElement.value)
+    this.triggerRef.closePanel()
+  }
+
+  handleSelection(event: MatAutocompleteSelectedEvent) {
+    this.cancelEnter = true
+    this.itemSelected.emit(event.option.value)
+    if (this.clearOnSelection) {
+      this.lastInputValue$.pipe(first()).subscribe((any) => {
+        this.inputRef.nativeElement.value = any
+      })
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+/* makes sure icons will not make the buttons grow vertically */
+:host /deep/ mat-icon.mat-icon {
+  margin-top: -0.325em;
+  margin-bottom: -0.325em;
+}

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

@@ -0,0 +1,9 @@
+<button
+  type="button"
+  class="flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
+  [class]="classList"
+  [disabled]="disabled"
+  (click)="handleClick($event)"
+>
+  <ng-content></ng-content>
+</button>

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

@@ -0,0 +1,75 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
+
+@Component({
+  selector: 'gn-ui-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonComponent {
+  @Input() type: 'primary' | 'secondary' | 'default' | 'outline' | 'light' =
+    'default'
+  @Input() disabled = false
+  @Input() extraClass = ''
+  @Output() buttonClick = new EventEmitter<void>()
+
+  get classList() {
+    return `${this.color} ${this.textColor} ${this.borderColor} ${this.extraClass}`
+  }
+
+  get color() {
+    switch (this.type) {
+      case 'default':
+        return 'bg-gray-700 hover:bg-gray-800 hover:bg-gray-800 active:bg-gray-900'
+      case 'primary':
+        return 'bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest'
+      case 'secondary':
+        return 'bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest'
+      case 'outline':
+        return 'bg-white'
+      case 'light':
+        return 'bg-white hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100'
+    }
+  }
+
+  get textColor() {
+    switch (this.type) {
+      case 'default':
+      case 'secondary':
+      case 'primary':
+        return 'text-white'
+      case 'outline':
+        return 'text-main hover:text-primary-darker focus:text-primary-darker active:text-primary-black'
+      case 'light':
+        return 'text-main'
+    }
+  }
+
+  get borderColor() {
+    switch (this.type) {
+      case 'default':
+        return 'border border-gray-700 focus:ring-4 focus:ring-gray-200'
+      case 'secondary':
+        return 'border border-secondary focus:ring-4 focus:ring-secondary-lightest'
+      case 'primary':
+        return 'border border-primary focus:ring-4 focus:ring-primary-lightest'
+      case 'outline':
+        return 'border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker'
+      case 'light':
+        return 'border border-white focus:ring-4 focus:ring-gray-300'
+    }
+  }
+
+  handleClick(event: Event) {
+    this.buttonClick.emit()
+    event.preventDefault()
+    propagateToDocumentOnly(event)
+  }
+}

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

@@ -0,0 +1,19 @@
+<label class="inline-flex relative items-start cursor-pointer" [title]="title">
+  <span class="shrink-0">
+    <input
+      type="checkbox"
+      class="sr-only peer"
+      [ngModel]="value"
+      (ngModelChange)="toggle($event)"
+    />
+    <div
+      class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"
+      [class]="
+        color === 'secondary'
+          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'
+          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'
+      "
+    ></div>
+  </span>
+  <span class="ml-3 mt-[2px] text-sm font-medium">{{ label }}</span>
+</label>

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

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-check-toggle',
+  templateUrl: './check-toggle.component.html',
+  styleUrls: ['./check-toggle.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckToggleComponent {
+  @Input() title: string
+  @Input() label: string
+  @Input() value: boolean
+  @Input() color: 'primary' | 'secondary' = 'primary'
+  @Output() toggled = new EventEmitter()
+
+  toggle(event: Event) {
+    this.toggled.emit(event)
+  }
+}

package/src/libs/ui/inputs/src/lib/chips-input/chips-input.component.css

@@ -0,0 +1,36 @@
+tag-input::ng-deep .ng2-tag-input {
+  border-bottom: none;
+}
+tag-input::ng-deep .ng2-tag-input.ng2-tag-input--focused {
+  border-bottom: none;
+}
+
+tag-input::ng-deep tag {
+  border-radius: 5px;
+  background: var(--color-primary-lightest);
+  font-family: inherit;
+
+  align-content: center;
+
+  font-style: italic;
+}
+
+tag-input::ng-deep
+  tag::ng-deep:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,
+tag-input::ng-deep
+  tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover {
+  background: var(--color-primary) !important;
+}
+
+tag-input::ng-deep .tag__text {
+  padding-right: 7px;
+}
+
+tag-input::ng-deep div,
+tag-input::ng-deep form {
+  height: 100%;
+}
+
+tag-input.invalid {
+  border-color: var(--color-secondary);
+}

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

@@ -0,0 +1,23 @@
+<tag-input
+  [ngModel]="items"
+  (ngModelChange)="onChange($event)"
+  onlyFromAutocomplete="true"
+  [placeholder]="placeholder"
+  [secondaryPlaceholder]="placeholder"
+  [ripple]="false"
+  [animationDuration]="{ enter: '0ms', leave: '0ms' }"
+  [onTextChangeDebounce]="100"
+  class="border-2 border-primary h-full rounded-lg p-2 bg-white text-sm focus:border-primary"
+  [ngClass]="{ invalid: invalid }"
+>
+  <tag-input-dropdown
+    [autocompleteObservable]="requestAutocompleteItems"
+    [minimumTextLength]="0"
+    [keepOpen]="false"
+    [showDropdownIfEmpty]="true"
+  >
+    <ng-template let-item="item" let-index="index">
+      {{ item.display }}
+    </ng-template>
+  </tag-input-dropdown>
+</tag-input>

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

@@ -0,0 +1,78 @@
+import { HttpClient } from '@angular/common/http'
+import { Component, Input, OnDestroy, OnInit, Output } from '@angular/core'
+import { LANG_2_TO_3_MAPPER } from '../../../../../../libs/util/i18n/src'
+import { TranslateService } from '@ngx-translate/core'
+import { Observable, of, Subject, Subscription } from 'rxjs'
+import { distinctUntilChanged, map, shareReplay, tap } from 'rxjs/operators'
+
+export interface Items {
+  display: string
+  value: string
+}
+
+@Component({
+  selector: 'gn-ui-chips-input',
+  templateUrl: './chips-input.component.html',
+  styleUrls: ['./chips-input.component.css'],
+})
+export class ChipsInputComponent implements OnInit, OnDestroy {
+  @Input() url: (text) => string
+  @Input() placeholder: string
+  @Input() selectedItems: Items[]
+  @Input() required = false
+  @Input() loadOnce = false
+  @Input() autocompleteItems: Items[] = []
+  @Output() itemsChange: Observable<Items[]>
+
+  private subscription: Subscription
+
+  invalid = false
+
+  rawChange: Subject<Items[]>
+
+  items: Items[] = []
+
+  loadedItems: Observable<Items[]>
+
+  onChange(event) {
+    this.rawChange.next(event)
+  }
+
+  requestAutocompleteItems = (text: string): Observable<any> => {
+    if (this.url) {
+      if (this.loadOnce && this.loadedItems) {
+        return this.loadedItems
+      }
+      const url = this.url(text)
+
+      const lang = LANG_2_TO_3_MAPPER[this.translate.currentLang.slice(0, 2)]
+      return this.http
+        .get<any>(url.replace('${lang}', lang))
+        .pipe(map((item) => item.map((i) => i.values[lang])))
+    } else {
+      return of(this.autocompleteItems || [])
+    }
+  }
+
+  constructor(private http: HttpClient, private translate: TranslateService) {
+    this.rawChange = new Subject<Items[]>()
+    this.itemsChange = this.rawChange.pipe(distinctUntilChanged())
+    this.subscription = new Subscription()
+  }
+
+  ngOnInit(): void {
+    if (this.loadOnce) {
+      this.loadedItems = this.requestAutocompleteItems('*').pipe(shareReplay(1))
+    }
+
+    this.items = this.selectedItems
+    this.subscription = this.rawChange
+      .pipe(tap((v) => (this.invalid = v.length === 0)))
+      .subscribe()
+    this.rawChange.next(this.items)
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
+}

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

@@ -0,0 +1,32 @@
+<div class="flex">
+  <input
+    *ngIf="displayText && rows <= 1"
+    type="text"
+    class="grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate"
+    value="{{ text }}"
+    readonly
+  />
+  <textarea
+    *ngIf="displayText && rows > 1"
+    [rows]="rows"
+    class="grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max"
+    readonly
+    >{{ text }}</textarea
+  >
+  <button
+    type="button"
+    (click)="copyText($event)"
+    [ngClass]="{
+      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+        displayText
+    }"
+    mat-raised-button
+    [matTooltip]="tooltipText"
+    matTooltipPosition="above"
+  >
+    <mat-icon
+      class="material-symbols-outlined pointer-events-none align-middle card-icon"
+      >content_copy</mat-icon
+    >
+  </button>
+</div>

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

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-copy-text-button',
+  templateUrl: './copy-text-button.component.html',
+  styleUrls: ['./copy-text-button.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CopyTextButtonComponent {
+  @Input() text: string
+  @Input() tooltipText: string
+  @Input() displayText = true
+  @Input() rows = 1
+
+  copyText(event: MouseEvent) {
+    navigator.clipboard.writeText(this.text)
+    ;(event.target as HTMLElement).blur()
+  }
+}

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.css

@@ -0,0 +1,4 @@
+ngx-dropzone {
+  height: auto;
+  border: none;
+}

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

@@ -0,0 +1,14 @@
+<div class="flex h-full">
+  <ngx-dropzone
+    class="flex-1"
+    multiple="false"
+    (change)="selectFile($event)"
+    [accept]="accept"
+  >
+    <div *ngIf="!fileName" class="text-gray-900 pl-2 py-2" translate="">
+      {{ placeholder }}
+    </div>
+
+    <div *ngIf="fileName" class="text-gray-900 pl-2 py-2">{{ fileName }}</div>
+  </ngx-dropzone>
+</div>

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

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+export const placeholder = 'dropFile'
+marker('dropFile')
+
+@Component({
+  selector: 'gn-ui-drag-and-drop-file-input',
+  templateUrl: './drag-and-drop-file-input.component.html',
+  styleUrls: ['./drag-and-drop-file-input.component.css'],
+})
+export class DragAndDropFileInputComponent {
+  @Input() placeholder = placeholder
+  @Input() accept = '*'
+  @Output() fileChange = new EventEmitter<any>()
+  selectedFile: File = null
+
+  get fileName(): string | null {
+    return this.selectedFile && this.selectedFile.name
+  }
+
+  selectFile(event) {
+    this.selectedFile = event.addedFiles[0]
+
+    this.fileChange.emit(this.selectedFile)
+  }
+}