geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.c1a684900

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

@@ -1,12 +1,7 @@
-import {
-  Component,
-  Inject,
-  InjectionToken,
-  OnInit,
-  Optional,
-} from '@angular/core'
+import { Component, Inject, InjectionToken, Optional } from '@angular/core'
 import { LANGUAGE_STORAGE_KEY } from '../../../../../../libs/util/i18n/src'
 import { TranslateService } from '@ngx-translate/core'
+import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
 
 export const LANGUAGES_LIST = new InjectionToken<string[]>('languages-list')
 
@@ -16,14 +11,21 @@ const DEFAULT_LANGUAGES = ['en', 'fr']
   selector: 'gn-ui-language-switcher',
   templateUrl: './language-switcher.component.html',
   styleUrls: ['./language-switcher.component.css'],
+  imports: [DropdownSelectorComponent],
+  standalone: true,
 })
-export class LanguageSwitcherComponent implements OnInit {
-  languageList = this.languagePlaceholder || DEFAULT_LANGUAGES
+export class LanguageSwitcherComponent {
+  languageChoices = (this.languagesList || DEFAULT_LANGUAGES).map(
+    (language) => ({
+      label: `${language}`.toUpperCase(),
+      value: language,
+    })
+  )
 
   constructor(
     @Optional()
     @Inject(LANGUAGES_LIST)
-    private languagePlaceholder,
+    private languagesList: string[],
     private translate: TranslateService
   ) {}
 
@@ -31,22 +33,14 @@ export class LanguageSwitcherComponent implements OnInit {
     return this.translate.currentLang
   }
 
-  ngOnInit(): void {
-    const languages = this.languagePlaceholder || DEFAULT_LANGUAGES
-    this.languageList = languages.map((language) => ({
-      label: `${language}`.toUpperCase(),
-      value: language,
-    }))
-  }
-
-  changeLanguage(value) {
+  changeLanguage(value: unknown) {
     try {
-      localStorage.setItem(LANGUAGE_STORAGE_KEY, value)
+      localStorage.setItem(LANGUAGE_STORAGE_KEY, value as string)
       location.reload()
     } catch (error) {
       console.warn(`Language choice could not be persisted`, error)
     }
 
-    this.translate.use(value)
+    this.translate.use(value as string)
   }
 }

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -27,9 +27,8 @@
         {{ organization.description }}
       </p>
       <div class="shrink-0 text-primary opacity-50 flex leading-6">
-        <mat-icon class="material-symbols-outlined text-primary opacity-50 mr-1"
-          >folder_open
-        </mat-icon>
+        <ng-icon class="text-primary opacity-50 mr-1" name="tablerFolderOpen">
+        </ng-icon>
         <span class="mx-1" data-cy="organizationRecordsCount">{{
           organization.recordCount
         }}</span>

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts

@@ -6,12 +6,23 @@ import {
   Output,
 } from '@angular/core'
 import { Organization } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ThumbnailComponent } from '../../../../../../libs/ui/elements/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { tablerFolderOpen } from '@ng-icons/tabler-icons'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-organisation-preview',
   templateUrl: './organisation-preview.component.html',
   styleUrls: ['./organisation-preview.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ThumbnailComponent, NgIcon, TranslateModule],
+  viewProviders: [
+    provideIcons({
+      tablerFolderOpen,
+    }),
+  ],
+  standalone: true,
 })
 export class OrganisationPreviewComponent {
   @Input() organization: Organization

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

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-organisations-result',
   templateUrl: './organisations-result.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule],
+  standalone: true,
 })
 export class OrganisationsResultComponent {
   @Input() hits: number

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

@@ -88,7 +88,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
     const data = this.handlesSecondaryValue()
       ? (this.getDataProxy(this.valueProperty, this.secondaryValueProperty) as [
           number,
-          number
+          number,
         ][])
       : (this.getDataProxy(this.valueProperty) as number[])
     return {

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

@@ -9,14 +9,15 @@
     (title | translate: { count: figure })
   "
 >
-  <mat-icon
-    class="material-symbols-outlined {{ bgClass }} {{
+  <div
+    class="{{ bgClass }} {{
       textClass
-    }} text-[1.875em] rounded-full mr-[0.55em] p-[0.6em] w-[2.2em] h-[2.2em] shrink-0"
+    }} text-[1.875em] rounded-full mr-[0.55em] flex justify-center items-center w-[2.2em] h-[2.2em] shrink-0"
     style="width: 2.2em; height: 2.2em"
+    data-test="icon-container"
   >
