geonetwork-ui 2.6.0-dev.9df114cd4 → 2.6.0-dev.a8e63e487

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.html

@@ -1,18 +1,30 @@
-<div class="flex flex-row gap-x-4 items-center">
+<div class="flex flex-row gap-x-1 items-center">
   <gn-ui-button
     data-test="previousButton"
-    type="outline"
+    type="light"
+    [extraClass]="
+      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      (!listComponent.isFirstPage
+        ? 'border border-gray-300'
+        : 'border border-gray-100')
+    "
     [disabled]="listComponent.isFirstPage"
     (buttonClick)="listComponent.goToPrevPage()"
   >
-    <ng-icon name="matArrowBack"></ng-icon>
+    <ng-icon name="matArrowBackIos"></ng-icon>
   </gn-ui-button>
   <gn-ui-button
     data-test="nextButton"
-    type="outline"
+    type="light"
+    [extraClass]="
+      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      (!listComponent.isLastPage
+        ? 'border border-gray-300'
+        : 'border border-gray-100')
+    "
     [disabled]="listComponent.isLastPage"
     (buttonClick)="listComponent.goToNextPage()"
   >
-    <ng-icon name="matArrowForward"></ng-icon>
+    <ng-icon name="matArrowForwardIos"></ng-icon>
   </gn-ui-button>
 </div>

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.ts

@@ -5,8 +5,8 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import {
-  matArrowBack,
-  matArrowForward,
+  matArrowBackIos,
+  matArrowForwardIos,
 } from '@ng-icons/material-icons/baseline'
 import { Paginable } from '../paginable.interface'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
@@ -18,7 +18,7 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
   standalone: true,
   imports: [ButtonComponent, NgIconComponent],
   providers: [
-    provideIcons({ matArrowForward, matArrowBack }),
+    provideIcons({ matArrowBackIos, matArrowForwardIos }),
     provideNgIconsConfig({
       size: '0.875em',
     }),

package/src/libs/ui/layout/src/lib/truncated-text/truncated-text.component.html

@@ -0,0 +1,44 @@
+<div
+  class="flex items-center justify-between w-full gap-2"
+  cdkOverlayOrigin
+  [class]="extraClass"
+  #trigger="cdkOverlayOrigin"
+>
+  <span #textElement class="truncate">
+    {{ text }}
+  </span>
+  <gn-ui-button
+    *ngIf="isTextTruncated"
+    type="outline"
+    extraClass="w-10 h-8 border rounded-lg"
+    (buttonClick)="toggleOverlay()"
+  >
+    <ng-icon name="iconoirExpand" size="24"> </ng-icon>
+  </gn-ui-button>
+
+  <ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="isOpen"
+    [cdkConnectedOverlayPositions]="[overlayPosition]"
+    cdkConnectedOverlayPush
+    [cdkConnectedOverlayWidth]="'auto'"
+    [cdkConnectedOverlayFlexibleDimensions]="true"
+    [cdkConnectedOverlayGrowAfterOpen]="true"
+    (detach)="close()"
+  >
+    <div class="bg-white shadow-lg border border-gray-300 flex">
+      <div class="sm:w-64 xs:w-32">
+        <p class="m-2">{{ text }}</p>
+      </div>
+      <gn-ui-button
+        class="m-2 flex-shrink-0"
+        type="light"
+        (buttonClick)="close()"
+        extraClass="w-10 h-8 px-1 bg-white"
+      >
+        <ng-icon name="iconoirReduce" size="24"> </ng-icon>
+      </gn-ui-button>
+    </div>
+  </ng-template>
+</div>

package/src/libs/ui/layout/src/lib/truncated-text/truncated-text.component.ts

@@ -0,0 +1,130 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  ViewChild,
+  NgZone,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { provideIcons, NgIconComponent } from '@ng-icons/core'
+import { iconoirExpand, iconoirReduce } from '@ng-icons/iconoir'
+import { TranslateModule } from '@ngx-translate/core'
+import { MatButtonModule } from '@angular/material/button'
+import {
+  OverlayModule,
+  ViewportRuler,
+  ConnectedPosition,
+} from '@angular/cdk/overlay'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { Subscription } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-truncated-text',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    MatButtonModule,
+    OverlayModule,
+    ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [provideIcons({ iconoirExpand, iconoirReduce })],
+  templateUrl: './truncated-text.component.html',
+  styles: [],
+})
+export class TruncatedTextComponent implements AfterViewInit, OnDestroy {
+  @Input() text = ''
+  @Input() extraClass = ''
+
+  @ViewChild('textElement') textElement: ElementRef<HTMLElement>
+  isTextTruncated = false
+  isOpen = false
+  overlayPosition: ConnectedPosition = {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+  }
+  private readonly resizeObserver: ResizeObserver
+  private readonly mutationObserver: MutationObserver
+  private readonly viewportSubscription: Subscription
+
+  constructor(
+    private readonly cd: ChangeDetectorRef,
+    private readonly ngZone: NgZone,
+    private readonly viewportRuler: ViewportRuler
+  ) {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.ngZone.run(() => this.checkTextTruncation())
+    })
+
+    this.mutationObserver = new MutationObserver(() => {
+      this.ngZone.run(() => {
+        this.checkTextTruncation()
+        this.close()
+      })
+    })
+
+    this.viewportSubscription = this.viewportRuler.change().subscribe(() => {
+      if (this.isOpen) {
+        this.updateOverlayPosition()
+      }
+    })
+  }
+
+  ngAfterViewInit() {
+    const element = this.textElement.nativeElement
+    this.resizeObserver?.observe(element)
+    this.mutationObserver?.observe(element.parentElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    })
+    this.checkTextTruncation()
+  }
+
+  ngOnDestroy() {
+    this.resizeObserver?.disconnect()
+    this.mutationObserver?.disconnect()
+    this.viewportSubscription?.unsubscribe()
+    this.close()
+  }
+
+  toggleOverlay() {
+    this.isOpen = !this.isOpen
+    if (this.isOpen) {
+      this.updateOverlayPosition()
+    }
+  }
+
+  private updateOverlayPosition() {
+    const element = this.textElement.nativeElement
+    const rect = element.getBoundingClientRect()
+    const viewportWidth = this.viewportRuler.getViewportSize().width
+    const isMobile = viewportWidth < 640
+    const overlayWidth = isMobile ? 190 : 320
+    const isNearLeftEdge = rect.left < overlayWidth
+
+    this.overlayPosition = {
+      originX: isNearLeftEdge ? 'start' : 'end',
+      originY: 'top',
+      overlayX: isNearLeftEdge ? 'start' : 'end',
+      overlayY: 'top',
+    }
+  }
+
+  close() {
+    this.isOpen = false
+  }
+
+  private checkTextTruncation() {
+    const element = this.textElement.nativeElement
+
+    this.isTextTruncated = element.scrollWidth > element.clientWidth
+    this.cd.detectChanges()
+  }
+}

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

