geonetwork-ui 2.6.0-dev.7be6567ef → 2.6.0-dev.b306f1194

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

@@ -23,4 +23,5 @@ export * from './lib/ui-elements.module';
 export * from './lib/user-feedback-item/user-feedback-item.component';
 export * from './lib/user-preview/user-preview.component';
 export * from './lib/application-banner/application-banner.component';
+export * from './lib/internal-link-card/internal-link-card.component';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/libs/ui/elements/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAA;AACjD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yDAAyD,CAAA;AACvE,cAAc,6CAA6C,CAAA;AAC3D,cAAc,6CAA6C,CAAA;AAC3D,cAAc,+CAA+C,CAAA;AAC7D,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yCAAyC,CAAA;AACvD,cAAc,6DAA6D,CAAA;AAC3E,cAAc,qCAAqC,CAAA;AACnD,cAAc,iDAAiD,CAAA;AAC/D,cAAc,iDAAiD,CAAA;AAC/D,cAAc,mDAAmD,CAAA;AACjE,cAAc,mDAAmD,CAAA;AACjE,cAAc,6CAA6C,CAAA;AAC3D,cAAc,6DAA6D,CAAA;AAC3E,cAAc,mDAAmD,CAAA;AACjE,cAAc,2CAA2C,CAAA;AACzD,cAAc,iDAAiD,CAAA;AAC/D,cAAc,yDAAyD,CAAA;AACvE,cAAc,qCAAqC,CAAA;AACnD,cAAc,0BAA0B,CAAA;AACxC,cAAc,uDAAuD,CAAA;AACrE,cAAc,2CAA2C,CAAA;AACzD,cAAc,uDAAuD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/libs/ui/elements/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAA;AACjD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yDAAyD,CAAA;AACvE,cAAc,6CAA6C,CAAA;AAC3D,cAAc,6CAA6C,CAAA;AAC3D,cAAc,+CAA+C,CAAA;AAC7D,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yCAAyC,CAAA;AACvD,cAAc,6DAA6D,CAAA;AAC3E,cAAc,qCAAqC,CAAA;AACnD,cAAc,iDAAiD,CAAA;AAC/D,cAAc,iDAAiD,CAAA;AAC/D,cAAc,mDAAmD,CAAA;AACjE,cAAc,mDAAmD,CAAA;AACjE,cAAc,6CAA6C,CAAA;AAC3D,cAAc,6DAA6D,CAAA;AAC3E,cAAc,mDAAmD,CAAA;AACjE,cAAc,2CAA2C,CAAA;AACzD,cAAc,iDAAiD,CAAA;AAC/D,cAAc,yDAAyD,CAAA;AACvE,cAAc,qCAAqC,CAAA;AACnD,cAAc,0BAA0B,CAAA;AACxC,cAAc,uDAAuD,CAAA;AACrE,cAAc,2CAA2C,CAAA;AACzD,cAAc,uDAAuD,CAAA;AACrE,cAAc,uDAAuD,CAAA"}

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

