geonetwork-ui 2.10.0-dev.e97ea6950 → 2.10.0-dev.f1c00d5fe

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -28,12 +28,10 @@
       <gn-ui-max-lines [maxLines]="7">
         <div class="metadata-info-keywords sm:pb-4 flex flex-wrap gap-2">
           @for (keyword of metadata.keywords; track keyword) {
-            <gn-ui-badge
-              class="inline-block lowercase"
-              (click)="onKeywordClick(keyword)"
-              [clickable]="true"
-              >{{ keyword.label }}</gn-ui-badge
-            >
+            <gn-ui-keyword-badge
+              [keyword]="keyword"
+              (keywordClick)="onKeywordClick($event)"
+            ></gn-ui-keyword-badge>
           }
         </div>
       </gn-ui-max-lines>
@@ -52,7 +50,7 @@
     data-test="usage-panel"
   >
     <div class="flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900">
-      @for (license of licenses; track license) {
+      @for (license of licenses; track $index) {
         @if (license.url) {
           <div class="text-primary">
             <a
@@ -105,9 +103,29 @@
     </div>
   </gn-ui-expandable-panel>
 }
+@if (metadata.contactsForResource?.length) {
+  <gn-ui-expandable-panel
+    [title]="'record.metadata.resource.contacts' | translate"
+    data-test="contacts-panel"
+  >
+    <div class="flex flex-col gap-1 pt-3 pb-4">
+      @for (group of contactGroups; track group.role) {
+        <div class="flex flex-col gap-1 rounded py-4 px-2">
+          <p class="text-xs font-normal text-black">
+            {{ group.roleLabel | translate }}
+          </p>
+          <div class="grid gap-1 grid-cols-1 md:grid-cols-2">
+            @for (contact of group.contacts; track contact.email) {
+              <gn-ui-contact-pill [contact]="contact"></gn-ui-contact-pill>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  </gn-ui-expandable-panel>
+}
 @if (
   (metadata.kind === 'dataset' && metadata.lineage) ||
-  resourceContact ||
   metadata.resourceCreated ||
   metadata.resourcePublished ||
   metadata.resourceUpdated ||
@@ -129,66 +147,6 @@
         </p>
       </div>
     }
-    @if (resourceContact) {
-      <div
-        class="flex flex-row gap-6 mt-5 mb-8 resource-contact"
-        data-test="details-panel-resource-contact"
-      >
-        @if (resourceContact.organization?.logoUrl?.href) {
-          <div
-            class="flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden"
-          >
-            <gn-ui-thumbnail
-              class="relative h-full w-full"
-              [thumbnailUrl]="resourceContact.organization.logoUrl.href"
-              fit="contain"
-            ></gn-ui-thumbnail>
-          </div>
-        }
-        <div class="flex flex-col gap-1">
-          <p class="text-sm font-medium" translate>record.metadata.producer</p>
-          <div
-            class="text-primary font-title text-21 mr-2 cursor-pointer hover:underline"
-            data-cy="organization-name"
-          >
-            {{ resourceContact.organization?.name }}
-          </div>
-          @if (resourceContact.organization?.website) {
-            <div>
-              <a
-                [href]="resourceContact.organization.website"
-                target="_blank"
-                class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
-                >{{ resourceContact.organization.website }}
-                <ng-icon
-                  class="!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
-                  name="matOpenInNew"
-                ></ng-icon>
-              </a>
-            </div>
-          }
-          @if (resourceContact.email) {
-            <div class="mt-4">
-              <div class="flex">
-                <ng-icon
-                  class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-                  name="matMailOutline"
-                ></ng-icon>
-                @if (resourceContact.email) {
-                  <a
-                    [href]="'mailto:' + resourceContact.email"
-                    class="text-sm hover:underline ml-2"
-                    target="_blank"
-                    data-cy="contact-email"
-                    >{{ resourceContact?.email }}</a
-                  >
-                }
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-    }
     <div
       class="py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700"
     >

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -8,7 +8,10 @@ import {
 } from '@angular/core'
 import {
   CatalogRecord,
+  Individual,
   Keyword,
+  Role,
+  RoleLabels,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { DateService, getTemporalRangeUnion } from '../../../../../../libs/util/shared/src'
 import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
@@ -22,14 +25,15 @@ import {
   CopyTextButtonComponent,
 } from '../../../../../../libs/ui/inputs/src'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
+import { KeywordBadgeComponent } from '../keyword-badge/keyword-badge.component'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { matMailOutline } from '@ng-icons/material-icons/outline'
-import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { GnUiLinkifyDirective } from './linkify.directive'
 import { GnUiHumanizeDateDirective } from '../../../../../../libs/util/shared/src'
 
 import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
+import { ContactPillComponent } from '../contact-pill/contact-pill.component'
 
 @Component({
   selector: 'gn-ui-metadata-info',
@@ -44,13 +48,14 @@ import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
     ExpandablePanelComponent,
     BadgeComponent,
     ContentGhostComponent,
-    ThumbnailComponent,
     MaxLinesComponent,
     CopyTextButtonComponent,
     NgIcon,
     GnUiLinkifyDirective,
     GnUiHumanizeDateDirective,
     SpatialExtentComponent,
+    ContactPillComponent,
+    KeywordBadgeComponent,
   ],
   viewProviders: [
     provideIcons({
@@ -132,18 +137,33 @@ export class MetadataInfoComponent {
     return getTemporalRangeUnion(temporalExtents, this.dateService)
   }
 
-  get shownOrganization() {
-    return this.metadata.ownerOrganization
-  }
-
-  get resourceContact() {
-    return this.metadata.contactsForResource?.[0]
-  }
-
   fieldReady(propName: string) {
     return !this.incomplete || propName in this.metadata
   }
 
+  get contactGroups(): {
+    role: Role
+    roleLabel: string
+    contacts: Individual[]
+  }[] {
+    const groups: { role: Role; roleLabel: string; contacts: Individual[] }[] =
+      []
+    const indexByRole = new Map<Role, number>()
+    for (const contact of this.metadata.contactsForResource ?? []) {
+      if (indexByRole.has(contact.role)) {
+        groups[indexByRole.get(contact.role)].contacts.push(contact)
+      } else {
+        indexByRole.set(contact.role, groups.length)
+        groups.push({
+          role: contact.role,
+          roleLabel: RoleLabels.get(contact.role),
+          contacts: [contact],
+        })
+      }
+    }
+    return groups
+  }
+
   onKeywordClick(keyword: Keyword) {
     this.keyword.emit(keyword)
   }

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html

@@ -52,12 +52,11 @@
           </gn-ui-text-input>
           @if (!supportOffset) {
             <div class="flex items-center gap-2 text-orange-500 z-10 ml-3">
-              <span
-                class="material-symbols-outlined"
+              <ng-icon
+                name="matWarningOutline"
+                size="24"
                 matTooltip="Not supported on this service"
-              >
-                warning
-              </span>
+              ></ng-icon>
             </div>
           }
         </div>

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -15,6 +15,8 @@ import {
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matWarningOutline } from '@ng-icons/material-icons/outline'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -35,7 +37,9 @@ const DEFAULT_PARAMS = {
     CopyTextButtonComponent,
     TranslateDirective,
     MatTooltipModule,
+    NgIconComponent,
   ],
+  providers: [provideIcons({ matWarningOutline })],
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {

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,7 +25,9 @@ export class ButtonComponent {
       | 'outline'
       | 'light'
       | 'gray'
+      | 'gray-light'
       | 'black'
+      | 'primary-light'
   ) {
     // btn-classes are written in full to be picked up by tailwind
     switch (value) {
@@ -44,9 +46,15 @@ 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
+      case 'primary-light':
+        this.btnClass = 'gn-ui-btn-primary-light'
+        break
       case 'default':
       default:
         this.btnClass = 'gn-ui-btn-default'

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/inputs/src/lib/url-input/url-input.component.html

@@ -6,7 +6,7 @@
     type="url"
     [value]="inputValue"
     (input)="handleInput($event)"
-    (keydown.enter)="handleUpload(input)"
+    (keydown.enter)="handleUpload(input, $event)"
     [placeholder]="placeholder"
     [attr.aria-label]="placeholder"
     [disabled]="disabled"
@@ -25,7 +25,7 @@
       extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
       type="primary"
       [disabled]="disabled || input.value === '' || !isValidUrl(input.value)"
-      (buttonClick)="handleUpload(input)"
+      (buttonClick)="handleUpload(input, $event)"
     >
       <ng-content>
         <ng-icon name="iconoirArrowUp"></ng-icon>

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

@@ -81,7 +81,8 @@ export class UrlInputComponent implements OnChanges {
     this.valueChange.next(value)
   }
 
-  handleUpload(element: HTMLInputElement) {
+  handleUpload(element: HTMLInputElement, event: Event) {
+    event.stopPropagation()
     const value = element.value
     if (!value || !this.isValidUrl(value)) return
     this.uploadClick.next(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 ''