geonetwork-ui 2.7.0-dev.dbe423d28 → 2.7.0-dev.ed54e0aff

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

@@ -4,7 +4,10 @@ import {
   EditorField,
   EditorSection,
 } from './models/editor-config.model'
-import { Keyword } from '../../../../../libs/common/domain/src/lib/model/record'
+import {
+  INSPIRE_theme,
+  Keyword,
+} from '../../../../../libs/common/domain/src/lib/model/record'
 
 /**
  * This file contains the configuration of the fields that will be displayed in the editor.
@@ -63,8 +66,11 @@ export const RECORD_KEYWORDS_FIELD: EditorField = {
   model: 'keywords',
   formFieldConfig: {},
 }
-// keeping track of the label to not lose existing translation
-marker('editor.record.form.field.keywords')
+
+export const RECORD_TOPICS_FIELD: EditorField = {
+  model: 'topics',
+  formFieldConfig: {},
+}
 
 export const RECORD_RESOURCE_CREATED_FIELD: EditorField = {
   model: 'resourceCreated',
@@ -237,6 +243,13 @@ export const CLASSIFICATION_SECTION: EditorSection = {
   fields: [RECORD_KEYWORDS_FIELD],
 }
 
+export const INSPIRE_SECTION: EditorSection = {
+  labelKey: marker('editor.record.form.section.inspire.label'),
+  descriptionKey: marker('editor.record.form.section.inspire.description'),
+  hidden: false,
+  fields: [RECORD_TOPICS_FIELD],
+}
+
 export const USE_AND_ACCESS_CONDITIONS_SECTION: EditorSection = {
   labelKey: marker('editor.record.form.section.useAndAccessConditions.label'),
   hidden: false,
@@ -276,6 +289,7 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
       sections: [
         TITLE_SECTION,
         CLASSIFICATION_SECTION,
+        INSPIRE_SECTION,
         ABOUT_SECTION,
         GEOGRAPHICAL_COVERAGE_SECTION,
       ],
@@ -343,3 +357,71 @@ export const SPATIAL_SCOPES: Keyword[] = [
     type: 'theme',
   },
 ]
+
+/************************************************************
+ ***************           INSPIRE THEMES            **************
+ ************************************************************
+ */
+
+export const INSPIRE_THEMES: INSPIRE_theme[] = [
+  { value: 'biota', label: 'editor.record.form.inspire.biota' },
+  { value: 'boundaries', label: 'editor.record.form.inspire.boundaries' },
+  {
+    value: 'climatologyMeteorologyAtmosphere',
+    label: 'editor.record.form.inspire.climatology',
+  },
+  { value: 'economy', label: 'editor.record.form.inspire.economy' },
+  { value: 'elevation', label: 'editor.record.form.inspire.elevation' },
+  { value: 'environment', label: 'editor.record.form.inspire.environnement' },
+  { value: 'farming', label: 'editor.record.form.inspire.farming' },
+  {
+    value: 'geoscientific information',
+    label: 'editor.record.form.inspire.geoscientific',
+  },
+  { value: 'health', label: 'editor.record.form.inspire.health' },
+  {
+    value: 'imageryBaseMapsEarthCover',
+    label: 'editor.record.form.inspire.imagery',
+  },
+  { value: 'inlandWaters', label: 'editor.record.form.inspire.waters' },
+  {
+    value: 'intelligenceMilitary',
+    label: 'editor.record.form.inspire.intelligence',
+  },
+  { value: 'Location', label: 'editor.record.form.inspire.location' },
+  { value: 'Oceans', label: 'editor.record.form.inspire.oceans' },
+  {
+    value: 'planningCadastre',
+    label: 'editor.record.form.inspire.planning',
+  },
+  { value: 'Society', label: 'editor.record.form.inspire.society' },
+  { value: 'Structure', label: 'editor.record.form.inspire.structure' },
+  {
+    value: 'Transportation',
+    label: 'editor.record.form.inspire.transportation',
+  },
+  {
+    value: 'utilitiesCommunication',
+    label: 'editor.record.form.inspire.utilities',
+  },
+]
+
+marker('editor.record.form.inspire.biota')
+marker('editor.record.form.inspire.boundaries')
+marker('editor.record.form.inspire.climatology')
+marker('editor.record.form.inspire.economy')
+marker('editor.record.form.inspire.elevation')
+marker('editor.record.form.inspire.environnement')
+marker('editor.record.form.inspire.farming')
+marker('editor.record.form.inspire.geoscientific')
+marker('editor.record.form.inspire.health')
+marker('editor.record.form.inspire.imagery')
+marker('editor.record.form.inspire.intelligence')
+marker('editor.record.form.inspire.location')
+marker('editor.record.form.inspire.oceans')
+marker('editor.record.form.inspire.planning')
+marker('editor.record.form.inspire.society')
+marker('editor.record.form.inspire.structure')
+marker('editor.record.form.inspire.transportation')
+marker('editor.record.form.inspire.utilities')
+marker('editor.record.form.inspire.waters')

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