@@ -0,0 +1,43 @@
+import { TemplateRef, OnInit, EventEmitter, ElementRef } from '@angular/core';
+import { CatalogRecord, Organization } from '../../../../../../libs/common/domain/src/lib/model/record';
+import { Subscription } from 'rxjs';
+import * as i0 from "@angular/core";
+type CardSize = 'L' | 'M' | 'S' | 'XS';
+export declare class InternalLinkCardComponent implements OnInit {
+    protected elementRef: ElementRef;
+    record: CatalogRecord;
+    metadataQualityDisplay: boolean;
+    favoriteTemplate: TemplateRef<{
+        $implicit: CatalogRecord;
+    }>;
+    linkHref: string;
+    isGeodata: boolean;
+    set size(value: CardSize);
+    get size(): CardSize;
+    mdSelect: EventEmitter<CatalogRecord>;
+    subscription: Subscription;
+    abstract: string;
+    cardClass: string;
+    thumbnailContainerClass: string;
+    private _size;
+    private readonly sizeClassMap;
+    private readonly thumbnailSizeClassMap;
+    private readonly titleClassMap;
+    constructor(elementRef: ElementRef);
+    ngOnInit(): void;
+    get organization(): Organization;
+    get contacts(): import("../../../../../common/domain/src/lib/model/record/contact.model").Individual[];
+    getTitleClass(): string;
+    openExternalUrl(event: Event, url: URL): void;
+    openMailto(event: Event, email: string): void;
+    copyToClipboard(event: Event, text: string): void;
+    get shouldShowThumbnail(): boolean;
+    getKindInfo(): {
+        text: string;
+        icon: string;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<InternalLinkCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InternalLinkCardComponent, "gn-ui-internal-link-card", never, { "record": { "alias": "record"; "required": false; }; "metadataQualityDisplay": { "alias": "metadataQualityDisplay"; "required": false; }; "favoriteTemplate": { "alias": "favoriteTemplate"; "required": false; }; "linkHref": { "alias": "linkHref"; "required": false; }; "isGeodata": { "alias": "isGeodata"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "mdSelect": "mdSelect"; }, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=internal-link-card.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"internal-link-card.component.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/ui/elements/src/lib/internal-link-card/internal-link-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,MAAM,EAEN,YAAY,EACZ,UAAU,EACX,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,aAAa,EACb,YAAY,EACb,MAAM,2DAA2D,CAAA;AAyBlE,OAAO,EAAa,YAAY,EAAE,MAAM,MAAM,CAAA;;AAM9C,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAEtC,qBA+Ba,yBAA0B,YAAW,MAAM;IA6C1C,SAAS,CAAC,UAAU,EAAE,UAAU;IA5CnC,MAAM,EAAE,aAAa,CAAA;IACrB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,WAAW,CAAC;QAAE,SAAS,EAAE,aAAa,CAAA;KAAE,CAAC,CAAA;IAC3D,QAAQ,EAAE,MAAM,CAAO;IACvB,SAAS,EAAE,OAAO,CAAA;IAC3B,IAAa,IAAI,CAAC,KAAK,EAAE,QAAQ,EAIhC;IACD,IAAI,IAAI,IAAI,QAAQ,CAEnB;IACS,QAAQ,8BAAoC;IACtD,YAAY,eAAqB;IAEjC,QAAQ,EAAE,MAAM,CAAA;IAEhB,SAAS,SAAK;IACd,uBAAuB,SAAK;IAE5B,OAAO,CAAC,KAAK,CAAgB;IAE7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK5B;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAKrC;IAED,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK7B;gBAEqB,UAAU,EAAE,UAAU;IAE5C,QAAQ,IAAI,IAAI;IAahB,IAAI,YAAY,IAAI,YAAY,CAE/B;IAED,IAAI,QAAQ,2FAMX;IAED,aAAa;IAQb,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI;IAK7C,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7C,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAKjD,IAAI,mBAAmB,IAAI,OAAO,CAEjC;IAED,WAAW,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;yCAnGlC,yBAAyB;2CAAzB,yBAAyB;CAiHrC"}

package/libs/ui/elements/src/lib/ui-elements.module.d.ts

@@ -19,9 +19,10 @@ import * as i17 from "../../../layout/src/lib/max-lines/max-lines.component";
 import * as i18 from "../../../inputs/src/lib/text-input/text-input.component";
 import * as i19 from "./image-input/image-input.component";
 import * as i20 from "./application-banner/application-banner.component";
+import * as i21 from "./internal-link-card/internal-link-card.component";
 export declare class UiElementsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiElementsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiElementsModule, [typeof i1.AvatarComponent, typeof i2.UserPreviewComponent], [typeof i3.CommonModule, typeof i4.MatTooltipModule, typeof i5.UiWidgetsModule, typeof i6.UiLayoutModule, typeof i7.TranslateModule, typeof i8.UtilSharedModule, typeof i9.RouterModule, typeof i10.UiInputsModule, typeof i11.FormsModule, typeof i3.NgOptimizedImage, typeof i12.PopoverComponent, typeof i13.MarkdownParserComponent, typeof i14.ThumbnailComponent, typeof i15.TimeSincePipe, typeof i16.BadgeComponent, typeof i17.MaxLinesComponent, typeof i18.TextInputComponent, typeof i19.ImageInputComponent, typeof i20.ApplicationBannerComponent], [typeof i14.ThumbnailComponent, typeof i1.AvatarComponent, typeof i2.UserPreviewComponent, typeof i13.MarkdownParserComponent, typeof i19.ImageInputComponent, typeof i20.ApplicationBannerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiElementsModule, [typeof i1.AvatarComponent, typeof i2.UserPreviewComponent], [typeof i3.CommonModule, typeof i4.MatTooltipModule, typeof i5.UiWidgetsModule, typeof i6.UiLayoutModule, typeof i7.TranslateModule, typeof i8.UtilSharedModule, typeof i9.RouterModule, typeof i10.UiInputsModule, typeof i11.FormsModule, typeof i3.NgOptimizedImage, typeof i12.PopoverComponent, typeof i13.MarkdownParserComponent, typeof i14.ThumbnailComponent, typeof i15.TimeSincePipe, typeof i16.BadgeComponent, typeof i17.MaxLinesComponent, typeof i18.TextInputComponent, typeof i19.ImageInputComponent, typeof i20.ApplicationBannerComponent, typeof i21.InternalLinkCardComponent], [typeof i14.ThumbnailComponent, typeof i1.AvatarComponent, typeof i2.UserPreviewComponent, typeof i13.MarkdownParserComponent, typeof i19.ImageInputComponent, typeof i20.ApplicationBannerComponent, typeof i21.InternalLinkCardComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiElementsModule>;
 }
 //# sourceMappingURL=ui-elements.module.d.ts.map

package/libs/ui/elements/src/lib/ui-elements.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-elements.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/elements/src/lib/ui-elements.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA,qBAqCa,gBAAgB;yCAAhB,gBAAgB;0CAAhB,gBAAgB;0CAAhB,gBAAgB;CAAG"}
+{"version":3,"file":"ui-elements.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/elements/src/lib/ui-elements.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,qBAuCa,gBAAgB;yCAAhB,gBAAgB;0CAAhB,gBAAgB;0CAAhB,gBAAgB;CAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.6.0-dev.7be6567ef",
+  "version": "2.6.0-dev.b306f1194",
   "engines": {
     "node": ">=20"
   },

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-row items-center">
   <span
-    class="align-text-top mr-1.5"
+    class="align-text-top mr-1.5 mt-0.5"
     data-test="favorite-count"
     *ngIf="hasFavoriteCount && displayCount"
     >{{ favoriteCount }}</span

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

@@ -23,3 +23,4 @@ export * from './lib/ui-elements.module'
 export * from './lib/user-feedback-item/user-feedback-item.component'
 export * from './lib/user-preview/user-preview.component'
 export * from './lib/application-banner/application-banner.component'
+export * from './lib/internal-link-card/internal-link-card.component'

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

@@ -0,0 +1,156 @@
+<div
+  class="rounded-lg group card-shadow cursor-pointer overflow-hidden hover:bg-gray-50"
+  [ngClass]="cardClass"
+>
+  <div class="flex flex-row justify-between w-full">
+    <div
+      *ngIf="shouldShowThumbnail"
+      [ngClass]="thumbnailContainerClass"
+      class="mr-4 flex flex-col"
+    >
+      <gn-ui-thumbnail
+        class="w-full h-full object-cover"
+        [thumbnailUrl]="record.overviews?.[0]?.url?.toString() || ''"
+        [fit]="'cover'"
+      ></gn-ui-thumbnail>
+    </div>
+    <div
+      class="flex flex-col flex-1 relative"
+      [ngClass]="{
+        'justify-between': record.ownerOrganization?.name && size !== 'XS',
+      }"
+    >
+      <div class="flex items-center space-x-2">
+        <span
+          *ngIf="getKindInfo().text"
+          class="badge-btn text-white text-xs px-2 py-0.5 font-bold shrink-0 bg-primary leading-tight flex items-center justify-evenly h-6 min-h-6"
+        >
+          <ng-icon
+            class="text-[0.9em] text-white mr-1"
+            [name]="getKindInfo().icon"
+          ></ng-icon>
+          <span class="font-medium text-white text-xs" translate>
+            {{ getKindInfo().text }}
+          </span>
+        </span>
+        <span
+          *ngIf="isGeodata"
+          class="badge-btn text-black text-xs px-2 py-0.5 font-bold shrink-0 bg-primary-white leading-tight flex items-center justify-evenly h-6 min-h-6"
+          [ngClass]="size === 'L' ? 'w-[164px]' : 'w-8'"
+        >
+          <ng-icon
+            class="text-[0.9em] text-primary-darkest"
+            name="matLocationSearchingOutline"
+          ></ng-icon>
+          <ng-container *ngIf="size === 'L'">
+            <span
+              class="font-medium text-primary-darkest text-xs ml-1"
+              translate
+            >
+              record.metadata.type
+            </span>
+          </ng-container>
+        </span>
+        <div class="flex items-center">
+          <gn-ui-metadata-quality
+            [smaller]="true"
+            [metadata]="record"
+            [metadataQualityDisplay]="metadataQualityDisplay"
+          ></gn-ui-metadata-quality>
+        </div>
+        <div class="absolute top-0 right-0 items-center">
+          <ng-container
+            *ngIf="size !== 'XS'"
+            [ngTemplateOutlet]="favoriteTemplate"
+            [ngTemplateOutletContext]="{ $implicit: record }"
+          ></ng-container>
+        </div>
+      </div>
+      <div
+        class="font-medium text-title group-hover:text-primary overflow-hidden break-words"
+        [ngClass]="getTitleClass()"
+      >
+        {{ record.title }}
+      </div>
+      <div
+        *ngIf="size === 'L'"
+        class="mt-1 mb-2 font-normal text-xs text-gray-900 line-clamp-2 overflow-hidden"
+      >
+        <gn-ui-markdown-parser
+          [textContent]="abstract"
+          [whitoutStyles]="true"
+        ></gn-ui-markdown-parser>
+      </div>
+      <div
+        *ngIf="size !== 'XS' && record.ownerOrganization?.name"
+        class="flex items-center justify-evenly bg-gray-50 rounded-lg h-[53px] px-2"
+      >
+        <div class="flex items-center flex-1 min-w-0">
+          <div
+            class="w-[45px] h-[45px] rounded-lg overflow-hidden shrink-0 mr-3"
+          >
+            <gn-ui-thumbnail
+              [thumbnailUrl]="
+                record.ownerOrganization?.logoUrl?.toString() || ''
+              "
+              [fit]="'contain'"
+              class="w-full h-full rounded-lg"
+            ></gn-ui-thumbnail>
+          </div>
+          <div *ngIf="organization?.name" class="flex-1 w-0 overflow-hidden">
+            <div
+              class="text-xs text-black font-normal leading-tight truncate"
+              translate
+            >
+              record.card.metadata.contact
+            </div>
+            <div class="text-xl text-primary-black font-medium truncate">
+              {{ organization.name }}
+            </div>
+          </div>
+        </div>
+        <div *ngIf="size === 'L'" class="ml-2 flex space-x-2">
+          <div *ngIf="organization?.website" class="flex">
+            <button
+              [title]="organization.website"
+              class="w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest"
+              (click)="openExternalUrl($event, organization.website)"
+            >
+              <ng-icon name="iconoirInternet"></ng-icon>
+            </button>
+          </div>
+          <div *ngIf="contacts[0]?.email" class="flex">
+            <button
+              [title]="contacts[0].email"
+              class="w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest"
+              data-cy="contact-email"
+              (click)="openMailto($event, contacts[0].email)"
+            >
+              <ng-icon name="matEmailOutline"></ng-icon>
+            </button>
+          </div>
+          <div *ngIf="contacts[0]?.phone" class="flex">
+            <button
+              [title]="'Copy to clipboard'"
+              class="w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group"
+              data-cy="contact-phone"
+              (click)="copyToClipboard($event, contacts[0].phone)"
+            >
+              <ng-icon name="matPhoneOutline"></ng-icon>
+            </button>
+          </div>
+          <div *ngIf="contacts[0]?.address" class="flex">
+            <button
+              [title]="'Copy to clipboard'"
+              class="w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group"
+              data-cy="contact-phone"
+              (click)="copyToClipboard($event, contacts[0].address)"
+            >
+              <ng-icon name="matLocationOnOutline"></ng-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,190 @@
+import {
+  Component,
+  Input,
+  TemplateRef,
+  OnInit,
+  Output,
+  EventEmitter,
+  ElementRef,
+} from '@angular/core'
+import {
+  CatalogRecord,
+  Organization,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common'
+import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
+import { MetadataQualityComponent } from '../metadata-quality/metadata-quality.component'
+import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
+import {
+  propagateToDocumentOnly,
+  removeWhitespace,
+  stripHtml,
+} from '../../../../../../libs/util/shared/src'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  matLocationSearchingOutline,
+  matEmailOutline,
+  matPhoneOutline,
+  matLocationOnOutline,
+} from '@ng-icons/material-icons/outline'
+import { matCode } from '@ng-icons/material-icons/baseline'
+import { iconoirDatabase, iconoirMap, iconoirInternet } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { fromEvent, Subscription } from 'rxjs'
+
+marker('record.kind.dataset')
+marker('record.kind.reuse')
+marker('record.kind.service')
+
+type CardSize = 'L' | 'M' | 'S' | 'XS'
+
+@Component({
+  selector: 'gn-ui-internal-link-card',
+  standalone: true,
+  imports: [
+    NgClass,
+    NgIf,
+    ThumbnailComponent,
+    MetadataQualityComponent,
+    NgTemplateOutlet,
+    NgIconComponent,
+    TranslateModule,
+    MarkdownParserComponent,
+  ],
+  providers: [
+    provideIcons({
+      matLocationSearchingOutline,
+      matCode,
+      iconoirDatabase,
+      iconoirMap,
+      iconoirInternet,
+      matEmailOutline,
+      matPhoneOutline,
+      matLocationOnOutline,
+    }),
+    provideNgIconsConfig({
+      size: '1.2em',
+    }),
+  ],
+  templateUrl: './internal-link-card.component.html',
+  styleUrls: ['./internal-link-card.component.css'],
+})
+export class InternalLinkCardComponent implements OnInit {
+  @Input() record: CatalogRecord
+  @Input() metadataQualityDisplay: boolean
+  @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
+  @Input() linkHref: string = null
+  @Input() isGeodata: boolean
+  @Input() set size(value: CardSize) {
+    this._size = value
+    this.cardClass = this.sizeClassMap[value] || ''
+    this.thumbnailContainerClass = this.thumbnailSizeClassMap[value] || 'hidden'
+  }
+  get size(): CardSize {
+    return this._size
+  }
+  @Output() mdSelect = new EventEmitter<CatalogRecord>()
+  subscription = new Subscription()
+
+  abstract: string
+
+  cardClass = ''
+  thumbnailContainerClass = ''
+
+  private _size: CardSize = 'M'
+
+  private readonly sizeClassMap: Record<CardSize, string> = {
+    L: 'min-h-[190px] md:w-[992px] py-3 px-3 flex items-start gap-5',
+    M: 'min-h-[140px] md:w-[570px] py-3 px-3 flex items-start gap-4',
+    S: 'min-h-[220px] md:w-[370px] py-3 px-3 flex gap-4',
+    XS: 'min-h-[108px] md:w-[570px] py-3 px-3 flex gap-4',
+  }
+
+  private readonly thumbnailSizeClassMap: Record<CardSize, string> = {
+    L: 'w-[190px] h-[180px] rounded-lg overflow-hidden shrink-0',
+    M: 'w-[110px] h-[140px] rounded-lg overflow-hidden shrink-0',
+    S: 'hidden',
+    XS: 'hidden',
+  }
+
+  private readonly titleClassMap: Record<CardSize, string> = {
+    L: 'text-xl line-clamp-2',
+    M: 'text-base line-clamp-2',
+    S: 'text-base line-clamp-3',
+    XS: 'text-base mt-3 line-clamp-2',
+  }
+
+  constructor(protected elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    this.abstract = removeWhitespace(stripHtml(this.record?.abstract))
+    this.subscription.add(
+      fromEvent(this.elementRef.nativeElement, 'click').subscribe(
+        (event: Event) => {
+          event.preventDefault()
+          propagateToDocumentOnly(event)
+          this.mdSelect.emit(this.record)
+        }
+      )
+    )
+  }
+
+  get organization(): Organization {
+    return this.record.ownerOrganization
+  }
+
+  get contacts() {
+    return (
+      (this.record.kind === 'dataset'
+        ? this.record.contactsForResource
+        : this.record.contacts) || []
+    )
+  }
+
+  getTitleClass() {
+    return (
+      this.titleClassMap[this._size] +
+        ' ' +
+        (this.record.ownerOrganization?.name ? '' : 'mt-3') || ''
+    )
+  }
+
+  openExternalUrl(event: Event, url: URL): void {
+    event.stopPropagation()
+    window.open(url, '_blank')
+  }
+
+  openMailto(event: Event, email: string): void {
+    event.stopPropagation()
+    window.open(`mailto:${email}`, '_blank')
+  }
+
+  copyToClipboard(event: Event, text: string): void {
+    event.stopPropagation()
+    navigator.clipboard.writeText(text)
+  }
+
+  get shouldShowThumbnail(): boolean {
+    return this.size === 'L' || this.size === 'M'
+  }
+
+  getKindInfo(): { text: string; icon: string } {
+    if (!this.record?.kind) return { text: '', icon: '' }
+
+    switch (this.record.kind.toLowerCase()) {
+      case 'dataset':
+        return { text: 'record.kind.dataset', icon: 'iconoirDatabase' }
+      case 'reuse':
+        return { text: 'record.kind.reuse', icon: 'iconoirMap' }
+      case 'service':
+        return { text: 'record.kind.service', icon: 'matCode' }
+      default:
+        return { text: '', icon: '' }
+    }
+  }
+}

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

@@ -1,7 +1,9 @@
-<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
+<div *ngIf="metadataQualityDisplay" class="metadata-quality">
   <div
     class="flex items-center"
-    [class]="smaller ? 'leading-[8px] min-w-[120px]' : 'min-w-[200px]'"
+    [class]="
+      smaller ? 'leading-[8px] min-w-[120px] m-h-[120px]' : 'min-w-[200px]'
+    "
   >
     <gn-ui-progress-bar
       tabindex="0"

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -20,6 +20,7 @@ import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { ApplicationBannerComponent } from './application-banner/application-banner.component'
+import { InternalLinkCardComponent } from './internal-link-card/internal-link-card.component'
 
 @NgModule({
   imports: [
@@ -42,6 +43,7 @@ import { ApplicationBannerComponent } from './application-banner/application-ban
     TextInputComponent,
     ImageInputComponent,
     ApplicationBannerComponent,
+    InternalLinkCardComponent,
   ],
   providers: [
     provideNgIconsConfig({
@@ -56,6 +58,7 @@ import { ApplicationBannerComponent } from './application-banner/application-ban
     MarkdownParserComponent,
     ImageInputComponent,
     ApplicationBannerComponent,
+    InternalLinkCardComponent,
   ],
 })
 export class UiElementsModule {}

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.html

@@ -8,11 +8,11 @@
       >
         {{ progress }}%
       </div>
-      <div class="flex-grow h-[6px] w-full {{ color.outerBar }} rounded-full">
+      <div class="flex-grow h-[4px] w-[52px] {{ color.outerBar }} rounded-full">
         <div
           [style.width.%]="progress"
           class="{{ color.innerBar }} transition-width duration-500
-               ease-in-out rounded-full shadow-sm h-full"
+               ease-in-out rounded-full shadow-sm w-[52px] h-[4px]"
         ></div>
       </div>
     </div>

package/translations/de.json

@@ -1,6 +1,7 @@
 {
   "": "",
   "Add Layer As": "",
+  "Enter to search": "",
   "button.login": "",
   "catalog.figures.datasets": "{count, plural, =0{Datensätze} one{Datensatz} other{Datensätze}}",
   "catalog.figures.organizations": "{count, plural, =0{Organisationen} one{Organisation} other{Organisationen}}",
@@ -354,8 +355,12 @@
   "record.action.duplicating": "",
   "record.action.rollback": "",
   "record.action.view": "Anzeigen",
+  "record.card.metadata.contact": "",
   "record.externalViewer.open": "In externem Kartenviewer öffnen",
   "record.feature.limit": "Die Vorschau wurde aufgrund zu vieler Elemente deaktiviert",
+  "record.kind.dataset": "",
+  "record.kind.reuse": "",
+  "record.kind.service": "",
   "record.metadata.about": "Beschreibung",
   "record.metadata.api": "API",
   "record.metadata.api.form.closeButton": "Schließen",

package/translations/en.json

@@ -1,6 +1,7 @@
 {
   "": "",
   "Add Layer As": "",
+  "Enter to search": "",
   "button.login": "Log in",
   "catalog.figures.datasets": "{count, plural, =0{datasets} one{dataset} other{datasets}}",
   "catalog.figures.organizations": "{count, plural, =0{organizations} one{organization} other{organizations}}",
@@ -354,8 +355,12 @@
   "record.action.duplicating": "Duplicating...",
   "record.action.rollback": "Rollback",
   "record.action.view": "View",
+  "record.card.metadata.contact": "Metadata Contact",
   "record.externalViewer.open": "Open in the external map viewer",
   "record.feature.limit": "Preview disabled due to too many elements",
+  "record.kind.dataset": "Data",
+  "record.kind.reuse": "Reuse",
+  "record.kind.service": "Service",
   "record.metadata.about": "Description",
   "record.metadata.api": "API",
   "record.metadata.api.form.closeButton": "Close",

package/translations/es.json

@@ -1,6 +1,7 @@
 {
   "": "",
   "Add Layer As": "",
+  "Enter to search": "",
   "button.login": "",
   "catalog.figures.datasets": "conjuntos de datos",
   "catalog.figures.organizations": "organizaciones",
@@ -354,8 +355,12 @@
   "record.action.duplicating": "",
   "record.action.rollback": "",
   "record.action.view": "",
+  "record.card.metadata.contact": "",
   "record.externalViewer.open": "",
   "record.feature.limit": "",
+  "record.kind.dataset": "",
+  "record.kind.reuse": "",
+  "record.kind.service": "",
   "record.metadata.about": "",
   "record.metadata.api": "",
   "record.metadata.api.form.closeButton": "",

package/translations/fr.json

@@ -1,6 +1,7 @@
 {
   "": "",
   "Add Layer As": "",
+  "Enter to search": "",
   "button.login": "Se connecter",
   "catalog.figures.datasets": "{count, plural, =0{données} one{donnée} other{données}}",
   "catalog.figures.organizations": "{count, plural, =0{organisations} one{organisation} other{organisations}}",
@@ -354,8 +355,12 @@
   "record.action.duplicating": "Duplication...",
   "record.action.rollback": "Restaurer",
   "record.action.view": "Voir",
+  "record.card.metadata.contact": "Contact de la métadonnée ",
   "record.externalViewer.open": "Ouvrir dans le visualiseur externe",
   "record.feature.limit": "L’aperçu a été désactivé en raison d’un trop grand nombre d'éléments",
+  "record.kind.dataset": "Donnée",
+  "record.kind.reuse": "Réutilisation",
+  "record.kind.service": "Service",
   "record.metadata.about": "Description",
   "record.metadata.api": "API",
   "record.metadata.api.form.closeButton": "Fermer",

package/translations/it.json

@@ -1,6 +1,7 @@
 {
   "": "",
   "Add Layer As": "",
+  "Enter to search": "",
   "button.login": "Login",
   "catalog.figures.datasets": "{count, plural, =0{datasets} one{dataset} other{datasets}}",
   "catalog.figures.organizations": "{count, plural, =0{organizzazioni} one{organizzazione} other{organizzazioni}}",
@@ -354,8 +355,12 @@
   "record.action.duplicating": "Duplicazione",
   "record.action.rollback": "Annulla",
   "record.action.view": "Visualizza",
+  "record.card.metadata.contact": "",
   "record.externalViewer.open": "Aprire nel visualizzatore esterno",
   "record.feature.limit": "La visualizzazione è stata disabilitata a causa di troppi elementi ",
+  "record.kind.dataset": "",
+  "record.kind.reuse": "",
+  "record.kind.service": "",
   "record.metadata.about": "Descrizione",
   "record.metadata.api": "API",
   "record.metadata.api.form.closeButton": "Chiude",

package/translations/nl.json

@@ -1,6 +1,7 @@
 {
   "": "",
   "Add Layer As": "",
+  "Enter to search": "",
   "button.login": "",
   "catalog.figures.datasets": "datasets",
   "catalog.figures.organizations": "organisaties",
@@ -354,8 +355,12 @@
   "record.action.duplicating": "",
   "record.action.rollback": "",
   "record.action.view": "",
+  "record.card.metadata.contact": "",
   "record.externalViewer.open": "",
   "record.feature.limit": "",
+  "record.kind.dataset": "",
+  "record.kind.reuse": "",
+  "record.kind.service": "",
   "record.metadata.about": "",
   "record.metadata.api": "",
   "record.metadata.api.form.closeButton": "",

package/translations/pt.json

@@ -1,6 +1,7 @@
 {
   "": "",
   "Add Layer As": "",
+  "Enter to search": "",
   "button.login": "",
   "catalog.figures.datasets": "conjuntos de dados",
   "catalog.figures.organizations": "organizações",
@@ -354,8 +355,12 @@
   "record.action.duplicating": "",
   "record.action.rollback": "",
   "record.action.view": "",
+  "record.card.metadata.contact": "",
   "record.externalViewer.open": "",
   "record.feature.limit": "",
+  "record.kind.dataset": "",
+  "record.kind.reuse": "",
+  "record.kind.service": "",
   "record.metadata.about": "",
   "record.metadata.api": "",
   "record.metadata.api.form.closeButton": "",