geonetwork-ui 2.10.0-dev.574947486 → 2.10.0-dev.6183d942b

package/src/libs/ui/elements/src/lib/contact-details/contact-details.component.html

@@ -0,0 +1,88 @@
+<div
+  class="bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-2 w-full"
+  data-test="contact-details"
+>
+  @if (displayName) {
+    <div class="flex items-center gap-2.5">
+      @if (organization?.logoUrl?.href) {
+        <div
+          class="flex items-center justify-center rounded-lg bg-white w-14 h-14 shrink-0 overflow-hidden"
+        >
+          <gn-ui-thumbnail
+            class="relative h-full w-full"
+            [thumbnailUrl]="organization.logoUrl.href"
+            fit="contain"
+          ></gn-ui-thumbnail>
+        </div>
+      }
+      <span
+        class="font-title text-xl leading-tight"
+        data-test="contact-details-name"
+        >{{ displayName }}</span
+      >
+    </div>
+  }
+
+  @if (contact.email || contact.phone) {
+    <div
+      class="grid gap-1 items-start"
+      [class.grid-cols-2]="contact.email && contact.phone"
+    >
+      @if (contact.email) {
+        <div class="bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2">
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] shrink-0 opacity-30"
+            name="matMailOutline"
+          ></ng-icon>
+          <a
+            [href]="'mailto:' + contact.email"
+            class="text-sm break-all hover:underline"
+            data-test="contact-details-email"
+            >{{ contact.email }}</a
+          >
+        </div>
+      }
+      @if (contact.phone) {
+        <div class="bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2">
+          <ng-icon
+            class="!w-5 !h-5 !text-[20px] shrink-0 opacity-30"
+            name="matCallOutline"
+          ></ng-icon>
+          <span class="text-sm" data-test="contact-details-phone">{{
+            contact.phone
+          }}</span>
+        </div>
+      }
+    </div>
+  }
+
+  @if (addressLines.length) {
+    <div class="bg-gray-100 rounded-lg flex items-start gap-2 px-3 py-2">
+      <ng-icon
+        class="!w-5 !h-5 !text-[20px] shrink-0 mt-0.5 opacity-30"
+        name="matLocationOnOutline"
+      ></ng-icon>
+      <div class="flex flex-col" data-test="contact-details-address">
+        @for (line of addressLines; track line) {
+          <p class="text-sm m-0">{{ line }}</p>
+        }
+      </div>
+    </div>
+  }
+
+  @if (organization?.website) {
+    <div class="bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2">
+      <ng-icon
+        class="!w-5 !h-5 !text-[20px] shrink-0 opacity-30"
+        name="matOpenInNew"
+      ></ng-icon>
+      <a
+        [href]="organization.website.href"
+        target="_blank"
+        class="text-sm break-all hover:underline"
+        data-test="contact-details-website"
+        >{{ organization.website.href }}</a
+      >
+    </div>
+  }
+</div>

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

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { Individual } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  getAddressLines,
+  getIndividualDisplayName,
+} from '../../../../../../libs/util/shared/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matMailOutline, matOpenInNew } from '@ng-icons/material-icons/baseline'
+import {
+  matCallOutline,
+  matLocationOnOutline,
+} from '@ng-icons/material-icons/outline'
+import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-contact-details',
+  templateUrl: './contact-details.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgIcon, ThumbnailComponent, TranslateModule],
+  viewProviders: [
+    provideIcons({
+      matCallOutline,
+      matLocationOnOutline,
+      matMailOutline,
+      matOpenInNew,
+    }),
+  ],
+})
+export class ContactDetailsComponent {
+  @Input() contact: Individual
+
+  get organization() {
+    return this.contact?.organization
+  }
+
+  get displayName(): string {
+    return getIndividualDisplayName(this.contact)
+  }
+
+  get addressLines(): string[] {
+    return getAddressLines(this.contact?.address)
+  }
+}

package/src/libs/ui/elements/src/lib/contact-pill/contact-pill.component.html

@@ -0,0 +1,41 @@
+<gn-ui-button
+  [type]="overlayOpen ? 'gray-light' : 'primary-light'"
+  extraClass="group w-full min-h-12 gap-3 justify-between py-2 pl-5 pr-4 rounded"
+  data-test="contact-pill"
+  (buttonClick)="toggleOverlay()"
+  cdkOverlayOrigin
+  #overlayOrigin="cdkOverlayOrigin"
+>
+  <span
+    class="font-title font-medium text-base leading-tight truncate"
+    [class]="!overlayOpen ? 'text-primary-black group-hover:text-white' : ''"
+    [title]="displayName"
+    >{{ displayName }}</span
+  >
+  <div
+    class="gn-ui-card-icon items-center justify-center w-10 h-8"
+    [class]="
+      !overlayOpen ? 'group-hover:border-white group-hover:text-white' : ''
+    "
+  >
+    @if (overlayOpen) {
+      <ng-icon class="!w-6 !h-6 !text-[24px]" name="matClose"></ng-icon>
+    } @else {
+      <ng-icon class="!w-6 !h-6 !text-[24px]" name="matInfoOutline"></ng-icon>
+    }
+  </div>
+</gn-ui-button>
+
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="overlayOrigin"
+  [cdkConnectedOverlayOpen]="overlayOpen"
+  [cdkConnectedOverlayPositions]="overlayPositions"
+  [cdkConnectedOverlayOffsetX]="overlayOffsetX"
+  (overlayOutsideClick)="closeOverlay()"
+  (detach)="closeOverlay()"
+>
+  <div [style.width.px]="overlayWidth">
+    <gn-ui-contact-details [contact]="contact"></gn-ui-contact-details>
+  </div>
+</ng-template>

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

