geonetwork-ui 2.11.0-dev.4c200c0a1 → 2.11.0-dev.57f4be358

package/src/libs/common/domain/src/lib/model/search/aggregation.model.ts

@@ -7,6 +7,8 @@ export interface TermsAggregationParams {
   limit: number
   sort: AggregationSort
   filter?: string
+  includeValues?: string[]
+  excludeValues?: string[]
 }
 export interface HistogramAggregationParams {
   type: 'histogram'

package/src/libs/common/domain/src/lib/model/search/filter.model.ts

@@ -21,7 +21,10 @@ export type QueryString = {
   query_string: string
 }
 export type QueryRange = {
-  range: Record<string, { format: string; gte: string; lte: string }>
+  range: Record<
+    string,
+    { format: string; gte?: string; lte?: string; relation?: string }
+  >
 }
 export type QueryGeoShape = {
   geo_shape: {
@@ -31,4 +34,11 @@ export type QueryGeoShape = {
     }
   }
 }
-export type FilterQuery = Array<QueryString | QueryRange | QueryGeoShape>
+export type QueryBool = {
+  bool: {
+    filter: QueryRange[]
+  }
+}
+export type FilterQuery = Array<
+  QueryString | QueryRange | QueryGeoShape | QueryBool
+>

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

@@ -6,8 +6,6 @@ export * from './lib/feature-map.module'
 export * from './lib/map-state-container/map-state-container.component'
 export * from './lib/constant'
 export * from './lib/utils'
-export * from './lib/style'
 export * from './lib/layers-panel/layers-panel.component'
 export * from './lib/add-layer-from-catalog/add-layer-from-catalog.component'
 export * from './lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
-export * from './lib/geocoding/geocoding.component'

package/src/libs/feature/map/src/lib/feature-map.module.ts

@@ -2,18 +2,11 @@ import { NgModule } from '@angular/core'
 import { StoreModule } from '@ngrx/store'
 import * as fromMap from './+state/map.reducer'
 import { MapFacade } from './+state/map.facade'
-import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
 
 @NgModule({
   imports: [
     StoreModule.forFeature(fromMap.MAP_FEATURE_KEY, fromMap.mapReducer),
   ],
-  providers: [
-    MapFacade,
-    {
-      provide: GEOCODING_PROVIDER,
-      useValue: ['geonames', { maxRows: 5 }] as GeocodingProvider,
-    },
-  ],
+  providers: [MapFacade],
 })
 export class FeatureMapModule {}

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.ts

@@ -33,7 +33,6 @@ import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain
 import { NOT_KNOWN_CONSTRAINT } from '../../../../../../libs/feature/editor/src'
 import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
 import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
-import { getOptionalEditorConfig } from '../../../../../../libs/util/app-config/src'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { iconoirAppWindow, iconoirPlusCircle } from '@ng-icons/iconoir'
 import { matCloseOutline } from '@ng-icons/material-icons/outline'
@@ -48,6 +47,10 @@ marker('notify.reuse.form.error.title')
 marker('notify.reuse.form.error.body')
 
 export const REUSE_FORM_URL = new InjectionToken<string>('reuseFormUrl')
+// language assigned to the created reuse record; falls back to the current UI language
+export const NEW_RECORD_DEFAULT_LANGUAGE = new InjectionToken<string>(
+  'newRecordDefaultLanguage'
+)
 
 @Component({
   selector: 'gn-ui-notify-reuse-form',
@@ -86,6 +89,9 @@ export class NotifyReuseFormComponent implements OnDestroy {
   private readonly notificationsService = inject(NotificationsService)
   private readonly platformServiceInterface = inject(PlatformServiceInterface)
   reuseFormUrl = inject(REUSE_FORM_URL, { optional: true })
+  private newRecordDefaultLanguage = inject(NEW_RECORD_DEFAULT_LANGUAGE, {
+    optional: true,
+  })
   private locationStrategy = inject(LocationStrategy)
 
   me = toSignal(this.platformServiceInterface.getMe())
@@ -158,8 +164,7 @@ export class NotifyReuseFormComponent implements OnDestroy {
   submit() {
     if (!this.isFormValid()) return
     const defaultLang =
-      getOptionalEditorConfig()?.NEW_RECORD_DEFAULT_LANGUAGE ??
-      this.translate.currentLang
+      this.newRecordDefaultLanguage ?? this.translate.currentLang
     const onlineResource: OnlineLinkResource = {
       type: 'link',
       url: new URL(this.url()),

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

@@ -1,4 +1,6 @@
 export * from './lib/feature-search.module'
+export * from './lib/geocoding/geocoding.service'
+export * from './lib/location-search/location-search.component'
 export * from './lib/filter-geometry.token'
 export * from './lib/record-url.token'
 export * from './lib/state/actions'

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

@@ -3,13 +3,16 @@
     [title]="title"
     [dateRange]="(selectedDateRange$ | async) ?? {}"
     (dateRangeChange)="onDateRangeChange($event)"
+    [attr.data-cy-field]="fieldName"
   ></gn-ui-date-range-dropdown>
 } @else if (fieldType === 'spatialExtent') {
   <gn-ui-spatial-extent-dropdown
     [title]="title"
+    [initialBbox]="(selectedBoundingBox$ | async) ?? null"
     [maxFileSizeMb]="spatialExtentMaxFileSize"
     (bboxChange)="onBboxChange($event)"
     (errorChange)="onSpatialExtentError($event)"
+    [attr.data-cy-field]="fieldName"
   ></gn-ui-spatial-extent-dropdown>
 } @else {
   <gn-ui-dropdown-multiselect

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

@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  InjectionToken,
   Input,
   OnInit,
   inject,
@@ -27,7 +28,12 @@ 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'
+
+// 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',
@@ -52,8 +58,7 @@ export class FilterDropdownComponent implements OnInit {
   @Input() fieldName: string
   @Input() title: string
 
-  spatialExtentMaxFileSize =
-    getOptionalSearchConfig()?.SPATIAL_EXTENT_MAX_FILE_SIZE
+  spatialExtentMaxFileSize = inject(SPATIAL_EXTENT_MAX_FILE_SIZE)
 
   fieldType: FieldType
   choices$: Observable<Choice[]>
@@ -71,6 +76,14 @@ export class FilterDropdownComponent implements OnInit {
     map((selected) => (Array.isArray(selected) ? {} : (selected as DateRange)))
   ) as Observable<DateRange>
 
+  selectedBoundingBox$ = this.selected$.pipe(
+    map((selected) =>
+      Array.isArray(selected) && selected.length > 0
+        ? (selected as BoundingBox)
+        : null
+    )
+  ) as Observable<BoundingBox | null>
+
   onSelectedValues(values: unknown[]) {
     this.fieldsService
       .buildFiltersFromFieldValues({ [this.fieldName]: values as FieldValue[] })
@@ -80,7 +93,11 @@ export class FilterDropdownComponent implements OnInit {
   private spatialExtentErrorNotificationId: number | null = null
 
   onBboxChange(bbox: BoundingBox | null) {
-    console.log(bbox)
+    this.fieldsService
+      .buildFiltersFromFieldValues({
+        [this.fieldName]: bbox,
+      })
+      .subscribe((filters) => this.searchService.updateFilters(filters))
     this.clearSpatialExtentErrorNotification()
   }
 

package/src/libs/feature/{map/src/lib → search/src/lib/geocoding}/geocoding.service.ts

@@ -5,22 +5,31 @@ 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'
+  'geocoding-provider',
+  {
+    providedIn: 'root',
+    factory: (): GeocodingProvider => DEFAULT_GEOCODING_PROVIDER,
+  }
 )
 
 @Injectable({
@@ -42,9 +51,9 @@ 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, this.provider[1] as GeoplateformeOptions)
         )
         break
       default:

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

@@ -0,0 +1,8 @@
+<gn-ui-autocomplete
+  [action]="searchAction"
+  [displayWithFn]="displayWithFn"
+  [placeholder]="placeholder"
+  [displayWithTemplate]="displayWithTemplate"
+  (itemSelected)="handleItemSelected($event)"
+>
+</gn-ui-autocomplete>

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

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { Observable } from 'rxjs'
+import { GeocodingResult } from '@geospatial-sdk/geocoding'
+import {
+  AutocompleteComponent,
+  AutocompleteItem,
+} from '../../../../../../libs/ui/inputs/src'
+import { GeocodingService } from '../geocoding/geocoding.service'
+
+@Component({
+  selector: 'gn-ui-location-search',
+  templateUrl: './location-search.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [AutocompleteComponent],
+})
+export class LocationSearchComponent {
+  private geocodingService = inject(GeocodingService)
+
+  @Input() placeholder = ''
+  @Input() displayWithTemplate?: TemplateRef<{ $implicit: GeocodingResult }>
+  @Output() resultSelected = new EventEmitter<GeocodingResult>()
+
+  displayWithFn = (item: AutocompleteItem) => (item as GeocodingResult).label
+
+  searchAction = (text: string): Observable<AutocompleteItem[]> =>
+    this.geocodingService.query(text)
+
+  handleItemSelected(item: AutocompleteItem) {
+    this.resultSelected.emit(item as GeocodingResult)
+  }
+}

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

@@ -20,6 +20,8 @@ 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,10 +11,11 @@ import {
   MultilingualSearchField,
   OrganizationSearchField,
   OwnerSearchField,
+  RecordKindField,
+  ResourceCreationRevisionDateSearchField,
   ResourceTypeLegacyField,
   SimpleSearchField,
   TranslatedSearchField,
-  RecordKindField,
   UserSearchField,
 } from './fields'
 import { forkJoin, Observable, of } from 'rxjs'
@@ -43,14 +44,30 @@ marker('search.filters.producerOrg')
 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
@@ -95,9 +112,44 @@ export class FieldsService {
     ),
     user: new UserSearchField(this.injector),
     changeDate: new DateRangeSearchField('changeDate', this.injector, 'desc'),
+    resourceCreationRevisionDate: new ResourceCreationRevisionDateSearchField(
+      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
+      }
+      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 {
@@ -435,6 +459,40 @@ export class DateRangeSearchField extends SimpleSearchField {
   }
 }
 
+// treats a resource's creation/revision dates as an interval (its min and max), so a record matches
+// when that interval intersects the filter range, not just when a single date falls inside it
+export class ResourceCreationRevisionDateSearchField extends DateRangeSearchField {
+  constructor(injector: Injector, order: 'asc' | 'desc' = 'desc') {
+    super('resourceCreationRevisionDate', injector, order)
+    const dateSourceFields = [
+      'creationDateForResource',
+      'revisionDateForResource',
+    ]
+    const collectSortedDates = dateSourceFields
+      .map(
+        (field) => `if (doc.containsKey('${field}')) {
+  for (def date : doc['${field}']) { dates.add(date.millis); }
+}`
+      )
+      .join('\n')
+
+    this.esService.registerRuntimeField(
+      'resourceCreationRevisionDateMin',
+      `def dates = [];
+${collectSortedDates}
+if (dates.length > 0) { dates.sort(null); emit(dates[0]); }`,
+      'date'
+    )
+    this.esService.registerRuntimeField(
+      'resourceCreationRevisionDateMax',
+      `def dates = [];
+${collectSortedDates}
+if (dates.length > 0) { dates.sort(null); emit(dates[dates.length - 1]); }`,
+      'date'
+    )
+  }
+}
+
 export class BoundingBoxSearchField extends SimpleSearchField {
   getAvailableValues(): Observable<FieldAvailableValue[]> {
     return of([])
@@ -442,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 : [])
   }
 
@@ -565,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]
@@ -592,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/service-capabilities/service-capabilities.component.ts

@@ -128,7 +128,8 @@ export class ServiceCapabilitiesComponent implements OnInit {
       this.loading = true
       this.availableLayers = await getLayers(
         this.apiLinks[0].url.href,
-        this.apiLinks[0].accessServiceProtocol
+        this.apiLinks[0].accessServiceProtocol,
+        true
       )
       this.loading = false
       this.cdr.detectChanges()

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

@@ -83,7 +83,16 @@
 >
   @for (suggestion of suggestions$ | async; track suggestion) {
     <mat-option [value]="suggestion" class="p-2 suggestion text-start">
-      {{ displayWithFnInternal(suggestion) }}
+      @if (displayWithTemplate) {
+        <ng-container
+          *ngTemplateOutlet="
+            displayWithTemplate;
+            context: { $implicit: suggestion }
+          "
+        ></ng-container>
+      } @else {
+        {{ displayWithFnInternal(suggestion) }}
+      }
     </mat-option>
   }
 </mat-autocomplete>

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

@@ -11,6 +11,7 @@ import {
   OnInit,
   Output,
   SimpleChanges,
+  TemplateRef,
   ViewChild,
   inject,
 } from '@angular/core'
@@ -97,6 +98,13 @@ export class AutocompleteComponent
   @ViewChild(MatAutocompleteTrigger) triggerRef: MatAutocompleteTrigger
   @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete
   @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
+  /**
+   * Custom template to render each suggestion. Takes precedence over
+   * `displayWithFn` when set.
+   */
+  @Input() displayWithTemplate?: TemplateRef<{
+    $implicit: AutocompleteItem
+  }>
 
   searching: boolean
   control = new UntypedFormControl()

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

@@ -20,10 +20,13 @@
       </div>
     }
   </div>
-  <button class="h-6 w-6" data-test="dropdown-clear">
+  <button
+    class="h-6 w-6 flex items-center justify-center"
+    data-test="dropdown-clear"
+  >
     @if (hasSelectedChoices && !overlayOpen) {
       <ng-icon
-        class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+        class="shrink-0 opacity-40 hover:opacity-80 transition-colors clear-btn"
         (click)="clearSelection($event)"
         name="matClose"
       ></ng-icon>
@@ -61,13 +64,13 @@
     #overlayContainer
   >
     <div
-      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
+      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-1 flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
     >
       @for (selected of selectedChoices; track selected) {
         <button
           type="button"
           [title]="selected.label"
-          class="max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1"
+          class="max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity"
           (click)="select(selected, false)"
         >
           <div class="text-sm truncate leading-[26px] px-2">