geonetwork-ui 2.1.0-initial → 2.1.0

package/src/libs/ui/catalog/src/lib/{organisations-sort/organisations-sort.component.ts → organisations-filter/organisations-filter.component.ts}

@@ -5,15 +5,15 @@ import {
   Output,
 } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { SortByField } from '../../../../../../libs/common/domain/src/lib/search'
+import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
+import { Subject, debounceTime } from 'rxjs'
 
 @Component({
-  selector: 'gn-ui-organisations-sort',
-  templateUrl: './organisations-sort.component.html',
-  styleUrls: ['./organisations-sort.component.css'],
+  selector: 'gn-ui-organisations-filter',
+  templateUrl: './organisations-filter.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OrganisationsSortComponent {
+export class OrganisationsFilterComponent {
   choices: { value: string; label: string }[] = [
     {
       value: 'asc,name',
@@ -33,8 +33,14 @@ export class OrganisationsSortComponent {
     },
   ]
   @Output() sortBy = new EventEmitter<SortByField>()
+  filterByValueChange = new Subject<string>()
+  @Output() filterBy = this.filterByValueChange.pipe(debounceTime(300))
 
   selectOrderToDisplay(selectValue: string) {
     this.sortBy.emit(selectValue.split(',') as SortByField)
   }
+
+  filterOrganisations(inputValue: string) {
+    this.filterByValueChange.next(inputValue)
+  }
 }

package/src/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.html

@@ -0,0 +1,5 @@
+<div class="w-full">
+  <span translate [translateParams]="{ hits: hits, total: total }"
+    >organisations.hits.found</span
+  >
+</div>

package/src/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-organisations-result',
+  templateUrl: './organisations-result.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrganisationsResultComponent {
+  @Input() hits: number
+  @Input() total: number
+}

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

@@ -5,16 +5,18 @@ import { OrganisationPreviewComponent } from './organisation-preview/organisatio
 import { TranslateModule } from '@ngx-translate/core'
 import { MatIconModule } from '@angular/material/icon'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
-import { OrganisationsSortComponent } from './organisations-sort/organisations-sort.component'
+import { OrganisationsFilterComponent } from './organisations-filter/organisations-filter.component'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { LanguageSwitcherComponent } from './language-switcher/language-switcher.component'
+import { OrganisationsResultComponent } from './organisations-result/organisations-result.component'
 
 @NgModule({
   declarations: [
     CatalogTitleComponent,
     OrganisationPreviewComponent,
-    OrganisationsSortComponent,
+    OrganisationsFilterComponent,
     LanguageSwitcherComponent,
+    OrganisationsResultComponent,
   ],
   imports: [
     CommonModule,
@@ -26,8 +28,9 @@ import { LanguageSwitcherComponent } from './language-switcher/language-switcher
   exports: [
     CatalogTitleComponent,
     OrganisationPreviewComponent,
-    OrganisationsSortComponent,
+    OrganisationsFilterComponent,
     LanguageSwitcherComponent,
+    OrganisationsResultComponent,
   ],
 })
 export class UiCatalogModule {}

package/src/libs/ui/dataviz/src/lib/chart/chart.component.ts

@@ -7,7 +7,7 @@ import {
   OnChanges,
   ViewChild,
 } from '@angular/core'
-import { InputChartType } from '../../../../../../libs/common/domain/src/lib/dataviz-configuration.model'
+import { InputChartType } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   ArcElement,
   BarController,

package/src/libs/ui/dataviz/src/lib/figure/figure.component.html

@@ -1,4 +1,5 @@
 <div
+  translate
   class="flex flex-row justify-start items-center overflow-hidden"
   [title]="hoverTitle"
 >
@@ -15,6 +16,8 @@
       <span class="figure font-medium mr-[0.3em]">{{ figure }}</span>
       <span class="unit text-[0.665em]">{{ unit }}</span>
     </div>
-    <div class="title truncate">{{ title }}</div>
+    <div translate class="title truncate" [translateParams]="{ count: figure }">
+      {{ title }}
+    </div>
   </div>
 </div>

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

@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FigureComponent } from './figure/figure.component'
 import { MatIconModule } from '@angular/material/icon'
+import { TranslateModule } from '@ngx-translate/core'
 
 @NgModule({
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, MatIconModule, TranslateModule.forChild()],
   declarations: [FigureComponent],
   exports: [FigureComponent],
 })

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

@@ -18,3 +18,4 @@ export * from './lib/pagination/pagination.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/search-results-error/search-results-error.component'
 export * from './lib/user-preview/user-preview.component'
+export * from './lib/record-api-form/record-api-form.component'

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

@@ -1,23 +1,51 @@
 <div
-  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded bg-neutral-100 filter overflow-hidden hover:bg-white hover:shadow-xl transition-shadow"
+  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden"
+  [ngClass]="{ 'cursor-pointer': displayApiFormButton }"
+  (click)="openRecordApiFormPanel()"
 >
   <div
-    class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5"
-    style="height: 4.5rem"
+    class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]"
   >
     {{ link.name || link.description }}
   </div>
   <div class="">
     <div class="flex flex-row justify-between">
       <span
