geonetwork-ui 2.10.0-dev.fc6515c0b → 2.10.1-dev.6ae777d9d

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

@@ -1,27 +1,34 @@
-<div
-  class="gn-ui-badge flex items-center gap-1.5"
-  [ngClass]="
-    clickable
-      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'
-      : ''
-  "
->
+<ng-template #badgeContent>
   <span><ng-content></ng-content></span>
-  @if (removable) {
-    <gn-ui-button
-      type="light"
-      (buttonClick)="removeBadge()"
-      extraClass="text-xs border-0 px-0 py-0"
-      style="
-        --gn-ui-button-padding: 0;
-        --gn-ui-button-font-size: 0.8em;
-        --gn-ui-button-width: 1.4em;
-        --gn-ui-button-height: 1.4em;
-        --gn-ui-button-rounded: 1.4em;
-        --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
-      "
-    >
-      <ng-icon name="matClose"></ng-icon>
-    </gn-ui-button>
-  }
-</div>
+</ng-template>
+
+@if (clickable) {
+  <button
+    type="button"
+    class="gn-ui-badge-clickable"
+    (click)="handleClick($event)"
+  >
+    <ng-container [ngTemplateOutlet]="badgeContent"></ng-container>
+  </button>
+} @else {
+  <span class="gn-ui-badge gap-1.5">
+    <ng-container [ngTemplateOutlet]="badgeContent"></ng-container>
+    @if (removable) {
+      <gn-ui-button
+        type="light"
+        (buttonClick)="removeBadge()"
+        extraClass="text-xs border-0 px-0 py-0"
+        style="
+          --gn-ui-button-padding: 0;
+          --gn-ui-button-font-size: 0.8em;
+          --gn-ui-button-width: 1.4em;
+          --gn-ui-button-height: 1.4em;
+          --gn-ui-button-rounded: 1.4em;
+          --gn-ui-button-background: var(--gn-ui-badge-background-color, white);
+        "
+      >
+        <ng-icon name="matClose"></ng-icon>
+      </gn-ui-button>
+    }
+  </span>
+}

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

@@ -13,6 +13,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { matClose } from '@ng-icons/material-icons/baseline'
+import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-badge',
@@ -34,8 +35,16 @@ export class BadgeComponent {
   @Input() clickable? = false
   @Input() removable? = false
   @Output() badgeRemoveClicked = new EventEmitter<void>()
+  @Output() badgeClicked = new EventEmitter<void>()
 
   removeBadge() {
     this.badgeRemoveClicked.emit()
   }
+
+  handleClick(event: MouseEvent) {
+    this.badgeClicked.emit()
+    event.preventDefault()
+    ;(event.currentTarget as HTMLElement).blur()
+    propagateToDocumentOnly(event)
+  }
 }

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

