geonetwork-ui 2.8.0-dev.3945a34e1 → 2.8.0-dev.3e963cace

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

@@ -4,13 +4,15 @@
   class="record-card"
   [ngClass]="cardClass"
 >
-  <div *ngIf="shouldShowThumbnail" class="record-card__thumbnail">
-    <gn-ui-thumbnail
-      class="w-full h-full object-cover"
-      [thumbnailUrl]="record.overviews?.[0]?.url?.toString() || ''"
-      [fit]="'cover'"
-    ></gn-ui-thumbnail>
-  </div>
+  @if (shouldShowThumbnail) {
+    <div class="record-card__thumbnail">
+      <gn-ui-thumbnail
+        class="w-full h-full object-cover"
+        [thumbnailUrl]="record.overviews?.[0]?.url?.toString() || ''"
+        [fit]="'cover'"
+      ></gn-ui-thumbnail>
+    </div>
+  }
   <div class="grow pt-1" [ngClass]="shouldShowThumbnail ? 'sm:w-0' : ''">
     <div class="flex flex-col gap-2 h-full">
       <h4
@@ -30,25 +32,27 @@
         ></gn-ui-markdown-parser>
       </div>
       <div class="record-card__footer">
-        <div
-          data-cy="recordOrg"
-          *ngIf="record.ownerOrganization?.name"
-          class="grow flex flex-row gap-1 items-center text-primary-lighter"
-          [ngClass]="displayContactIconOnly ? 'justify-center' : ''"
-        >
-          <ng-icon
-            name="iconoirBank"
-            class="text-primary -translate-y-[0.5px] shrink-0"
-            [title]="record.ownerOrganization.name"
-          ></ng-icon>
-          <span
-            *ngIf="!displayContactIconOnly"
-            data-cy="recordOrgName"
-            class="line-clamp-1"
-            [title]="record.ownerOrganization.name"
-            >{{ record.ownerOrganization.name }}</span
+        @if (record.ownerOrganization?.name) {
+          <div
+            data-cy="recordOrg"
+            class="grow flex flex-row gap-1 items-center text-primary-lighter"
+            [ngClass]="displayContactIconOnly ? 'justify-center' : ''"
           >
-        </div>
+            <ng-icon
+              name="iconoirBank"
+              class="text-primary -translate-y-[0.5px] shrink-0"
+              [title]="record.ownerOrganization.name"
+            ></ng-icon>
+            @if (!displayContactIconOnly) {
+              <span
+                data-cy="recordOrgName"
+                class="line-clamp-1"
+                [title]="record.ownerOrganization.name"
+                >{{ record.ownerOrganization.name }}</span
+              >
+            }
+          </div>
+        }
         <div class="record-card__footer__other">
           <div
             class="xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0"
@@ -62,14 +66,15 @@
             >
               <ng-template #customTemplate></ng-template
             ></gn-ui-kind-badge>
-            <gn-ui-metadata-quality
-              *ngIf="metadataQualityDisplay"
-              class="flex items-center min-w-[113px]"
-              [smaller]="true"
-              [metadata]="record"
-              [metadataQualityDisplay]="metadataQualityDisplay"
-              [popoverDisplay]="true"
-            ></gn-ui-metadata-quality>
+            @if (metadataQualityDisplay) {
+              <gn-ui-metadata-quality
+                class="flex items-center min-w-[113px]"
+                [smaller]="true"
+                [metadata]="record"
+                [metadataQualityDisplay]="metadataQualityDisplay"
+                [popoverDisplay]="true"
+              ></gn-ui-metadata-quality>
+            }
           </div>
           <div
             class="flex justify-center"

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

