geonetwork-ui 2.3.2 → 2.4.0-alpha.1

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

@@ -6,12 +6,19 @@ import {
 } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { SortByField } from '../../../../../../libs/common/domain/src/lib/model/search'
-import { Subject, debounceTime } from 'rxjs'
+import { debounceTime, Subject } from 'rxjs'
+import {
+  DropdownSelectorComponent,
+  SearchInputComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-organisations-filter',
   templateUrl: './organisations-filter.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [SearchInputComponent, DropdownSelectorComponent, TranslateModule],
 })
 export class OrganisationsFilterComponent {
   choices: { value: string; label: string }[] = [

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

@@ -5,16 +5,15 @@ 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 { 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'
+import { RouterLink } from '@angular/router'
 
 @NgModule({
   declarations: [
     CatalogTitleComponent,
     OrganisationPreviewComponent,
-    OrganisationsFilterComponent,
     LanguageSwitcherComponent,
     OrganisationsResultComponent,
   ],
@@ -24,11 +23,11 @@ import { OrganisationsResultComponent } from './organisations-result/organisatio
     UiElementsModule,
     UiInputsModule,
     MatIconModule,
+    RouterLink,
   ],
   exports: [
     CatalogTitleComponent,
     OrganisationPreviewComponent,
-    OrganisationsFilterComponent,
     LanguageSwitcherComponent,
     OrganisationsResultComponent,
   ],

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

@@ -1,4 +1,4 @@
-export const CHART_ITEM_FIXTURE = [
+export const charItemFixture = () => [
   {
     name: 'name 1',
     id: 'id 1',
@@ -19,7 +19,7 @@ export const CHART_ITEM_FIXTURE = [
   },
 ]
 
-export const CHART_ITEM_FIXTURE_HAB = [
+export const chartItemHabFixture = () => [
   {
     name: 'France',
     id: '1',

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

@@ -1,7 +1,13 @@
 <div
-  translate
   class="flex flex-row justify-start items-center overflow-hidden"
-  [title]="hoverTitle"
+  data-test="figureTitle"
+  [title]="
+    figure.toString() +
+    ' ' +
+    unit +
+    ' ' +
+    (title | translate: { count: figure })
+  "
 >
   <mat-icon
     class="material-symbols-outlined {{ bgClass }} {{
@@ -13,7 +19,9 @@
   </mat-icon>
   <div class="shrink overflow-hidden">
     <div class="figure-block text-[1.5em] text-black">
-      <span class="figure font-medium mr-[0.3em]">{{ figure }}</span>
+      <span class="figure font-medium mr-[0.3em]" data-test="figure">{{
+        figure
+      }}</span>
       <span class="unit text-[0.665em]">{{ unit }}</span>
     </div>
     <div translate class="title truncate" [translateParams]="{ count: figure }">

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 
 @Component({
   selector: 'gn-ui-figure',
@@ -10,17 +10,13 @@ export class FigureComponent {
   @Input() icon!: string
   @Input() title!: string
   @Input() figure!: string | number
-  @Input() unit?: string
+  @Input() unit = ''
   @Input() color: 'primary' | 'secondary' = 'primary'
 
-  get hoverTitle() {
-    return `${this.figure.toString()} ${this.unit || ''}
-${this.title}`
-  }
-
   get textClass() {
     return this.color === 'primary' ? 'text-primary' : 'text-secondary'
   }
+
   get bgClass() {
     return this.color === 'primary' ? 'bg-primary-white' : 'bg-secondary-white'
   }

package/src/libs/ui/dataviz/src/lib/table/table.fixtures.ts

@@ -1,4 +1,4 @@
-export const TABLE_ITEM_FIXTURE = [
+export const tableItemFixture = () => [
   {
     name: 'name 1',
     id: 'id 1',
@@ -16,7 +16,7 @@ export const TABLE_ITEM_FIXTURE = [
   },
 ]
 
-export const TABLE_ITEM_FIXTURE_HAB = [
+export const someHabTableItemFixture = () => [
   {
     name: 'France',
     id: '1',

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

@@ -1,24 +1,25 @@
 export * from './lib/api-card/api-card.component'
 export * from './lib/avatar/avatar.component'
+export * from './lib/confirmation-dialog/confirmation-dialog.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
+export * from './lib/error/error.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.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'
-export * from './lib/max-lines/max-lines.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'
 export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/notification/notification.component'
 export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
-export * from './lib/error/error.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
-export * from './lib/notification/notification.component'
+export * from './lib/user-feedback-item/user-feedback-item.component'

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

@@ -1,7 +1,5 @@
 <div
-  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()"
+  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default"
 >
   <div
     class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]"
@@ -17,35 +15,37 @@
         }"
         >{{ 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"
+      <div class="flex flex-row gap-2 items-center">
+        <gn-ui-copy-text-button
+          [text]="link.url"
+          [tooltipText]="'tooltip.url.copy' | translate"
+          [displayText]="false"
+        ></gn-ui-copy-text-button>
+        <button
+          *ngIf="displayApiFormButton"
+          type="button"
           [ngClass]="{
-            'text-secondary opacity-100': currentlyActive
+            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+              displayText
           }"
-          >more_horiz</mat-icon
+          mat-raised-button
+          [matTooltip]="
+            !currentlyActive
+              ? ('record.metadata.api.form.openForm' | translate)
+              : ('record.metadata.api.form.closeForm' | translate)
+          "
+          matTooltipPosition="above"
+          (click)="openRecordApiFormPanel()"
         >
-      </button>
+          <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>
 </div>

package/src/libs/ui/elements/src/lib/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+<div mat-dialog-content>{{ data.message }}</div>
+<div mat-dialog-actions>
+  <gn-ui-button (buttonClick)="onCancel()">{{ data.cancelText }}</gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="onConfirm()"
+    cdkFocusInitial
+    class="ml-2"
+    data-cy="confirm-button"
+    >{{ data.confirmText }}</gn-ui-button
+  >
+</div>

package/src/libs/ui/elements/src/lib/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+export interface ConfirmationDialogData {
+  title: string
+  message: string
+  confirmText: string
+  cancelText: string
+}
+
+@Component({
+  selector: 'gn-ui-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrls: ['./confirmation-dialog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatDialogModule, ButtonComponent],
+})
+export class ConfirmationDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmationDialogData
+  ) {}
+
+  onConfirm() {
+    this.dialogRef.close(true)
+  }
+
+  onCancel() {
+    this.dialogRef.close(false)
+  }
+}

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

@@ -1,11 +1,11 @@
 import {
-  Component,
   ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
   Input,
   Output,
-  EventEmitter,
 } from '@angular/core'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-download-item',
@@ -14,7 +14,7 @@ import { DatasetDistribution } from '../../../../../../libs/common/domain/src/li
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DownloadItemComponent {
-  @Input() link: DatasetDistribution
+  @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
   @Input() isFromWfs: boolean

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/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 marker('datahub.search.filter.all')
 marker('datahub.search.filter.others')
@@ -19,11 +19,11 @@ type FilterFormat = typeof FILTER_FORMATS[number]
 export class DownloadsListComponent {
   constructor(private translateService: TranslateService) {}
 
-  @Input() links: DatasetDistribution[]
+  @Input() links: DatasetOnlineResource[]
 
   activeFilterFormats: FilterFormat[] = ['all']
 
-  get filteredLinks(): DatasetDistribution[] {
+  get filteredLinks(): DatasetOnlineResource[] {
     return this.links.filter((link) =>
       this.activeFilterFormats.some((format) =>
         this.isLinkOfFormat(link, format)
@@ -68,7 +68,7 @@ export class DownloadsListComponent {
     return format
   }
 
-  isLinkOfFormat(link: DatasetDistribution, format: FilterFormat): boolean {
+  isLinkOfFormat(link: DatasetOnlineResource, format: FilterFormat): boolean {
     if (format === 'all') {
       return true
     }
@@ -86,15 +86,15 @@ export class DownloadsListComponent {
     return getFileFormat(link).includes(format)
   }
 
-  getLinkFormat(link: DatasetDistribution) {
+  getLinkFormat(link: DatasetOnlineResource) {
     return getFileFormat(link)
   }
 
-  getLinkColor(link: DatasetDistribution) {
+  getLinkColor(link: DatasetOnlineResource) {
     return getBadgeColor(getFileFormat(link))
   }
 
-  isFromWfs(link: DatasetDistribution) {
+  isFromWfs(link: DatasetOnlineResource) {
     return link.type === 'download' && link.accessServiceProtocol === 'wfs'
   }
 }

package/src/libs/ui/elements/src/lib/error/error.component.html

@@ -8,11 +8,11 @@
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">face</mat-icon>
       <mat-icon class="material-symbols-outlined question-mark1"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
       <mat-icon class="material-symbols-outlined question-mark2"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
     </div>
     <div translate>search.error.couldNotReachApi</div>
   </div>
@@ -32,6 +32,15 @@
     <div translate>search.error.receivedError</div>
     <div *ngIf="error">{{ error }}</div>
   </div>
+  <div *ngIf="type === types.ORGANIZATION_HAS_NO_DATASET">
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
+      <mat-icon class="material-symbols-outlined computer-question-mark"
+        >question_mark
+      </mat-icon>
+    </div>
+    <div translate>search.error.organizationHasNoDataset</div>
+  </div>
   <div
     *ngIf="type === types.RECORD_NOT_FOUND"
     data-test="record-not-found-error"
@@ -39,12 +48,27 @@
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
       <mat-icon class="material-symbols-outlined computer-question-mark"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
     </div>
     <div translate [translateParams]="{ id: recordId }">
       search.error.recordNotFound
     </div>
     <div *ngIf="error">{{ error }}</div>
   </div>
+  <div
+    *ngIf="type === types.ORGANIZATION_NOT_FOUND"
+    data-test="org-not-found-error"
+  >
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
+      <mat-icon class="material-symbols-outlined computer-question-mark"
+        >question_mark
+      </mat-icon>
+    </div>
+    <div translate [translateParams]="{ id: recordId }">
+      search.error.organizationNotFound
+    </div>
+    <div *ngIf="error">{{ error }}</div>
+  </div>
 </div>

package/src/libs/ui/elements/src/lib/error/error.component.ts

@@ -5,6 +5,8 @@ export enum ErrorType {
   RECEIVED_ERROR,
   RECORD_NOT_FOUND,
   DATASET_HAS_NO_LINK,
+  ORGANIZATION_HAS_NO_DATASET,
+  ORGANIZATION_NOT_FOUND,
 }
 
 @Component({

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/model/record'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { MatIconModule } from '@angular/material/icon'
 import { CommonModule } from '@angular/common'
 
@@ -12,7 +12,7 @@ import { CommonModule } from '@angular/common'
   imports: [CommonModule, MatIconModule],
 })
 export class LinkCardComponent {
-  @Input() link: DatasetDistribution
+  @Input() link: DatasetOnlineResource
   @Input() compact = false
 
   get title() {

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

@@ -1,18 +1,14 @@
-<div class="h-full flex flex-col">
-  <p class="flex-none mb-2 font-medium text-sm text-gray-900">
-    {{ helperText }}
-  </p>
-  <div class="flex-1" [hidden]="preview">
-    <gn-ui-text-area
-      [placeholder]="placeholder"
-      [value]="textContent"
-      (valueChange)="textContentChangedHandler($event)"
-    ></gn-ui-text-area>
-  </div>
-  <div
-    class="flex-1 border border-gray-800 rounded overflow-y-scroll"
-    [hidden]="!preview"
-  >
-    <gn-ui-markdown-parser [textContent]="textContent"></gn-ui-markdown-parser>
-  </div>
+<gn-ui-text-area
+  [hidden]="preview"
+  [placeholder]="placeholder"
+  [value]="textContent"
+  [extraClass]="textAreaExtraClass + ' !leading-normal'"
+  (valueChange)="textContentChangedHandler($event)"
+></gn-ui-text-area>
+
+<div
+  class="gn-ui-text-input border-gray-100 hover:border-gray-100"
+  [hidden]="!preview"
+>
+  <gn-ui-markdown-parser [textContent]="textContent"></gn-ui-markdown-parser>
 </div>

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

@@ -32,9 +32,9 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 })
 export class MarkdownEditorComponent {
   @Input() preview = false
-  @Input() helperText?: string
   @Input() placeholder: string
   @Input() textContent: string
+  @Input() textAreaExtraClass = ''
   @Output() textContentChanged: EventEmitter<string> =
     new EventEmitter<string>()
 

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.css

@@ -2,9 +2,10 @@
 :host ::ng-deep .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  margin: 0px 0px 1.5rem 0px;
+  margin: 0;
   line-height: 1.5;
   word-wrap: break-word;
+  height: 100%;
 }
 
 /** Emphasis **/
@@ -28,6 +29,11 @@
   @apply text-title font-title font-bold;
 }
 
+/** No margin for first child/heading, that cannot be detected by getBoundingClientRect() **/
+:host ::ng-deep .markdown-body :first-child {
+  margin-top: 0;
+}
+
 :host ::ng-deep .markdown-body h1 {
   margin: 0.67em 0;
   padding-bottom: 0.3em;

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

@@ -1,7 +1,7 @@
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
     <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
-      <div>
+      <div class="mb-6">
         <gn-ui-markdown-parser
           [textContent]="metadata.abstract"
         ></gn-ui-markdown-parser>
@@ -47,19 +47,23 @@
       </ng-template>
     </ng-container>
     <ng-container *ngIf="legalConstraints.length">
-      <gn-ui-markdown-parser
-        *ngFor="let constraint of legalConstraints"
-        [textContent]="constraint"
-      >
-      </gn-ui-markdown-parser>
+      <div class="mb-6">
+        <gn-ui-markdown-parser
+          *ngFor="let constraint of legalConstraints"
+          [textContent]="constraint"
+        >
+        </gn-ui-markdown-parser>
+      </div>
     </ng-container>
     <ng-container *ngIf="otherConstraints.length">
       <div gnUiLinkify *ngFor="let constraint of otherConstraints">
         <h5 translate class="font-medium text-black text-sm mb-[2px] mt-[16px]">
           record.metadata.otherConstraints
         </h5>
-        <gn-ui-markdown-parser [textContent]="constraint">
-        </gn-ui-markdown-parser>
+        <div class="mb-6">
+          <gn-ui-markdown-parser [textContent]="constraint">
+          </gn-ui-markdown-parser>
+        </div>
       </div>
     </ng-container>
 

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

@@ -1,22 +1,16 @@
-<div
-  *ngIf="metadataQualityDisplay"
-  class="mb-6 metadata-quality"
-  (mouseenter)="showMenu()"
-  (mouseleave)="hideMenu()"
->
-  <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
-    <gn-ui-progress-bar
-      (focus)="showMenu()"
-      (blur)="hideMenu()"
-      tabindex="0"
-      [value]="qualityScore"
-      type="primary"
-    ></gn-ui-progress-bar>
-  </div>
-  <div
-    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
-    [class]="isMenuShown ? 'block' : 'hidden'"
-  >
+<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
+  <gn-ui-popover [content]="popoverItems" theme="light-border">
+    <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
+      <gn-ui-progress-bar
+        tabindex="0"
+        [value]="qualityScore"
+        type="primary"
+      ></gn-ui-progress-bar>
+    </div>
+  </gn-ui-popover>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
     <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
     <gn-ui-metadata-quality-item
       *ngFor="let e of items"
@@ -24,4 +18,4 @@
       [value]="e.value"
     ></gn-ui-metadata-quality-item>
   </div>
-</div>
+</ng-template>

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

@@ -21,8 +21,6 @@ export class MetadataQualityComponent implements OnChanges {
 
   items: MetadataQualityItem[] = []
 
-  isMenuShown = false
-
   get qualityScore() {
     const qualityScore = this.metadata?.extras?.qualityScore
     return typeof qualityScore === 'number'
@@ -36,14 +34,6 @@ export class MetadataQualityComponent implements OnChanges {
     )
   }
 
-  showMenu() {
-    this.isMenuShown = true
-  }
-
-  hideMenu() {
-    this.isMenuShown = false
-  }
-
   private add(name: string, value: boolean) {
     if (this.metadataQualityDisplay?.[name] !== false) {
       this.items.push({ name, value })

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 class="material-symbols-outlined">{{ icon }}</mat-icon>
+  <mat-icon class="material-symbols-outlined min-w-fit">{{ icon }}</mat-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>