geonetwork-ui 2.3.2 → 2.4.0-alpha.1

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

@@ -16,6 +16,8 @@ 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'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -30,6 +32,8 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
     FilesDropDirective,
     MatProgressSpinnerModule,
     TranslateModule,
+    UrlInputComponent,
+    TextInputComponent,
   ],
 })
 export class ImageInputComponent {
@@ -49,10 +53,13 @@ export class ImageInputComponent {
   downloadError = false
   showAltTextInput = false
 
-  urlInputValue?: string
   lastUploadType?: 'file' | 'url'
   lastUploadContent?: string | File
 
+  get isUploadInProgress() {
+    return this.uploadProgress !== undefined
+  }
+
   constructor(private http: HttpClient, private cd: ChangeDetectorRef) {}
 
   getPrimaryText() {
@@ -104,24 +111,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 +133,7 @@ export class ImageInputComponent {
           error: () => {
             this.downloadError = true
             this.cd.markForCheck()
-            this.urlChange.emit(this.urlInputValue)
+            this.urlChange.emit(url)
           },
         })
       }
@@ -141,11 +144,12 @@ export class ImageInputComponent {
     }
   }
 
-  handleSecondaryTextClick() {
+  handleSecondaryTextClick(event: Event) {
     if (this.uploadError) {
       this.handleRetry()
     } else if (this.uploadProgress) {
       this.handleCancel()
+      event.preventDefault()
     }
   }
 
@@ -172,9 +176,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/search-input/search-input.component.ts

@@ -4,12 +4,16 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { Subject, distinctUntilChanged } from 'rxjs'
+import { distinctUntilChanged, Subject } from 'rxjs'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-search-input',
   templateUrl: './search-input.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class SearchInputComponent {
   @Input() value = ''

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,14 @@
+<mat-button-toggle-group
+  #group="matButtonToggleGroup"
+  multiple="false"
+  class="flex w-full"
+>
+  <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,39 @@
+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? = ''
+  @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

@@ -4,13 +4,12 @@ import { UtilSharedModule } from '../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { TagInputModule } from 'ngx-chips'
 import { NgxDropzoneModule } from 'ngx-dropzone'
-import { AutocompleteComponent } from './autocomplete/autocomplete.component'
 import { ButtonComponent } from './button/button.component'
+import { BadgeComponent } from './badge/badge.component'
 import { ChipsInputComponent } from './chips-input/chips-input.component'
 import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
 import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
 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'
@@ -25,7 +24,6 @@ import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.com
 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'
@@ -36,8 +34,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
 
 @NgModule({
   declarations: [
-    AutocompleteComponent,
-    TextInputComponent,
     DragAndDropFileInputComponent,
     ChipsInputComponent,
     NavigationButtonComponent,
@@ -46,7 +42,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     ViewportIntersectorComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
-    SearchInputComponent,
   ],
   imports: [
     CommonModule,
@@ -73,12 +68,11 @@ import { ImageInputComponent } from './image-input/image-input.component'
     DropdownSelectorComponent,
     DateRangePickerComponent,
     CheckToggleComponent,
+    BadgeComponent,
   ],
   exports: [
     DropdownSelectorComponent,
-    AutocompleteComponent,
     ButtonComponent,
-    TextInputComponent,
     DragAndDropFileInputComponent,
     TextAreaComponent,
     ChipsInputComponent,
@@ -89,10 +83,10 @@ import { ImageInputComponent } from './image-input/image-input.component'
     CheckToggleComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
-    SearchInputComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
     ImageInputComponent,
+    BadgeComponent,
   ],
 })
 export class UiInputsModule {}

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

@@ -0,0 +1,9 @@
+:host {
+  --gn-ui-button-rounded: 8px;
+  --gn-ui-button-width: 32px;
+  --gn-ui-button-padding: 0;
+
+  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6em) - 6px);
+  --2x-side-padding: calc(var(--side-padding) * 2);
+  --text-padding: calc(var(--side-padding) + 40px);
+}

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

@@ -0,0 +1,41 @@
+<span class="w-full inline-block relative">
+  <input
+    #input
+    class="gn-ui-text-input px-[var(--text-padding)]"
+    [ngClass]="extraClass"
+    type="url"
+    [value]="value"
+    (input)="handleInput()"
+    (keydown.enter)="handleChange(input)"
+    [placeholder]="placeholder"
+    [attr.aria-label]="placeholder"
+    [disabled]="disabled"
+  />
+  <div
+    class="absolute inset-y-[var(--side-padding)] left-[var(--2x-side-padding)] grid justify-center items-center pointer-events-none"
+    [ngClass]='{
+      "text-primary": !disabled,
+      "text-primary-lightest": disabled,
+    }'
+  >
+    <mat-icon
+      class="material-symbols-outlined h-[24px] !w-[26px] text-[28px] leading-[24px]"
+    >
+      link
+    </mat-icon>
+  </div>
+  <gn-ui-button
+    extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
+    type="primary"
+    [disabled]="
+      disabled ||
+      input.value === '' ||
+      (urlCanParse && !URLcanParse(input.value))
+    "
+    (buttonClick)="handleChange(input)"
+  >
+    <mat-icon class="material-symbols-outlined text-[20px] leading-[24px]">
+      arrow_upward
+    </mat-icon>
+  </gn-ui-button>
+</span>

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

