geonetwork-ui 2.4.0-dev.4e4ab1af → 2.4.0-dev.503109c9

package/src/libs/feature/map/src/lib/style/map-style.fixtures.ts

@@ -4,42 +4,44 @@ const colorPrimary = 'blue'
 const colorSecondary = 'red'
 const colorStroke = 'white'
 
-export const DEFAULT_STYLE_FIXTURE = new Style({
-  image: new Circle({
+export const defaultMapStyleFixture = (): Style =>
+  new Style({
+    image: new Circle({
+      fill: new Fill({
+        color: colorPrimary,
+      }),
+      stroke: new Stroke({
+        color: colorStroke,
+        width: 2,
+      }),
+      radius: 5,
+    }),
     fill: new Fill({
-      color: colorPrimary,
+      color: 'rgba(0,0,255,0.25)',
     }),
     stroke: new Stroke({
       color: colorStroke,
       width: 2,
     }),
-    radius: 5,
-  }),
-  fill: new Fill({
-    color: 'rgba(0,0,255,0.25)',
-  }),
-  stroke: new Stroke({
-    color: colorStroke,
-    width: 2,
-  }),
-})
+  })
 
-export const DEFAULT_STYLE_HL_FIXTURE = new Style({
-  image: new Circle({
+export const defaultMapStyleHlFixture = (): Style =>
+  new Style({
+    image: new Circle({
+      fill: new Fill({
+        color: colorSecondary,
+      }),
+      stroke: new Stroke({
+        color: colorStroke,
+        width: 3,
+      }),
+      radius: 6,
+    }),
     fill: new Fill({
-      color: colorSecondary,
+      color: 'rgba(255,0,0,0.25)',
     }),
     stroke: new Stroke({
-      color: colorStroke,
+      color: colorSecondary,
       width: 3,
     }),
-    radius: 6,
-  }),
-  fill: new Fill({
-    color: 'rgba(255,0,0,0.25)',
-  }),
-  stroke: new Stroke({
-    color: colorSecondary,
-    width: 3,
-  }),
-})
+  })

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -32,7 +32,7 @@ import { ProxyService } from '../../../../../../libs/util/shared/src'
 import { WmsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
 import { LONLAT_CRS_CODES } from '../constant/projections'
 import { fromEPSGCode, register } from 'ol/proj/proj4'
-import proj4 from 'proj4/dist/proj4'
+import proj4 from 'proj4'
 import { defaults as defaultControls } from 'ol/control/defaults'
 
 const FEATURE_PROJECTION = 'EPSG:3857'
@@ -220,11 +220,15 @@ export class MapUtilsService {
     if (!('spatialExtents' in record) || record.spatialExtents.length === 0) {
       return null
     }
-    // transform an array of geojson geometries into a bbox
+    // extend all the spatial extents into an including bbox
     const totalExtent = record.spatialExtents.reduce(
       (prev, curr) => {
-        const geom = GEOJSON.readGeometry(curr.geometry)
-        return extend(prev, geom.getExtent())
+        if ('bbox' in curr) return extend(prev, curr.bbox)
+        else if ('geometry' in curr) {
+          const geom = GEOJSON.readGeometry(curr.geometry)
+          return extend(prev, geom.getExtent())
+        }
+        return prev
       },
       [Infinity, Infinity, -Infinity, -Infinity]
     )

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html

@@ -6,6 +6,6 @@
   (inputSubmitted)="handleInputSubmission($event)"
   (inputCleared)="handleInputCleared()"
   [value]="searchInputValue$ | async"
-  [clearOnSelection]="true"
+  [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
 ></gn-ui-autocomplete>

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

@@ -1,10 +1,12 @@
 <gn-ui-results-table
   [records]="records$ | async"
-  [recordHasDraft]="hasDraft"
+  [hasDraft]="hasDraft"
   [selectedRecordsIdentifiers]="selectedRecords$ | async"
   [sortOrder]="sortBy$ | async"
+  [isUnsavedDraft]="isUnsavedDraft"
   (recordClick)="handleRecordClick($event)"
   (duplicateRecord)="handleDuplicateRecord($event)"
+  (deleteRecord)="handleDeleteRecord($event)"
   (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
   (sortByChange)="handleSortByChange($event[0], $event[1])"
 ></gn-ui-results-table>

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

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/markdown-editor/markdown-editor.component.html

@@ -1,5 +1,8 @@
 <div class="h-full flex flex-col">
-  <p class="flex-none mb-2 font-medium text-sm text-gray-900">
+  <p
+    *ngIf="helperText"
+    class="flex-none mb-2 font-medium text-sm text-gray-900"
+  >
     {{ helperText }}
   </p>
   <div class="flex-1" [hidden]="preview">

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

@@ -2,9 +2,10 @@
 :host ::ng-deep .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  margin: 0px 0px 1.5rem 0px;
+  margin: 0;
   line-height: 1.5;
   word-wrap: break-word;
+  height: 100%;
 }
 
 /** Emphasis **/

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
+  <mat-icon class="material-symbols-outlined min-w-fit">{{ icon }}</mat-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>

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/sortable-list/sortable-list.component.html

@@ -1,18 +1,11 @@
-<div class="flex gap-2 mb-2">
-  <gn-ui-button
-    *ngFor="let addOption of addOptions"
-    (buttonClick)="add.emit(addOption.eventName)"
-  >
-    <span class="material-symbols-outlined gn-ui-icon-small"> add </span>
-    &nbsp;{{ addOption.buttonLabel }}</gn-ui-button
-  >
-</div>
 <div
   cdkDropList
   class="sortable-list flex flex-col gap-3 p-2"
   (cdkDropListDropped)="drop($event)"
 >
-  <ng-container *ngFor="let element of elements; index as index">
+  <ng-container
+    *ngFor="let element of elements; index as index; trackBy: trackByFn"
+  >
     <div class="sortable-box bg-white flex items-center" cdkDrag>
       <span
         cdkDragHandle

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

@@ -15,11 +15,10 @@ import {
   Type,
 } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
-import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 
-type DynamicElement = {
-  component: Type<any>
-  inputs: Record<string, any>
+export type DynamicElement = {
+  component: Type<unknown>
+  inputs: Record<string, unknown>
 }
 
 @Component({
@@ -35,14 +34,11 @@ type DynamicElement = {
     CdkDrag,
     CdkDragHandle,
     MatIconModule,
-    ButtonComponent,
   ],
 })
 export class SortableListComponent {
   @Input() elements: Array<DynamicElement>
-  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }>
   @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
-  @Output() add = new EventEmitter<string>()
 
   drop(event: CdkDragDrop<string[]>) {
     moveItemInArray(this.elements, event.previousIndex, event.currentIndex)
@@ -53,4 +49,8 @@ export class SortableListComponent {
     this.elements = this.elements.filter((_, i) => i !== index)
     this.elementsChange.emit(this.elements)
   }
+
+  trackByFn(index: number) {
+    return index
+  }
 }

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

@@ -9,7 +9,7 @@ import { ContentGhostComponent } from './content-ghost/content-ghost.component'
 import { DownloadItemComponent } from './download-item/download-item.component'
 import { DownloadsListComponent } from './downloads-list/downloads-list.component'
 import { ApiCardComponent } from './api-card/api-card.component'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { PopoverComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
@@ -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'
@@ -45,11 +49,13 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     UiInputsModule,
     FormsModule,
     NgOptimizedImage,
+    PopoverComponent,
     MarkdownParserComponent,
     ThumbnailComponent,
     TimeSincePipe,
     BadgeComponent,
     MaxLinesComponent,
+    TextInputComponent,
   ],
   declarations: [
     MetadataInfoComponent,

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

@@ -21,3 +21,4 @@ export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 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'

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

@@ -61,6 +61,7 @@ export class AutocompleteComponent
   @Input() action: (value: string) => Observable<AutocompleteItem[]>
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
+  @Input() preventCompleteOnSelection = false
   @Input() autoFocus = false
   @Input() minCharacterCount? = 3
   @Input() allowSubmit = true
@@ -206,13 +207,24 @@ export class AutocompleteComponent
     this.inputSubmitted.emit(this.inputRef.nativeElement.value)
   }
 
+  /**
+   * This function is triggered when an item is selected in the list of displayed items.
+   * If preventCompleteOnSelection is true then the input will be left as entered by the user.
+   * If preventCompleteOnSelection is false (by default) then the input will be completed with the item selected by the user.
+   * If clearOnSelection is true then the input will be cleared upon selection.
+   * @param event
+   */
   handleSelection(event: MatAutocompleteSelectedEvent) {
     this.cancelEnter = true
     this.itemSelected.emit(event.option.value)
-    if (this.clearOnSelection) {
-      this.lastInputValue$.pipe(first()).subscribe((any) => {
-        this.inputRef.nativeElement.value = any
+    if (this.preventCompleteOnSelection) {
+      this.lastInputValue$.pipe(first()).subscribe((lastInputValue) => {
+        this.inputRef.nativeElement.value = lastInputValue
       })
+      return
+    }
+    if (this.clearOnSelection) {
+      this.inputRef.nativeElement.value = ''
     }
   }
 }