geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.4e8752d34

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

@@ -1,34 +1,73 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetDownloadDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { DownloadItemComponent } from '../download-item/download-item.component'
 
 marker('datahub.search.filter.all')
 marker('datahub.search.filter.others')
 
 const FILTER_FORMATS = ['all', 'csv', 'excel', 'json', 'shp', 'others'] as const
-type FilterFormat = typeof FILTER_FORMATS[number]
+type FilterFormat = (typeof FILTER_FORMATS)[number]
 
 @Component({
   selector: 'gn-ui-downloads-list',
   templateUrl: './downloads-list.component.html',
   styleUrls: ['./downloads-list.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    DownloadItemComponent,
+    TranslateModule,
+  ],
 })
 export class DownloadsListComponent {
   constructor(private translateService: TranslateService) {}
 
-  @Input() links: DatasetOnlineResource[]
+  @Input() links: DatasetDownloadDistribution[]
 
   activeFilterFormats: FilterFormat[] = ['all']
 
-  get filteredLinks(): DatasetOnlineResource[] {
-    return this.links.filter((link) =>
+  private removeDuplicateFormats(
+    links: DatasetDownloadDistribution[]
+  ): DatasetDownloadDistribution[] {
+    const preferredLinks = new Map<string, DatasetDownloadDistribution>()
+
+    links.forEach((link) => {
+      const format = getFileFormat(link)
+      const withoutNameSpace = (link.name || link.description || '').replace(
+        /^.*?:/,
+        ''
+      )
+      const uniqueKey = `${format}-${withoutNameSpace}`
+      if (!preferredLinks.has(uniqueKey)) {
+        preferredLinks.set(uniqueKey, link)
+      } else {
+        const existingLink = preferredLinks.get(uniqueKey)
+        if (
+          link.accessServiceProtocol === 'ogcFeatures' &&
+          existingLink?.accessServiceProtocol !== 'ogcFeatures'
+        ) {
+          preferredLinks.set(uniqueKey, link)
+        }
+      }
+    })
+
+    return Array.from(preferredLinks.values())
+  }
+
+  get filteredLinks(): DatasetDownloadDistribution[] {
+    const filteredByFormat = this.links.filter((link) =>
       this.activeFilterFormats.some((format) =>
         this.isLinkOfFormat(link, format)
       )
     )
+    return this.removeDuplicateFormats(filteredByFormat)
   }
 
   get visibleFormats(): FilterFormat[] {
@@ -68,7 +107,10 @@ export class DownloadsListComponent {
     return format
   }
 
-  isLinkOfFormat(link: DatasetOnlineResource, format: FilterFormat): boolean {
+  isLinkOfFormat(
+    link: DatasetDownloadDistribution,
+    format: FilterFormat
+  ): boolean {
     if (format === 'all') {
       return true
     }
@@ -86,15 +128,19 @@ export class DownloadsListComponent {
     return getFileFormat(link).includes(format)
   }
 
-  getLinkFormat(link: DatasetOnlineResource) {
+  getLinkFormat(link: DatasetDownloadDistribution) {
     return getFileFormat(link)
   }
 
-  getLinkColor(link: DatasetOnlineResource) {
+  getLinkColor(link: DatasetDownloadDistribution) {
     return getBadgeColor(getFileFormat(link))
   }
 
-  isFromWfs(link: DatasetOnlineResource) {
-    return link.type === 'download' && link.accessServiceProtocol === 'wfs'
+  isFromApi(link: DatasetDownloadDistribution) {
+    return (
+      link.type === 'download' &&
+      (link.accessServiceProtocol === 'wfs' ||
+        link.accessServiceProtocol === 'ogcFeatures')
+    )
   }
 }

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

@@ -1,30 +1,35 @@
-mat-icon {
-  width: auto;
-  height: auto;
+ng-icon {
+  width: 5rem;
+  height: 5rem;
 }
-mat-icon.face {
-  font-size: 3em;
+ng-icon.face {
+  width: 3em;
+  height: 3em;
 }
-mat-icon.question-mark1 {
+ng-icon.question-mark1 {
   position: absolute;
-  bottom: 1.1em;
-  left: calc(50% + 0.7em);
-  font-size: 1.7em;
+  bottom: 1.9em;
+  left: calc(50% + 1.2em);
+  width: 1.7em;
+  height: 1.7em;
 }
-mat-icon.question-mark2 {
+ng-icon.question-mark2 {
   position: absolute;
-  bottom: 1.6em;
-  left: calc(50% + 1.6em);
-  font-size: 1.4em;
+  bottom: 2.3em;
+  left: calc(50% + 2.3em);
+  width: 1.4em;
+  height: 1.4em;
 }
 
-.computer {
-  font-size: 3em;
+ng-icon.computer {
+  width: 3em;
+  height: 3em;
 }
 
-.computer-question-mark {
+ng-icon.computer-question-mark {
   position: absolute;
-  top: 0.6em;
-  left: calc(50% - 0.5em);
-  font-size: 1.2em;
+  top: 0.7em;
+  left: calc(50% - 0.6em);
+  width: 1.2em;
+  height: 1.2em;
 }

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

@@ -6,13 +6,9 @@
     data-test="could-not-reach-api-error"
   >
     <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>
-      <mat-icon class="material-symbols-outlined question-mark2"
-        >question_mark
-      </mat-icon>
+      <ng-icon name="matFace" class="face"></ng-icon>
+      <ng-icon name="matQuestionMark" class="question-mark1"></ng-icon>
+      <ng-icon name="matQuestionMark" class="question-mark2"></ng-icon>
     </div>
     <div translate>search.error.couldNotReachApi</div>
   </div>
@@ -21,23 +17,21 @@
     data-test="dataset-has-no-link-error"
   >
     <div class="relative opacity-40">
-      <mat-icon class="material-symbols-outlined face">computer</mat-icon>
+      <ng-icon name="matComputerOutline"></ng-icon>
     </div>
     <div translate>search.error.recordHasnolink</div>
   </div>
   <div *ngIf="type === types.RECEIVED_ERROR" data-test="received-error-error">
     <div class="relative opacity-40">
-      <mat-icon class="material-symbols-outlined face">mood_bad</mat-icon>
+      <ng-icon name="matMoodBad" class="face"></ng-icon>
     </div>
     <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>
+      <ng-icon name="matComputerOutline" class="computer"></ng-icon>
+      <ng-icon name="matQuestionMark" class="computer-question-mark"> </ng-icon>
     </div>
     <div translate>search.error.organizationHasNoDataset</div>
   </div>
@@ -46,10 +40,8 @@
     data-test="record-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>
+      <ng-icon name="matComputerOutline" class="computer"></ng-icon>
+      <ng-icon name="matQuestionMark" class="computer-question-mark"> </ng-icon>
     </div>
     <div translate [translateParams]="{ id: recordId }">
       search.error.recordNotFound
@@ -61,10 +53,8 @@
     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>
+      <ng-icon name="matComputerOutline" class="computer"></ng-icon>
+      <ng-icon name="matQuestionMark" class="computer-question-mark"> </ng-icon>
     </div>
     <div translate [translateParams]="{ id: recordId }">
       search.error.organizationNotFound

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

@@ -1,4 +1,13 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { CommonModule } from '@angular/common'
+import {
+  matFace,
+  matMoodBad,
+  matQuestionMark,
+} from '@ng-icons/material-icons/baseline'
+import { matComputerOutline } from '@ng-icons/material-icons/outline'
+import { TranslateModule } from '@ngx-translate/core'
 
 export enum ErrorType {
   COULD_NOT_REACH_API,
@@ -14,6 +23,16 @@ export enum ErrorType {
   templateUrl: './error.component.html',
   styleUrls: ['./error.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, NgIcon, TranslateModule],
+  viewProviders: [
+    provideIcons({
+      matFace,
+      matQuestionMark,
+      matMoodBad,
+      matComputerOutline,
+    }),
+  ],
 })
 export class ErrorComponent {
   @Input() type!: ErrorType

package/src/libs/ui/elements/src/lib/image-input/image-input.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-padding: 8px 8px;
+  --gn-ui-button-rounded: 8px;
+}

package/src/libs/ui/{inputs → elements}/src/lib/image-input/image-input.component.html

@@ -2,35 +2,20 @@
 </ng-container>
 
 <ng-template #withImage>
-  <div class="w-full h-full flex flex-col gap-2">
-    <div class="flex-1 group relative">
-      <img
-        class="w-full object-cover border-2 border-gray-300 rounded-lg h-[172px]"
-        [alt]="altText"
-        loading="lazy"
-        [src]="previewUrl"
-      />
-      <gn-ui-button
-        type="outline"
-        style="--gn-ui-button-height: 40px; --gn-ui-button-width: 40px"
-        extraClass="absolute right-2 bottom-2 invisible group-hover:visible bg-background"
-        (buttonClick)="handleDelete()"
-      >
-        <mat-icon class="material-symbols-outlined">delete</mat-icon>
-      </gn-ui-button>
-    </div>
+  <div class="w-80 h-full flex flex-col gap-2">
+    <gn-ui-image-overlay-preview class="h-48" [imageUrl]="previewUrl">
+    </gn-ui-image-overlay-preview>
     <gn-ui-text-input
       *ngIf="showAltTextInput"
       [placeholder]="'input.image.altTextPlaceholder' | translate"
       [value]="altText ?? ''"
       (valueChange)="handleAltTextChange($event)"
       extraClass="gn-ui-editor-textarea"
+      [disabled]="true"
     ></gn-ui-text-input>
     <div class="flex flex-row gap-2 mt-2">
       <gn-ui-button type="gray" (buttonClick)="handleDelete()">
-        <mat-icon class="material-symbols-outlined me-1 text-primary"
-          >delete</mat-icon
-        >
+        <ng-icon class="me-1 text-primary" name="iconoirBin"></ng-icon>
         {{ 'input.image.delete' | translate }}
       </gn-ui-button>
       <gn-ui-button
@@ -38,9 +23,7 @@
         type="gray"
         (buttonClick)="toggleAltTextInput()"
       >
-        <mat-icon class="material-symbols-outlined me-1 text-primary"
-          >add</mat-icon
-        >
+        <ng-icon name="iconoirPlus" class="me-1 text-primary"></ng-icon>
         {{ 'input.image.displayAltTextInput' | translate }}
       </gn-ui-button>
     </div>
@@ -56,10 +39,11 @@
         'border-primary-lighter bg-primary-white': dragFilesOver,
         'border-gray-300': !dragFilesOver,
         'cursor-pointer hover:border-gray-500':
-          !isUploadInProgress && !uploadError && !showUrlInput
+          !isUploadInProgress && !uploadError && !showUrlInput && !disabled,
+        'cursor-not-allowed': disabled,
       }"
       [attr.tabindex]="
-        isUploadInProgress || uploadError || showUrlInput ? null : 0
+        isUploadInProgress || uploadError || showUrlInput || disabled ? null : 0
       "
       (keydown.enter)="fileInput.click()"
       (dragFilesOver)="handleDragFilesOver($event)"
@@ -69,16 +53,16 @@
         class="w-14 h-14 rounded-md bg-gray-50 grid"
         *ngIf="!isUploadInProgress && !uploadError"
       >
-        <mat-icon
+        <ng-icon
           *ngIf="!dragFilesOver"
-          class="material-symbols-outlined place-self-center text-primary"
-          >image</mat-icon
-        >
-        <mat-icon
+          class="place-self-center text-primary"
+          name="iconoirMediaImage"
+        ></ng-icon>
+        <ng-icon
           *ngIf="dragFilesOver"
-          class="material-symbols-outlined place-self-center text-primary"
-          >add_box</mat-icon
-        >
+          class="place-self-center text-primary"
+          name="iconoirFramePlusIn"
+        ></ng-icon>
       </div>
 
       <div
@@ -105,10 +89,10 @@
       </div>
 
       <div class="w-14 h-14 rounded-md bg-gray-50 grid" *ngIf="uploadError">
-        <mat-icon
-          class="material-symbols-outlined place-self-center text-rose-500"
-          >broken_image</mat-icon
-        >
+        <ng-icon
+          name="iconoirMediaImageXmark"
+          class="place-self-center text-rose-500"
+        ></ng-icon>
       </div>
 
       <div class="flex flex-col items-center gap-1">
@@ -130,15 +114,20 @@
         type="file"
         class="hidden"
         (change)="handleFileInput($event)"
-        [disabled]="showUrlInput || isUploadInProgress || uploadError"
+        [disabled]="
+          showUrlInput || isUploadInProgress || uploadError || disabled
+        "
       />
     </label>
 
     <div *ngIf="!showUrlInput" class="flex-none mt-2">
-      <gn-ui-button (buttonClick)="displayUrlInput()" type="gray">
-        <mat-icon class="material-symbols-outlined me-1 text-primary"
-          >link</mat-icon
-        >
+      <gn-ui-button
+        (buttonClick)="displayUrlInput()"
+        type="gray"
+        [disabled]="disabled"
+        [extraClass]="disabled && 'cursor-not-allowed'"
+      >
+        <ng-icon class="me-1 text-primary" name="iconoirLink"></ng-icon>
         {{ 'input.image.displayUrlInput' | translate }}
       </gn-ui-button>
     </div>
@@ -146,8 +135,8 @@
     <gn-ui-url-input
       *ngIf="showUrlInput"
       class="mt-3.5"
-      (valueChange)="downloadUrl($event)"
-      [disabled]="isUploadInProgress"
+      (uploadClick)="downloadUrl($event)"
+      [disabled]="isUploadInProgress || disabled"
     >
     </gn-ui-url-input>
   </div>

package/src/libs/ui/{inputs → elements}/src/lib/image-input/image-input.component.ts

@@ -8,16 +8,31 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  ButtonComponent,
+  FilesDropDirective,
+  TextInputComponent,
+  UrlInputComponent,
+} from '../../../../../../libs/ui/inputs/src'
 import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
-import { firstValueFrom } from 'rxjs'
-import { ButtonComponent } from '../button/button.component'
-import { FilesDropDirective } from '../files-drop/files-drop.directive'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  iconoirBin,
+  iconoirFramePlusIn,
+  iconoirLink,
+  iconoirMediaImage,
+  iconoirMediaImageXmark,
+  iconoirPlus,
+} from '@ng-icons/iconoir'
 import { TranslateModule } from '@ngx-translate/core'
-import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { UrlInputComponent } from '../url-input/url-input.component'
-import { TextInputComponent } from '../text-input/text-input.component'
+import { firstValueFrom } from 'rxjs'
+import { ImageOverlayPreviewComponent } from '../image-overlay-preview/image-overlay-preview.component'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -28,12 +43,26 @@ import { TextInputComponent } from '../text-input/text-input.component'
   imports: [
     CommonModule,
     ButtonComponent,
-    MatIconModule,
     FilesDropDirective,
     MatProgressSpinnerModule,
     TranslateModule,
     UrlInputComponent,
     TextInputComponent,
+    NgIconComponent,
+    ImageOverlayPreviewComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirMediaImage,
+      iconoirFramePlusIn,
+      iconoirMediaImageXmark,
+      iconoirBin,
+      iconoirPlus,
+      iconoirLink,
+    }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
 })
 export class ImageInputComponent {
@@ -42,6 +71,7 @@ export class ImageInputComponent {
   @Input() altText?: string
   @Input() uploadProgress?: number
   @Input() uploadError?: boolean
+  @Input() disabled?: boolean = false
   @Output() fileChange: EventEmitter<File> = new EventEmitter()
   @Output() urlChange: EventEmitter<string> = new EventEmitter()
   @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
@@ -60,7 +90,10 @@ export class ImageInputComponent {
     return this.uploadProgress !== undefined
   }
 
-  constructor(private http: HttpClient, private cd: ChangeDetectorRef) {}
+  constructor(
+    private http: HttpClient,
+    private cd: ChangeDetectorRef
+  ) {}
 
   getPrimaryText() {
     if (this.uploadError) {

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

@@ -1,12 +1,11 @@
 <gn-ui-content-ghost
   [showContent]="imageUrl !== undefined"
-  ghostClass="h-48 mb-3"
+  ghostClass="h-full w-full"
 >
   <div
     *ngIf="imageUrl"
-    [showContent]="imageUrl !== undefined"
     data-cy="record-thumbnail"
-    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
+    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"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"
@@ -21,9 +20,7 @@
         [extraClass]="'!py-2 !px-0'"
         (buttonClick)="openLightbox(imageUrl)"
       >
-        <mat-icon class="material-symbols-outlined font-extralight"
-          >zoom_out_map</mat-icon
-        >
+        <ng-icon name="matZoomOutMap"></ng-icon>
       </gn-ui-button>
     </div>
   </div>

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

@@ -1,10 +1,25 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import * as basicLightbox from 'basiclightbox'
+import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
+import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matZoomOutMap } from '@ng-icons/material-icons/baseline'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-image-overlay-preview',
   templateUrl: './image-overlay-preview.component.html',
   styleUrls: ['./image-overlay-preview.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    ContentGhostComponent,
+    ThumbnailComponent,
+    ButtonComponent,
+    NgIcon,
+  ],
+  viewProviders: [provideIcons({ matZoomOutMap })],
 })
 export class ImageOverlayPreviewComponent {
   @Input() imageUrl: string

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

@@ -23,9 +23,7 @@
       </p>
     </div>
     <div>
-      <mat-icon class="material-symbols-outlined card-icon"
-        >open_in_new</mat-icon
-      >
+      <ng-icon class="card-icon" name="matOpenInNew"></ng-icon>
     </div>
   </ng-container>
   <ng-template #compactTpl>
@@ -35,9 +33,7 @@
       >
         {{ link.name || link.description }}
       </p>
-      <mat-icon class="material-symbols-outlined card-icon flex-shrink-0"
-        >open_in_new</mat-icon
-      >
+      <ng-icon class="card-icon flex-shrink-0" name="matOpenInNew"></ng-icon>
     </div>
   </ng-template>
 </a>

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

@@ -1,7 +1,12 @@
 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'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-link-card',
@@ -9,7 +14,13 @@ import { CommonModule } from '@angular/common'
   styleUrls: ['./link-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, NgIconComponent],
+  providers: [
+    provideIcons({
+      matOpenInNew,
+    }),
+    provideNgIconsConfig({ size: '1.5em' }),
+  ],
 })
 export class LinkCardComponent {
   @Input() link: DatasetOnlineResource

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

@@ -10,7 +10,6 @@ import { FormsModule } from '@angular/forms'
 import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
 import { TranslateModule } from '@ngx-translate/core'
 import { ButtonComponent, TextAreaComponent } from '../../../../../../libs/ui/inputs/src'
-import { MatIconModule } from '@angular/material/icon'
 import { MatTooltipModule } from '@angular/material/tooltip'
 
 @Component({
@@ -22,7 +21,6 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   imports: [
     CommonModule,
     FormsModule,
-    MatIconModule,
     MatTooltipModule,
     ButtonComponent,
     TextAreaComponent,

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

@@ -1 +1,4 @@
-<div class="markdown-body" [innerHTML]="parsedMarkdown"></div>
+<div
+  [class]="whitoutStyles ? '' : 'markdown-body'"
+  [innerHTML]="parsedMarkdown"
+></div>

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

@@ -10,6 +10,7 @@ import { marked } from 'marked'
 })
 export class MarkdownParserComponent {
   @Input() textContent: string
+  @Input() whitoutStyles?: boolean
 
   get parsedMarkdown() {
     return marked.parse(this.textContent)

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

@@ -1,10 +1,13 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-metadata-catalog',
   templateUrl: './metadata-catalog.component.html',
   styleUrls: ['./metadata-catalog.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [TranslateModule],
 })
 export class MetadataCatalogComponent {
   @Input() sourceLabel: string