geonetwork-ui 2.6.0-dev.9df114cd4 → 2.6.0-dev.c4b99cdef

package/src/libs/feature/search/src/lib/results-hits/results-hits.container.component.ts

@@ -0,0 +1,59 @@
+import {
+  catchError,
+  filter,
+  map,
+  Observable,
+  of,
+  startWith,
+  switchMap,
+} from 'rxjs'
+import { Component, OnInit } from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { SearchFacade } from '../state/search.facade'
+import { FieldAvailableValue, FieldValue } from '../utils/service/fields'
+import { SearchService } from '../utils/service/search.service'
+import { FieldsService } from '../utils/service/fields.service'
+
+marker('search.filters.recordKind.all')
+marker('search.filters.recordKind.dataset')
+marker('search.filters.recordKind.service')
+marker('search.filters.recordKind.reuse')
+
+@Component({
+  selector: 'gn-ui-results-hits',
+  templateUrl: './results-hits.container.component.html',
+  styleUrls: ['./results-hits.container.component.css'],
+})
+export class ResultsHitsContainerComponent implements OnInit {
+  fieldName = 'recordKind'
+  filterChoices$: Observable<FieldAvailableValue[]>
+  selected$: Observable<FieldValue[]>
+
+  constructor(
+    protected searchFacade: SearchFacade,
+    private searchService: SearchService,
+    private fieldsService: FieldsService
+  ) {}
+
+  ngOnInit() {
+    this.selected$ = this.searchFacade.searchFilters$.pipe(
+      switchMap((filters) =>
+        this.fieldsService.readFieldValuesFromFilters(filters)
+      ),
+      map((fieldValues) => fieldValues[this.fieldName]),
+      filter((selected) => !!selected),
+      startWith([]),
+      catchError(() => of([]))
+    ) as Observable<FieldValue[]>
+
+    this.filterChoices$ = <Observable<FieldAvailableValue[]>>(
+      this.fieldsService.getAvailableValues(this.fieldName)
+    )
+  }
+
+  onSelectionChanged(values: string[]) {
+    this.fieldsService
+      .buildFiltersFromFieldValues({ [this.fieldName]: values })
+      .subscribe((filters) => this.searchService.updateFilters(filters))
+  }
+}

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.html

@@ -16,6 +16,7 @@
         type="secondary"
         (buttonClick)="onShowMore()"
         extraClass="m-auto !p-[22px]"
+        [style.--gn-ui-button-width]="!auto"
       >
         <span class="uppercase font-medium tracking-widest" translate
           >results.showMore</span

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.ts

@@ -17,7 +17,11 @@ import {
   ResultsLayoutConfigItem,
   ResultsLayoutConfigModel,
 } from '../../../../../../libs/ui/search/src'
-import { RECORD_URL_TOKEN } from '../record-url.token'
+import {
+  RECORD_DATASET_URL_TOKEN,
+  RECORD_SERVICE_URL_TOKEN,
+  RECORD_REUSE_URL_TOKEN,
+} from '../record-url.token'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export type ResultsListShowMoreStrategy = 'auto' | 'button' | 'none'
@@ -49,8 +53,12 @@ export class ResultsListContainerComponent implements OnInit {
     @Inject(RESULTS_LAYOUT_CONFIG)
     private resultsLayoutConfig: ResultsLayoutConfigModel,
     @Optional()
-    @Inject(RECORD_URL_TOKEN)
-    private recordUrlTemplate: string
+    @Inject(RECORD_DATASET_URL_TOKEN)
+    private recordDatasetUrlTemplate: string,
+    @Inject(RECORD_SERVICE_URL_TOKEN)
+    private recordServiceUrlTemplate: string,
+    @Inject(RECORD_REUSE_URL_TOKEN)
+    private recordReuseUrlTemplate: string
   ) {}
 
   ngOnInit(): void {
@@ -103,7 +111,18 @@ export class ResultsListContainerComponent implements OnInit {
   }
 
   getRecordUrl(metadata: CatalogRecord) {
-    if (!this.recordUrlTemplate) return null
-    return this.recordUrlTemplate.replace('${uuid}', metadata.uniqueIdentifier)
+    const tokenMap = {
+      dataset: this.recordDatasetUrlTemplate,
+      service: this.recordServiceUrlTemplate,
+      reuse: this.recordReuseUrlTemplate,
+    }
+    if (
+      !this.recordDatasetUrlTemplate &&
+      !this.recordServiceUrlTemplate &&
+      !this.recordReuseUrlTemplate
+    )
+      return null
+    const urlKind = tokenMap[metadata.kind]
+    return urlKind.replace('${uuid}', metadata.uniqueIdentifier)
   }
 }

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -10,8 +10,10 @@ import {
   MultilingualSearchField,
   OrganizationSearchField,
   OwnerSearchField,
+  ResourceTypeLegacyField,
   SimpleSearchField,
   TranslatedSearchField,
+  RecordKindField,
   UserSearchField,
 } from './fields'
 import { forkJoin, Observable, of } from 'rxjs'