@@ -7,11 +7,7 @@ import { NgIconComponent, provideNgIconsConfig } from '@ng-icons/core'
 
 @NgModule({
   imports: [CommonModule, TranslateModule.forChild(), NgIconComponent],
-  providers: [
-    provideNgIconsConfig({
-      size: '0.9em',
-    }),
-  ],
+  providers: [],
   declarations: [StickyHeaderComponent, AnchorLinkDirective],
   exports: [StickyHeaderComponent, AnchorLinkDirective],
 })

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

@@ -3,3 +3,4 @@ export * from './lib/components/map-container/map-settings.token'
 export * from './lib/components/feature-detail/feature-detail.component'
 export * from './lib/components/map-legend/map-legend.component'
 export * from './lib/map-utils'
+export * from './lib/components/spatial-extent/spatial-extent.component'

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="feature" class="root">
-  <div class="property" *ngFor="let propName of properties">
-    <div>{{ propName }}</div>
-    <div class="font-bold">{{ feature.properties[propName] }}</div>
+  <div class="property" *ngFor="let prop of properties | keyvalue">
+    <div>{{ prop.key }}</div>
+    <div class="font-bold">{{ prop.value }}</div>
   </div>
 </div>

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import type { Feature } from 'geojson'
+import { DatasetFeatureCatalog } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 const geometryKeys = ['geometry', 'the_geom']
 