@@ -25,6 +25,7 @@ export class ButtonComponent {
       | 'outline'
       | 'light'
       | 'gray'
+      | 'gray-light'
       | 'black'
       | 'primary-light'
   ) {
@@ -45,6 +46,9 @@ export class ButtonComponent {
       case 'gray':
         this.btnClass = 'gn-ui-btn-gray'
         break
+      case 'gray-light':
+        this.btnClass = 'gn-ui-btn-gray-light'
+        break
       case 'black':
         this.btnClass = 'gn-ui-btn-black'
         break

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts

@@ -2,9 +2,9 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
-  inject,
 } from '@angular/core'
 import {
   DateAdapter,
@@ -52,6 +52,6 @@ export class DatePickerComponent {
   @Output() dateChange = new EventEmitter<Date>()
 
   constructor() {
-    this.dateAdapter.setLocale(this.translate.currentLang)
+    this.dateAdapter.setLocale(this.translate.getCurrentLang())
   }
 }

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html

@@ -51,7 +51,7 @@
   <div
     class="bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container"
     [style.max-height]="overlayMaxHeight"
-    [style.width]="overlayWidth"
+    [style.min-width]="overlayMinWidth"
     role="listbox"
     tabindex="-1"
     [attr.id]="id"

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.ts

@@ -3,12 +3,12 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   Output,
   QueryList,
   ViewChild,
   ViewChildren,
-  inject,
 } from '@angular/core'
 import {
   CdkConnectedOverlay,
@@ -85,7 +85,7 @@ export class DropdownMultiselectComponent {
   ]
   scrollStrategy = this.scrollStrategies.reposition()
   overlayOpen = false
-  overlayWidth = 'auto'
+  overlayMinWidth = 'none'
   overlayMaxHeight = 'none'
   id = `dropdown-multiselect-${Math.floor(Math.random() * 10000)}`
 
@@ -120,7 +120,7 @@ export class DropdownMultiselectComponent {
   }
 
   openOverlay() {
-    this.overlayWidth =
+    this.overlayMinWidth =
       this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
         .width + 'px'
     this.overlayMaxHeight = this.maxRows

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

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

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

@@ -1,13 +1,17 @@
 <input
   #input
   class="gn-ui-text-input"
-  [ngClass]="extraClass"
-  type="text"
-  [value]="value"
+  [class]="extraClass()"
+  [ngClass]="{
+    'border-red-400 focus:border-red-800 hover:border-red-800 text-red-800':
+      !isValid(),
+  }"
+  [type]="type()"
+  [(ngModel)]="inputModel"
   (change)="handleChange($event)"
   (input)="handleChange($event)"
-  [placeholder]="placeholder"
-  [attr.aria-label]="placeholder"
-  [attr.required]="required || null"
-  [disabled]="disabled"
+  [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

@@ -1,45 +1,71 @@
 import {
-  AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
-  Input,
-  Output,
-  ViewChild,
+  computed,
+  ElementRef,
+  input,
+  output,
+  signal,
+  viewChild,
 } from '@angular/core'
-import { distinctUntilChanged } from 'rxjs/operators'
-import { Subject } from 'rxjs'
-import { CommonModule } from '@angular/common'
+import { NgClass } from '@angular/common'
+import { FormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-text-input',
   templateUrl: './text-input.component.html',
   styleUrls: ['./text-input.component.css'],
   standalone: true,
-  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgClass, FormsModule],
 })
-export class TextInputComponent implements AfterViewInit {
-  @Input() value = ''
-  @Input() extraClass = ''
-  @Input() placeholder: string
-  @Input() required = false
-  @Input() disabled: boolean
-  rawChange = new Subject<string>()
-  @Output() valueChange = this.rawChange.pipe(distinctUntilChanged())
-  @ViewChild('input') input
+export class TextInputComponent {
+  value = input<string, string>('', {
+    transform: (v: string) => {
+      this.inputModel.set(v)
+      // make sure the native element value is up to date
+      // TODO: use form() signal when migrated to angular 22 for cleaner implementation
+      if (this.inputRef()) {
+        this.inputRef().nativeElement.value = v
+      }
+      return v
+    },
+  })
+  extraClass = input('')
+  placeholder = input<string>()
+  required = input(false)
+  disabled = input<boolean>()
+  type = input('text', {
+    transform: (type: string) => {
+      // make sure the native element type is up to date
+      // TODO: use form() signal when migrated to angular 22 for cleaner implementation
+      if (this.inputRef()) {
+        this.inputRef().nativeElement.type = type
+      }
+      return type
+    },
+  })
 
-  ngAfterViewInit() {
-    this.checkRequired(this.input.nativeElement.value)
-  }
+  valueChange = output<string>()
 
-  checkRequired(value) {
-    this.input.nativeElement.classList.toggle(
-      'invalid',
-      this.required && value === ''
-    )
-  }
+  inputModel = signal('')
+  inputRef = viewChild<ElementRef<HTMLInputElement>>('input')
+
+  isValid = computed<boolean>(() => {
+    const isValid = this.inputRef().nativeElement.checkValidity()
+    const isEmpty = this.inputModel().trim() === ''
+    const isRequired = this.required()
+    return isValid && !(isEmpty && isRequired)
+  })
+
+  private lastEmittedValue: string | undefined = undefined
 
-  handleChange($event) {
-    const value = $event.target.value
-    this.checkRequired(value)
-    this.rawChange.next(value)
+  handleChange($event: Event) {
+    const input = $event.target as HTMLInputElement
+    const value = input.value
+    if (value === this.lastEmittedValue) return
+    this.inputModel.set(value)
+    this.lastEmittedValue = value
+    this.valueChange.emit(value)
   }
 }

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

@@ -3,14 +3,14 @@
     <span class="flex-none font-bold" translate="">{{ label }}</span>
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
-      <span
+      <ng-icon
         *ngIf="hint"
-        class="material-symbols-outlined m-2 gn-ui-icon-small"
+        name="matHelpOutline"
+        size="16"
+        class="m-2"
         [matTooltip]="hint"
         matTooltipPosition="above"
-      >
-        help
-      </span>
+      ></ng-icon>
     </div>
   </div>
   <div class="flex-1 mt-2">

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

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matHelpOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-form-field-wrapper',
@@ -9,7 +11,13 @@ import { TranslateDirective } from '@ngx-translate/core'
   styleUrls: ['./form-field-wrapper.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatTooltipModule, CommonModule, TranslateDirective],
+  imports: [
+    MatTooltipModule,
+    CommonModule,
+    TranslateDirective,
+    NgIconComponent,
+  ],
+  providers: [provideIcons({ matHelpOutline })],
 })
 export class FormFieldWrapperComponent {
   @Input() label?: string

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

@@ -37,7 +37,7 @@
       (click)="handleRowClick(item)"
       data-cy="table-row"
       [attr.data-cy-title]="item.title"
-      [title]="getItemTitle(item) | translate"
+      [title]="getItemTitle(item) | translate: { recordKind: item['kind'] }"
     >
       <div
         class="relative h-0"

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

@@ -16,9 +16,6 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { Observable, of } from 'rxjs'
 
-marker('editor.record.lock.resourceType')
-marker('editor.record.lock.harvested')
-marker('editor.record.lock.owner')
 @Component({
   selector: 'gn-ui-interactive-table',
   templateUrl: './interactive-table.component.html',
@@ -53,12 +50,10 @@ export class InteractiveTableComponent {
 
   getItemTitle(item: CatalogRecord) {
     if (!this.isDraftPage) {
-      if (item.kind !== 'dataset') {
-        return 'editor.record.lock.resourceType'
-      } else if (item.extras?.isHarvested) {
-        return 'editor.record.lock.harvested'
+      if (item.extras?.isHarvested) {
+        return marker('editor.record.lock.harvested')
       } else if (!item.extras?.edit) {
-        return 'editor.record.lock.owner'
+        return marker('editor.record.lock.owner')
       }
     }
     return ''

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

@@ -5,12 +5,12 @@
 >
   @for (item of items; track trackByFn(index); let index = $index) {
     <div class="sortable-box bg-white flex items-center" cdkDrag>
-      <span
+      <ng-icon
         cdkDragHandle
-        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
-      >
-        drag_handle
-      </span>
+        name="matDragHandleOutline"
+        size="20"
+        class="mx-[10px] cursor-grab flex-none"
+      ></ng-icon>
       <div class="flex-1">
         <ng-container
           *ngTemplateOutlet="
@@ -29,8 +29,8 @@
         class="ml-[8px] mr-[10px]"
         (buttonClick)="removeItem(index)"
         data-test="remove-item"
-        ><span class="material-symbols-outlined gn-ui-icon-medium">close</span>
-      </gn-ui-button>
+        ><ng-icon name="matCloseOutline" size="20"></ng-icon
+      ></gn-ui-button>
     </div>
   }
 </div>

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

@@ -15,6 +15,11 @@ import {
   TemplateRef,
 } from '@angular/core'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  matCloseOutline,
+  matDragHandleOutline,
+} from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-sortable-list',
@@ -22,7 +27,15 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
   styleUrls: ['sortable-list.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, CdkDropList, CdkDrag, CdkDragHandle, ButtonComponent],
+  imports: [
+    CommonModule,
+    CdkDropList,
+    CdkDrag,
+    CdkDragHandle,
+    ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [provideIcons({ matDragHandleOutline, matCloseOutline })],
 })
 export class SortableListComponent {
   @Input() elementTemplate: TemplateRef<unknown>

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.ts

@@ -29,11 +29,11 @@ import {
   MapExtentChangeEvent,
   MapExtentChangeEventType,
   MapContext,
-  MapContextLayerXyz,
   MapContextView,
   MapEventsByType,
   SourceLoadErrorEvent,
   SourceLoadErrorType,
+  MapContextLayerMapLibreStyle,
 } from '@geospatial-sdk/core'
 import {
   applyContextDiffToMap,
@@ -55,10 +55,9 @@ import {
 import { matSwipeOutline } from '@ng-icons/material-icons/outline'
 import { transformExtent } from 'ol/proj.js'
 
-const DEFAULT_BASEMAP_LAYER: MapContextLayerXyz = {
-  type: 'xyz',
-  url: `https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-  attributions: `<span>© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/">Carto</a></span>`,
+export const DEFAULT_BASEMAP_LAYER: MapContextLayerMapLibreStyle = {
+  type: 'maplibre-style',
+  styleUrl: `https://basemaps.cartocdn.com/gl/positron-gl-style/style.json`,
 }
 
 const DEFAULT_VIEW: MapContextView = {

package/src/libs/ui/map/src/lib/components/spatial-extent/spatial-extent.component.ts

@@ -1,18 +1,11 @@
 import { ChangeDetectorRef, Component, inject, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { Geometry } from 'geojson'
-import { GeoJSONFeatureCollection } from 'ol/format/GeoJSON.js'
-import GeoJSON from 'ol/format/GeoJSON.js'
-import { Polygon } from 'ol/geom.js'
-import {
-  createViewFromLayer,
-  MapContext,
-  MapContextLayer,
-} from '@geospatial-sdk/core'
+import { createViewFromLayer, MapContext } from '@geospatial-sdk/core'
 import { MapContainerComponent } from '../map-container/map-container.component'
 import { BehaviorSubject, from, Observable, of } from 'rxjs'
 import { map, switchMap, tap } from 'rxjs/operators'
 import { DatasetSpatialExtent } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { createSpatialExtentLayer } from '../../map-utils'
 
 @Component({
   selector: 'gn-ui-spatial-extent',
@@ -30,39 +23,10 @@ export class SpatialExtentComponent {
   spatialExtents$ = new BehaviorSubject<DatasetSpatialExtent[]>([])
   mapContext$: Observable<MapContext> = this.spatialExtents$.pipe(
     switchMap((extents) => {
-      if (extents.length === 0) {
+      const layer = createSpatialExtentLayer(extents)
+      if (!layer) {
         return of(null)
       }
-      const featureCollection: GeoJSONFeatureCollection = {
-        type: 'FeatureCollection',
-        features: [],
-      }
-      extents.forEach((extent) => {
-        if (extent.geometry) {
-          featureCollection.features.push({
-            type: 'Feature',
-            properties: {},
-            geometry: extent.geometry,
-          })
-        } else if (extent.bbox?.length >= 0) {
-          featureCollection.features.push({
-            type: 'Feature',
-            properties: {},
-            geometry: this.bboxCoordsToGeometry(extent.bbox),
-          })
-        }
-      })
-
-      const layer: MapContextLayer = {
-        type: 'geojson',
-        data: featureCollection,
-        label: 'Spatial extents',
-        style: {
-          'stroke-color': 'black',
-          'stroke-width': 2,
-          'fill-color': 'rgba(153, 153, 153, 0.3)',
-        },
-      }
       return from(createViewFromLayer(layer)).pipe(
         map((view) => ({ view, layers: [layer] }) as MapContext),
         tap(() => this._cdr.markForCheck())
@@ -71,18 +35,4 @@ export class SpatialExtentComponent {
   )
 
   error = ''
-
-  bboxCoordsToGeometry(bbox: [number, number, number, number]): Geometry {
-    const geometry = new Polygon([
-      [
-        [bbox[0], bbox[1]],
-        [bbox[0], bbox[3]],
-        [bbox[2], bbox[3]],
-        [bbox[2], bbox[1]],
-        [bbox[0], bbox[1]],
-      ],
-    ])
-
-    return new GeoJSON().writeGeometryObject(geometry)
-  }
 }

package/src/libs/ui/map/src/lib/map-utils.ts

@@ -12,6 +12,54 @@ import {
   MouseWheelZoom,
 } from 'ol/interaction.js'
 import MapBrowserEvent from 'ol/MapBrowserEvent.js'
+import type { DatasetSpatialExtent } from '../../../../../libs/common/domain/src/lib/model/record'
+import type {
+  MapContextLayer,
+  MapContextLayerGeojson,
+} from '@geospatial-sdk/core'
+import { spatialExtentsToFeatureCollection } from '../../../../../libs/util/shared/src'
+
+export type SpatialExtentLayerStyle = NonNullable<
+  MapContextLayerGeojson['style']
+>
+
+/**
+ * Default style for a spatial-extent layer: a solid black outline over a
+ * translucent grey fill.
+ */
+export const DEFAULT_SPATIAL_EXTENT_STYLE: SpatialExtentLayerStyle = {
+  'stroke-color': 'black',
+  'stroke-width': 2,
+  'fill-color': 'rgba(153, 153, 153, 0.3)',
+}
+
+/**
+ * Builds a GeoJSON map layer drawing the given spatial extents: each extent is
+ * rendered from its own geometry or, when only a bounding box is available,
+ * from a polygon derived from that box.
+ *
+ * @returns the layer, or `null` when none of the extents can be represented.
+ */
+export function createSpatialExtentLayer(
+  extents: DatasetSpatialExtent[],
+  overrides?: {
+    label?: string
+    clickable?: boolean
+    style?: SpatialExtentLayerStyle
+  }
+): MapContextLayer | null {
+  const data = spatialExtentsToFeatureCollection(extents)
+  if (data.features.length === 0) {
+    return null
+  }
+  return {
+    type: 'geojson',
+    data,
+    label: 'Spatial extents',
+    style: DEFAULT_SPATIAL_EXTENT_STYLE,
+    ...overrides,
+  }
+}
 
 export function prioritizePageScroll(interactions: Collection<Interaction>) {
   interactions.clear()

package/src/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.ts

@@ -52,7 +52,7 @@ export class RecordPreviewFeedComponent extends RecordPreviewComponent {
   protected elementRef: ElementRef
   private translate = inject(TranslateService)
 
-  timeFormat = new Duration(this.translate.currentLang, {})
+  timeFormat = new Duration(this.translate.getCurrentLang(), {})
 
   constructor() {
     const elementRef = inject(ElementRef)