@@ -47,11 +49,8 @@ export class FieldsService {
   protected fields = {
     organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
-    resourceType: new TranslatedSearchField(
-      'resourceType',
-      this.injector,
-      'asc'
-    ),
+    resourceType: new ResourceTypeLegacyField(this.injector), // Deprecated, use `recordKind` instead
+    recordKind: new RecordKindField(this.injector),
     representationType: new TranslatedSearchField(
       'cl_spatialRepresentationType.key',
       this.injector,

package/src/libs/feature/search/src/lib/utils/service/fields.ts

@@ -22,6 +22,7 @@ import {
 } from '../../../../../../../libs/api/repository/src'
 import { LangService } from '../../../../../../../libs/util/i18n/src'
 import { formatUserInfo } from '../../../../../../../libs/util/shared/src'
+import { PossibleResourceTypes } from '../../../../../../../libs/api/metadata-converter/src'
 
 export type FieldType = 'values' | 'dateRange'
 
@@ -29,6 +30,7 @@ export type FieldValue = string | number
 export interface FieldAvailableValue {
   value: FieldValue
   label: string
+  count?: number
 }
 
 export abstract class AbstractSearchField {
@@ -80,6 +82,7 @@ export class SimpleSearchField implements AbstractSearchField {
         const bucketPromises = buckets.map(async (bucket) => ({
           label: `${await this.getBucketLabel(bucket)} (${bucket.count})`,
           value: bucket.term.toString(),
+          count: bucket.count,
         }))
         return Promise.all(bucketPromises)
       })
@@ -480,3 +483,99 @@ export class AvailableServicesField extends SimpleSearchField {
     return of(values)
   }
 }
+
+/**
+ * This class is meant to be used with the legacy filter on `resourceType` (now deprecated, the use of `recordKind` field is recommended).
+ * Since creating filters on the same ES field is not possible, in order to make the resource type filter still working,
+ * we create an ES on the fly: `resourceTypeLegacy` that references the `resourceType` under the hood.
+ * @deprecated Use `recordKind` field instead.
+ */
+export class ResourceTypeLegacyField extends TranslatedSearchField {
+  constructor(injector: Injector) {
+    super('resourceTypeLegacy', injector, 'asc')
+
+    // Ask ES to create a field on the fly: 'resourceTypeLegacy' that is in fact, 'resourceType'
+    this.esService.registerRuntimeField(
+      'resourceTypeLegacy',
+      `for (resourceType in doc.resourceType) { emit(resourceType) }`
+    )
+  }
+}
+
+export class RecordKindField extends SimpleSearchField {
+  TYPE_MAPPING = {
+    dataset: ['dataset', 'series', 'featureCatalog'],
+    service: ['service'],
+    reuse: Object.entries(PossibleResourceTypes)
+      .filter(([_, v]) => v === 'reuse')
+      .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+  }
+
+  constructor(injector: Injector) {
+    super('resourceType', injector, 'asc')
+  }
+
+  getAvailableValues(): Observable<FieldAvailableValue[]> {
+    return this.repository.aggregate(this.getAggregations()).pipe(
+      map(
+        (response) =>
+          (response[this.esFieldName] as AggregationBuckets).buckets || []
+      ),
+      map((buckets: TermBucket[]) => {
+        const counts = buckets.reduce(
+          (acc, { term, count }) => {
+            const value = term.toString()
+            const key = this.TYPE_MAPPING.reuse.includes(value)
+              ? 'reuse'
+              : this.TYPE_MAPPING.dataset.includes(value)
+                ? 'dataset'
+                : value
+
+            acc[key] = (acc[key] || 0) + count
+            return acc
+          },
+          {} as Record<string, number>
+        )
+
+        return Object.keys(this.TYPE_MAPPING).map((type) => ({
+          label: type,
+          value: type,
+          count: counts[type] ?? 0,
+        }))
+      })
+    )
+  }
+
+  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
+    const filters = {
+      [this.esFieldName]: values.reduce((acc, value) => {
+        if (value === '') return { ...acc, [value]: true }
+
+        const keysToAdd = this.TYPE_MAPPING[value] || [value]
+        keysToAdd.forEach((key: string) => (acc[key] = true))
+
+        return acc
+      }, {}),
+    }
+
+    return of(filters)
+  }
+
+  getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
+    const filter = filters[this.esFieldName]
+    if (!filter) return of([])
+
+    const activeValues = Object.keys(filter).filter((v) => filter[v])
+    const activeTypes = Object.keys(this.TYPE_MAPPING).filter((type) =>
+      this.TYPE_MAPPING[type].every((t: string) => activeValues.includes(t))
+    )
+
+    // Allow unknown values eg. 'type=somethingnotexist' (for UI to select none)
+    const allTypes = [].concat(...Object.values(this.TYPE_MAPPING))
+    const unknownValues = activeValues.filter(
+      (value) => !allTypes.includes(value)
+    )
+
+    return of([...activeTypes, ...unknownValues])
+  }
+}

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

