geonetwork-ui 2.10.0-dev.dc713c01a → 2.10.0-dev.e2dc4fd62

package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.ts

@@ -1,15 +1,23 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnDestroy,
+  OnInit,
+  viewChildren,
+} from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
 import { EditorFieldValue } from '../../models'
-import { FormFieldComponent } from './form-field'
+import { FieldFocusDirective, FormFieldComponent } from './form-field'
 import { TranslateDirective } from '@ngx-translate/core'
 import {
   EditorFieldWithValue,
   EditorSectionWithValues,
 } from '../../+state/editor.models'
-import { map } from 'rxjs'
+import { firstValueFrom, map, Subscription, withLatestFrom } from 'rxjs'
 import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { switchMap } from 'rxjs/operators'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -17,15 +25,63 @@ import { CatalogRecordKeys } from '../../../../../../../libs/common/domain/src/l
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, FormFieldComponent, TranslateDirective],
+  imports: [
+    CommonModule,
+    FormFieldComponent,
+    FieldFocusDirective,
+    TranslateDirective,
+  ],
 })
-export class RecordFormComponent {
+export class RecordFormComponent implements OnInit, OnDestroy {
   facade = inject(EditorFacade)
+  subscription = new Subscription()
 
   recordUniqueIdentifier$ = this.facade.record$.pipe(
     map((record) => record.uniqueIdentifier)
   )
 
+  focusFieldWithPage$ = this.facade.focusedField$.pipe(
+    switchMap(async (field) => {
+      const location = await this.getFieldLocation(field)
+      return [field, location?.page ?? null, location?.section ?? -1] as const
+    })
+  )
+
+  formFields = viewChildren(FormFieldComponent)
+  sectionFocusDirectives = viewChildren<FieldFocusDirective>('sectionFocus')
+
+  focusField(model: CatalogRecordKeys, sectionIndex: number) {
+    const field = this.formFields().find((f) => f.model === model)
+    if (field) {
+      field.fieldFocus.focusField()
+      return
+    }
+    this.sectionFocusDirectives()[sectionIndex]?.focusField(false)
+  }
+
+  ngOnInit() {
+    this.subscription.add(
+      this.focusFieldWithPage$
+        .pipe(
+          withLatestFrom(
+            this.facade.currentPage$,
+            ([field, fieldPage, fieldSection], currentPage) =>
+              [field, fieldPage, fieldSection, currentPage] as const
+          )
+        )
+        .subscribe(([field, fieldPage, fieldSection, currentPage]) => {
+          if (fieldPage !== null && fieldPage !== currentPage) {
+            this.facade.setCurrentPage(fieldPage)
+          }
+          setTimeout(() => this.focusField(field, fieldSection))
+        })
+    )
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
+
   handleFieldValueChange(model: CatalogRecordKeys, newValue: EditorFieldValue) {
     if (!model) {
       return
@@ -40,4 +96,20 @@ export class RecordFormComponent {
   sectionTracker(index: number, section: EditorSectionWithValues) {
     return section.labelKey
   }
+
+  async getFieldLocation(
+    model: CatalogRecordKeys
+  ): Promise<{ page: number; section: number } | null> {
+    const config = await firstValueFrom(this.facade.editorConfig$)
+    const page = config.pages.findIndex((p) =>
+      p.sections.some((s) => s.fields.some((f) => f.model === model))
+    )
+    if (page < 0) {
+      return null
+    }
+    const section = config.pages[page].sections
+      .filter((s) => !s.hidden)
+      .findIndex((s) => s.fields.some((f) => f.model === model))
+    return { page, section }
+  }
 }

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -4,10 +4,12 @@ import {
   EditorField,
   EditorSection,
 } from './models/editor-config.model'
-import {
-  INSPIRE_topic,
-  Keyword,
-} from '../../../../../libs/common/domain/src/lib/model/record'
+import { Keyword } from '../../../../../libs/common/domain/src/lib/model/record'
+
+export interface ISOTopic {
+  value: string
+  label: string
+}
 
 /**
  * This file contains the configuration of the fields that will be displayed in the editor.
@@ -359,75 +361,86 @@ export const SPATIAL_SCOPES: Keyword[] = [
 ]
 
 /************************************************************
- ***************           INSPIRE TOPICS            **************
+ ***************             ISO TOPICS             **************
  ************************************************************
  */
 
-export const INSPIRE_TOPICS: INSPIRE_topic[] = [
-  { value: 'biota', label: 'editor.record.form.topics.inspire.biota' },
+// label keys mirror the ISO MD_TopicCategoryCode value for consistency
+// TODO: correctly handle code lists; for instance, this code list is specific to ISO 19139
+export const ISO_TOPICS: ISOTopic[] = [
+  { value: 'biota', label: marker('editor.record.form.topics.iso.biota') },
   {
     value: 'boundaries',
-    label: 'editor.record.form.topics.inspire.boundaries',
+    label: marker('editor.record.form.topics.iso.boundaries'),
   },
   {
     value: 'climatologyMeteorologyAtmosphere',
-    label: 'editor.record.form.topics.inspire.climatology',
+    label: marker(
+      'editor.record.form.topics.iso.climatologyMeteorologyAtmosphere'
+    ),
+  },
+  {
+    value: 'economy',
+    label: marker('editor.record.form.topics.iso.economy'),
+  },
+  {
+    value: 'elevation',
+    label: marker('editor.record.form.topics.iso.elevation'),
   },
-  { value: 'economy', label: 'editor.record.form.topics.inspire.economy' },
-  { value: 'elevation', label: 'editor.record.form.topics.inspire.elevation' },
   {
     value: 'environment',
-    label: 'editor.record.form.topics.inspire.environnement',
+    label: marker('editor.record.form.topics.iso.environment'),
+  },
+  {
+    value: 'farming',
+    label: marker('editor.record.form.topics.iso.farming'),
+  },
+  {
+    value: 'geoscientificInformation',
+    label: marker('editor.record.form.topics.iso.geoscientificInformation'),
   },
-  { value: 'farming', label: 'editor.record.form.topics.inspire.farming' },
   {
-    value: 'geoscientific information',
-    label: 'editor.record.form.topics.inspire.geoscientific',
+    value: 'health',
+    label: marker('editor.record.form.topics.iso.health'),
   },
-  { value: 'health', label: 'editor.record.form.topics.inspire.health' },
   {
     value: 'imageryBaseMapsEarthCover',
-    label: 'editor.record.form.topics.inspire.imagery',
+    label: marker('editor.record.form.topics.iso.imageryBaseMapsEarthCover'),
+  },
+  {
+    value: 'inlandWaters',
+    label: marker('editor.record.form.topics.iso.inlandWaters'),
   },
-  { value: 'inlandWaters', label: 'editor.record.form.topics.inspire.waters' },
   {
     value: 'intelligenceMilitary',
-    label: 'editor.record.form.topics.inspire.intelligence',
+    label: marker('editor.record.form.topics.iso.intelligenceMilitary'),
+  },
+  {
+    value: 'location',
+    label: marker('editor.record.form.topics.iso.location'),
+  },
+  {
+    value: 'oceans',
+    label: marker('editor.record.form.topics.iso.oceans'),
   },
-  { value: 'Location', label: 'editor.record.form.topics.inspire.location' },
-  { value: 'Oceans', label: 'editor.record.form.topics.inspire.oceans' },
   {
     value: 'planningCadastre',
-    label: 'editor.record.form.topics.inspire.planning',
+    label: marker('editor.record.form.topics.iso.planningCadastre'),
   },
-  { value: 'Society', label: 'editor.record.form.topics.inspire.society' },
-  { value: 'Structure', label: 'editor.record.form.topics.inspire.structure' },
   {
-    value: 'Transportation',
-    label: 'editor.record.form.topics.inspire.transportation',
+    value: 'society',
+    label: marker('editor.record.form.topics.iso.society'),
+  },
+  {
+    value: 'structure',
+    label: marker('editor.record.form.topics.iso.structure'),
+  },
+  {
+    value: 'transportation',
+    label: marker('editor.record.form.topics.iso.transportation'),
   },
   {
     value: 'utilitiesCommunication',
-    label: 'editor.record.form.topics.inspire.utilities',
+    label: marker('editor.record.form.topics.iso.utilitiesCommunication'),
   },
 ]
-
-marker('editor.record.form.topics.inspire.biota')
-marker('editor.record.form.topics.inspire.boundaries')
-marker('editor.record.form.topics.inspire.climatology')
-marker('editor.record.form.topics.inspire.economy')
-marker('editor.record.form.topics.inspire.elevation')
-marker('editor.record.form.topics.inspire.environnement')
-marker('editor.record.form.topics.inspire.farming')
-marker('editor.record.form.topics.inspire.geoscientific')
-marker('editor.record.form.topics.inspire.health')
-marker('editor.record.form.topics.inspire.imagery')
-marker('editor.record.form.topics.inspire.intelligence')
-marker('editor.record.form.topics.inspire.location')
-marker('editor.record.form.topics.inspire.oceans')
-marker('editor.record.form.topics.inspire.planning')
-marker('editor.record.form.topics.inspire.society')
-marker('editor.record.form.topics.inspire.structure')
-marker('editor.record.form.topics.inspire.transportation')
-marker('editor.record.form.topics.inspire.utilities')
-marker('editor.record.form.topics.inspire.waters')

package/src/libs/feature/editor/src/lib/models/editor-config.model.ts

@@ -19,9 +19,13 @@ export interface FormFieldConfig {
 // This is used for instance to target only certain online resources in a field
 type OnlineLinkResourceSpecifier = `onlineResourceType:link`
 type DatasetDistributionsSpecifier = `onlineResourceType:!link`
+// When set on the `contacts` field, contacts are rendered as editable detail
+// fields (ContactDetailsFormComponent) instead of cards (ContactCardComponent)
+type EditableContactDetailsSpecifier = `contact:editableDetails`
 export type FieldModelSpecifier =
   | OnlineLinkResourceSpecifier
   | DatasetDistributionsSpecifier
+  | EditableContactDetailsSpecifier
 
 export type FormFieldComponentName =
   | 'form-field-constraints-shortcuts'

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, inject } from '@angular/core'
-import { forkJoin, Observable, of, switchMap } from 'rxjs'
+import { Observable, switchMap } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { EditorConfig } from '../models/'

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -2,6 +2,23 @@ import { Injectable } from '@angular/core'
 import { extend } from 'ol/extent.js'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { BoundingBox, getGeometryBoundingBox } from '../../../../../../libs/util/shared/src'
+import { MapContextLayer } from '@geospatial-sdk/core'
+import {
+  createSpatialExtentLayer,
+  SpatialExtentLayerStyle,
+} from '../../../../../../libs/ui/map/src'
+
+/**
+ * Style of the extent overlay drawn on top of the previewed data: a dashed
+ * black outline over a very light fill, so the extent stays readable without
+ * hiding the data underneath.
+ */
+const RECORD_EXTENT_OVERLAY_STYLE: SpatialExtentLayerStyle = {
+  'stroke-color': 'rgba(0, 0, 0, 0.6)',
+  'stroke-width': 2,
+  'stroke-line-dash': [8, 6],
+  'fill-color': 'rgba(0, 0, 0, 0.03)',
+}
 
 @Injectable({
   providedIn: 'root',
@@ -26,4 +43,20 @@ export class MapUtilsService {
       [Infinity, Infinity, -Infinity, -Infinity]
     )
   }
+
+  /**
+   * Builds a non-interactive overlay layer drawing the spatial extent(s)
+   * declared in the record's metadata (bounding boxes and/or geometries).
+   * Returns null when the record has no usable spatial extent.
+   *
+   * This is purely for display and is independent from the map's initial view,
+   * which is derived separately (see {@link getRecordExtent}).
+   */
+  getRecordExtentLayer(record: Partial<CatalogRecord>): MapContextLayer | null {
+    return createSpatialExtentLayer(record.spatialExtents ?? [], {
+      label: 'Spatial extent',
+      clickable: false,
+      style: RECORD_EXTENT_OVERLAY_STYLE,
+    })
+  }
 }

package/src/libs/feature/notify-reuse/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/notify-reuse-form/notify-reuse-form.component'

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.html

@@ -0,0 +1 @@
+@if (record) {}

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.ts

@@ -0,0 +1,21 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { ReuseRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+
+@Component({
+  selector: 'gn-ui-notify-reuse-form',
+  standalone: true,
+  imports: [],
+  templateUrl: './notify-reuse-form.component.html',
+  styleUrl: './notify-reuse-form.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotifyReuseFormComponent {
+  @Input() record: ReuseRecord | null = null
+  @Output() recordChange = new EventEmitter<ReuseRecord>()
+}

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -431,11 +431,19 @@ export class MapViewComponent implements AfterViewInit {
     }),
     withLatestFrom(this.mdViewFacade.metadata$),
     map(([context, metadata]) => {
-      if (context.view) return context
+      // overlay the record's declared spatial extent on top of the data layers
+      const extentLayer = this.mapUtils.getRecordExtentLayer(metadata)
+      const layers = extentLayer
+        ? [...context.layers, extentLayer]
+        : context.layers
+      // the view (initial zoom) is derived from the data layer or, as a
+      // fallback, from the record extent — independently from the overlay above
+      if (context.view) return { ...context, layers }
       const extent = this.mapUtils.getRecordExtent(metadata)
       const view = extent ? { extent } : null
       return {
         ...context,
+        layers,
         view,
       }
     }),

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts

@@ -1,4 +1,4 @@
-import { Component, InjectionToken, inject } from '@angular/core'
+import { Component, inject, InjectionToken } from '@angular/core'
 import { LANGUAGE_STORAGE_KEY } from '../../../../../../libs/util/i18n/src'
 import { TranslateService } from '@ngx-translate/core'
 import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
@@ -26,7 +26,7 @@ export class LanguageSwitcherComponent {
   )
 
   get currentLang() {
-    return this.translate.currentLang
+    return this.translate.getCurrentLang()
   }
 
   changeLanguage(value: unknown) {

package/src/libs/ui/dataviz/src/index.ts

@@ -1,4 +1,3 @@
 export * from './lib/chart/chart.component'
 export * from './lib/data-table/data-table.component'
-export * from './lib/data-table/data-table.fixtures'
 export * from './lib/figure/figure.component'

package/src/libs/ui/elements/src/index.ts

@@ -18,6 +18,8 @@ export * from './lib/metadata-doi/metadata-doi.component'
 export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/contact-pill/contact-pill.component'
+export * from './lib/contact-details/contact-details.component'
 export * from './lib/notification/notification.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/thumbnail/thumbnail.component'

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;
+  }
+}