geonetwork-ui 2.11.0-dev.0504d85cc → 2.11.0-dev.0559cfd9d

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.html

@@ -13,7 +13,13 @@
     (bboxChange)="onBboxChange($event)"
     (errorChange)="onSpatialExtentError($event)"
     [attr.data-cy-field]="fieldName"
-  ></gn-ui-spatial-extent-dropdown>
+  >
+    <gn-ui-location-search
+      [placeholder]="'search.filters.spatialExtent.searchLocation' | translate"
+      (bboxSelected)="onLocationSelected($event)"
+      data-cy="locationSearch"
+    ></gn-ui-location-search>
+  </gn-ui-spatial-extent-dropdown>
 } @else {
   <gn-ui-dropdown-multiselect
     class="w-full"

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts

@@ -1,8 +1,10 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  InjectionToken,
   Input,
   OnInit,
+  ViewChild,
   inject,
 } from '@angular/core'
 import {
@@ -26,8 +28,20 @@ import { DateRange } from '../../../../../../libs/api/repository/src'
 import { CommonModule } from '@angular/common'
 import { BoundingBox } from '../../../../../../libs/util/shared/src'
 import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
-import { TranslateService } from '@ngx-translate/core'
-import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  LocationBbox,
+  LocationSearchComponent,
+} from '../location-search/location-search.component'
+
+marker('search.filters.spatialExtent.searchLocation')
+
+// in MB, null means no limit
+export const SPATIAL_EXTENT_MAX_FILE_SIZE = new InjectionToken<number | null>(
+  'spatialExtentMaxFileSize',
+  { factory: () => null }
+)
 
 @Component({
   selector: 'gn-ui-filter-dropdown',
@@ -40,6 +54,8 @@ import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/
     DateRangeDropdownComponent,
     DropdownMultiselectComponent,
     SpatialExtentDropdownComponent,
+    LocationSearchComponent,
+    TranslatePipe,
   ],
 })
 export class FilterDropdownComponent implements OnInit {
@@ -52,8 +68,10 @@ export class FilterDropdownComponent implements OnInit {
   @Input() fieldName: string
   @Input() title: string
 
-  spatialExtentMaxFileSize =
-    getOptionalSearchConfig()?.SPATIAL_EXTENT_MAX_FILE_SIZE
+  @ViewChild(SpatialExtentDropdownComponent)
+  spatialExtentDropdown: SpatialExtentDropdownComponent
+
+  spatialExtentMaxFileSize = inject(SPATIAL_EXTENT_MAX_FILE_SIZE)
 
   fieldType: FieldType
   choices$: Observable<Choice[]>
@@ -96,6 +114,10 @@ export class FilterDropdownComponent implements OnInit {
     this.clearSpatialExtentErrorNotification()
   }
 
+  onLocationSelected({ bbox, label }: LocationBbox) {
+    this.spatialExtentDropdown.setLocationBbox(bbox, label)
+  }
+
   onSpatialExtentError(error: SpatialExtentDropdownError) {
     this.clearSpatialExtentErrorNotification()
     this.spatialExtentErrorNotificationId =

package/src/libs/feature/search/src/lib/geocoding/geocoding.service.ts

@@ -5,28 +5,60 @@ import {
   GeocodingResult,
   queryGeonames,
   GeonamesOptions,
-  DataGouvFrOptions,
-  queryDataGouvFr,
+  GeoplateformeOptions,
+  queryGeoplateforme,
 } from '@geospatial-sdk/geocoding'
 import { from, Observable, throwError } from 'rxjs'
 import { catchError } from 'rxjs/operators'
 
 type GeoadminGeocodingProvider = ['geoadmin', GeoadminOptions]
 type GeonamesGeocodingProvider = ['geonames', GeonamesOptions]
-type DataGouvFrGeocodingProvider = ['data-gouv-fr', DataGouvFrOptions]
+type GeoplateformeGeocodingProvider = ['geoplateforme', GeoplateformeOptions]
 export type GeocodingProvider =
   | GeoadminGeocodingProvider
   | GeonamesGeocodingProvider
-  | DataGouvFrGeocodingProvider
+  | GeoplateformeGeocodingProvider
+
+export const DEFAULT_GEOCODING_PROVIDER = [
+  'geonames',
+  { maxRows: 5 },
+] as GeocodingProvider
 
 export const GEOCODING_PROVIDER = new InjectionToken<GeocodingProvider>(
   'geocoding-provider',
   {
     providedIn: 'root',
-    factory: () => ['geonames', { maxRows: 5 }] as GeocodingProvider,
+    factory: (): GeocodingProvider => DEFAULT_GEOCODING_PROVIDER,
   }
 )
 
+// these options are arrays in the providers, but they can be configured
+// with a single value for simplicity
+const GEOCODING_PROVIDER_ARRAY_OPTIONS: {
+  geoadmin: (keyof GeoadminOptions)[]
+  geoplateforme: (keyof GeoplateformeOptions)[]
+} = {
+  geoadmin: ['origins', 'features'],
+  geoplateforme: [
+    'index',
+    'category',
+    'type',
+    'postCode',
+    'cityCode',
+    'depCode',
+  ],
+}
+
+function wrapArrayOptions<T extends object>(options: T, keys: (keyof T)[]): T {
+  const wrapped = { ...options }
+  for (const key of keys) {
+    if (typeof wrapped[key] === 'string') {
+      wrapped[key] = [wrapped[key]] as T[keyof T]
+    }
+  }
+  return wrapped
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -38,7 +70,13 @@ export class GeocodingService {
     switch (this.provider[0]) {
       case 'geoadmin':
         queryObservable = from(
-          queryGeoadmin(text, this.provider[1] as GeoadminOptions)
+          queryGeoadmin(
+            text,
+            wrapArrayOptions(
+              this.provider[1] as GeoadminOptions,
+              GEOCODING_PROVIDER_ARRAY_OPTIONS.geoadmin
+            )
+          )
         )
         break
       case 'geonames':
@@ -46,9 +84,15 @@ export class GeocodingService {
           queryGeonames(text, this.provider[1] as GeonamesOptions)
         )
         break
-      case 'data-gouv-fr':
+      case 'geoplateforme':
         queryObservable = from(
-          queryDataGouvFr(text, this.provider[1] as DataGouvFrOptions)
+          queryGeoplateforme(text, {
+            ...wrapArrayOptions(
+              this.provider[1] as GeoplateformeOptions,
+              GEOCODING_PROVIDER_ARRAY_OPTIONS.geoplateforme
+            ),
+            returnTrueGeometry: true,
+          })
         )
         break
       default:

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

@@ -2,7 +2,17 @@
   [action]="searchAction"
   [displayWithFn]="displayWithFn"
   [placeholder]="placeholder"
-  [displayWithTemplate]="displayWithTemplate"
+  [displayWithTemplate]="defaultItemTpl"
+  [clearOnSelection]="true"
   (itemSelected)="handleItemSelected($event)"
 >
 </gn-ui-autocomplete>
+
+<ng-template #defaultItemTpl let-result>
+  <div class="py-2">
+    @if (getSecondaryLabel(result)) {
+      <div class="gn-ui-card-detail">{{ getSecondaryLabel(result) }}</div>
+    }
+    <div class="gn-ui-card-title">{{ getDisplayLabel(result) }}</div>
+  </div>
+</ng-template>

package/src/libs/feature/search/src/lib/location-search/location-search.component.ts

@@ -3,18 +3,38 @@ import {
   Component,
   EventEmitter,
   inject,
+  InjectionToken,
   Input,
   Output,
-  TemplateRef,
 } from '@angular/core'
 import { Observable } from 'rxjs'
+import pointer from 'jsonpointer'
 import { GeocodingResult } from '@geospatial-sdk/geocoding'
+import { Geometry } from 'geojson'
 import {
   AutocompleteComponent,
   AutocompleteItem,
 } from '../../../../../../libs/ui/inputs/src'
+import { BoundingBox, getGeometryBoundingBox } from '../../../../../../libs/util/shared/src'
 import { GeocodingService } from '../geocoding/geocoding.service'
 
+// JSON Pointers resolved against a geocoding result to build the labels shown in the dropdown
+export interface GeocodingProviderLabels {
+  main?: string
+  secondary?: string
+  tertiary?: string
+}
+
+export interface LocationBbox {
+  bbox: BoundingBox
+  label: string
+}
+
+export const GEOCODING_PROVIDER_LABELS =
+  new InjectionToken<GeocodingProviderLabels>('geocodingProviderLabels', {
+    factory: () => ({}),
+  })
+
 @Component({
   selector: 'gn-ui-location-search',
   templateUrl: './location-search.component.html',
@@ -24,17 +44,71 @@ import { GeocodingService } from '../geocoding/geocoding.service'
 })
 export class LocationSearchComponent {
   private geocodingService = inject(GeocodingService)
+  private labels = inject(GEOCODING_PROVIDER_LABELS)
 
   @Input() placeholder = ''
-  @Input() displayWithTemplate?: TemplateRef<{ $implicit: GeocodingResult }>
   @Output() resultSelected = new EventEmitter<GeocodingResult>()
+  @Output() bboxSelected = new EventEmitter<LocationBbox>()
 
   displayWithFn = (item: AutocompleteItem) => (item as GeocodingResult).label
 
   searchAction = (text: string): Observable<AutocompleteItem[]> =>
     this.geocodingService.query(text)
 
+  getSecondaryLabel(result: GeocodingResult): string | undefined {
+    return this.resolveLabel(result, this.labels.secondary)
+  }
+
+  getMainLabel(result: GeocodingResult): string {
+    return this.resolveLabel(result, this.labels.main) ?? result.label
+  }
+
+  getTertiaryLabel(result: GeocodingResult): string | undefined {
+    return this.resolveLabel(result, this.labels.tertiary)
+  }
+
+  getDisplayLabel(result: GeocodingResult): string {
+    const tertiary = this.getTertiaryLabel(result)
+    return this.getMainLabel(result) + (tertiary ? ', ' + tertiary : '')
+  }
+
+  private resolveLabel(
+    result: GeocodingResult,
+    path?: string
+  ): string | undefined {
+    if (!path) return undefined
+    let value: unknown
+    try {
+      value = pointer.get(result, path)
+    } catch {
+      return undefined
+    }
+    const values = Array.isArray(value) ? value : [value]
+    const label = values
+      .filter((v) => typeof v === 'string' || typeof v === 'number')
+      .join(', ')
+    return label || undefined
+  }
+
+  // geoplateforme keeps a simplified geometry in geom and puts the real one,
+  // as a JSON string, in properties.truegeometry when returnTrueGeometry is set
+  private getGeometry(result: GeocodingResult): Geometry | null {
+    const trueGeometry = result.properties?.['truegeometry']
+    if (typeof trueGeometry === 'string') {
+      return JSON.parse(trueGeometry)
+    }
+    return (trueGeometry as Geometry) ?? result.geom
+  }
+
   handleItemSelected(item: AutocompleteItem) {
-    this.resultSelected.emit(item as GeocodingResult)
+    const result = item as GeocodingResult
+    this.resultSelected.emit(result)
+    const geometry = this.getGeometry(result)
+    if (geometry) {
+      this.bboxSelected.emit({
+        bbox: getGeometryBoundingBox(geometry),
+        label: this.getDisplayLabel(result),
+      })
+    }
   }
 }

package/src/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.ts

@@ -21,6 +21,7 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 marker('search.filters.summaryLabel.user')
 marker('search.filters.summaryLabel.changeDate')
 marker('search.filters.summaryLabel.resourceCreationRevisionDate')
+marker('search.filters.summaryLabel.temporalExtent')
 
 const OPEN_BOUND = '…'
 

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

@@ -8,7 +8,6 @@ import {
   SortByField,
 } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { DEFAULT_PAGE_SIZE, FIELDS_SUMMARY } from '../constants'
-import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export const SEARCH_FEATURE_KEY = 'searchState'
@@ -56,9 +55,7 @@ export const initSearch = (): SearchStateSearch => {
     },
     params: {
       filters: {},
-      pageSize: getOptionalSearchConfig()?.LIMIT
-        ? getOptionalSearchConfig().LIMIT
-        : DEFAULT_PAGE_SIZE,
+      pageSize: DEFAULT_PAGE_SIZE,
       currentPage: 0,
       favoritesOnly: false,
       useSpatialFilter: true,

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Injector, inject } from '@angular/core'
+import { inject, Injectable, InjectionToken, Injector } from '@angular/core'
 import {
   AbstractSearchField,
   AvailableServicesField,
@@ -11,11 +11,11 @@ import {
   MultilingualSearchField,
   OrganizationSearchField,
   OwnerSearchField,
+  RecordKindField,
   ResourceCreationRevisionDateSearchField,
   ResourceTypeLegacyField,
   SimpleSearchField,
   TranslatedSearchField,
-  RecordKindField,
   UserSearchField,
 } from './fields'
 import { forkJoin, Observable, of } from 'rxjs'
@@ -45,14 +45,29 @@ marker('search.filters.publisherOrg')
 marker('search.filters.user')
 marker('search.filters.changeDate')
 marker('search.filters.resourceCreationRevisionDate')
+marker('search.filters.temporalExtent')
 marker('search.filters.spatialExtent')
+marker('search.filters.documentStandard')
+
+export interface CustomSearchField {
+  name: string
+  baseFilter: string
+  excludeValues?: string[]
+  includeValues?: string[]
+}
+
+export const CUSTOM_FIELDS = new InjectionToken<CustomSearchField[]>(
+  'custom-fields'
+)
 @Injectable({
   providedIn: 'root',
 })
 export class FieldsService {
   protected injector = inject(Injector)
+  private customFields =
+    inject<CustomSearchField[]>(CUSTOM_FIELDS, { optional: true }) ?? []
 
-  protected fields = {
+  private baseFields: Record<string, AbstractSearchField> = {
     organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
     resourceType: new ResourceTypeLegacyField(this.injector), // Deprecated, use `recordKind` instead
@@ -101,9 +116,46 @@ export class FieldsService {
       this.injector,
       'desc'
     ),
+    temporalExtent: new DateRangeSearchField(
+      'resourceTemporalExtentDateRange',
+      this.injector,
+      'desc'
+    ),
     availableServices: new AvailableServicesField(this.injector),
     spatialExtent: new BoundingBoxSearchField('spatialExtent', this.injector),
-  } as Record<string, AbstractSearchField>
+  }
+
+  protected fields: Record<string, AbstractSearchField>
+
+  constructor() {
+    this.fields = { ...this.baseFields }
+    for (const customField of this.customFields) {
+      const baseField = this.baseFields[customField.baseFilter]
+      if (!(baseField instanceof SimpleSearchField)) {
+        console.warn(
+          `The custom field '${customField.name}' relies on a base field '${
+            customField.baseFilter
+          }' that is not supported. This field will be ignored.`
+        )
+        continue
+      }
+      if (!customField.name.includes(':')) {
+        console.warn(
+          `The custom field '${customField.name}' is not scoped with a prefix. Custom fields must have their names prefixed, for instance "myOrg:myKeywords". This field will be ignored.`
+        )
+        continue
+      }
+      const newField = baseField.clone()
+      newField.setFieldIdentifier(customField.name)
+      if (customField.includeValues) {
+        newField.includeValues = customField.includeValues
+      }
+      if (customField.excludeValues) {
+        newField.excludeValues = customField.excludeValues
+      }
+      this.fields[customField.name] = newField
+    }
+  }
 
   get supportedFields() {
     return Object.keys(this.fields)

package/src/libs/feature/search/src/lib/utils/service/fields.ts

@@ -53,6 +53,15 @@ export class SimpleSearchField implements AbstractSearchField {
   // FIXME: this is required to register runtime fields; abstract this as well
   protected esService = this.injector.get(ElasticsearchService)
 
+  private customIdentifier?: string
+
+  protected get fieldIdentifier(): string {
+    return this.customIdentifier ?? this.esFieldName
+  }
+
+  public includeValues: string[] = []
+  public excludeValues: string[] = []
+
   constructor(
     protected esFieldName: string,
     protected injector: Injector,
@@ -60,13 +69,24 @@ export class SimpleSearchField implements AbstractSearchField {
     protected orderType: 'key' | 'count' = 'key'
   ) {}
 
+  public setFieldIdentifier(fieldIdentifier: string) {
+    this.customIdentifier = fieldIdentifier
+    this.esService.registerFieldAlias(fieldIdentifier, this.esFieldName)
+  }
+
   protected getAggregations(): AggregationsParams {
     return {
-      [this.esFieldName]: {
+      [this.fieldIdentifier]: {
         type: 'terms',
         field: this.esFieldName,
         limit: 1000,
         sort: [this.order, this.orderType],
+        ...(this.includeValues?.length && {
+          includeValues: this.includeValues,
+        }),
+        ...(this.excludeValues?.length && {
+          excludeValues: this.excludeValues,
+        }),
       },
     }
   }
@@ -79,7 +99,7 @@ export class SimpleSearchField implements AbstractSearchField {
     return this.repository.aggregate(this.getAggregations()).pipe(
       map(
         (response) =>
-          (response[this.esFieldName] as AggregationBuckets).buckets || []
+          (response[this.fieldIdentifier] as AggregationBuckets).buckets || []
       ),
       switchMap((buckets: TermBucket[]) => {
         const bucketPromises = buckets.map(async (bucket) => ({
@@ -97,7 +117,7 @@ export class SimpleSearchField implements AbstractSearchField {
     // FieldValue[]
     if (this.getType() === 'values') {
       return of({
-        [this.esFieldName]: (values as FieldValue[]).reduce((acc, val) => {
+        [this.fieldIdentifier]: (values as FieldValue[]).reduce((acc, val) => {
           const value = val.toString()
           if (value !== '') {
             return { ...acc, [value]: true }
@@ -108,13 +128,13 @@ export class SimpleSearchField implements AbstractSearchField {
     }
     // DateRange
     return of({
-      [this.esFieldName]: values[0] !== '' ? values[0] : {},
+      [this.fieldIdentifier]: values[0] !== '' ? values[0] : {},
     })
   }
   getValuesForFilter(
     filters: FieldFilters
   ): Observable<FieldValue[] | FieldValue | DateRange> {
-    const filter = filters[this.esFieldName]
+    const filter = filters[this.fieldIdentifier]
     if (!filter) return of([])
     // filter by expression
     if (typeof filter === 'string') {
@@ -132,6 +152,10 @@ export class SimpleSearchField implements AbstractSearchField {
   getType(): FieldType {
     return 'values'
   }
+
+  clone(): typeof this {
+    return Object.create(this)
+  }
 }
 
 export class TranslatedSearchField extends SimpleSearchField {
@@ -476,12 +500,12 @@ export class BoundingBoxSearchField extends SimpleSearchField {
 
   getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
     return of({
-      [this.esFieldName]: values.map(Number) as BoundingBox,
+      [this.fieldIdentifier]: values.map(Number) as BoundingBox,
     })
   }
 
   getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
-    const filter = filters[this.esFieldName]
+    const filter = filters[this.fieldIdentifier]
     return of(isBoundingBox(filter) ? filter : [])
   }
 
@@ -599,7 +623,7 @@ export class RecordKindField extends SimpleSearchField {
 
   getFiltersForValues(values: FieldValue[]): Observable<FieldFilters | string> {
     const filters: FieldFilters = {
-      [this.esFieldName]: values.reduce((acc, value) => {
+      [this.fieldIdentifier]: values.reduce((acc, value) => {
         if (value === '') return { ...acc, [value]: true }
 
         const keysToAdd = this.TYPE_MAPPING[value] || [value]
@@ -626,7 +650,7 @@ export class RecordKindField extends SimpleSearchField {
   }
 
   getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
-    const filter = filters[this.esFieldName]
+    const filter = filters[this.fieldIdentifier]
     if (!filter) return of([])
 
     const activeValues = Object.keys(filter).filter((v) => filter[v])

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.html

@@ -17,9 +17,9 @@
           <ng-template #titleTemplate>
             <div class="px-2">
               <div class="text-lg font-bold">{{ featureType.name }}</div>
-              @if (featureType.definition) {
+              @if (featureType.description) {
                 <div class="text-sm">
-                  {{ featureType.definition }}
+                  {{ featureType.description }}
                 </div>
               }
             </div>
@@ -87,7 +87,7 @@
                               <ul class="list-disc list-inside mr-4">
                                 @for (v of row.values; track v) {
                                   <li>
-                                    {{ v.label || v.code }}
+                                    {{ v.label || v.value }}
                                   </li>
                                 }
                               </ul>

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.ts

@@ -19,7 +19,7 @@ import { iconoirList } from '@ng-icons/iconoir'
 marker('feature.catalog.attribute.type')
 marker('feature.catalog.attribute.name')
 marker('feature.catalog.attribute.code')
-marker('feature.catalog.attribute.definition')
+marker('feature.catalog.attribute.description')
 marker('feature.catalog.attribute.values')
 
 interface ColumnDefinition {
@@ -56,7 +56,7 @@ export class FeatureCatalogListComponent {
   readonly COLUMNS_DEFAULT: ColumnDefinition[] = [
     { key: 'type', width: '25%' },
     { key: 'name', width: '40%' },
-    { key: 'definition', width: 'minmax(0px, 1fr)' },
+    { key: 'description', width: 'minmax(0px, 1fr)' },
   ]
 
   readonly COLUMN_VALUES: ColumnDefinition = {

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

@@ -16,10 +16,6 @@ gn-ui-button {
   --gn-ui-button-padding: 0;
   font-size: 1em;
 }
-ng-icon.search {
-  margin-top: 0.6rem;
-  margin-left: 0.6rem;
-}
 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;

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

@@ -1,9 +1,9 @@
 <span class="w-full inline-block relative">
   @if (!allowSubmit) {
     <div
-      class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none"
+      class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none flex items-center justify-center"
     >
-      <ng-icon name="iconoirSearch" class="text-primary search"></ng-icon>
+      <ng-icon name="iconoirSearch" class="text-primary"></ng-icon>
     </div>
   }
   <div class="flex flex-row">

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

@@ -134,13 +134,13 @@ export class AutocompleteComponent
   getExtraClass(): string {
     if (this.allowSubmit) {
       if (this.enterButton) {
-        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+var(--icon-padding))] inset-y-[--icon-padding]'
+        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+var(--icon-padding))] top-1/2 -translate-y-1/2'
       } else {
-        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+0.25*var(--icon-width))] inset-y-[calc(0.25*var(--icon-width))]'
+        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+0.25*var(--icon-width))] top-1/2 -translate-y-1/2'
       }
     } else {
       if (!this.enterButton) {
-        return 'border rounded-lg absolute w-8 h-8 right-2 inset-y-2'
+        return 'border rounded-lg absolute w-8 h-8 right-2 top-1/2 -translate-y-1/2'
       }
     }
     return 'border rounded-lg absolute w-8 h-8'

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.ts

@@ -56,7 +56,8 @@ export class SearchFeatureCatalogComponent {
               const fuzzyFilter = createFuzzyFilter(searchTerm)
               return (
                 fuzzyFilter(featureType.name) ||
-                (featureType.definition && fuzzyFilter(featureType.definition))
+                (featureType.description &&
+                  fuzzyFilter(featureType.description))
               )
             }
           )

package/src/libs/ui/inputs/src/lib/spatial-extent-dropdown/spatial-extent-dropdown.component.html

@@ -58,7 +58,12 @@
       [class]="
         (hasSelection
           ? 'border-b-[1px] border-gray-400 pb-[20px]'
-          : 'pb-[12px]') + ' text-black'
+          : 'pb-[12px]') + ' text-black flex flex-col gap-[8px]'
+      "
+      style="
+        --gn-ui-text-input-rounded: 8px;
+        --gn-ui-text-input-border-size: 1px;
+        --gn-ui-text-input-padding: 6px;
       "
     >
       <gn-ui-drag-and-drop-file-input
@@ -74,6 +79,7 @@
         (errorChange)="handleFileError($event)"
         data-cy="importGeojson"
       ></gn-ui-drag-and-drop-file-input>
+      <ng-content></ng-content>
     </div>
 
     @if (hasSelection) {