@@ -5,6 +5,6 @@
   [selected]="currentLang"
   ariaName="languages"
   [showTitle]="false"
-  extraBtnClass="bg-transparent flex justify-items-center !pl-2 !py-1"
+  extraBtnClass="bg-transparent flex justify-items-center !pl-2 !py-1 rounded-lg"
 >
 </gn-ui-dropdown-selector>

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

@@ -7,6 +7,7 @@ export * from './lib/downloads-list/downloads-list.component'
 export * from './lib/error/error.component'
 export * from './lib/image-input/image-input.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
+export * from './lib/kind-badge/kind-badge.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
 export * from './lib/markdown-parser/markdown-parser.component'
@@ -24,3 +25,4 @@ 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'
+export * from './lib/service-capabilities/service-capabilities.component'

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

@@ -1,12 +1,12 @@
 <div
-  class="group flex justify-between rounded filter overflow-hidden"
+  class="group flex justify-between rounded filter overflow-hidden card-shadow"
   [ngClass]="cardClass"
 >
   <ng-container *ngIf="size !== 'S'">
-    <div>
+    <div class="flex-1 min-w-0">
       <ng-container *ngTemplateOutlet="content"></ng-container>
     </div>
-    <div class="flex items-center">
+    <div class="flex items-center min-w-[32px]">
       <ng-container *ngTemplateOutlet="buttons"></ng-container>
     </div>
   </ng-container>
@@ -51,7 +51,7 @@
 </ng-template>
 
 <ng-template #content>
-  <div>
+  <div class="flex-1 min-w-0">
     <div class="gn-ui-card-title">
       {{ link.description || link.name }}
     </div>

package/src/libs/ui/elements/src/lib/download-item/download-item.component.html

@@ -1,20 +1,20 @@
 <a
   href="{{ link.url }}"
   target="_blank"
-  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden"
+  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden w-full"
   rel="noopener"
   [ngClass]="cardClass"
 >
-  <div class="flex flex-col justify-between">
+  <div class="flex flex-col flex-1 justify-between min-w-0">
     <div class="gn-ui-card-title" [title]="link.description || link.name">
       {{ link.description || link.name }}
     </div>
     <div class="gn-ui-card-detail">
       {{ link.name }}
     </div>
-    <div class="flex flex-row gap-2 items-center pt-1">
+    <div class="flex flex-row gap-2 items-center pt-1 min-w-0">
       <span
-        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
+        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100 whitespace-nowrap"
         [style.background-color]="color"
         data-cy="download-format"
         >{{ format || ('downloads.format.unknown' | translate) }}</span
@@ -24,7 +24,10 @@
       >
     </div>
   </div>
-  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+  <div
+    class="flex min-w-[32px] flex-shrink-0"
+    [ngClass]="size === 'S' ? 'items-end' : 'items-center'"
+  >
     <div class="gn-ui-card-icon">
       <ng-icon
         class="inline-block card-icon align-middle"