-    {{ icon }}
-  </mat-icon>
+    <ng-icon class="text-[0.66em]" [name]="icon"> </ng-icon>
+  </div>
   <div class="shrink overflow-hidden">
     <div class="figure-block text-[1.5em] text-black">
       <span class="figure font-medium mr-[0.3em]" data-test="figure">{{

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

@@ -1,11 +1,26 @@
 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'
+import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
+import { matCorporateFare } from '@ng-icons/material-icons/baseline'
+import { tablerFolderOpen } from '@ng-icons/tabler-icons'
 
 @NgModule({
-  imports: [CommonModule, MatIconModule, TranslateModule.forChild()],
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    // FIXME: these imports are required by non-standalone components and should be removed once all components have been made standalone
+    NgIconsModule.withIcons({
+      matCorporateFare,
+      tablerFolderOpen,
+    }),
+  ],
+  providers: [
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
   declarations: [FigureComponent],
   exports: [FigureComponent],
 })

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

@@ -15,8 +15,6 @@ 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/thumbnail/thumbnail.component'

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

@@ -9,12 +9,23 @@
   <div class="">
     <div class="flex flex-row justify-between">
       <span
+        *ngIf="link.accessServiceProtocol !== 'GPFDL'"
         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
+          '!bg-primary': currentlyActive,
         }"
         >{{ link.accessServiceProtocol }}</span
       >
+      <span
+        *ngIf="link.accessServiceProtocol === 'GPFDL'"
+        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,
+        }"
+        translate
+      >
+        record.metadata.api.gpfdl</span
+      >
       <div class="flex flex-row gap-2 items-center">
         <gn-ui-copy-text-button
           [text]="link.url"
@@ -26,9 +37,8 @@
           type="button"
           [ngClass]="{
             'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-              displayText
+              displayText,
           }"
-          mat-raised-button
           [matTooltip]="
             !currentlyActive
               ? ('record.metadata.api.form.openForm' | translate)
@@ -37,13 +47,13 @@
           matTooltipPosition="above"
           (click)="openRecordApiFormPanel()"
         >
-          <mat-icon
-            class="material-symbols-outlined pointer-events-none align-middle card-icon"
+          <ng-icon
+            class="pointer-events-none align-middle card-icon"
+            name="matMoreHoriz"
             [ngClass]="{
-              'text-secondary opacity-100': currentlyActive
+              'text-secondary opacity-100': currentlyActive,
             }"
-            >more_horiz</mat-icon
-          >
+          ></ng-icon>
         </button>
       </div>
     </div>

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

@@ -9,12 +9,31 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matMoreHoriz } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-api-card',
   templateUrl: './api-card.component.html',
   styleUrls: ['./api-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    CopyTextButtonComponent,
+    TranslateModule,
+    MatTooltipModule,
+    NgIcon,
+  ],
+  viewProviders: [
+    provideIcons({
+      matMoreHoriz,
+    }),
+  ],
 })
 export class ApiCardComponent implements OnInit, OnChanges {
   @Input() link: DatasetServiceDistribution
@@ -27,7 +46,8 @@ export class ApiCardComponent implements OnInit, OnChanges {
   ngOnInit() {
     this.displayApiFormButton =
       this.link.accessServiceProtocol === 'ogcFeatures' ||
-      this.link.accessServiceProtocol === 'wfs'
+      this.link.accessServiceProtocol === 'wfs' ||
+      this.link.accessServiceProtocol === 'GPFDL'
   }
 
   ngOnChanges(changes: SimpleChanges) {

package/src/libs/ui/elements/src/lib/content-ghost/content-ghost.component.ts

@@ -1,10 +1,13 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-content-ghost',
   templateUrl: './content-ghost.component.html',
   styleUrls: ['./content-ghost.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class ContentGhostComponent {
   @Input() showContent: boolean

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

@@ -20,15 +20,17 @@
       >
       <span
         class="pl-2 inline-flex items-center text-gray-800 text-sm"
-        *ngIf="isFromWfs"
+        *ngIf="isFromApi"
         translate=""
-        >datahub.search.filter.generatedByWfs</span
+        >datahub.search.filter.generatedByAPI</span
       >
     </div>
   </div>
   <div class="shrink-1 w-14 flex flex-col justify-center items-center">
-    <mat-icon class="!w-8 !h-8 card-icon text-3xl material-symbols-outlined">
-      cloud_download
-    </mat-icon>
+    <ng-icon
+      class="!w-8 !h-8 card-icon text-3xl"
+      name="matCloudDownloadOutline"
+    >
+    </ng-icon>
   </div>
 </a>

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

@@ -6,18 +6,29 @@ import {
   Output,
 } from '@angular/core'
 import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { TranslateModule } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-download-item',
   templateUrl: './download-item.component.html',
   styleUrls: ['./download-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, TranslateModule, NgIcon],
+  standalone: true,
+  viewProviders: [
+    provideIcons({
+      matCloudDownloadOutline,
+    }),
+  ],
 })
 export class DownloadItemComponent {
   @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
-  @Input() isFromWfs: boolean
+  @Input() isFromApi: boolean
   @Output() exportUrl = new EventEmitter<string>()
 
   openUrl() {

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

@@ -31,6 +31,6 @@
     [link]="link"
     [color]="getLinkColor(link)"
     [format]="getLinkFormat(link)"
-    [isFromWfs]="isFromWfs(link)"
+    [isFromApi]="isFromApi(link)"
   ></gn-ui-download-item>
 </div>

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-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>