@@ -0,0 +1,56 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../button/button.component'
+import { MatIconModule } from '@angular/material/icon'
+import { filter } from 'rxjs/operators'
+import { Subject } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-url-input',
+  templateUrl: './url-input.component.html',
+  styleUrls: ['./url-input.component.css'],
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, MatIconModule],
+})
+export class UrlInputComponent implements OnChanges {
+  @Input() value = ''
+  @Input() extraClass = ''
+  @Input() placeholder = 'https://'
+  @Input() disabled: boolean
+  @Input() urlCanParse?: boolean
+  rawChange = new Subject<string>()
+  @Output() valueChange = this.rawChange.pipe(filter((v) => !!v))
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.value) {
+      console.log('changes.value', changes.value)
+    }
+  }
+
+  handleInput() {
+    this.cd.markForCheck()
+  }
+
+  handleChange(element: HTMLInputElement) {
+    const value = element.value
+    this.rawChange.next(value)
+  }
+
+  URLcanParse(url: string): boolean {
+    try {
+      new URL(url)
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+}

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

@@ -3,8 +3,11 @@ export * from './lib/carousel/carousel.component'
 export * from './lib/expandable-panel-button/expandable-panel-button.component'
 export * from './lib/expandable-panel/expandable-panel.component'
 export * from './lib/form-field-wrapper/form-field-wrapper.component'
+export * from './lib/max-lines/max-lines.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/sortable-list/sortable-list.component'
+export * from './lib/modal-dialog/modal-dialog.component'
 export * from './lib/ui-layout.module'

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html

@@ -1,9 +1,10 @@
-<div class="h-full flex flex-col">
+<div class="h-full flex flex-col" *ngIf="label; else onlyContent">
   <div class="flex-none w-full flex flex-row items-center">
     <span class="flex-none font-bold">{{ label }}</span>
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
       <span
+        *ngIf="hint"
         class="material-symbols-outlined m-2 gn-ui-icon-small"
         [matTooltip]="hint"
         matTooltipPosition="above"
@@ -12,7 +13,11 @@
       </span>
     </div>
   </div>
-  <div class="flex-1">
-    <ng-content></ng-content>
+  <div class="flex-1 mt-2">
+    <ng-container *ngTemplateOutlet="onlyContent"> </ng-container>
   </div>
 </div>
+
+<ng-template #onlyContent>
+  <ng-content></ng-content>
+</ng-template>

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-form-field-wrapper',
@@ -8,9 +9,9 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatIconModule, MatTooltipModule],
+  imports: [MatIconModule, MatTooltipModule, CommonModule],
 })
 export class FormFieldWrapperComponent {
-  @Input() label: string
-  @Input() hint: string
+  @Input() label?: string
+  @Input() hint?: string
 }

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.css

@@ -7,7 +7,7 @@
 }
 
 .table-header-cell {
-  @apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;
+  @apply text-gray-700 px-3 py-3 flex items-center truncate bg-white;
 }
 
 button.table-header-cell {

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.html

@@ -1,5 +1,5 @@
 <div class="grid w-full" [ngStyle]="gridStyle">
-  <div class="contents">
+  <div class="contents w-full">
     <ng-container *ngFor="let column of columns">
       <button
         *ngIf="column.sortable"
@@ -30,6 +30,7 @@
     class="contents text-gray-900 cursor-pointer group"
     *ngFor="let item of items"
     (click)="handleRowClick(item)"
+    data-cy="table-row"
   >
     <div
       class="relative h-0"
@@ -43,7 +44,7 @@
     </div>
     <ng-container *ngFor="let column of columns">
       <div
-        class="table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200"
+        class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200"
       >
         <ng-container
           *ngTemplateOutlet="column.cell; context: { $implicit: item }"

package/src/libs/ui/{elements → layout}/src/lib/max-lines/max-lines.component.html

@@ -14,6 +14,7 @@
   *ngIf="showToggleButton"
   (click)="toggleDisplay()"
   class="text-secondary cursor-pointer pt-2.5"
+  data-cy="readMoreButton"
 >
   {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
 </div>

package/src/libs/ui/{elements → layout}/src/lib/max-lines/max-lines.component.ts

@@ -1,19 +1,23 @@
 import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  Input,
   ElementRef,
-  ChangeDetectionStrategy,
-  AfterViewInit,
-  ViewChild,
+  Input,
   OnDestroy,
-  ChangeDetectorRef,
+  ViewChild,
 } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-max-lines',
   templateUrl: './max-lines.component.html',
   styleUrls: ['./max-lines.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, TranslateModule],
 })
 export class MaxLinesComponent implements AfterViewInit, OnDestroy {
   @Input() maxLines = 6

package/src/libs/ui/layout/src/lib/modal-dialog/modal-dialog.component.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+<div mat-dialog-content>
+  <ng-container
+    *ngTemplateOutlet="data.body; context: { $implicit: data.bodyContext }"
+  ></ng-container>
+</div>
+<div mat-dialog-actions>
+  <gn-ui-button (buttonClick)="onCancel()">{{ data.cancelText }}</gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="onConfirm()"
+    class="ml-2"
+    data-cy="confirm-button"
+    >{{ data.confirmText }}</gn-ui-button
+  >
+</div>