@@ -1,25 +1,25 @@
 import { Injectable } from '@angular/core'
-import { extend, Extent } from 'ol/extent'
-import GeoJSON from 'ol/format/GeoJSON'
+import { extend } from 'ol/extent'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
-
-const GEOJSON = new GeoJSON()
+import { BoundingBox, getGeometryBoundingBox } from '../../../../../../libs/util/shared/src'
 
 @Injectable({
   providedIn: 'root',
 })
 export class MapUtilsService {
-  getRecordExtent(record: Partial<CatalogRecord>): Extent {
+  getRecordExtent(record: Partial<CatalogRecord>): BoundingBox {
     if (!('spatialExtents' in record) || record.spatialExtents.length === 0) {
       return null
     }
     // extend all the spatial extents into an including bbox
     return record.spatialExtents.reduce(
       (prev, curr) => {
-        if ('bbox' in curr) return extend(prev, curr.bbox)
+        if ('bbox' in curr) return extend(prev, curr.bbox) as BoundingBox
         else if ('geometry' in curr) {
-          const geom = GEOJSON.readGeometry(curr.geometry)
-          return extend(prev, geom.getExtent())
+          return extend(
+            prev,
+            getGeometryBoundingBox(curr.geometry)
+          ) as BoundingBox
         }
         return prev
       },

package/src/libs/feature/record/src/lib/data-view/data-view.component.html

@@ -9,6 +9,7 @@
       class="h-[44px] w-full"
       extraBtnClass="font-sans font-bold"
       [choices]="choices"
+      [selected]="_selectedChoice"
       (selectValue)="selectLink($event)"
     ></gn-ui-dropdown-selector>
   </div>
@@ -35,6 +36,7 @@
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
         [featureCatalog]="mdViewFacade.featureCatalog$ | async"
+        [userChartConfig]="_chartConfig"
       ></gn-ui-chart-view>
     </div>
   </ng-template>

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

@@ -5,15 +5,16 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { getLinkLabel, getLinkPriority } from '../../../../../../libs/util/shared/src'
+import {
+  getLinkId,
+  getLinkLabel,
+  getLinkPriority,
+} from '../../../../../../libs/util/shared/src'
 import { BehaviorSubject, combineLatest } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
 import { DatavizChartConfigModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import {
-  DatasetOnlineResource,
-  DatasetServiceDistribution,
-} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
 import {
   ChartViewComponent,
@@ -45,13 +46,28 @@ export class DataViewComponent {
   @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  linkMap: Map<string, DatasetOnlineResource> = new Map()
   _selectedView = ''
+  _chartConfig = null
+  _selectedChoice = null
   @Input() set selectedView(value: string) {
     this._selectedView = value
-    if (value !== 'map') {
+    if (this.mode === value) {
       this.linkSelected.emit(this.selectedLink$.value)
     }
   }
+  @Input() set datavizConfig(value: any) {
+    this._selectedView = value.view
+    if (this.mode === value.view) {
+      if (!value.source) {
+        this.linkSelected.emit(this.selectedLink$.value)
+      } else {
+        this._chartConfig = value.chartConfig
+        this._selectedChoice = getLinkId(value.source)
+        this.selectedLink$.next(value.source)
+      }
+    }
+  }
   @Output() chartConfig$ = new BehaviorSubject<DatavizChartConfigModel>(null)
   @Output() linkSelected = new EventEmitter<DatasetOnlineResource>()
   cacheActive$ = this.mdViewFacade.isHighUpdateFrequency$.pipe(
@@ -69,15 +85,19 @@ export class DataViewComponent {
     })
   )
   dropdownChoices$ = this.compatibleDataLinks$.pipe(
-    tap((links) => {
-      if (links.indexOf(this.selectedLink$.value) === -1) {
-        this.selectLink(JSON.stringify(links[0]))
+    tap((links: DatasetOnlineResource[]) => {
+      this.linkMap.clear()
+      links.forEach((link: DatasetOnlineResource) =>
+        this.linkMap.set(getLinkId(link), link)
+      )
+      if (!links.some((l) => l.url === this.selectedLink$.value?.url)) {
+        this.selectLink(getLinkId(links[0]))
       }
     }),
     map((links) =>
-      links.map((link) => ({
+      links.map((link: DatasetOnlineResource) => ({
         label: getLinkLabel(link),
-        value: JSON.stringify(link),
+        value: getLinkId(link),
       }))
     )
   )
@@ -93,12 +113,11 @@ export class DataViewComponent {
     this.mdViewFacade.setChartConfig(event)
   }
 
-  selectLink(linkAsString: string) {
-    const link: DatasetOnlineResource = JSON.parse(linkAsString)
-    if (this._selectedView && this._selectedView !== 'map') {
+  selectLink(linkId: string) {
+    const link = this.linkMap.get(linkId)
+    if (this._selectedView && this._selectedView === this.mode) {
       this.linkSelected.emit(link)
     }
-    link.url = new URL(link.url)
     this.selectedLink$.next(link)
   }
 }

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

@@ -8,6 +8,7 @@
       extraBtnClass="font-sans font-bold"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"
+      [selected]="_selectedChoice"
       (selectValue)="selectLinkToDisplay($event)"
     ></gn-ui-dropdown-selector>
 
@@ -17,6 +18,7 @@
         extraBtnClass="font-sans font-bold"
         [title]="'map.select.style' | translate"
         [choices]="styleDropdownChoices$ | async"
+        [selected]="_styleFromConfig"
         (selectValue)="selectStyleToDisplay($event)"
       ></gn-ui-dropdown-selector>
     </ng-container>

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

@@ -9,7 +9,7 @@ import {
   ViewChild,
 } from '@angular/core'
 import { MapUtilsService } from '../../../../../../libs/feature/map/src'
-import { getLinkLabel } from '../../../../../../libs/util/shared/src'
+import { getLinkId, getLinkLabel } from '../../../../../../libs/util/shared/src'
 import {
   BehaviorSubject,
   combineLatest,
@@ -100,15 +100,28 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  linkFromConfig$ = new BehaviorSubject(null)
+  _selectedChoice = null
+  _styleFromConfig = null
+
+  linkMap: Map<string, DatasetOnlineResource> = new Map()
   @Input() set selectedView(value: string) {
-    if (value === 'map') {
-      this.selectedLink$.pipe(take(1)).subscribe((link) => {
-        this.linkSelected.emit(link)
-      })
+    this.selectedView$.next(value)
+  }
+  @Input() set datavizConfig(value: any) {
+    if (value.view === 'map') {
+      this.selectedView$.next(value.view)
+      if (value.styleTMSIndex) {
+        this._styleFromConfig = value.styleTMSIndex
+      }
+      if (value.source) {
+        this.linkFromConfig$.next(value.source)
+      }
     }
   }
   @Input() displaySource = true
   @Output() linkSelected = new EventEmitter<DatasetOnlineResource>()
+  @Output() styleSelected = new EventEmitter<number>()
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   excludeWfs$ = new BehaviorSubject(false)
@@ -119,12 +132,13 @@ export class MapViewComponent implements AfterViewInit {
   loading = false
   error = null
 
-  selectLinkToDisplay(i: number) {
-    this.selectedLinkIndex$.next(i)
+  selectLinkToDisplay(id: string) {
+    this.selectedLinkId$.next(id)
   }
 
   selectStyleToDisplay(i: number) {
-    this.selectedStyleIndex$.next(i)
+    this.selectedStyleId$.next(i)
+    this.styleSelected.emit(i)
   }
 
   toggleLegend() {
@@ -146,29 +160,54 @@ export class MapViewComponent implements AfterViewInit {
   )
 
   dropdownChoices$ = this.compatibleMapLinks$.pipe(
-    map((links) =>
-      links.length
-        ? links.map((link, index) => ({
+    map((links) => {
+      this.linkMap.clear()
+      links.forEach((link: DatasetOnlineResource) =>
+        this.linkMap.set(getLinkId(link), link)
+      )
+      return links.length
+        ? links.map((link) => ({
             label: getLinkLabel(link),
-            value: index,
+            value: getLinkId(link),
           }))
-        : [{ label: 'map.dropdown.placeholder', value: 0 }]
-    )
+        : [{ label: 'map.dropdown.placeholder', value: '' }]
+    })
   )
 
-  selectedLinkIndex$ = new BehaviorSubject(0)
-  private selectedStyleIndex$ = new BehaviorSubject(0)
+  selectedView$ = new BehaviorSubject(null)
+  selectedLinkId$ = new BehaviorSubject(null)
+  selectedStyleId$ = new BehaviorSubject(null)
 
   selectedSourceLink$ = combineLatest([
     this.compatibleMapLinks$,
-    this.selectedLinkIndex$.pipe(distinctUntilChanged()),
+    this.linkFromConfig$,
+    this.selectedLinkId$.pipe(distinctUntilChanged()),
+    this.selectedView$,
   ]).pipe(
     tap(() => {
       this.error = null
     }),
-    map(([links, index]) => {
-      this.linkSelected.emit(links[index])
-      return links[index]
+    map(([compatibleLinks, configLink, id, view]) => {
+      if (view === 'map') {
+        if (
+          configLink &&
+          !id &&
+          compatibleLinks.some(
+            (link) => getLinkId(link) === getLinkId(configLink)
+          )
+        ) {
+          this._selectedChoice = getLinkId(configLink)
+          this.linkSelected.emit(configLink)
+          return configLink
+        } else if (id) {
+          this._selectedChoice = id
+          this.linkSelected.emit(this.linkMap.get(id))
+          return this.linkMap.get(id)
+        } else {
+          this.linkSelected.emit(compatibleLinks[0])
+          return compatibleLinks[0]
+        }
+      }
     })
   )
 
@@ -205,7 +244,13 @@ export class MapViewComponent implements AfterViewInit {
       }
       return of([])
     }),
-    tap(() => this.selectedStyleIndex$.next(0)),
+    tap((styles) => {
+      if (this._styleFromConfig && this._styleFromConfig <= styles.length) {
+        this.selectedStyleId$.next(this._styleFromConfig)
+      } else {
+        this.selectedStyleId$.next(0)
+      }
+    }),
     shareReplay(1)
   )
 
@@ -228,7 +273,7 @@ export class MapViewComponent implements AfterViewInit {
   selectedLink$ = combineLatest([
     this.selectedSourceLink$,
     this.styleLinks$,
-    this.selectedStyleIndex$.pipe(distinctUntilChanged()),
+    this.selectedStyleId$.pipe(distinctUntilChanged()),
   ]).pipe(
     map(([src, styles, styleIdx]) => (styles.length ? styles[styleIdx] : src)),
     shareReplay(1)
@@ -344,7 +389,9 @@ export class MapViewComponent implements AfterViewInit {
     ) {
       // FIXME: here we're assuming that the TMS serves vector tiles only; should be checked with ogc-client first
       return of({
-        url: link.url.toString().replace(/\/?$/, '/{z}/{x}/{y}.pbf'),
+        url: link.url
+          .toString()
+          .replace(/\/?$/, `/${link.name}/{z}/{x}/{y}.pbf`),
         type: 'xyz',
         tileFormat: 'application/vnd.mapbox-vector-tile',
         name: link.name,

package/src/libs/feature/router/src/lib/default/state/query-params.utils.ts

@@ -14,7 +14,10 @@ export function flattenQueryParams(
       Array.isArray(flattened[key]) &&
       (flattened[key] as string[]).length > 0
     ) {
-      flattened[key] = [(flattened[key] as string[]).join(',')]
+      const encoded = (flattened[key] as string[]).map((value) =>
+        typeof value === 'string' ? value.replace(/,/g, '%2C') : value
+      )
+      flattened[key] = [encoded.join(',')]
     } else if (isDateRange(flattened[key] as DateRange)) {
       const start = (flattened[key] as DateRange).start
       const end = (flattened[key] as DateRange).end
@@ -48,7 +51,7 @@ export function expandQueryParams(
           ...(end && { end: new Date(`${end}T00:00:00`) }),
         }
       } else {
-        expanded[key] = value.split(',')
+        expanded[key] = value.split(',').map((v) => v.replace(/%2C/g, ','))
       }
     }
   }

package/src/libs/feature/router/src/lib/default/state/router.facade.ts

@@ -63,7 +63,8 @@ export class RouterFacade {
   }
 
   goToOrganization(organizationName: string) {
-    const path = `${this.routerService.getOrganizationPageRoute()}/${organizationName}`
+    const safeOrgName = organizationName.replace(/\//g, '')
+    const path = `${this.routerService.getOrganizationPageRoute()}/${safeOrgName}`
     this.go({
       path,
       queryParamsHandling: '',

package/src/libs/feature/search/src/lib/state/reducer.ts

@@ -8,6 +8,7 @@ import {
   SortByField,
 } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { DEFAULT_PAGE_SIZE, FIELDS_SUMMARY } from '../constants'
+import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export const SEARCH_FEATURE_KEY = 'searchState'
@@ -55,7 +56,9 @@ export const initSearch = (): SearchStateSearch => {
     },
     params: {
       filters: {},
-      pageSize: DEFAULT_PAGE_SIZE,
+      pageSize: getOptionalSearchConfig()?.LIMIT
+        ? getOptionalSearchConfig().LIMIT
+        : DEFAULT_PAGE_SIZE,
       currentPage: 0,
       favoritesOnly: false,
       useSpatialFilter: true,

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -14,7 +14,11 @@ import {
 } from '@angular/core'
 import { MatSort, MatSortModule } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
-import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
 import { DataTableDataSource } from './data-table.data.source'
 import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import {
@@ -53,6 +57,7 @@ export interface TableItemModel {
     PopupAlertComponent,
     LetDirective,
     TranslatePipe,
+    TranslateDirective,
   ],
   providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }],
   selector: 'gn-ui-data-table',

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

@@ -67,7 +67,10 @@
         [ngClass]="{
           '!bg-primary': currentlyActive,
         }"
-        >{{ link.accessServiceProtocol }}</span
+        translate
+        >record.metadata.api.accessServiceProtocol.{{
+          link.accessServiceProtocol
+        }}</span
       >
       <span
         *ngIf="link.accessServiceProtocol === 'GPFDL'"

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

@@ -13,8 +13,7 @@
       <span class="px-3">({{ linksCount }})</span>
     </div>
     <gn-ui-previous-next-buttons
-      class="md:block hidden"
-      *ngIf="_list?.pagesCount > 1"
+      *ngIf="(isMobile$ | async) === false && _list?.pagesCount > 1"
       [listComponent]="_list"
     ></gn-ui-previous-next-buttons>
   </div>
@@ -40,7 +39,7 @@
 
 <ng-container>
   <gn-ui-block-list
-    class="md:block hidden"
+    *ngIf="(isMobile$ | async) === false"
     #blockList
     (listChanges)="updateList($event)"
     containerClass="gap-4 pt-5 pb-7"
@@ -57,12 +56,14 @@
   </gn-ui-block-list>
 </ng-container>
 
-<div class="mb-5 md:hidden block" *ngFor="let link of filteredLinks">
-  <gn-ui-download-item
-    size="M"
-    [link]="link"
-    [color]="getLinkColor(link)"
-    [format]="getLinkFormat(link)"
-    [isFromApi]="isFromApi(link)"
-  ></gn-ui-download-item>
+<div class="mb-5" *ngFor="let link of filteredLinks">
+  <ng-container *ngIf="(isMobile$ | async) === true">
+    <gn-ui-download-item
+      size="M"
+      [link]="link"
+      [color]="getLinkColor(link)"
+      [format]="getLinkFormat(link)"
+      [isFromApi]="isFromApi(link)"
+    ></gn-ui-download-item>
+  </ng-container>
 </div>

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

@@ -6,7 +6,11 @@ import {
 } from '@angular/core'
 import { TranslateDirective, TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
+import {
+  getBadgeColor,
+  getFileFormat,
+  getIsMobile,
+} from '../../../../../../libs/util/shared/src'
 import { DatasetDownloadDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
@@ -50,6 +54,8 @@ export class DownloadsListComponent {
     return this.filteredLinks?.length || 0
   }
 
+  isMobile$ = getIsMobile()
+
   activeFilterFormats: FilterFormat[] = ['all']
 
   updateList($event: BlockListComponent) {

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

@@ -7,7 +7,10 @@
     class="shrink-0 text-[0.75em]"
     name="matLocationSearchingOutline"
   ></ng-icon>
-  <span class="ml-1 hidden sm:inline-block shrink-0" *ngIf="showLabel" translate
+  <span
+    class="ml-1 inline-block shrink-0"
+    *ngIf="(isMobile$ | async) === false && showLabel"
+    translate
     >record.metadata.isGeographical</span
   >
 </div>

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

@@ -4,7 +4,11 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
 import { CommonModule } from '@angular/common'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/shared/src'
+import {
+  getIsMobile,
+  LinkClassifierService,
+  LinkUsage,
+} from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-geo-data-badge',
@@ -24,6 +28,8 @@ export class GeoDataBadgeComponent {
   @Input() styling = 'default'
   @Input() record: CatalogRecord
 
+  isMobile$ = getIsMobile()
+
   isGeodata() {
     const links =
       'onlineResources' in this.record ? this.record.onlineResources : []

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

@@ -68,6 +68,7 @@
               [smaller]="true"
               [metadata]="record"
               [metadataQualityDisplay]="metadataQualityDisplay"
+              [popoverDisplay]="true"
             ></gn-ui-metadata-quality>
           </div>
           <div

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

@@ -21,7 +21,11 @@ import { KindBadgeComponent } from '../kind-badge/kind-badge.component'
 import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
 import { MetadataQualityComponent } from '../metadata-quality/metadata-quality.component'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
-import { removeWhitespace, stripHtml } from '../../../../../../libs/util/shared/src'
+import {
+  removeWhitespace,
+  stripHtml,
+  type ValidatorMapperKeys,
+} from '../../../../../../libs/util/shared/src'
 
 type CardSize = 'L' | 'M' | 'S' | 'XS'
 

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

@@ -10,6 +10,7 @@
     class="flex-grow"
   ></gn-ui-progress-bar>
   <gn-ui-popover
+    *ngIf="popoverDisplay"
     [content]="popoverItems"
     theme="light-border"
     [class]="smaller ? 'ml-2' : 'ml-2 mt-1'"