@@ -14,11 +15,34 @@ const geometryKeys = ['geometry', 'the_geom']
 })
 export class FeatureDetailComponent {
   @Input() feature: Feature
+  _featureAttributes = []
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    if (value) this._featureAttributes = value.featureTypes[0].attributes
+  }
 
   get properties() {
     if (!this.feature) return []
-    return Object.keys(this.feature.properties).filter(
-      (prop) => !geometryKeys.includes(prop)
-    )
+    return this.setProperties()
+  }
+
+  setProperties() {
+    const properties = Object.keys(this.feature.properties)
+      .filter((p) => !geometryKeys.includes(p))
+      .reduce((acc, p) => {
+        let key = p
+        if (this._featureAttributes.length) {
+          const matchingAttribute = this._featureAttributes.find(
+            (attr) => attr.name === p
+          )
+
+          if (matchingAttribute && matchingAttribute.code) {
+            key = matchingAttribute.code
+          }
+        }
+        acc[key] = this.feature.properties[p]
+        return acc
+      }, {})
+
+    return properties
   }
 }

package/src/libs/ui/map/src/lib/components/spatial-extent/spatial-extent.component.html

@@ -0,0 +1,4 @@
+<gn-ui-map-container
+  class="h-full w-full"
+  [context]="mapContext$ | async"
+></gn-ui-map-container>

package/src/libs/{feature/editor/src/lib/components/record-form/form-field/form-field-map-container/form-field-map-container.component.ts → ui/map/src/lib/components/spatial-extent/spatial-extent.component.ts}

@@ -1,27 +1,26 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { Geometry } from 'geojson'
 import GeoJSON, { GeoJSONFeatureCollection } from 'ol/format/GeoJSON'
-import { DatasetSpatialExtent } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { Polygon } from 'ol/geom'
 import {
   createViewFromLayer,
   MapContext,
   MapContextLayer,
 } from '@geospatial-sdk/core'
-import { MapContainerComponent } from '../../../../../../../../../libs/ui/map/src'
+import { MapContainerComponent } from '../map-container/map-container.component'
 import { BehaviorSubject, Observable } from 'rxjs'
 import { switchMap } from 'rxjs/operators'
+import { DatasetSpatialExtent } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
-  selector: 'gn-ui-form-field-map-container',
+  selector: 'gn-ui-spatial-extent',
   standalone: true,
   imports: [CommonModule, MapContainerComponent],
-  templateUrl: './form-field-map-container.component.html',
-  styleUrls: ['./form-field-map-container.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './spatial-extent.component.html',
+  styleUrl: './spatial-extent.component.css',
 })
