geonetwork-ui 2.10.0-dev.91673b3ba → 2.10.0-dev.981f59a75

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'
@@ -44,8 +48,7 @@ export interface EditorField extends EditorFieldIdentification {
   gridColumnSpan?: number
 
   // a hidden field won't show but can still be used to modify the record
-  // FIXME: currently this is redundant with an absence of formFieldConfig but necessary for clarity
-  hidden?: boolean
+  hidden?: boolean | EditorFieldExpression
 
   // the result of this expression will replace the field value on save
   onSaveProcess?: EditorFieldExpression
@@ -54,7 +57,7 @@ export interface EditorField extends EditorFieldIdentification {
 export interface EditorSection {
   labelKey?: string
   descriptionKey?: string
-  hidden: boolean
+  hidden?: boolean | EditorFieldExpression
   fields: EditorField[]
 }
 

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 { inject, Injectable } from '@angular/core'
+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/'
@@ -16,7 +16,8 @@ export class EditorService {
   saveRecord(
     record: CatalogRecord,
     recordSource: string,
-    fieldsConfig: EditorConfig
+    fieldsConfig: EditorConfig,
+    publish: boolean
   ): Observable<[CatalogRecord, string]> {
     const savedRecord = { ...record }
 
@@ -27,22 +28,17 @@ export class EditorService {
     // run onSave processes
     for (const field of fields) {
       if (field.onSaveProcess && field.model) {
-        const evaluator = evaluate(field.onSaveProcess)
+        const { evaluator } = evaluate(field.onSaveProcess)
         savedRecord[field.model] = evaluator({
-          model: field.model,
-          value: record[field.model],
+          globals: {
+            record,
+          },
         })
       }
     }
-    let publishToAll = true
-    // if the record is new, generate a new unique identifier and pass publishToAll as false
-    if (!record.uniqueIdentifier) {
-      savedRecord.uniqueIdentifier = null
-      publishToAll = false
-    }
 
     return this.recordsRepository
-      .saveRecord(savedRecord, recordSource, publishToAll)
+      .saveRecord(savedRecord, recordSource, publish)
       .pipe(
         switchMap((uniqueIdentifier) =>
           this.recordsRepository.openRecordForEdition(uniqueIdentifier)

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,111 @@
+<gn-ui-button
+  type="outline"
+  extraClass="w-full flex flex-row justify-between"
+  [style.--gn-ui-button-rounded]="'10px'"
+  (buttonClick)="toggleOverlay()"
+>
+  <span translate>service.metadata.reuse</span>
+  <ng-icon class="mr-[5px]" name="iconoirAppWindow"></ng-icon>
+</gn-ui-button>
+<ng-template #notifyReuseForm>
+  <div
+    class="w-[400px] max-w-[90vw] flex flex-col gap-3 bg-gray-50 rounded-l overflow-clip px-4 py-5 shadow-[0px_9px_12px_0px_rgba(9,30,66,0.15),0px_0px_1px_0px_rgba(9,30,66,0.31)]"
+  >
+    <div class="flex flex-col gap-3 pb-3">
+      <div class="flex items-start justify-between pb-3">
+        <p class="text-xl font-medium text-black" translate>
+          notify.reuse.form.title
+        </p>
+        <gn-ui-button
+          type="gray-light"
+          class="shrink-0"
+          (buttonClick)="closeOverlay()"
+          [style.--gn-ui-button-padding]="0"
+          [style.--gn-ui-button-width]="'21px'"
+          [style.--gn-ui-button-height]="'21px'"
+          aria-label="Close"
+        >
+          <ng-icon
+            class="text-[22px] !w-[21px] !h-[21px]"
+            name="matCloseOutline"
+          ></ng-icon>
+        </gn-ui-button>
+      </div>
+
+      <div class="flex flex-col gap-[10px]">
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center">
+            <label class="font-bold text-base text-main leading-6">
+              <span translate>notify.reuse.form.field.title</span>
+              <span class="text-red-500">*</span>
+            </label>
+          </div>
+          <gn-ui-text-input
+            #titleInput
+            [(value)]="title"
+            [placeholder]="
+              'notify.reuse.form.field.title.placeholder' | translate
+            "
+            [required]="true"
+          ></gn-ui-text-input>
+        </div>
+
+        <div class="flex flex-col gap-2 pt-3">
+          <div class="flex items-center">
+            <label class="font-bold text-base text-main leading-6">
+              <span translate>notify.reuse.form.field.url</span>
+              <span class="text-red-500">*</span>
+            </label>
+          </div>
+          <gn-ui-text-input
+            #urlInput
+            [(value)]="url"
+            [type]="'url'"
+            [placeholder]="
+              'notify.reuse.form.field.url.placeholder' | translate
+            "
+            [required]="true"
+          ></gn-ui-text-input>
+        </div>
+
+        <div class="flex flex-col gap-2 pt-3">
+          <div class="flex items-center">
+            <label class="font-bold text-base text-main leading-6">
+              <span translate>notify.reuse.form.field.email</span>
+              <span class="text-red-500">*</span>
+            </label>
+          </div>
+          <gn-ui-text-input
+            #emailInput
+            [(value)]="email"
+            [type]="'email'"
+            [placeholder]="
+              'notify.reuse.form.field.email.placeholder' | translate
+            "
+            [required]="true"
+          ></gn-ui-text-input>
+        </div>
+      </div>
+
+      <p class="font-medium text-sm text-gray-700 leading-5" translate>
+        notify.reuse.form.required.hint
+      </p>
+    </div>
+
+    <div class="flex flex-col">
+      <gn-ui-button
+        type="primary"
+        extraClass="w-full h-8 justify-center gap-2"
+        [disabled]="!isFormValid() || loading()"
+        (buttonClick)="submit()"
+      >
+        @if (loading()) {
+          <mat-spinner [diameter]="16"></mat-spinner>
+        } @else {
+          <span translate>notify.reuse.form.submit</span>
+          <ng-icon name="iconoirPlusCircle" size="1.5em"></ng-icon>
+        }
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,229 @@
+import {
+  Overlay,
+  OverlayModule,
+  OverlayRef,
+  ScrollStrategyOptions,
+} from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
+import { CommonModule, LocationStrategy } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  InjectionToken,
+  input,
+  OnDestroy,
+  signal,
+  TemplateRef,
+  viewChild,
+  ViewContainerRef,
+} from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { MatProgressSpinner } from '@angular/material/progress-spinner'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  CatalogRecord,
+  Individual,
+  OnlineLinkResource,
+  ReuseRecord,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import { iconoirAppWindow, iconoirPlusCircle } from '@ng-icons/iconoir'
+import { matCloseOutline } from '@ng-icons/material-icons/outline'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+
+marker('notify.reuse.form.error.title')
+marker('notify.reuse.form.error.body')
+
+export const REUSE_FORM_URL = new InjectionToken<string>('reuseFormUrl')
+
+@Component({
+  selector: 'gn-ui-notify-reuse-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    OverlayModule,
+    TextInputComponent,
+    ButtonComponent,
+    TranslatePipe,
+    TranslateDirective,
+    NgIcon,
+    MatProgressSpinner,
+  ],
+  templateUrl: './notify-reuse-form.component.html',
+  styleUrl: './notify-reuse-form.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    provideIcons({
+      iconoirAppWindow,
+      iconoirPlusCircle,
+      matCloseOutline,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+export class NotifyReuseFormComponent implements OnDestroy {
+  private overlay = inject(Overlay)
+  private viewContainerRef = inject(ViewContainerRef)
+  private scrollStrategies = inject(ScrollStrategyOptions)
+  private overlayRef: OverlayRef | null = null
+  private recordsRepository = inject(RecordsRepositoryInterface)
+  private readonly translate = inject(TranslateService)
+  private readonly notificationsService = inject(NotificationsService)
+  private readonly platformServiceInterface = inject(PlatformServiceInterface)
+  reuseFormUrl = inject(REUSE_FORM_URL, { optional: true })
+  private locationStrategy = inject(LocationStrategy)
+
+  me = toSignal(this.platformServiceInterface.getMe())
+  initialEmail = computed(() => this.me()?.email)
+  templateRef = viewChild<TemplateRef<HTMLElement>>('notifyReuseForm')
+  record = input<Partial<CatalogRecord | null>>(null)
+
+  // TODO: use a form() signal once migrated to Angular 22
+  title = signal('')
+  url = signal('')
+  email = signal(this.initialEmail() ?? '')
+
+  titleInput = viewChild<TextInputComponent>('titleInput')
+  urlInput = viewChild<TextInputComponent>('urlInput')
+  emailInput = viewChild<TextInputComponent>('emailInput')
+
+  loading = signal(false)
+
+  isFormValid = computed(
+    () =>
+      this.titleInput().isValid() &&
+      this.urlInput().isValid() &&
+      this.emailInput().isValid()
+  )
+
+  clearInputs() {
+    this.title.set('')
+    this.url.set('')
+    this.email.set(this.initialEmail() ?? '')
+  }
+
+  toggleOverlay() {
+    if (this.overlayRef) {
+      this.closeOverlay()
+    } else {
+      this.openOverlay()
+    }
+  }
+
+  openOverlay() {
+    const positionStrategy = this.overlay
+      .position()
+      .global()
+      .centerVertically()
+      .right('16px')
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy,
+      hasBackdrop: false,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      scrollStrategy: this.scrollStrategies.noop(),
+    })
+
+    this.overlayRef.attach(
+      new TemplatePortal(this.templateRef(), this.viewContainerRef)
+    )
+    this.overlayRef.backdropClick().subscribe(() => this.closeOverlay())
+  }
+
+  closeOverlay() {
+    this.clearInputs()
+    this.overlayRef?.dispose()
+    this.overlayRef = null
+  }
+
+  ngOnDestroy() {
+    this.closeOverlay()
+  }
+
+  submit() {
+    if (!this.isFormValid()) return
+    const onlineResource: OnlineLinkResource = {
+      type: 'link',
+      url: new URL(this.url()),
+      name: this.url(),
+      description: this.translate.instant('notify.reuse.link.description'),
+    }
+    const contact: Individual = {
+      email: this.email(),
+      role: 'point_of_contact',
+    }
+    const reuseRecord: ReuseRecord = {
+      uniqueIdentifier: '',
+      kind: 'reuse',
+      title: this.title(),
+      abstract: '',
+      ownerOrganization: { name: '' },
+      contacts: [contact],
+      contactsForResource: [],
+      recordUpdated: new Date(),
+      topics: [],
+      keywords: [],
+      licenses: [],
+      legalConstraints: [],
+      securityConstraints: [],
+      otherConstraints: [],
+      overviews: [],
+      defaultLanguage: 'en',
+      otherLanguages: [],
+      lineage: '',
+      reuseType: 'application',
+      sourceRecords: [
+        {
+          uuid: this.record()?.uniqueIdentifier ?? '',
+          title: this.record()?.title ?? '',
+        },
+      ],
+      onlineResources: [onlineResource],
+      spatialExtents: [],
+      temporalExtents: [],
+    }
+    this.loading.set(true)
+    this.recordsRepository.saveRecord(reuseRecord, undefined, false).subscribe({
+      next: (uniqueIdentifier) => {
+        this.loading.set(false)
+        this.closeOverlay()
+        const baseUrl = `${this.reuseFormUrl ?? ''}`.replace(/\/+$/, '')
+        // Normalisation du baseHref pour éviter les doubles /
+        const baseHrefClean = this.locationStrategy
+          .getBaseHref()
+          .replace(/^\/+|\/+$/g, '')
+        const prefix = baseHrefClean ? `/${baseHrefClean}` : ''
+        const rawRedirectUrl = `${window.location.origin}${prefix}/reuse/${uniqueIdentifier}`
+        const redirect_on_leave = encodeURIComponent(rawRedirectUrl)
+        window.open(
+          `${baseUrl}/edit/${uniqueIdentifier}?redirect_on_leave=${redirect_on_leave}`,
+          '_self'
+        )
+      },
+      error: (err) => {
+        this.loading.set(false)
+        this.notificationsService.showNotification(
+          {
+            type: 'error',
+            title: this.translate.instant('notify.reuse.form.error.title'),
+            text: this.translate.instant('notify.reuse.form.error.body'),
+          },
+          undefined,
+          err
+        )
+      },
+    })
+  }
+}

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/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -1,10 +1,10 @@
 import {
   Component,
   EventEmitter,
+  inject,
   Input,
   OnDestroy,
   Output,
-  inject,
 } from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
@@ -67,6 +67,7 @@ export class ResultsTableContainerComponent implements OnDestroy {
 
   async handleDeleteRecord(item: unknown) {
     const uniqueIdentifier = (item as CatalogRecord).uniqueIdentifier
+    const recordKind = (item as CatalogRecord).kind
     this.subscription.add(
       this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
         next: () => {
@@ -76,10 +77,12 @@ export class ResultsTableContainerComponent implements OnDestroy {
             {
               type: 'success',
               title: this.translateService.instant(
-                'editor.record.deleteSuccess.title'
+                'editor.record.deleteSuccess.title',
+                { recordKind }
               ),
               text: `${this.translateService.instant(
-                'editor.record.deleteSuccess.body'
+                'editor.record.deleteSuccess.body',
+                { recordKind }
               )}`,
             },
             2500
@@ -90,10 +93,12 @@ export class ResultsTableContainerComponent implements OnDestroy {
             {
               type: 'error',
               title: this.translateService.instant(
-                'editor.record.deleteError.title'
+                'editor.record.deleteError.title',
+                { recordKind }
               ),
               text: `${this.translateService.instant(
-                'editor.record.deleteError.body'
+                'editor.record.deleteError.body',
+                { recordKind }
               )} ${error}`,
               closeMessage: this.translateService.instant(
                 'editor.record.deleteError.closeMessage'

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

@@ -11,6 +11,7 @@ export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/kind-badge/kind-badge.component'
 export * from './lib/external-link-card/external-link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
+export * from './lib/keyword-badge/keyword-badge.component'
 export * from './lib/markdown-parser/markdown-parser.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'
@@ -19,6 +20,7 @@ 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>