@@ -0,0 +1,70 @@
+import { ConnectedPosition, OverlayModule } from '@angular/cdk/overlay'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  Input,
+} from '@angular/core'
+import { Individual } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matClose } from '@ng-icons/material-icons/baseline'
+import { matInfoOutline } from '@ng-icons/material-icons/outline'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { getIndividualDisplayName } from '../../../../../../libs/util/shared/src'
+import { ContactDetailsComponent } from '../contact-details/contact-details.component'
+
+@Component({
+  selector: 'gn-ui-contact-pill',
+  templateUrl: './contact-pill.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgIcon, ButtonComponent, OverlayModule, ContactDetailsComponent],
+  viewProviders: [provideIcons({ matClose, matInfoOutline })],
+})
+export class ContactPillComponent {
+  @Input() contact: Individual
+
+  private host = inject(ElementRef<HTMLElement>)
+
+  overlayOpen = false
+  overlayWidth = 0
+  overlayOffsetX = 0
+  overlayPositions: ConnectedPosition[] = [
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+      offsetY: 4,
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      offsetY: -4,
+    },
+  ]
+
+  get displayName(): string {
+    return getIndividualDisplayName(this.contact)
+  }
+
+  toggleOverlay() {
+    if (!this.overlayOpen) {
+      // Calculate the width and horizontal offset of the overlay to align it with the parent element
+      const parent =
+        this.host.nativeElement.parentElement.getBoundingClientRect()
+      const pill = this.host.nativeElement.getBoundingClientRect()
+      this.overlayWidth = parent.width
+      this.overlayOffsetX = parent.left - pill.left
+    }
+
+    this.overlayOpen = !this.overlayOpen
+  }
+
+  closeOverlay() {
+    this.overlayOpen = false
+  }
+}

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

@@ -0,0 +1,13 @@
+/** the animation values are made to be identical to the cdk overlay values */
+.lightbox-image {
+  animation: show 400ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+@keyframes show {
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}

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

@@ -1,5 +1,5 @@
 <gn-ui-content-ghost
-  [showContent]="imageUrl !== undefined"
+  [showContent]="imageUrl() !== undefined"
   ghostClass="h-full w-full"
 >
   @if (imageUrl) {
@@ -9,7 +9,7 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
-        [thumbnailUrl]="imageUrl"
+        [thumbnailUrl]="imageUrl()"
         fit="cover"
         (placeholderShown)="isPlaceholderShown.emit($event)"
       ></gn-ui-thumbnail>
@@ -18,7 +18,7 @@
           class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
           [type]="'outline'"
           [extraClass]="'!py-2 !px-0'"
-          (buttonClick)="openLightbox(imageUrl)"
+          (buttonClick)="openLightbox()"
         >
           <ng-icon name="matZoomOutMap"></ng-icon>
         </gn-ui-button>
@@ -26,3 +26,13 @@
     </div>
   }
 </gn-ui-content-ghost>
+
+<ng-template #imageTemplate>
+  <img
+    data-test="lightbox-image"
+    class="lightbox-image bg-white max-h-[90vh] max-w-[90vw]"
+    [src]="imageUrl()"
+    alt="Preview image"
+    (click)="closeLightbox()"
+  />
+</ng-template>

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/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

@@ -16,7 +16,3 @@
   --gn-ui-badge-background-color: var(--color-primary-white);
   --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;
-}

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

@@ -28,12 +28,23 @@
       <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
-            >
+            <ng-template #keywordTooltip>
+              @for (segment of keywordTooltipSegments(keyword); track $index) {
+                <span [class.font-bold]="$last">{{ segment }}</span>
+                @if (!$last) {
+                  <span> &gt; </span>
+                }
+              }
+            </ng-template>
+            <gn-ui-popover [content]="keywordTooltip" theme="dark">
+              <gn-ui-button
+                type="primary-light"
+                class="inline-block opacity-70"
+                extraClass="lowercase text-sm py-1 px-2"
+                (buttonClick)="onKeywordClick(keyword)"
+                >{{ keyword.label }}</gn-ui-button
+              >
+            </gn-ui-popover>
           }
         </div>
       </gn-ui-max-lines>
@@ -52,7 +63,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 +116,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 +160,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"
     >