-export class FormFieldMapContainerComponent {
+export class SpatialExtentComponent {
   @Input() set spatialExtents(value: DatasetSpatialExtent[]) {
     this.spatialExtents$.next(value)
   }
@@ -58,6 +57,7 @@ export class FormFieldMapContainerComponent {
         style: {
           'stroke-color': 'black',
           'stroke-width': 2,
+          'fill-color': 'rgba(153, 153, 153, 0.3)',
         },
       }
       const view = await createViewFromLayer(layer)

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

@@ -16,5 +16,7 @@ export * from './lib/record-preview-text/record-preview-text.component'
 export * from './lib/record-preview-title/record-preview-title.component'
 export * from './lib/record-metric/record-metric.component'
 export * from './lib/results-list-item/results-list-item.component'
+export * from './lib/results-hits-search-kind/results-hits-search-kind.component'
 export * from './lib/results-hits-number/results-hits-number.component'
 export * from './lib/results-table/results-table.component'
+export * from './lib/results-table/action-menu/action-menu.component'

package/src/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html

@@ -1,82 +1,10 @@
-<a
-  class="group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap"
-  [title]="record.title"
-  [attr.href]="linkHref"
+<gn-ui-internal-link-card
+  [linkHref]="linkHref"
+  [linkTarget]="linkTarget"
+  [record]="record"
+  [favoriteTemplate]="favoriteTemplate"
+  [metadataQualityDisplay]="metadataQualityDisplay"
+  (mdSelect)="mdSelect.emit($event)"
+  size="L"
 >
-  <div class="shrink-0 w-full sm:w-52">
-    <div
-      class="overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36"
-    >
-      <gn-ui-thumbnail
-        class="relative h-full w-full object-cover object-left-top"
-        [thumbnailUrl]="[
-          record.overviews?.[0]?.url?.toString(),
-          organization?.logoUrl?.toString(),
-        ]"
-        [fit]="['cover', 'contain']"
-      ></gn-ui-thumbnail>
-    </div>
-  </div>
-  <div
-    class="content grid grow relative sm:pl-6 sm:pr-12"
-    style="grid-template-columns: auto 70px"
-  >
-    <div class="mb-3 mt-5 sm:mt-2">
-      <div
-        class="font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors"
-        data-cy="recordTitle"
-      >
-        {{ record.title }}
-      </div>
-    </div>
-    <div
-      class="abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0"
-      data-cy="recordAbstract"
-    >
-      <gn-ui-markdown-parser
-        [textContent]="abstract"
-        whitoutStyles="true"
-      ></gn-ui-markdown-parser>
-    </div>
-    <div
-      class="text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1"
-      data-cy="recordOrg"
-      [class]="metadataQualityDisplay ? 'limit-organisation-with-quality' : ''"
-    >
-      {{ organization?.name }}
-    </div>
-    <div
-      class="icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]"
-    >
-      <ng-icon
-        *ngIf="isDownloadable"
-        class="text-primary opacity-45 mx-1"
-        name="matCloudDownloadOutline"
-      ></ng-icon>
-      <ng-icon
-        *ngIf="isViewable"
-        class="text-primary opacity-45 mx-1"
-        name="matMapOutline"
-      ></ng-icon>
-    </div>
-    <div
-      *ngIf="metadataQualityDisplay"
-      class="col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]"
-    >
-      <gn-ui-metadata-quality
-        [smaller]="true"
-        [metadata]="record"
-        [metadataQualityDisplay]="metadataQualityDisplay"
-      ></gn-ui-metadata-quality>
-    </div>
-    <div
-      class="text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]"
-      data-cy="recordFav"
-    >
-      <ng-container
-        [ngTemplateOutlet]="favoriteTemplate"
-        [ngTemplateOutletContext]="{ $implicit: record }"
-      ></ng-container>
-    </div>
-  </div>
-</a>
+</gn-ui-internal-link-card>

package/src/libs/ui/search/src/lib/results-hits-number/results-hits-number.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="!loading" class="w-full">
-  <span translate [translateParams]="{ hits: hits }"
+  <span data-cy="resultsHitsFound" translate [translateParams]="{ hits: hits }"
     >results.records.hits.found</span
   >
   <p

package/src/libs/ui/search/src/lib/results-hits-search-kind/results-hits-search-kind.component.html

@@ -0,0 +1,25 @@
+<gn-ui-inline-filter
+  [choices]="availableChoices"
+  [selected]="selected"
+  (selectValues)="onSelectedValues($event)"
+>
+  <ng-template let-choice>
+    <gn-ui-kind-badge
+      [styling]="'custom'"
+      [kind]="choice.value"
+      [contentTemplate]="customTemplate"
+      class="gn-ui-btn-outline rounded-md py-2 px-2 border-gray-400 cursor-pointer focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black"
+      [ngClass]="{
+        '!bg-primary-lightest hover:bg-primary-lightest':
+          isSelectedChoice(choice.value) || isAllChoice(choice.value),
+      }"
+    >
+      <ng-template #customTemplate>
+        {{ 'search.filters.recordKind.' + choice.value | translate
+        }}<span class="ml-1" *ngIf="isSelectedChoice(choice.value)"
+          >({{ choice.count }})</span
+        >
+      </ng-template>
+    </gn-ui-kind-badge>
+  </ng-template>
+</gn-ui-inline-filter>

package/src/libs/ui/search/src/lib/results-hits-search-kind/results-hits-search-kind.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  Output,
+} from '@angular/core'
+import { Choice } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-results-hits-search-kind',
+  templateUrl: './results-hits-search-kind.component.html',
+})
+export class ResultsHitsSearchKindComponent implements OnChanges {
+  @Input() selected: string[] = []
+  @Input() choices: Choice[] = []
+  @Output() selectionChanged = new EventEmitter<string[]>()
+
+  availableChoices: Choice[] = []
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.choices && changes.choices.currentValue) {
+      this.availableChoices = this.buildFilterChoices(this.choices)
+    }
+  }
+
+  buildFilterChoices(availableValues: Choice[]) {
+    return [
+      ...[
+        {
+          label: 'all',
+          value: 'all',
+        },
+      ],
+      ...availableValues,
+    ]
+  }
+
+  onSelectedValues(values: string[]) {
+    const selectedValues = values.includes('all') ? [] : values
+
+    this.selectionChanged.emit(selectedValues)
+  }
+
+  isSelectedChoice(choiceValue: string) {
+    return this.selected.includes(choiceValue)
+  }
+
+  isAllChoice(choiceValue: string) {
+    return this.selected.length === 0 && choiceValue === 'all'
+  }
+}