package/src/libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -27,7 +27,7 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   ],
 })
 export class DownloadItemComponent {
-  private _size: 'L' | 'M' | 'S' | 'XS'
+  private _size: CardSize
   @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
@@ -43,7 +43,7 @@ export class DownloadItemComponent {
     this._size = value
     this.cardClass = this.sizeClassMap[value]
   }
-  get size(): 'L' | 'M' | 'S' | 'XS' {
+  get size(): CardSize {
     return this._size
   }
   cardClass = ''

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -2,12 +2,23 @@
   class="flex flex-wrap justify-between items-center pb-4"
   *ngIf="links && links.length > 0"
 >
-  <div
-    class="font-title text-xl text-title font-medium mr-4 text-center sm:text-left"
-    translate
-  >
-    record.metadata.download
+  <div class="flex flex-row items-center gap-x-4">
+    <div>
+      <h3
+        class="inline-block font-title text-xl text-title font-medium mr-4"
+        translate
+      >
+        record.metadata.download
+      </h3>
+      <span class="px-3">({{ linksCount }})</span>
+    </div>
+    <gn-ui-previous-next-buttons
+      class="md:block hidden"
+      *ngIf="_list?.pagesCount > 1"
+      [listComponent]="_list"
+    ></gn-ui-previous-next-buttons>
   </div>
+
   <div
     class="flex flex-wrap justify-start sm:justify-end"
     data-cy="download-format-filters"
@@ -26,9 +37,29 @@
     </gn-ui-button>
   </div>
 </div>
-<div class="mb-2 sm:mb-3" *ngFor="let link of filteredLinks">
+
+<ng-container>
+  <gn-ui-block-list
+    class="md:block hidden"
+    #blockList
+    (listChanges)="updateList($event)"
+    containerClass="gap-4 pt-5 pb-7"
+  >
+    <gn-ui-download-item
+      #block
+      *ngFor="let link of filteredLinks"
+      [link]="link"
+      [color]="getLinkColor(link)"
+      [format]="getLinkFormat(link)"
+      [isFromApi]="isFromApi(link)"
+      [size]="blockList.subComponentSize"
+    ></gn-ui-download-item>
+  </gn-ui-block-list>
+</ng-container>
+
+<div class="mb-5 md:hidden block" *ngFor="let link of filteredLinks">
   <gn-ui-download-item
-    size="L"
+    size="M"
     [link]="link"
     [color]="getLinkColor(link)"
     [format]="getLinkFormat(link)"

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  ViewChild,
+} from '@angular/core'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
@@ -6,6 +13,11 @@ import { DatasetDownloadDistribution } from '../../../../../../libs/common/domai
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { DownloadItemComponent } from '../download-item/download-item.component'
+import {
+  BlockListComponent,
+  Paginable,
+  PreviousNextButtonsComponent,
+} from '../../../../../../libs/ui/layout/src'
 
 marker('datahub.search.filter.all')
 marker('datahub.search.filter.others')
@@ -22,17 +34,32 @@ type FilterFormat = (typeof FILTER_FORMATS)[number]
   imports: [
     CommonModule,
     ButtonComponent,
+    BlockListComponent,
     DownloadItemComponent,
     TranslateModule,
+    PreviousNextButtonsComponent,
   ],
 })
 export class DownloadsListComponent {
-  constructor(private translateService: TranslateService) {}
+  constructor(
+    private translateService: TranslateService,
+    private changeDetector: ChangeDetectorRef
+  ) {}
 
+  _list: BlockListComponent
   @Input() links: DatasetDownloadDistribution[]
 
+  get linksCount(): number {
+    return this.filteredLinks?.length || 0
+  }
+
   activeFilterFormats: FilterFormat[] = ['all']
 
+  updateList($event: BlockListComponent) {
+    this._list = $event
+    this.changeDetector.detectChanges()
+  }
+
   private removeDuplicateFormats(
     links: DatasetDownloadDistribution[]
   ): DatasetDownloadDistribution[] {

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

@@ -5,7 +5,7 @@
   <div
     *ngIf="imageUrl"
     data-cy="record-thumbnail"
-    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-full w-full"
+    class="shrink-0 rounded-lg overflow-hidden group-hover:shadow-xl group-hover:border-0 h-full w-full"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"

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

@@ -37,7 +37,7 @@ 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.data')
 marker('record.kind.reuse')
 marker('record.kind.service')
 
@@ -178,7 +178,7 @@ export class InternalLinkCardComponent implements OnInit {
 
     switch (this.record.kind.toLowerCase()) {
       case 'dataset':
-        return { text: 'record.kind.dataset', icon: 'iconoirDatabase' }
+        return { text: 'record.kind.data', icon: 'iconoirDatabase' }
       case 'reuse':
         return { text: 'record.kind.reuse', icon: 'iconoirMap' }
       case 'service':

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

@@ -0,0 +1,6 @@
+:host gn-ui-badge ng-icon {
+  font-size: 1.2rem;
+  width: 1.2rem;
+  height: 1.2rem;
+  transform: translateY(-2px);
+}

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

@@ -0,0 +1,9 @@
+<ng-icon [name]="iconKind" class="mr-1"></ng-icon>
+
+<ng-container *ngIf="contentTemplate; else defaultContent">
+  <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+</ng-container>
+
+<ng-template #defaultContent>
+  {{ kind | translate }}
+</ng-template>

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

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  TemplateRef,
+} from '@angular/core'
+import { provideIcons } from '@ng-icons/core'
+import {
+  iconoirAppleWallet,
+  iconoirAppleShortcuts,
+  iconoirCode,
+  iconoirCreditCard,
+} from '@ng-icons/iconoir'
+import { NgIconsModule } from '@ng-icons/core'
+import { BadgeComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+enum KindConfig {
+  all = 'iconoirAppleWallet', // (this one is for filter)
+  dataset = 'iconoirAppleShortcuts',
+  service = 'iconoirCode',
+  reuse = 'iconoirCreditCard',
+}
+
+@Component({
+  selector: 'gn-ui-kind-badge',
+  templateUrl: './kind-badge.component.html',
+  styleUrls: ['./kind-badge.component.css'],
+  viewProviders: [
+    provideIcons({
+      iconoirAppleWallet,
+      iconoirAppleShortcuts,
+      iconoirCode,
+      iconoirCreditCard,
+    }),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgIconsModule, CommonModule, BadgeComponent, TranslateModule],
+})
+export class KindBadgeComponent {
+  @Input() contentTemplate: TemplateRef<unknown>
+  @Input() kind: string
+
+  hasProjectedContent = false
+
+  get iconKind() {
+    return KindConfig[this.kind] || KindConfig.dataset
+  }
+}

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

@@ -5,7 +5,7 @@
   [ngClass]="cardClass"
   [title]="title"
 >
-  <div class="flex flex-col justify-between">
+  <div class="flex flex-col justify-between flex-1 min-w-0">
     <div class="gn-ui-card-title">
       {{ link.description || link.name }}
     </div>
@@ -26,7 +26,10 @@
       >
     </div>
   </div>
-  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+  <div
+    class="flex min-w-[32px]"
+    [ngClass]="size === 'S' ? 'items-end' : 'items-center'"
+  >
     <div class="gn-ui-card-icon">
       <ng-icon
         class="inline-block card-icon align-middle"

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

@@ -1,9 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import {
-  DatasetDownloadDistribution,
-  DatasetOnlineResource,
-  DatasetServiceDistribution,
-} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { CommonModule } from '@angular/common'
 import {
   NgIconComponent,
@@ -30,7 +26,7 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   ],
 })
 export class LinkCardComponent {
-  private _size: 'L' | 'M' | 'S' | 'XS'
+  private _size: CardSize
   @Input() link: DatasetOnlineResource
   private readonly sizeClassMap: Record<CardSize, string> = {
     L: 'gn-ui-card-l py-2 px-5',
@@ -43,7 +39,7 @@ export class LinkCardComponent {
     this._size = value
     this.cardClass = this.sizeClassMap[value]
   }
-  get size(): 'L' | 'M' | 'S' | 'XS' {
+  get size(): CardSize {
     return this._size
   }
   cardClass = ''

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

@@ -1,8 +1,6 @@
-<div>
-  <p class="text-gray-900 text-xs mb-3 uppercase" translate>
-    record.metadata.catalog
-  </p>
-  <p class="text-primary font-title text-21 mb-1">
+<div class="text-black">
+  <p class="text-base mb-3" translate>record.metadata.catalog</p>
+  <p class="font-title text-21 mb-1">
     {{ sourceLabel }}
   </p>
 </div>