geonetwork-ui 2.4.0-dev.618ec561 → 2.4.0-dev.66a33793

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -1,4 +1,10 @@
-import { Component, EventEmitter, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+} from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
 import { SelectionService } from '../../../../../../libs/api/repository/src'
@@ -6,6 +12,9 @@ import { SearchService } from '../utils/service/search.service'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
 import { CommonModule } from '@angular/common'
+import { Subscription } from 'rxjs'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-results-table-container',
@@ -14,10 +23,12 @@ import { CommonModule } from '@angular/common'
   standalone: true,
   imports: [CommonModule, ResultsTableComponent],
 })
-export class ResultsTableContainerComponent {
+export class ResultsTableContainerComponent implements OnDestroy {
   @Output() recordClick = new EventEmitter<CatalogRecord>()
   @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
 
+  subscription = new Subscription()
+
   records$ = this.searchFacade.results$
   selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
   sortBy$ = this.searchFacade.sortBy$
@@ -25,11 +36,16 @@ export class ResultsTableContainerComponent {
   hasDraft = (record: CatalogRecord): boolean =>
     this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
 
+  isUnsavedDraft = (record: CatalogRecord): boolean =>
+    this.recordsRepository.isRecordNotYetSaved(record.uniqueIdentifier)
+
   constructor(
     private searchFacade: SearchFacade,
     private searchService: SearchService,
     private selectionService: SelectionService,
-    private recordsRepository: RecordsRepositoryInterface
+    private recordsRepository: RecordsRepositoryInterface,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService
   ) {}
 
   handleRecordClick(item: unknown) {
@@ -40,6 +56,44 @@ export class ResultsTableContainerComponent {
     this.duplicateRecord.emit(item as CatalogRecord)
   }
 
+  async handleDeleteRecord(item: unknown) {
+    const uniqueIdentifier = (item as CatalogRecord).uniqueIdentifier
+    this.subscription.add(
+      this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
+        next: () => {
+          this.recordsRepository.clearRecordDraft(uniqueIdentifier)
+          this.searchFacade.requestNewResults()
+          this.notificationsService.showNotification(
+            {
+              type: 'success',
+              title: this.translateService.instant(
+                'editor.record.deleteSuccess.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.deleteSuccess.body'
+              )}`,
+            },
+            2500
+          )
+        },
+        error: (error) => {
+          this.notificationsService.showNotification({
+            type: 'error',
+            title: this.translateService.instant(
+              'editor.record.deleteError.title'
+            ),
+            text: `${this.translateService.instant(
+              'editor.record.deleteError.body'
+            )} ${error}`,
+            closeMessage: this.translateService.instant(
+              'editor.record.deleteError.closeMessage'
+            ),
+          })
+        },
+      })
+    )
+  }
+
   handleSortByChange(col: string, order: 'asc' | 'desc') {
     this.searchService.setSortBy([order, col])
   }
@@ -51,4 +105,8 @@ export class ResultsTableContainerComponent {
       this.selectionService.selectRecords(records)
     }
   }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
 }

package/src/libs/feature/search/src/lib/state/fixtures/search-state.fixtures.ts

@@ -1,4 +1,4 @@
-export const SEARCH_STATE_FILTERS_FIXTURE = {
+export const searchStateFiltersFixture = () => ({
   recursiveTerms: {
     resourceType: {
       service: {
@@ -26,4 +26,4 @@ export const SEARCH_STATE_FILTERS_FIXTURE = {
       availableInViewService: '+linkProtocol:/OGC:WMS.*/',
     },
   },
-}
+})

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -8,6 +8,7 @@ import {
   Paginate,
   RequestMoreOnAggregation,
   RequestMoreResults,
+  RequestNewResults,
   SetConfigAggregations,
   SetConfigFilters,
   SetConfigRequestFields,
@@ -151,6 +152,11 @@ export class SearchFacade {
     return this
   }
 
+  requestNewResults(): SearchFacade {
+    this.store.dispatch(new RequestNewResults(this.searchId))
+    return this
+  }
+
   requestMoreOnAggregation(key: string, increment: number): SearchFacade {
     this.store.dispatch(
       new RequestMoreOnAggregation(key, increment, this.searchId)

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,7 +5,6 @@ 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'
@@ -15,7 +14,6 @@ import { RouterLink } from '@angular/router'
   declarations: [
     CatalogTitleComponent,
     OrganisationPreviewComponent,
-    OrganisationsFilterComponent,
     LanguageSwitcherComponent,
     OrganisationsResultComponent,
   ],
@@ -30,7 +28,6 @@ import { RouterLink } from '@angular/router'
   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/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,5 +1,6 @@
 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'
@@ -18,7 +19,7 @@ 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/sortable-list/sortable-list.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
+export * from './lib/user-feedback-item/user-feedback-item.component'

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/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,21 +1,14 @@
-<div class="h-full flex flex-col">
-  <p
-    *ngIf="helperText"
-    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

@@ -29,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/record-api-form/record-api-form.component.html

@@ -21,7 +21,7 @@
             class="mr-2 w-20"
             (valueChange)="setLimit($event)"
             [value]="displayLimit$ | async"
-            hint=""
+            placeholder=""
           >
           </gn-ui-text-input>
           <div class="flex items-center">
@@ -47,7 +47,7 @@
             [value]="offset$ | async"
             [disabled]="!supportOffset"
             (valueChange)="supportOffset ? setOffset($event) : null"
-            hint=""
+            placeholder=""
           >
           </gn-ui-text-input>
           <div

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

@@ -20,7 +20,11 @@ import { MetadataQualityItemComponent } from './metadata-quality-item/metadata-q
 import { ErrorComponent } from './error/error.component'
 import { PaginationComponent } from './pagination/pagination.component'
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
-import { BadgeComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import {
+  BadgeComponent,
+  TextInputComponent,
+  UiInputsModule,
+} from '../../../../../libs/ui/inputs/src'
 import { FormsModule } from '@angular/forms'
 import { AvatarComponent } from './avatar/avatar.component'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
@@ -51,6 +55,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     TimeSincePipe,
     BadgeComponent,
     MaxLinesComponent,
+    TextInputComponent,
   ],
   declarations: [
     MetadataInfoComponent,

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

@@ -19,5 +19,10 @@ export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/text-area/text-area.component'
 export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
+export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/previous-next-buttons/previous-next-buttons.component'
+export * from './lib/switch-toggle/switch-toggle.component'
+export * from './lib/file-input/file-input.component'
+export * from './lib/image-input/image-input.component'
+export * from './lib/url-input/url-input.component'

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.css

@@ -1,28 +1,35 @@
-:host {
-  --input-height: 3.5em;
+span {
+  --icon-padding: var(--gn-ui-text-input-border-size, 2px);
+  --icon-width: calc(var(--gn-ui-text-input-padding, 0.6em) * 2 + 1.25em);
 }
-.clear-btn {
-  width: var(--input-height);
-  height: 100%;
+/* this is because we don't want to change the popup alert font size */
+span > *:not(gn-ui-popup-alert) {
+  font-size: var(--gn-ui-text-input-font-size, 1em);
 }
-.search-btn {
-  width: var(--input-height);
-  height: 100%;
-  border-left-width: 0.1em;
+
+input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+gn-ui-button {
+  --gn-ui-button-rounded: 0;
+  --gn-ui-button-width: var(--icon-width);
+  --gn-ui-button-padding: 0;
+  font-size: 1em;
 }
 mat-icon {
   width: 100%;
   height: 100%;
-  padding: 0.65em;
-  font-size: 1.5em;
-}
-input {
-  height: var(--input-height);
-  padding: 1.05em;
-  padding-right: calc(2 * var(--input-height));
+  font-size: calc(
+    0.9em + 11px
+  ); /* this formula gives a good icon size across different font size values */
+  line-height: 0.8em;
+  display: grid;
+  align-items: center;
+  justify-content: center;
 }
-input:placeholder-shown {
-  text-overflow: ellipsis;
+gn-ui-button:last-of-type {
+  --gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, 0.25em)
+    var(--gn-ui-text-input-rounded, 0.25em) 0;
 }
 
 .mat-mdc-option.suggestion.mat-mdc-option-active {

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -1,34 +1,47 @@
-<div class="relative">
+<span class="w-full inline-block relative">
+  <div
+    class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none"
+    *ngIf="!allowSubmit"
+  >
+    <mat-icon class="material-symbols-outlined text-primary"> search </mat-icon>
+  </div>
   <input
     #searchInput
     type="text"
-    class="appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]"
+    class="gn-ui-text-input"
+    [ngClass]="{
+      'px-[--icon-width]': !allowSubmit
+    }"
     [placeholder]="placeholder"
     [formControl]="control"
     [matAutocomplete]="auto"
     (keyup.enter)="handleEnter(searchInput.value)"
   />
-  <div class="flex flex-row absolute inset-y-0 right-0">
-    <button
-      type="button"
-      class="text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100 clear-btn"
-      *ngIf="searchInput.value"
-      aria-label="Clear"
-      (click)="clear()"
-    >
-      <mat-icon class="material-symbols-outlined">close</mat-icon>
-    </button>
-    <button
-      type="button"
-      class="text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 transition-all duration-100 search-btn rounded-r"
-      aria-label="Trigger search"
-      *ngIf="allowSubmit"
-      data-test="autocomplete-submit-btn"
-      (click)="handleClickSearch()"
-    >
-      <mat-icon class="material-symbols-outlined">search</mat-icon>
-    </button>
-  </div>
+  <gn-ui-button
+    type="light"
+    extraClass="border-0 text-primary-lightest hover:text-primary focus:text-primary absolute inset-y-[--icon-padding] {{
+      allowSubmit
+        ? 'right-[calc(var(--icon-width)+var(--icon-padding))]'
+        : 'right-[--icon-padding]'
+    }}"
+    data-test="clear-btn"
+    *ngIf="searchInput.value"
+    aria-label="Clear"
+    (buttonClick)="clear()"
+  >
+    <mat-icon class="material-symbols-outlined">close</mat-icon>
+  </gn-ui-button>
+  <gn-ui-button
+    type="light"
+    extraClass="border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]"
+    aria-label="Trigger search"
+    *ngIf="allowSubmit"
+    data-test="autocomplete-submit-btn"
+    (buttonClick)="handleClickSearch()"
+  >
+    <mat-icon class="material-symbols-outlined">search</mat-icon>
+  </gn-ui-button>
+
   <gn-ui-popup-alert
     *ngIf="error"
     class="absolute mt-2 w-full top-[100%] left-0"
@@ -39,7 +52,8 @@
     <span translate>search.autocomplete.error</span>
     {{ error }}
   </gn-ui-popup-alert>
-</div>
+</span>
+
 <mat-autocomplete
   #auto="matAutocomplete"
   (optionSelected)="handleSelection($event)"