@@ -6,8 +6,9 @@ import {
   OnInit,
   Output,
   TemplateRef,
+  inject,
 } from '@angular/core'
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { fromEvent, Subscription } from 'rxjs'
 import { iconoirBank } from '@ng-icons/iconoir'
 import {
@@ -34,7 +35,6 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   standalone: true,
   imports: [
     NgClass,
-    NgIf,
     NgIconComponent,
     MetadataQualityComponent,
     NgTemplateOutlet,
@@ -55,6 +55,8 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   styleUrls: ['./internal-link-card.component.scss'],
 })
 export class InternalLinkCardComponent implements OnInit {
+  protected elementRef = inject(ElementRef)
+
   @Input() record: CatalogRecord
   @Input() linkTarget = '_blank'
   @Input() linkHref: string = null
@@ -75,8 +77,6 @@ export class InternalLinkCardComponent implements OnInit {
 
   private _size: CardSize = 'L'
 
-  constructor(protected elementRef: ElementRef) {}
-
   ngOnInit(): void {
     this.abstract = removeWhitespace(stripHtml(this.record?.abstract))
     this.subscription.add(

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

@@ -1,15 +1,10 @@
-<div
-  [class]="badgeClasses"
-  *ngIf="kind"
-  [title]="'record.kind.' + kind | translate"
->
-  <ng-icon [name]="iconKind" [ngClass]="extraClass"></ng-icon>
-
-  <ng-container *ngIf="contentTemplate; else defaultContent">
-    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
-  </ng-container>
-</div>
-
-<ng-template #defaultContent>
-  {{ 'record.kind.' + kind | translate }}
-</ng-template>
+@if (kind) {
+  <div [class]="badgeClasses" [title]="'record.kind.' + kind | translate">
+    <ng-icon [name]="iconKind" [ngClass]="extraClass"></ng-icon>
+    @if (contentTemplate) {
+      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+    } @else {
+      {{ 'record.kind.' + kind | translate }}
+    }
+  </div>
+}

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -18,7 +17,6 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatTooltipModule,
     TextAreaComponent,

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

@@ -6,16 +6,17 @@
     <div>
       <p class="text-base font-medium" translate>record.metadata.contact</p>
     </div>
-    <div
-      *ngIf="shownOrganization?.logoUrl?.href"
-      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]="shownOrganization.logoUrl.href"
-        fit="contain"
-      ></gn-ui-thumbnail>
-    </div>
+    @if (shownOrganization?.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]="shownOrganization.logoUrl.href"
+          fit="contain"
+        ></gn-ui-thumbnail>
+      </div>
+    }
     <div class="grid grid-cols-1 gap-1">
       <div class="flex">
         <div
@@ -26,74 +27,87 @@
           {{ shownOrganization?.name }}
         </div>
       </div>
-      <div *ngIf="shownOrganization?.website">
-        <a
-          [href]="shownOrganization.website"
-          target="_blank"
-          class="contact-website text-sm cursor-pointer hover:underline transition-all"
-          >{{ shownOrganization.website }}
-          <ng-icon
-            class="!w-[12px] !h-[12px] opacity-75 shrink-0"
-            name="matOpenInNew"
-          ></ng-icon>
-        </a>
-      </div>
+      @if (shownOrganization?.website) {
+        <div>
+          <a
+            [href]="shownOrganization.website"
+            target="_blank"
+            class="contact-website text-sm cursor-pointer hover:underline transition-all"
+            >{{ shownOrganization.website }}
+            <ng-icon
+              class="!w-[12px] !h-[12px] opacity-75 shrink-0"
+              name="matOpenInNew"
+            ></ng-icon>
+          </a>
+        </div>
+      }
     </div>
     <div class="grid grid-cols-1 gap-5 py-3 overflow-hidden">
-      <div *ngIf="contacts[0]?.phone">
-        <div class="flex">
-          <ng-icon
-            class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-            name="matCallOutline"
-          ></ng-icon>
-          <div class="flex flex-col ml-2">
-            <p class="text-sm">{{ contacts[0].phone }}</p>
+      @if (contacts[0]?.phone) {
+        <div>
+          <div class="flex">
+            <ng-icon
+              class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+              name="matCallOutline"
+            ></ng-icon>
+            <div class="flex flex-col ml-2">
+              <p class="text-sm">{{ contacts[0].phone }}</p>
+            </div>
           </div>
         </div>
-      </div>
-      <div *ngIf="contacts[0]?.email">
-        <div class="flex gap-2">
-          <ng-icon
-            class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-            name="matMailOutline"
-          ></ng-icon>
-          <a
-            *ngIf="contacts.length"
-            [href]="'mailto:' + contacts[0].email"
-            class="break-all text-sm hover:underline"
-            target="_blank"
-            data-cy="contact-email"
-            >{{ contacts[0].email }}</a
-          >
+      }
+      @if (contacts[0]?.email) {
+        <div>
+          <div class="flex gap-2">
+            <ng-icon
+              class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+              name="matMailOutline"
+            ></ng-icon>
+            @if (contacts.length) {
+              <a
+                [href]="'mailto:' + contacts[0].email"
+                class="break-all text-sm hover:underline"
+                target="_blank"
+                data-cy="contact-email"
+                >{{ contacts[0].email }}</a
+              >
+            }
+          </div>
         </div>
-      </div>
-      <div *ngIf="contacts[0]?.firstName || contacts[0]?.lastName">
-        <div class="flex">
-          <ng-icon
-            class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-            name="matPersonOutline"
-          ></ng-icon>
-          <div class="flex flex-col ml-2">
-            <p class="text-sm">
-              {{ contacts[0]?.firstName || '' }}
-              {{ contacts[0]?.lastName || '' }}
-            </p>
+      }
+      @if (contacts[0]?.firstName || contacts[0]?.lastName) {
+        <div>
+          <div class="flex">
+            <ng-icon
+              class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+              name="matPersonOutline"
+            ></ng-icon>
+            <div class="flex flex-col ml-2">
+              <p class="text-sm">
+                {{ contacts[0]?.firstName || '' }}
+                {{ contacts[0]?.lastName || '' }}
+              </p>
+            </div>
           </div>
         </div>
-      </div>
-      <div *ngIf="contacts[0]?.address">
-        <div class="flex">
-          <ng-icon
-            class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
-            name="matLocationOnOutline"
-          ></ng-icon>
-          <div class="flex flex-col ml-2">
-            <p *ngFor="let addressPart of address" class="text-sm">
-              {{ addressPart }}
-            </p>
+      }
+      @if (contacts[0]?.address) {
+        <div>
+          <div class="flex">
+            <ng-icon
+              class="!w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+              name="matLocationOnOutline"
+            ></ng-icon>
+            <div class="flex flex-col ml-2">
+              @for (addressPart of address; track addressPart) {
+                <p class="text-sm">
+                  {{ addressPart }}
+                </p>
+              }
+            </div>
           </div>
         </div>
-      </div>
+      }
     </div>
   </div>
 </div>

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 { CommonModule } from '@angular/common'
+
 import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
@@ -30,7 +30,7 @@ import { TranslateDirective } from '@ngx-translate/core'
   styleUrls: ['./metadata-contact.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ThumbnailComponent, NgIcon, TranslateDirective],
+  imports: [ThumbnailComponent, NgIcon, TranslateDirective],
   viewProviders: [
     provideIcons({
       matOpenInNew,

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

@@ -0,0 +1,32 @@
+<div
+  class="border border-gray-300 rounded-lg py-4 px-5 text-black flex justify-between items-center gap-4"
+>
+  <div class="overflow-hidden flex-1">
+    <p class="text-base font-medium mb-3">DOI</p>
+    <p
+      class="text-base font-medium overflow-hidden text-ellipsis whitespace-nowrap"
+      [title]="code"
+    >
+      {{ code }}
+    </p>
+  </div>
+  <div class="flex gap-2 items-start">
+    <gn-ui-copy-text-button
+      [text]="code"
+      [displayText]="false"
+      [tooltipText]="'record.metadata.doi.copy' | translate"
+      class="[&>div]:flex [&>div]:items-center [&>div]:justify-center [&_button]:w-[40px] [&_button]:h-[32px] [&_button]:flex [&_button]:items-center [&_button]:justify-center [&_button]:hover:bg-gray-100 [&_button]:rounded-lg [&_button]:transition-colors [&_button]:border [&_button]:border-gray-300 [&_button]:px-2 [&_button]:py-1 [&_ng-icon]:w-5 [&_ng-icon]:h-5"
+    ></gn-ui-copy-text-button>
+    @if (link) {
+      <a
+        [href]="link"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="w-[40px] h-[32px] flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors border border-gray-300 px-2 py-1"
+        [matTooltip]="'record.metadata.doi.open' | translate"
+      >
+        <ng-icon name="matOpenInNew" size="20"></ng-icon>
+      </a>
+    }
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core'
+
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { matOpenInNew } from '@ng-icons/material-icons/baseline'
+import { TranslatePipe } from '@ngx-translate/core'
+import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-metadata-doi',
+  standalone: true,
+  imports: [MatTooltipModule, NgIcon, TranslatePipe, CopyTextButtonComponent],
+  templateUrl: './metadata-doi.component.html',
+  styleUrl: './metadata-doi.component.css',
+  viewProviders: [
+    provideIcons({
+      matOpenInNew,
+    }),
+  ],
+})
+export class MetadataDoiComponent {
+  @Input() code!: string
+  @Input() link?: string
+}

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

@@ -1,15 +1,13 @@
 /* eslint-disable @angular-eslint/directive-selector */
-import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core'
+import { Directive, ElementRef, OnInit, Renderer2, inject } from '@angular/core'
 
 @Directive({
   selector: '[gnUiLinkify]',
   standalone: true,
 })
 export class GnUiLinkifyDirective implements OnInit {
-  constructor(
-    private el: ElementRef,
-    private renderer: Renderer2
-  ) {}
+  private el = inject(ElementRef)
+  private renderer = inject(Renderer2)
 
   ngOnInit() {
     setTimeout(() => {