package/src/libs/ui/search/src/lib/results-list/results-layout.config.ts

@@ -32,9 +32,9 @@ export const DEFAULT_RESULTS_LAYOUT_CONFIG: ResultsLayoutConfigModel = {
   ),
   ROW: new ResultsLayoutConfigItem(
     RecordPreviewRowComponent,
-    'pt-4 pb-5 sm:py-7',
+    'py-2',
     '',
-    'grid grid-cols-1 divide-y divide-gray-300'
+    'grid grid-cols-1 divide-y divide-gray-100'
   ),
   FEED: new ResultsLayoutConfigItem(
     RecordPreviewFeedComponent,

package/src/libs/ui/search/src/lib/results-list/results-list.component.html

@@ -6,6 +6,7 @@
       *ngFor="let record of records"
     >
       <gn-ui-results-list-item
+        [attr.data-cy]="record.uniqueIdentifier"
         [record]="record"
         [layoutConfig]="layoutConfig"
         [metadataQualityDisplay]="metadataQualityDisplay"

package/src/libs/ui/search/src/lib/results-list/results-list.component.ts

@@ -3,7 +3,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnInit,
   Output,
   TemplateRef,
 } from '@angular/core'

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.html

@@ -6,7 +6,7 @@
     >
       <ul class="flex flex-col gap-2 w-full">
         <gn-ui-button
-          *ngIf="!isDraftPage"
+          *ngIf="page === 'main'"
           type="light"
           extraClass="flex flex-row items-center gap-2 w-full justify-start"
           (buttonClick)="duplicate.emit()"
@@ -18,14 +18,22 @@
             >record.action.duplicating</span
           ></gn-ui-button
         >
+        <gn-ui-button
+          *ngIf="page === 'record'"
+          type="light"
+          extraClass="flex flex-row items-center gap-2 w-full justify-start"
+          (buttonClick)="switch.emit()"
+          data-test="record-menu-switch-button"
+          ><span translate>record.action.switchLang</span></gn-ui-button
+        >
         <gn-ui-button
           type="light"
           extraClass="flex flex-row items-center gap-2 w-full justify-start"
           (buttonClick)="displayDeleteMenu()"
           [disabled]="!canDelete"
           data-test="record-menu-delete-button"
-          ><span *ngIf="!isDraftPage" translate>record.action.delete</span>
-          <span *ngIf="isDraftPage" translate
+          ><span *ngIf="page !== 'draft'" translate>record.action.delete</span>
+          <span *ngIf="page === 'draft'" translate
             >record.action.rollback</span
           ></gn-ui-button
         >

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts

@@ -30,13 +30,14 @@ type ActionMenuPage = 'mainMenu' | 'deleteMenu' | 'rollbackMenu'
   ],
 })
 export class ActionMenuComponent {
-  @Input() canDuplicate: boolean
-  @Input() canDelete: boolean
-  @Input() isDraftPage: boolean
+  @Input() canDuplicate = true
+  @Input() canDelete = true
+  @Input() page: 'draft' | 'main' | 'record'
   @Output() duplicate = new EventEmitter<void>()
   @Output() delete = new EventEmitter<void>()
   @Output() closeActionMenu = new EventEmitter<void>()
   @Output() rollback = new EventEmitter<void>()
+  @Output() switch = new EventEmitter<void>()
 
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
 
@@ -47,20 +48,22 @@ export class ActionMenuComponent {
     private cdr: ChangeDetectorRef
   ) {}
 
-  openMenu() {
-    this.trigger.openMenu()
-  }
-
   displayMainMenu() {
     this.sectionDisplayed = 'mainMenu'
     this.cdr.markForCheck()
   }
 
   displayDeleteMenu() {
-    if (this.isDraftPage) {
-      this.sectionDisplayed = 'rollbackMenu'
-    } else {
-      this.sectionDisplayed = 'deleteMenu'
+    switch (this.page) {
+      case 'draft':
+        this.sectionDisplayed = 'rollbackMenu'
+        break
+      case 'record':
+        this.delete.emit()
+        break
+      case 'main':
+      default:
+        this.sectionDisplayed = 'deleteMenu'
     }
     this.cdr.markForCheck()
   }

package/src/libs/ui/search/src/lib/results-table/results-table.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-height: 40px;
+  --gn-ui-button-width: 40px;
+}