-        class="bg-primary-opacity-25 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest group-hover:bg-primary transition-colors"
-        >{{ link.accessServiceProtocol.toUpperCase() }}</span
+        class="bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
+        [ngClass]="{
+          '!bg-primary': currentlyActive
+        }"
+        >{{ link.accessServiceProtocol }}</span
       >
       <gn-ui-copy-text-button
+        *ngIf="!displayApiFormButton"
         [text]="link.url.toString()"
         [tooltipText]="'tooltip.url.copy' | translate"
         [displayText]="false"
       ></gn-ui-copy-text-button>
+      <button
+        *ngIf="displayApiFormButton"
+        type="button"
+        [ngClass]="{
+          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+            displayText
+        }"
+        mat-raised-button
+        [matTooltip]="
+          !currentlyActive
+            ? ('record.metadata.api.form.openForm' | translate)
+            : ('record.metadata.api.form.closeForm' | translate)
+        "
+        matTooltipPosition="above"
+      >
+        <mat-icon
+          class="material-symbols-outlined pointer-events-none align-middle card-icon"
+          [ngClass]="{
+            'text-secondary opacity-100': currentlyActive
+          }"
+          >more_horiz</mat-icon
+        >
+      </button>
     </div>
   </div>
 </div>

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

@@ -1,5 +1,14 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core'
 
 @Component({
   selector: 'gn-ui-api-card',
@@ -7,6 +16,28 @@ import { DatasetServiceDistribution } from '../../../../../../libs/common/domain
   styleUrls: ['./api-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ApiCardComponent {
+export class ApiCardComponent implements OnInit, OnChanges {
   @Input() link: DatasetServiceDistribution
+  @Input() currentLink: DatasetServiceDistribution
+  displayApiFormButton: boolean
+  currentlyActive = false
+  @Output() openRecordApiForm: EventEmitter<DatasetServiceDistribution> =
+    new EventEmitter<DatasetServiceDistribution>()
+
+  ngOnInit() {
+    this.displayApiFormButton =
+      this.link.accessServiceProtocol === 'ogcFeatures' ? true : false
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.currentlyActive =
+      changes.currentLink.currentValue === this.link ? true : false
+  }
+
+  openRecordApiFormPanel() {
+    if (this.displayApiFormButton) {
+      this.currentlyActive = !this.currentlyActive
+      this.openRecordApiForm.emit(this.currentlyActive ? this.link : undefined)
+    }
+  }
 }

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

@@ -5,7 +5,7 @@ import {
   Output,
   EventEmitter,
 } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-download-item',

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('datahub.search.filter.all')
 marker('datahub.search.filter.others')

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

@@ -5,7 +5,7 @@
 >
   <div class="max-h-24 overflow-hidden text-ellipsis">
     <p
-      class="font-title font-medium text-21 text-black break-words pb-1 line-clamp-2"
+      class="font-title font-medium text-21 text-black break-words mb-1 line-clamp-2"
     >
       {{ link.name }}
     </p>

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

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-link-card',

package/src/libs/ui/elements/src/lib/max-lines/max-lines.component.html

@@ -0,0 +1,15 @@
+<div
+  #container
+  class="max-lines overflow-hidden transition-[max-height] duration-300"
+  [ngClass]="isExpanded ? 'ease-in' : 'ease-out'"
+  [style.maxHeight]="maxHeight"
+>
+  <ng-content></ng-content>
+</div>
+<div
+  *ngIf="showToggleButton"
+  (click)="toggleDisplay()"
+  class="text-secondary cursor-pointer pt-2.5"
+>
+  {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
+</div>

package/src/libs/ui/elements/src/lib/max-lines/max-lines.component.ts

@@ -0,0 +1,83 @@
+import {
+  Component,
+  Input,
+  ElementRef,
+  ChangeDetectionStrategy,
+  AfterViewInit,
+  ViewChild,
+  OnDestroy,
+  ChangeDetectorRef,
+} from '@angular/core'
+
+@Component({
+  selector: 'gn-ui-max-lines',
+  templateUrl: './max-lines.component.html',
+  styleUrls: ['./max-lines.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MaxLinesComponent implements AfterViewInit, OnDestroy {
+  @Input() maxLines = 6
+
+  isExpanded = false
+  maxHeight = ''
+  showToggleButton = false
+  observer: ResizeObserver
+
+  @ViewChild('container') container!: ElementRef
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.calculateMaxHeight()
+
+    this.observer = new ResizeObserver((mutations) => {
+      mutations.forEach(() => {
+        this.calculateMaxHeight()
+      })
+    })
+
+    this.observer.observe(this.container.nativeElement.children[0])
+  }
+
+  toggleDisplay() {
+    this.isExpanded = !this.isExpanded
+    this.calculateMaxHeight()
+  }
+
+  calculateMaxHeight() {
+    const containerElement = this.container.nativeElement
+    const contentElement = containerElement.children[0]
+    const contentHeight = contentElement.getBoundingClientRect().height
+
+    if (contentHeight) {
+      if (contentHeight > this.maxLines * this.getLineHeight(contentElement)) {
+        this.showToggleButton = true
+
+        this.maxHeight = this.isExpanded
+          ? `${contentHeight}px`
+          : `${this.maxLines * this.getLineHeight(contentElement)}px`
+      } else {
+        this.showToggleButton = false
+        this.maxHeight = `${contentHeight}px`
+      }
+      containerElement.setAttribute(
+        'style',
+        `max-height: ${this.maxHeight}; overflow: hidden`
+      )
+
+      this.cdr.detectChanges()
+    }
+  }
+
+  getLineHeight(element: HTMLElement): number {
+    const computedStyle = window.getComputedStyle(element)
+    const lineHeight = parseFloat(computedStyle.lineHeight)
+    const fontSize = parseFloat(computedStyle.fontSize || '14')
+    const result = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight // Use a default if line height is not specified
+    return result
+  }
+
+  ngOnDestroy(): void {
+    this.observer.unobserve(this.container.nativeElement.children[0])
+  }
+}

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

@@ -9,7 +9,7 @@ import {
   CatalogRecord,
   Individual,
   Organization,
-} from '../../../../../../libs/common/domain/src/lib/record'
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-metadata-contact',

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

@@ -9,30 +9,72 @@ export class GnUiLinkifyDirective implements OnInit {
 
   ngOnInit() {
     setTimeout(() => {
-      this.processLinks()
+      this.processLinks(this.el.nativeElement)
     }, 0)
   }
 
-  private processLinks() {
-    const container = this.el.nativeElement
-
+  private processLinks(container: HTMLElement | ChildNode) {
     const nodes = Array.from(container.childNodes)
+
     nodes.forEach((node) => {
       if (node instanceof Text) {
         const textNode = node as Text
-        const linkified = this.linkifyText(textNode.nodeValue)
-        const span = this.renderer.createElement('span')
-        span.innerHTML = linkified
-        container.insertBefore(span, textNode)
-        container.removeChild(textNode)
+        const linkified = this.linkifyNode(textNode.nodeValue)
+        if (linkified) {
+          this.createLinkElements(container, linkified, node)
+        }
+      } else if (node instanceof HTMLAnchorElement) {
+        const url = node.href
+        const displayValue = node.innerHTML
+        const linkified = this.linkifyNode(displayValue, url)
+        if (linkified) {
+          this.createLinkElements(container, linkified, node)
+        }
+      } else {
+        this.processLinks(node)
       }
     })
   }
 
-  private linkifyText(text: string): string {
-    return text.replace(/(\bhttps?:\/\/\S+\b)/g, (match) => {
-      return `<a href="${match}" target="_blank"
-                  class="text-primary cursor-pointer hover:underline">${match} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`
+  private linkifyNode(displayValue: string, url?: string): string | undefined {
+    if (url) {
+      displayValue = this.createLink(displayValue, url)
+    } else {
+      const urlRegex = /\bhttps?:\/\/(?:\([^\s()]+\)|[^\s()]+)+/g
+
+      const matches = displayValue.match(urlRegex)
+      if (matches && matches.length > 0) {
+        matches.forEach((match) => {
+          url = match
+
+          displayValue = displayValue.replace(match, (match) => {
+            return this.createLink(match, url)
+          })
+        })
+      }
+    }
+
+    return displayValue
+  }
+
+  private createLinkElements(
+    container: HTMLElement | ChildNode,
+    htmlContent: string,
+    node: ChildNode
+  ): void {
+    const div = this.renderer.createElement('div')
+    div.innerHTML = htmlContent
+
+    const fragment = document.createDocumentFragment()
+    Array.from(div.childNodes).forEach((childNode: ChildNode) => {
+      fragment.appendChild(childNode)
     })
+
+    container.insertBefore(fragment, node)
+    container.removeChild(node)
+  }
+
+  private createLink(displayValue: string, url: string): string {
+    return `<a href="${url}" target="_blank" class="text-primary cursor-pointer hover:underline">${displayValue} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`
   }
 }

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

@@ -6,29 +6,32 @@
 </p>
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
-    <p
-      class="whitespace-pre-line break-words"
-      [innerHTML]="metadata.abstract | safe: 'html'"
-      *ngIf="metadata.abstract"
-    ></p>
+    <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
+      <div>
+        <p
+          class="whitespace-pre-line break-words sm:mb-4 sm:pr-16"
+          [innerHTML]="metadata.abstract"
+          gnUiLinkify
+        ></p>
+        <ng-container *ngIf="metadata.keywords?.length">
+          <p class="mb-3 font-medium text-primary text-sm" translate>
+            record.metadata.keywords
+          </p>
+          <div class="sm:pb-4 sm:pr-16">
+            <gn-ui-badge
+              class="inline-block mr-2 mb-2 lowercase"
+              (click)="onKeywordClick(keyword)"
+              [clickable]="true"
+              *ngFor="let keyword of metadata.keywords"
+              >{{ keyword }}</gn-ui-badge
+            >
+          </div>
+        </ng-container>
+      </div>
+    </gn-ui-max-lines>
   </gn-ui-content-ghost>
 </div>
 
-<ng-container *ngIf="metadata.keywords?.length">
-  <p class="mb-3 font-medium text-primary text-sm" translate>
-    record.metadata.keywords
-  </p>
-  <div class="mb-9 sm:mb-16">
-    <gn-ui-badge
-      class="inline-block mr-2 mb-2 lowercase"
-      (click)="onKeywordClick(keyword)"
-      [clickable]="true"
-      *ngFor="let keyword of metadata.keywords"
-      >{{ keyword }}</gn-ui-badge
-    >
-  </div>
-</ng-container>
-
 <gn-ui-expandable-panel
   class="metadata-origin"
   *ngIf="
@@ -55,10 +58,14 @@
         {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
       </p>
     </div>
-    <div *ngIf="metadata.updateFrequency">
+    <div *ngIf="updateFrequency">
       <p class="text-sm" translate>record.metadata.updateFrequency</p>
-      <p class="text-primary font-medium mt-1" translate>
-        domain.record.updateFrequency.{{ metadata.updateFrequency }}
+      <p
+        class="text-primary font-medium mt-1 updateFrequency"
+        translate
+        [translateParams]="{ count: updatedTimes }"
+      >
+        {{ updateFrequency }}
       </p>
     </div>
     <div *ngIf="metadata.status">
@@ -94,11 +101,7 @@
     <p class="text-sm" translate>record.metadata.sheet</p>
     <p class="text-primary font-medium mt-1" translate>
       <a [href]="metadata.landingPage" target="_blank">
-        <mat-icon
-          class="material-symbols-outlined inline-block align-bottom pt-1.5 text-xs text-black !w-[20px]"
-          >open_in_new</mat-icon
-        >
-        <span class="break-all">{{ metadata.landingPage }}</span>
+        <span class="break-all" gnUiLinkify>{{ metadata.landingPage }}</span>
       </a>
     </p>
   </div>

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

@@ -5,7 +5,7 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { DatasetRecord } from '../../../../../../libs/common/domain/src/lib/record'
+import { DatasetRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-metadata-info',
@@ -17,6 +17,7 @@ export class MetadataInfoComponent {
   @Input() metadata: Partial<DatasetRecord>
   @Input() incomplete: boolean
   @Output() keyword = new EventEmitter<string>()
+  updatedTimes: number
 
   get hasUsage() {
     return (
@@ -37,6 +38,17 @@ export class MetadataInfoComponent {
     return array
   }
 
+  get updateFrequency(): string {
+    if (this.metadata.updateFrequency instanceof Object) {
+      this.updatedTimes = this.metadata.updateFrequency.updatedTimes
+      return `domain.record.updateFrequency.${this.metadata.updateFrequency.per}`
+    } else if (typeof this.metadata.updateFrequency === 'string') {
+      return `domain.record.updateFrequency.${this.metadata.updateFrequency}`
+    } else {
+      return undefined
+    }
+  }
+
   fieldReady(propName: string) {
     return !this.incomplete || propName in this.metadata
   }

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

@@ -1,5 +1,5 @@
 <div
-  *ngIf="metadataQualityDisplay?.widget === true"
+  *ngIf="metadataQualityDisplay"
   class="mb-6 metadata-quality"
   (mouseenter)="showMenu()"
   (mouseleave)="hideMenu()"

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

@@ -6,19 +6,7 @@ import {
   SimpleChanges,
 } from '@angular/core'
 import { MetadataQualityItem } from '../metadata-quality-item/metadata-quality-item.component'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/record'
-
-export interface MetadataQualityDisplay {
-  widget: boolean
-  title: boolean
-  description: boolean
-  topic: boolean
-  keywords: boolean
-  legalConstraints: boolean
-  organisation: boolean
-  contact: boolean
-  updateFrequency: boolean
-}
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-metadata-quality',
@@ -29,7 +17,7 @@ export interface MetadataQualityDisplay {
 export class MetadataQualityComponent implements OnChanges {
   @Input() metadata: Partial<CatalogRecord>
   @Input() smaller = false
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
 
   items: MetadataQualityItem[] = []
 

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

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon>{{ icon }}</mat-icon>
+  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>