geonetwork-ui 2.9.0-dev.fc19cbfed → 2.10.0-dev.02185426a

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts

@@ -1,10 +1,19 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
-import * as basicLightbox from 'basiclightbox'
+import {
+  Component,
+  inject,
+  input,
+  output,
+  TemplateRef,
+  viewChild,
+  ViewContainerRef,
+} from '@angular/core'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
+import { Overlay, OverlayRef } from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
 
 @Component({
   selector: 'gn-ui-image-overlay-preview',
@@ -20,9 +29,37 @@ import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
   ],
 })
 export class ImageOverlayPreviewComponent {
-  @Input() imageUrl: string
-  @Output() isPlaceholderShown = new EventEmitter<boolean>()
-  openLightbox(src: string) {
-    basicLightbox.create(`<img src="${src}"/>`).show()
+  imageUrl = input<string>()
+  isPlaceholderShown = output<boolean>({})
+
+  private imageTemplate = viewChild<TemplateRef<HTMLElement>>('imageTemplate')
+  private overlay = inject(Overlay)
+  private viewContainerRef = inject(ViewContainerRef)
+  private overlayRef: OverlayRef
+
+  openLightbox() {
+    const positionStrategy = this.overlay
+      .position()
+      .global()
+      .centerHorizontally()
+      .centerVertically()
+    const scrollStrategy = this.overlay.scrollStrategies.block()
+
+    this.overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: 'bg-black/80',
+      positionStrategy,
+      scrollStrategy,
+    })
+    this.overlayRef.backdropClick().subscribe(() => this.overlayRef.dispose())
+    const portal = new TemplatePortal(
+      this.imageTemplate(),
+      this.viewContainerRef
+    )
+    this.overlayRef.attach(portal)
+  }
+
+  closeLightbox() {
+    this.overlayRef?.dispose()
   }
 }

package/src/libs/ui/elements/src/lib/internal-link-card/internal-link-card.component.html

@@ -1,6 +1,6 @@
 <a
   [attr.href]="linkHref"
-  [target]="linkTarget"
+  target="_self"
   class="record-card"
   [ngClass]="cardClass"
 >

package/src/libs/ui/elements/src/lib/internal-link-card/internal-link-card.component.ts

@@ -58,7 +58,6 @@ export class InternalLinkCardComponent implements OnInit {
   protected elementRef = inject(ElementRef)
 
   @Input() record: CatalogRecord
-  @Input() linkTarget = '_blank'
   @Input() linkHref: string = null
   @Input() metadataQualityDisplay: boolean
   @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>

package/src/libs/ui/elements/src/lib/keyword-badge/keyword-badge.component.html

@@ -0,0 +1,14 @@
+<gn-ui-badge
+  [clickable]="!editable"
+  [removable]="editable"
+  (badgeClicked)="keywordClick.emit(keyword)"
+  (badgeRemoveClicked)="keywordRemove.emit(keyword)"
+  ><ng-container>{{ keyword.label }}</ng-container>
+  @if (editable && isPlaceWithoutExtent) {
+    <ng-icon
+      [title]="'editor.record.form.keywords.place.withoutExtent' | translate"
+      class="!text-[1.4em] ml-1"
+      name="matWarningAmberOutline"
+    ></ng-icon>
+  }
+</gn-ui-badge>

package/src/libs/ui/elements/src/lib/keyword-badge/keyword-badge.component.ts

@@ -0,0 +1,85 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { Keyword } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { BadgeComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
+import tippy from 'tippy.js'
+
+marker('domain.record.keywordType.theme')
+marker('domain.record.keywordType.place')
+marker('domain.record.keywordType.temporal')
+marker('domain.record.keywordType.other')
+
+@Component({
+  selector: 'gn-ui-keyword-badge',
+  templateUrl: './keyword-badge.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [BadgeComponent, NgIconComponent, TranslatePipe],
+  providers: [
+    provideIcons({
+      matWarningAmberOutline,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+export class KeywordBadgeComponent implements AfterViewInit {
+  private translateService = inject(TranslateService)
+
+  @Input() keyword: Keyword
+  @Input() editable = false // if false, keyword is only clickable
+  @Output() keywordClick = new EventEmitter<Keyword>()
+  @Output() keywordRemove = new EventEmitter<Keyword>()
+  @ViewChild(BadgeComponent, { read: ElementRef }) badgeComponent: ElementRef
+
+  get segments(): string[] {
+    if (this.keyword.hierarchyPath?.length) {
+      return this.keyword.hierarchyPath
+    }
+    if (this.keyword.thesaurus?.name) {
+      return [this.keyword.thesaurus.name, this.keyword.label]
+    }
+    return [
+      this.translateService.instant(
+        `domain.record.keywordType.${this.keyword.type}`
+      ),
+      this.keyword.label,
+    ]
+  }
+
+  get isPlaceWithoutExtent(): boolean {
+    return this.keyword.type === 'place' && !this.keyword.bbox
+  }
+
+  ngAfterViewInit() {
+    const content = this.segments
+      .map(
+        (segment, i, arr) =>
+          `<span ${i === arr.length - 1 ? 'class="font-bold"' : ''}>${segment}</span>`
+      )
+      .join(' &gt; ')
+    tippy(this.badgeComponent.nativeElement, {
+      appendTo: () => document.body,
+      content,
+      allowHTML: true,
+    })
+  }
+}

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { marked } from 'marked'
+import { parse } from 'marked'
 
 @Component({
   selector: 'gn-ui-markdown-parser',
@@ -14,6 +14,6 @@ export class MarkdownParserComponent {
   @Input() whitoutStyles?: boolean
 
   get parsedMarkdown() {
-    return marked.parse(this.textContent ?? '')
+    return parse(this.textContent ?? '')
   }
 }

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

@@ -21,7 +21,7 @@ import {
   matCallOutline,
   matLocationOnOutline,
 } from '@ng-icons/material-icons/outline'
-
+import { getAddressLines } from '../../../../../../libs/util/shared/src'
 import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
@@ -59,10 +59,7 @@ export class MetadataContactComponent {
   }
 
   get address() {
-    const addressParts = this.contacts[0].address
-      .split(',')
-      .map((part) => part.trim())
-    return addressParts
+    return getAddressLines(this.contacts[0]?.address)
   }
 
   onOrganizationClick() {

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

@@ -17,6 +17,7 @@
   --gn-ui-badge-text-color: var(--color-primary-darkest);
 }
 
-:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover {
-  --gn-ui-badge-text-color: white;
+.metadata-info-keywords {
+  --gn-ui-badge-padding: 0.25rem 0.5rem;
+  text-transform: lowercase;
 }

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/dropdown-selector/dropdown-selector.component.ts

@@ -102,7 +102,7 @@ export class DropdownSelectorComponent implements OnInit {
   }
 
   getChoiceLabel(): string {
-    return this.selectedChoice?.label
+    return this.selectedChoice?.label ?? '\u00A0'
   }
 
   ngOnInit(): void {