geonetwork-ui 2.1.0-initial

package/src/libs/ui/inputs/src/lib/form-field/form-field-simple/form-field-simple.component.html

@@ -0,0 +1,27 @@
+<input
+  *ngIf="!isSelect"
+  [type]="inputType"
+  [readonly]="readonly"
+  [formControl]="control"
+  [placeholder]="placeholder"
+  class="border rounded-md p-3 w-full bg-white transition-colors"
+  [ngClass]="{
+    'border-pink-500': invalid,
+    'border-gray-200': !invalid,
+    'text-gray-600': readonly
+  }"
+/>
+<select
+  *ngIf="isSelect"
+  [formControl]="control"
+  class="border rounded-md p-3 w-full bg-white transition-colors"
+  [ngClass]="{
+    'border-pink-500': invalid,
+    'border-gray-200': !invalid,
+    'text-gray-600': readonly
+  }"
+>
+  <option *ngFor="let option of options" [ngValue]="option.value">
+    {{ option.label }}
+  </option>
+</select>

package/src/libs/ui/inputs/src/lib/form-field/form-field-simple/form-field-simple.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl } from '@angular/forms'
+
+@Component({
+  selector: 'gn-ui-form-field-simple',
+  templateUrl: './form-field-simple.component.html',
+  styleUrls: ['./form-field-simple.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldSimpleComponent {
+  @Input() type: 'date' | 'url' | 'text' | 'number' | 'list' | 'toggle'
+  @Input() control!: FormControl
+  @Input() readonly = false
+  @Input() invalid = false
+  @Input() placeholder = ''
+  @Input() options?: { label: string; value: unknown }[]
+
+  get inputType() {
+    switch (this.type) {
+      case 'url':
+      case 'text':
+        return 'text'
+      case 'date':
+        return 'datetime-local'
+      case 'number':
+        return 'number'
+      case 'toggle':
+        return 'checkbox'
+      default:
+        return ''
+    }
+  }
+
+  get isSelect() {
+    return this.type === 'list'
+  }
+}

package/src/libs/ui/inputs/src/lib/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html

@@ -0,0 +1 @@
+<p>form-field-spatial-extent works!</p>

package/src/libs/ui/inputs/src/lib/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-form-field-spatial-extent',
+  templateUrl: './form-field-spatial-extent.component.html',
+  styleUrls: ['./form-field-spatial-extent.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldSpatialExtentComponent {}

package/src/libs/ui/inputs/src/lib/form-field/form-field-temporal-extent/form-field-temporal-extent.component.html

@@ -0,0 +1 @@
+<p>form-field-temporal-extent works!</p>

package/src/libs/ui/inputs/src/lib/form-field/form-field-temporal-extent/form-field-temporal-extent.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-form-field-temporal-extent',
+  templateUrl: './form-field-temporal-extent.component.html',
+  styleUrls: ['./form-field-temporal-extent.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldTemporalExtentComponent {}

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

@@ -0,0 +1,68 @@
+<div class="flex flex-col h-full">
+  <div class="mb-2 flex flex-row">
+    <label class="grow">
+      <span class="font-medium field-label">{{
+        config.labelKey | translate
+      }}</span>
+      <span *ngIf="config.hintKey" class="text-gray-900 text-sm">
+        - {{ config.hintKey | translate }}
+      </span>
+    </label>
+    <mat-icon
+      *ngIf="isFieldOk"
+      class="material-symbols-outlined text-[#c6d950] icon-ok"
+      >check_circle</mat-icon
+    >
+    <mat-icon
+      *ngIf="isFieldLocked"
+      class="material-symbols-outlined text-blue-400 icon-locked"
+      >lock</mat-icon
+    >
+    <mat-icon
+      *ngIf="isFieldInvalid"
+      class="material-symbols-outlined text-pink-500 icon-invalid"
+      >cancel</mat-icon
+    >
+  </div>
+  <ng-container *ngIf="isSimpleField">
+    <gn-ui-form-field-simple
+      [type]="simpleType"
+      [control]="formControl"
+      [readonly]="isFieldLocked"
+      [invalid]="isFieldInvalid"
+    ></gn-ui-form-field-simple>
+  </ng-container>
+  <ng-container *ngIf="isFileField">
+    <gn-ui-form-field-file
+      [control]="formControl"
+      [readonly]="isFieldLocked"
+      [invalid]="isFieldInvalid"
+    ></gn-ui-form-field-file>
+  </ng-container>
+  <ng-container *ngIf="isRichField">
+    <gn-ui-form-field-rich
+      class="grow"
+      [control]="formControl"
+      [readonly]="isFieldLocked"
+      [invalid]="isFieldInvalid"
+    ></gn-ui-form-field-rich>
+  </ng-container>
+  <ng-container *ngIf="isArrayField">
+    <gn-ui-form-field-array></gn-ui-form-field-array>
+  </ng-container>
+  <ng-container *ngIf="isObjectField">
+    <gn-ui-form-field-object></gn-ui-form-field-object>
+  </ng-container>
+  <ng-container *ngIf="isSpatialExtentField">
+    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
+  </ng-container>
+  <ng-container *ngIf="isTemporalExtentField">
+    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>
+  </ng-container>
+  <div
+    *ngIf="isFieldInvalid && config.invalidHintKey"
+    class="mt-2 text-pink-500 text-sm field-invalid-hint"
+  >
+    {{ config.invalidHintKey | translate }}
+  </div>
+</div>

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

@@ -0,0 +1,78 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Output,
+} from '@angular/core'
+import { FormFieldConfig } from './form-field.model'
+import { FormControl } from '@angular/forms'
+import { Observable } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-form-field',
+  templateUrl: './form-field.component.html',
+  styleUrls: ['./form-field.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormFieldComponent {
+  @Input() config: FormFieldConfig
+  @Input() set value(v: unknown) {
+    this.formControl.setValue(v)
+  }
+  @Output() valueChange: Observable<unknown>
+
+  formControl = new FormControl()
+
+  constructor() {
+    this.valueChange = this.formControl.valueChanges
+  }
+
+  get simpleType() {
+    return this.config.type as
+      | 'date'
+      | 'url'
+      | 'text'
+      | 'number'
+      | 'list'
+      | 'toggle'
+  }
+
+  get isSimpleField() {
+    return (
+      this.config.type === 'text' ||
+      this.config.type === 'number' ||
+      this.config.type === 'date' ||
+      this.config.type === 'list' ||
+      this.config.type === 'url' ||
+      this.config.type === 'toggle'
+    )
+  }
+  get isRichField() {
+    return this.config.type === 'rich'
+  }
+  get isFileField() {
+    return this.config.type === 'file'
+  }
+  get isSpatialExtentField() {
+    return this.config.type === 'spatial_extent'
+  }
+  get isTemporalExtentField() {
+    return this.config.type === 'temporal_extent'
+  }
+  get isArrayField() {
+    return this.config.type === 'array'
+  }
+  get isObjectField() {
+    return this.config.type === 'object'
+  }
+
+  get isFieldOk() {
+    return !this.config.locked && !this.config.invalid
+  }
+  get isFieldLocked() {
+    return this.config.locked
+  }
+  get isFieldInvalid() {
+    return !this.config.locked && this.config.invalid
+  }
+}

package/src/libs/ui/inputs/src/lib/form-field/form-field.model.ts

@@ -0,0 +1,44 @@
+type BaseFormFieldType =
+  | 'text'
+  | 'number'
+  | 'rich'
+  | 'date'
+  | 'list'
+  | 'spatial_extent'
+  | 'temporal_extent'
+  | 'url'
+  | 'file'
+  | 'toggle'
+
+type AllFormFieldType = BaseFormFieldType | 'object' | 'array'
+
+interface FormFieldConfigBase {
+  model?: string
+  type: AllFormFieldType
+  labelKey: string
+  hintKey?: string
+  tooltipKey?: string
+  required?: boolean
+  locked?: boolean
+  invalid?: boolean
+  invalidHintKey?: string
+}
+
+export interface FormFieldConfigSimple extends FormFieldConfigBase {
+  type: BaseFormFieldType
+}
+
+export interface FormFieldConfigArray extends FormFieldConfigBase {
+  type: 'array'
+  items: FormFieldConfig
+}
+
+export interface FormFieldConfigObject extends FormFieldConfigBase {
+  type: 'object'
+  fields: Array<FormFieldConfig>
+}
+
+export type FormFieldConfig =
+  | FormFieldConfigSimple
+  | FormFieldConfigArray
+  | FormFieldConfigObject

package/src/libs/ui/inputs/src/lib/form-field/index.ts

@@ -0,0 +1,9 @@
+export * from './form-field-simple/form-field-simple.component'
+export * from './form-field-file/form-field-file.component'
+export * from './form-field-rich/form-field-rich.component'
+export * from './form-field-object/form-field-object.component'
+export * from './form-field-array/form-field-array.component'
+export * from './form-field-spatial-extent/form-field-spatial-extent.component'
+export * from './form-field-temporal-extent/form-field-temporal-extent.component'
+export * from './form-field.component'
+export * from './form-field.model'

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

@@ -0,0 +1,6 @@
+<button
+  class="group flex items-center justify-center p-1 bg-primary-opacity-25 text-white rounded"
+>
+  <mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
+  <span class="mx-2 hidden group-hover:inline">{{ label }}</span>
+</button>

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

@@ -0,0 +1,12 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-navigation-button',
+  templateUrl: './navigation-button.component.html',
+  styleUrls: ['./navigation-button.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavigationButtonComponent {
+  @Input() label: string
+  @Input() icon: string
+}

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

@@ -0,0 +1,41 @@
+button.enabled {
+  color: var(--star-toggle-enabled-color, var(--color-secondary));
+}
+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;
+}
+
+.star-filled {
+  font-variation-settings: 'FILL' 1;
+}
+
+.star-toggle-overlay {
+  stroke: var(--color-secondary);
+  stroke-width: 3.5px;
+  stroke-linecap: round;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  stroke-dasharray: 5 20;
+  stroke-dashoffset: -15;
+  animation: overlay-dash 0.8s cubic-bezier(0.16, 0.66, 0.44, 0.96) forwards;
+  animation-play-state: paused;
+}
+
+@keyframes overlay-dash {
+  to {
+    stroke-dashoffset: 7;
+  }
+}

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

@@ -0,0 +1,34 @@
+<div class="inline-block relative align-middle" style="line-height: 0.7em">
+  <button
+    type="button"
+    class="-m-[8px] p-[8px]"
+    (click)="toggle($event)"
+    [ngClass]="{
+      enabled: toggled,
+      'disabled opacity-45': !toggled,
+      'transition hover:scale-125 will-change-transform': !disabled,
+      'cursor-default': disabled
+    }"
+  >
+    <mat-icon
+      class="material-symbols-outlined"
+      [ngClass]="{ 'star-filled': toggled }"
+      >star</mat-icon
+    >
+  </button>
+  <svg
+    #starOverlay
+    class="star-toggle-overlay"
+    width="40px"
+    height="40px"
+    viewBox="-15 -15 30 30"
+  >
+    <g>
+      <path d="M 0,13.229167 V 0" />
+      <path d="M -12.484186,4.0880377 0,0" />
+      <path d="M -7.6784102,-10.70262 0,0" />
+      <path d="M 7.8734079,-10.70262 0,0" />
+      <path d="M 12.679184,4.0880376 0,0" />
+    </g>
+  </svg>
+</div>

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

@@ -0,0 +1,37 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
+
+@Component({
+  selector: 'gn-ui-star-toggle',
+  templateUrl: './star-toggle.component.html',
+  styleUrls: ['./star-toggle.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StarToggleComponent {
+  @Input() toggled!: boolean
+  @Input() disabled = false
+  @Output() newValue = new EventEmitter<boolean>()
+  @ViewChild('starOverlay') overlay: ElementRef
+
+  toggle(event: Event) {
+    if (!this.disabled) {
+      this.toggled = !this.toggled
+      if (this.toggled) {
+        const anim = this.overlay.nativeElement.getAnimations()[0]
+        anim.cancel()
+        anim.play()
+      }
+      this.newValue.emit(this.toggled)
+    }
+    propagateToDocumentOnly(event)
+    event.preventDefault()
+  }
+}

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

@@ -0,0 +1,3 @@
+.invalid {
+  border-color: var(--color-secondary);
+}

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

@@ -0,0 +1,12 @@
+<div class="h-full flex">
+  <textarea
+    #input
+    name="textArea"
+    [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"
+    [attr.required]="required || null"
+  ></textarea>
+</div>

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

@@ -0,0 +1,42 @@
+import {
+  AfterViewInit,
+  Component,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { Subject } from 'rxjs'
+import { distinctUntilChanged } from 'rxjs/operators'
+
+@Component({
+  selector: 'gn-ui-text-area',
+  templateUrl: './text-area.component.html',
+  styleUrls: ['./text-area.component.css'],
+})
+export class TextAreaComponent implements AfterViewInit {
+  @Input() value = ''
+  @Input() placeholder: string
+  @Input() required = false
+
+  rawChange = new Subject<string>()
+  @Output() valueChange = this.rawChange.pipe(distinctUntilChanged())
+
+  @ViewChild('input') input
+
+  ngAfterViewInit() {
+    this.checkRequired(this.input.nativeElement.value)
+  }
+
+  checkRequired(value) {
+    this.input.nativeElement.classList.toggle(
+      'invalid',
+      this.required && value === ''
+    )
+  }
+
+  handleChange($event) {
+    const value = $event.target.value
+    this.checkRequired(value)
+    this.rawChange.next(value)
+  }
+}

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

@@ -0,0 +1,3 @@
+.invalid {
+  border-color: var(--color-secondary);
+}

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

@@ -0,0 +1,11 @@
+<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"
+  type="text"
+  [value]="value"
+  (change)="handleChange($event)"
+  (input)="handleChange($event)"
+  [placeholder]="hint"
+  [attr.aria-label]="hint"
+  [attr.required]="required || null"
+/>

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

@@ -0,0 +1,41 @@
+import {
+  AfterViewInit,
+  Component,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { distinctUntilChanged } from 'rxjs/operators'
+import { Subject } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-text-input',
+  templateUrl: './text-input.component.html',
+  styleUrls: ['./text-input.component.css'],
+})
+export class TextInputComponent implements AfterViewInit {
+  @Input() value = ''
+  @Input() hint: string
+  @Input() required = false
+  rawChange = new Subject<string>()
+  @Output() valueChange = this.rawChange.pipe(distinctUntilChanged())
+
+  @ViewChild('input') input
+
+  ngAfterViewInit() {
+    this.checkRequired(this.input.nativeElement.value)
+  }
+
+  checkRequired(value) {
+    this.input.nativeElement.classList.toggle(
+      'invalid',
+      this.required && value === ''
+    )
+  }
+
+  handleChange($event) {
+    const value = $event.target.value
+    this.checkRequired(value)
+    this.rawChange.next(value)
+  }
+}

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

@@ -0,0 +1,94 @@
+import { NgModule } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+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 { 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'
+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 {
+  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'
+import { CommonModule } from '@angular/common'
+
+@NgModule({
+  declarations: [
+    DropdownSelectorComponent,
+    AutocompleteComponent,
+    ButtonComponent,
+    TextInputComponent,
+    DragAndDropFileInputComponent,
+    TextAreaComponent,
+    ChipsInputComponent,
+    NavigationButtonComponent,
+    StarToggleComponent,
+    DropdownMultiselectComponent,
+    ViewportIntersectorComponent,
+    FormFieldComponent,
+    FormFieldSimpleComponent,
+    FormFieldArrayComponent,
+    FormFieldObjectComponent,
+    FormFieldRichComponent,
+    FormFieldFileComponent,
+    FormFieldSpatialExtentComponent,
+    FormFieldTemporalExtentComponent,
+    CheckToggleComponent,
+    CopyTextButtonComponent,
+  ],
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    NgxDropzoneModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TagInputModule,
+    UtilSharedModule,
+    MatAutocompleteModule,
+    MatIconModule,
+    UiWidgetsModule,
+    OverlayModule,
+    MatCheckboxModule,
+    MatTooltipModule,
+  ],
+  exports: [
+    DropdownSelectorComponent,
+    AutocompleteComponent,
+    ButtonComponent,
+    TextInputComponent,
+    DragAndDropFileInputComponent,
+    TextAreaComponent,
+    ChipsInputComponent,
+    NavigationButtonComponent,
+    StarToggleComponent,
+    DropdownMultiselectComponent,
+    ViewportIntersectorComponent,
+    FormFieldComponent,
+    CheckToggleComponent,
+    CopyTextButtonComponent,
+  ],
+})
+export class UiInputsModule {}

package/src/libs/ui/inputs/src/lib/viewport-intersector/viewport-intersector.component.html

@@ -0,0 +1 @@
+<div class="w-full h-full"></div>