geonetwork-ui 2.7.0-dev.d51ff2ddf → 2.7.0-dev.da19181da

package/src/libs/api/metadata-converter/src/lib/gn4/gn4.field.mapper.ts

@@ -28,10 +28,7 @@ import { matchProtocol } from '../common/distribution.mapper'
 import { Thesaurus } from './types'
 import { getResourceType, getReuseType } from '../common/resource-types'
 import { TranslateService } from '@ngx-translate/core'
-import {
-  getLang2FromLang3,
-  getLocalizedIndexKey,
-} from '../../../../../../libs/util/i18n/src'
+import { toLang2, toLang3 } from '../../../../../../libs/util/i18n/src'
 
 type ESResponseSource = SourceWithUnknownProps
 
@@ -49,8 +46,8 @@ export class Gn4FieldMapper {
     private translateService: TranslateService
   ) {}
 
-  private get lang3() {
-    return getLocalizedIndexKey(this.translateService.currentLang)
+  private get getLocalizedIndexKey() {
+    return `lang${toLang3(this.translateService.currentLang)}`
   }
 
   protected fields: Record<string, EsFieldMapperFn> = {
@@ -69,14 +66,22 @@ export class Gn4FieldMapper {
     resourceTitleObject: (output, source) => ({
       ...output,
       title: selectFallback(
-        selectTranslatedField(source, 'resourceTitleObject', this.lang3),
+        selectTranslatedField(
+          source,
+          'resourceTitleObject',
+          this.getLocalizedIndexKey
+        ),
         'no title'
       ),
     }),
     resourceAbstractObject: (output, source) => ({
       ...output,
       abstract: selectFallback(
-        selectTranslatedField(source, 'resourceAbstractObject', this.lang3),
+        selectTranslatedField(
+          source,
+          'resourceAbstractObject',
+          this.getLocalizedIndexKey
+        ),
         'no title'
       ),
     }),
@@ -84,7 +89,7 @@ export class Gn4FieldMapper {
       const firstOverview = getFirstValue(selectField(source, 'overview'))
       const description = selectTranslatedValue<string>(
         selectField(firstOverview, 'text'),
-        this.lang3
+        this.getLocalizedIndexKey
       )
       return {
         ...output,
@@ -102,7 +107,9 @@ export class Gn4FieldMapper {
         ...(output.topics || []),
         ...getAsArray(
           selectField<SourceWithUnknownProps[]>(source, 'cl_topic')
-        ).map((topic) => selectTranslatedValue<string>(topic, this.lang3)),
+        ).map((topic) =>
+          selectTranslatedValue<string>(topic, this.getLocalizedIndexKey)
+        ),
       ],
     }),
     cl_status: (output, source) => ({
@@ -156,7 +163,7 @@ export class Gn4FieldMapper {
       const langList = getAsArray(
         selectField<string>(source, 'resourceLanguage')
       )
-      const languages = langList.map(getLang2FromLang3)
+      const languages = langList.map(toLang2)
       const defaultLanguage = output.defaultLanguage ?? languages[0] ?? null // set the first language as main one as fallback
 
       return {
@@ -166,7 +173,7 @@ export class Gn4FieldMapper {
     },
     otherLanguage: (output, source) => {
       const langList = getAsArray(selectField<string>(source, 'otherLanguage'))
-      const languages = langList.map(getLang2FromLang3)
+      const languages = langList.map(toLang2)
       const defaultLanguage = output.defaultLanguage ?? languages[0] ?? null
       const otherLanguages = languages.filter(
         (lang) => lang !== defaultLanguage
@@ -181,7 +188,7 @@ export class Gn4FieldMapper {
       const language = selectField<string>(source, 'mainLanguage')
       return {
         ...output,
-        defaultLanguage: language ? getLang2FromLang3(language) : null,
+        defaultLanguage: language ? toLang2(language) : null,
       }
     },
     link: (output, source) => {
@@ -199,7 +206,10 @@ export class Gn4FieldMapper {
     contact: (output, source) => ({
       ...output,
       contacts: [
-        mapContact(getFirstValue(selectField(source, 'contact')), this.lang3),
+        mapContact(
+          getFirstValue(selectField(source, 'contact')),
+          this.getLocalizedIndexKey
+        ),
       ],
     }),
     contactForResource: (output, source) => ({
@@ -210,7 +220,7 @@ export class Gn4FieldMapper {
           ? output.contactsForResource
           : []),
         ...getAsArray(selectField(source, 'contactForResource')).map(
-          (contact) => mapContact(contact, this.lang3)
+          (contact) => mapContact(contact, this.getLocalizedIndexKey)
         ),
       ],
     }),
@@ -229,7 +239,7 @@ export class Gn4FieldMapper {
       ...output,
       keywords: mapKeywords(
         selectField<Thesaurus[]>(source, 'allKeywords'),
-        this.lang3
+        this.getLocalizedIndexKey
       ),
     }),
     inspireTheme: (output, source) => ({
@@ -277,7 +287,11 @@ export class Gn4FieldMapper {
       ),
     lineageObject: (output, source) => ({
       ...output,
-      lineage: selectTranslatedField(source, 'lineageObject', this.lang3),
+      lineage: selectTranslatedField(
+        source,
+        'lineageObject',
+        this.getLocalizedIndexKey
+      ),
     }),
     userSavedCount: (output, source) =>
       this.addExtra(
@@ -410,7 +424,7 @@ export class Gn4FieldMapper {
           ...geoms.map((geom, index) => {
             const description = selectTranslatedValue(
               getArrayItem(extentDescriptions, index),
-              this.lang3
+              this.getLocalizedIndexKey
             )
             const geometry = shapes[index] ?? geom
             return {
@@ -465,7 +479,10 @@ export class Gn4FieldMapper {
       outputField in output ? output[outputField] : []
     outputArray.push(
       ...constraintArray.map((item) => {
-        const text = selectTranslatedValue(item, this.lang3) as string
+        const text = selectTranslatedValue(
+          item,
+          this.getLocalizedIndexKey
+        ) as string
         const url = getAsUrl(selectField(item, 'link'))
         return {
           text,
@@ -508,19 +525,27 @@ export class Gn4FieldMapper {
   mapLink = (sourceLink: SourceWithUnknownProps): OnlineResource | null => {
     const url = getAsUrl(
       selectFallback(
-        selectTranslatedField<string>(sourceLink, 'urlObject', this.lang3),
+        selectTranslatedField<string>(
+          sourceLink,
+          'urlObject',
+          this.getLocalizedIndexKey
+        ),
         selectField<string>(sourceLink, 'url')
       )
     )
     const name = selectFallback(
-      selectTranslatedField<string>(sourceLink, 'nameObject', this.lang3),
+      selectTranslatedField<string>(
+        sourceLink,
+        'nameObject',
+        this.getLocalizedIndexKey
+      ),
       selectField<string>(sourceLink, 'name')
     )
     const description = selectFallback(
       selectTranslatedField<string>(
         sourceLink,
         'descriptionObject',
-        this.lang3
+        this.getLocalizedIndexKey
       ),
       selectField<string>(sourceLink, 'description')
     )

package/src/libs/api/metadata-converter/src/lib/gn4/metadata-url.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable } from '@angular/core'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
 import { TranslateService } from '@ngx-translate/core'
-import { getLang3FromLang2 } from '../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../libs/util/i18n/src'
 
 @Injectable({
   providedIn: 'root',
@@ -14,7 +14,7 @@ export class MetadataUrlService {
 
   getUrl(uuid: string, apiPath: string = this.apiConfiguration.basePath) {
     const prefix = `${apiPath}/../`
-    return `${prefix}${getLang3FromLang2(
+    return `${prefix}${toLang3(
       this.translate.currentLang
     )}/catalog.search#/metadata/${uuid}`
   }

package/src/libs/api/metadata-converter/src/lib/iso19115-3/read-parts.ts

@@ -41,7 +41,7 @@ import {
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { matchMimeType } from '../common/distribution.mapper'
 import { fullNameToParts } from '../iso19139/utils/individual-name'
-import { getLang2FromLang3 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
+import { toLang2 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
 import { getResourceType, getReuseType } from '../common/resource-types'
 
 export function readKind(rootEl: XmlElement): RecordKind {
@@ -370,7 +370,7 @@ export function readLocaleElement(): ChainableFunction<
   return pipe(
     findChildElement('lan:LanguageCode'),
     readAttribute('codeListValue'),
-    map((lang) => getLang2FromLang3(lang?.toLowerCase()) ?? lang)
+    map((lang) => toLang2(lang?.toLowerCase()) ?? lang)
   )
 }
 

package/src/libs/api/metadata-converter/src/lib/iso19115-3/write-parts.ts

@@ -49,7 +49,7 @@ import {
 } from '../iso19139/write-parts'
 import { findIdentification } from '../iso19139/read-parts'
 import { namePartsToFull } from '../iso19139/utils/individual-name'
-import { getLang3FromLang2 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
+import { toLang3 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
 import { kindToCodeListValue } from '../common/resource-types'
 
 export function writeUniqueIdentifier(
@@ -529,7 +529,7 @@ export function writeOnlineResources(
 }
 
 function writeLocaleElement(language: LanguageCode) {
-  const lang3 = getLang3FromLang2(language.toLowerCase()) ?? language
+  const lang3 = toLang3(language.toLowerCase()) ?? language
   return pipe(
     findChildOrCreate('lan:PT_Locale'),
     writeAttribute('id', language.toUpperCase()),

package/src/libs/api/metadata-converter/src/lib/iso19139/read-parts.ts

@@ -55,7 +55,7 @@ import { getKeywordTypeFromKeywordTypeCode } from './utils/keyword.mapper'
 import { getRoleFromRoleCode } from './utils/role.mapper'
 import { getStatusFromStatusCode } from './utils/status.mapper'
 import { getUpdateFrequencyFromFrequencyCode } from './utils/update-frequency.mapper'
-import { getLang2FromLang3 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
+import { toLang2 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
 import { getResourceType, getReuseType } from '../common/resource-types'
 
 export function extractCharacterString(): ChainableFunction<
@@ -1164,7 +1164,7 @@ export function readOtherLanguages(rootEl: XmlElement): LanguageCode[] {
       pipe(
         findChildElement('lan:LanguageCode'),
         readAttribute('codeListValue'),
-        map((lang) => getLang2FromLang3(lang?.toLowerCase()) ?? lang)
+        map((lang) => toLang2(lang?.toLowerCase()) ?? lang)
       )
     ),
     map((languages) =>
@@ -1179,7 +1179,7 @@ export function readDefaultLanguage(rootEl: XmlElement): LanguageCode {
     findChildElement('gmd:language', false),
     findChildElement('lan:LanguageCode'),
     readAttribute('codeListValue'),
-    map((lang) => (lang ? getLang2FromLang3(lang.toLowerCase()) : null))
+    map((lang) => (lang ? toLang2(lang.toLowerCase()) : null))
   )(rootEl)
 }
 

package/src/libs/api/metadata-converter/src/lib/iso19139/write-parts.ts

@@ -53,7 +53,7 @@ import {
 import { readKind } from './read-parts'
 import { writeGeometry } from './utils/geometry'
 import { namePartsToFull } from './utils/individual-name'
-import { getLang3FromLang2 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
+import { toLang3 } from '../../../../../../libs/util/i18n/src/lib/language-codes'
 import { kindToCodeListValue } from '../common/resource-types'
 
 function writeLocalizedElement(
@@ -1300,7 +1300,7 @@ export function createOnlineResource(onlineResource: ServiceOnlineResource) {
 }
 
 export function appendDatasetOnlineResources(
-  record: DatasetRecord,
+  record: DatasetRecord | ReuseRecord,
   rootEl: XmlElement
 ) {
   appendChildren(
@@ -1319,7 +1319,7 @@ export function appendDatasetOnlineResources(
 }
 
 export function appendServiceOnlineResources(
-  record: ServiceRecord | ReuseRecord,
+  record: ServiceRecord,
   rootEl: XmlElement
 ) {
   appendChildren(...record.onlineResources.map(createOnlineResource))(rootEl)
@@ -1331,7 +1331,7 @@ export function writeOnlineResources(
 ) {
   removeOnlineResources()(rootEl)
 
-  if (record.kind === 'dataset') {
+  if (record.kind === 'dataset' || record.kind === 'reuse') {
     appendDatasetOnlineResources(record, rootEl)
     return
   }
@@ -1476,7 +1476,7 @@ export function writeLanguages(record: DatasetRecord, rootEl: XmlElement) {
       writeAttribute('id', lang.toUpperCase()),
       createNestedChild('gmd:languageCode', 'gmd:LanguageCode'),
       writeAttribute('codeList', 'http://www.loc.gov/standards/iso639-2/'),
-      writeAttribute('codeListValue', getLang3FromLang2(lang) ?? lang)
+      writeAttribute('codeListValue', toLang3(lang) ?? lang)
     )
 
   // add new languages (only if other than default one)
@@ -1490,7 +1490,7 @@ export function writeDefaultLanguage(
   record: DatasetRecord,
   rootEl: XmlElement
 ) {
-  const lang3 = getLang3FromLang2(record.defaultLanguage.toLowerCase())
+  const lang3 = toLang3(record.defaultLanguage.toLowerCase())
   return pipe(
     findNestedChildOrCreate('gmd:language', 'gmd:LanguageCode'),
     writeAttribute('codeList', 'http://www.loc.gov/standards/iso639-2/'),

package/src/libs/api/repository/src/index.ts

@@ -1,3 +1,3 @@
-export * from './lib/metadata-language'
+export * from './lib/metadata-language.token'
 export * from './lib/repository-url'
 export * from './lib/gn4'

package/src/libs/api/repository/src/lib/gn4/auth/auth.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken, Optional } from '@angular/core'
-import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
+import { toLang2, toLang3 } from '../../../../../../../libs/util/i18n/src'
 import { TranslateService } from '@ngx-translate/core'
 import { Location } from '@angular/common'
 
@@ -35,8 +35,8 @@ export class AuthService {
         '${current_url}',
         new URL(this.location.path(), window.location.href).toString()
       )
-      .replace('${lang2}', this.translateService.currentLang)
-      .replace('${lang3}', getLang3FromLang2(this.translateService.currentLang))
+      .replace('${lang2}', toLang2(this.translateService.currentLang))
+      .replace('${lang3}', toLang3(this.translateService.currentLang))
   }
 
   get logoutUrl() {
@@ -46,7 +46,7 @@ export class AuthService {
   get settingsUrl() {
     return this.baseSettingsUrl.replace(
       '${lang3}',
-      getLang3FromLang2(this.translateService.currentLang)
+      toLang3(this.translateService.currentLang)
     )
   }
 

package/src/libs/api/repository/src/lib/gn4/elasticsearch/elasticsearch.service.ts

@@ -15,7 +15,7 @@ import {
   FiltersAggregationParams,
   SortByField,
 } from '../../../../../../../libs/common/domain/src/lib/model/search'
-import { METADATA_LANGUAGE } from '../../metadata-language'
+import { METADATA_LANGUAGE } from '../../metadata-language.token'
 import {
   AggregationResult,
   EsSearchParams,
@@ -26,9 +26,12 @@ import {
   SortParams,
   TermsAggregationResult,
 } from '../../../../../../../libs/api/metadata-converter/src'
-import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../../libs/util/i18n/src'
 import { formatDate, isDateRange } from './date-range.utils'
-import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CatalogRecord,
+  LanguageCode,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateService } from '@ngx-translate/core'
 import { getGeometryBoundingBox } from '../../../../../../../libs/util/shared/src'
 import { getLength as getGeodesicLength } from 'ol/sphere'
@@ -45,11 +48,9 @@ export class ElasticsearchService {
   private runtimeFields: Record<string, string> = {}
 
   // we're using getters in case the defined languages change over time
-  private get lang3() {
-    return getLang3FromLang2(this.translateService.currentLang)
-  }
-  private get metadataLang() {
-    return this.injector.get(METADATA_LANGUAGE, null)
+  private get metadataLang(): LanguageCode {
+    const mdLangValue = this.injector.get(METADATA_LANGUAGE, null)
+    return typeof mdLangValue === 'function' ? mdLangValue() : mdLangValue
   }
 
   constructor(
@@ -233,9 +234,12 @@ export class ElasticsearchService {
 
   private getQueryLang(): string {
     if (this.metadataLang) {
-      return this.isCurrentSearchLang()
-        ? `lang${this.lang3}`
-        : `lang${this.metadataLang}`
+      const lang3 = toLang3(
+        this.isCurrentSearchLang()
+          ? this.translateService.currentLang
+          : this.metadataLang
+      )
+      return `lang${lang3}`
     } else return '*'
   }
   private isCurrentSearchLang() {

package/src/libs/api/repository/src/lib/gn4/gn4-repository.ts

@@ -48,7 +48,7 @@ import {
 import { catchError, map, tap } from 'rxjs/operators'
 import { lt } from 'semver'
 import { ElasticsearchService } from './elasticsearch'
-import { getLang2FromLang3 } from '../../../../../../libs/util/i18n/src'
+import { toLang2 } from '../../../../../../libs/util/i18n/src'
 import { Gn4SettingsService } from './settings/gn4-settings.service'
 
 const minPublicationApiVersion = '4.2.5'
@@ -562,7 +562,7 @@ export class Gn4Repository implements RecordsRepositoryInterface {
       .pipe(
         map((languages) =>
           languages
-            .map((lang) => getLang2FromLang3(lang.id))
+            .map((lang) => toLang2(lang.id))
             .filter((code): code is string => !!code)
         )
       )

package/src/libs/api/repository/src/lib/gn4/organizations/organizations-from-groups.service.ts

@@ -7,7 +7,7 @@ import {
 import { forkJoin, Observable, of } from 'rxjs'
 import { map, shareReplay } from 'rxjs/operators'
 import { TranslateService } from '@ngx-translate/core'
-import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../../libs/util/i18n/src'
 import { FieldFilters } from '../../../../../../../libs/common/domain/src/lib/model/search'
 import {
   CatalogRecord,
@@ -52,7 +52,7 @@ export class OrganizationsFromGroupsService
   organisationsCount$ = this.organisations$.pipe(map((orgs) => orgs.length))
 
   private get lang3() {
-    return getLang3FromLang2(this.translateService.currentLang)
+    return toLang3(this.translateService.currentLang)
   }
 
   constructor(

package/src/libs/api/repository/src/lib/gn4/organizations/organizations-from-metadata.service.ts

@@ -33,7 +33,7 @@ import {
   tap,
   withLatestFrom,
 } from 'rxjs/operators'
-import { getLocalizedIndexKey } from '../../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../../libs/util/i18n/src'
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { coerce, satisfies, valid } from 'semver'
 import { TranslateService } from '@ngx-translate/core'
@@ -126,7 +126,7 @@ export class OrganizationsFromMetadataService
   ) {}
 
   private get langIndex() {
-    return getLocalizedIndexKey(this.translateService.currentLang)
+    return `lang${toLang3(this.translateService.currentLang)}`
   }
 
   equalsNormalizedStrings(

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.service.ts

@@ -45,7 +45,7 @@ import {
   throwError,
 } from 'rxjs'
 import { TranslateService } from '@ngx-translate/core'
-import { getLang3FromLang2 } from '../../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../../libs/util/i18n/src'
 
 const minApiVersion = '4.2.2'
 
@@ -98,7 +98,7 @@ export class Gn4PlatformService implements PlatformServiceInterface {
   private keywordsByThesauri: Record<string, Observable<Keyword[]>> = {}
 
   private get lang3() {
-    return getLang3FromLang2(this.translateService.currentLang)
+    return toLang3(this.translateService.currentLang)
   }
 
   constructor(

package/src/libs/api/repository/src/lib/metadata-language.token.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core'
+import { LanguageCode } from '../../../../../libs/common/domain/src/lib/model/record'
+
+export type LanguageCodeFactory = () => LanguageCode
+
+export const METADATA_LANGUAGE = new InjectionToken<
+  LanguageCode | LanguageCodeFactory
+>('metadata-language')

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -108,6 +108,11 @@ export interface Keyword {
   translations?: KeywordTranslations
 }
 
+export interface INSPIRE_theme {
+  value: string
+  label: string
+}
+
 export interface BaseRecord {
   uniqueIdentifier: Uuid
   ownerOrganization: Organization
@@ -160,6 +165,17 @@ export type ServiceProtocol =
   | 'maplibre-style'
   | 'other'
 
+marker('record.metadata.api.accessServiceProtocol.wms')
+marker('record.metadata.api.accessServiceProtocol.wfs')
+marker('record.metadata.api.accessServiceProtocol.wps')
+marker('record.metadata.api.accessServiceProtocol.wmts')
+marker('record.metadata.api.accessServiceProtocol.esriRest')
+marker('record.metadata.api.accessServiceProtocol.ogcFeatures')
+marker('record.metadata.api.accessServiceProtocol.GPFDL')
+marker('record.metadata.api.accessServiceProtocol.tms')
+marker('record.metadata.api.accessServiceProtocol.maplibre-style')
+marker('record.metadata.api.accessServiceProtocol.other')
+
 export type OnlineResourceType = 'service' | 'download' | 'link' | 'endpoint'
 
 export interface DatasetServiceDistribution {
@@ -258,7 +274,7 @@ export interface ServiceRecord extends BaseRecord {
 export interface ReuseRecord extends BaseRecord {
   kind: 'reuse'
   lineage: string // Explanation of the origin of this record (e.g: how, why)"
-  onlineResources: Array<OnlineLinkResource>
+  onlineResources: Array<DatasetOnlineResource>
   reuseType: ReuseType
   spatialExtents: Array<DatasetSpatialExtent>
   temporalExtents: Array<DatasetTemporalExtent>

package/src/libs/feature/catalog/src/lib/sources/sources.service.ts

@@ -4,7 +4,7 @@ import { Observable } from 'rxjs'
 import { filter, map, shareReplay } from 'rxjs/operators'
 import { CatalogSource } from './sources.model'
 import { TranslateService } from '@ngx-translate/core'
-import { getLang3FromLang2 } from '../../../../../../libs/util/i18n/src'
+import { toLang3 } from '../../../../../../libs/util/i18n/src'
 
 @Injectable({
   providedIn: 'root',
@@ -23,10 +23,7 @@ export class SourcesService {
     return this.sources$.pipe(
       map((sources) => sources.filter((source) => source.uuid === uuid)[0]),
       filter((source) => !!source),
-      map(
-        (source) =>
-          source.label[getLang3FromLang2(this.translateService.currentLang)]
-      )
+      map((source) => source.label[toLang3(this.translateService.currentLang)])
     )
   }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-inspire-field/form-field-inspire-theme.component.html

@@ -0,0 +1,20 @@
+<div class="flex flex-col gap-3">
+  <div class="flex flex-col gap-4">
+    <gn-ui-autocomplete
+      [placeholder]="'editor.record.form.inspire.placeholder' | translate"
+      [displayWithFn]="displayWithFn"
+      [action]="autoCompleteAction"
+      (itemSelected)="handleItemSelection($event)"
+      [minCharacterCount]="1"
+      [clearOnSelection]="true"
+    ></gn-ui-autocomplete>
+    <div class="flex gap-2 flex-wrap">
+      <gn-ui-badge
+        *ngFor="let theme of themes"
+        [removable]="true"
+        (badgeRemoveClicked)="removeTheme(theme)"
+        >{{ getTranslatedTheme(theme) }}
+      </gn-ui-badge>
+    </div>
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-inspire-field/form-field-inspire-theme.component.ts

@@ -0,0 +1,85 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { AutocompleteComponent, BadgeComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { NgIconComponent } from '@ng-icons/core'
+import { INSPIRE_THEMES } from '../../../../fields.config'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { of } from 'rxjs'
+
+type AutocompleteItem = { title: string; value: string }
+
+@Component({
+  selector: 'gn-ui-form-field-inspire-theme',
+  standalone: true,
+  imports: [
+    CommonModule,
+    AutocompleteComponent,
+    NgIconComponent,
+    BadgeComponent,
+    TranslatePipe,
+  ],
+  templateUrl: './form-field-inspire-theme.component.html',
+  styleUrl: './form-field-inspire-theme.component.css',
+})
+export class FormFieldInspireThemeComponent {
+  themes = []
+  @Input() set value(themes: string[]) {
+    this.themes = themes
+  }
+  @Output() valueChange: EventEmitter<string[]> = new EventEmitter()
+  availableThemes = INSPIRE_THEMES
+
+  displayWithFn = (item: AutocompleteItem) => {
+    return item?.title ? `${item.title}` : ''
+  }
+
+  autoCompleteAction = (query: string) => {
+    return of(
+      this.availableThemes
+        .filter((theme) =>
+          theme.value.toLowerCase().includes(query.toLowerCase())
+        )
+        .sort((a, b) => {
+          const aStarts = a.value.startsWith(query)
+          const bStarts = b.value.startsWith(query)
+
+          if (aStarts && !bStarts) return -1
+          if (!aStarts && bStarts) return 1
+          return 0
+        })
+        .map((theme) => {
+          return {
+            title: this.translateService.instant(theme.label),
+            value: theme.value,
+          }
+        })
+    )
+  }
+
+  constructor(private translateService: TranslateService) {}
+
+  handleItemSelection(item: AutocompleteItem) {
+    this.addTheme(item.value)
+  }
+
+  addTheme(theme: string) {
+    const duplicatedTheme = this.themes.find((t) => t === theme)
+    if (!duplicatedTheme) {
+      this.themes = [...this.themes, theme]
+      this.valueChange.emit(this.themes)
+    }
+  }
+
+  removeTheme(theme: string) {
+    console.log(this.themes)
+    this.themes = this.themes.filter((t) => t !== theme)
+    this.valueChange.emit(this.themes)
+  }
+
+  getTranslatedTheme(theme: string) {
+    const themeKey = this.availableThemes.find(
+      (avail) => avail.value === theme
+    )?.label
+    return themeKey ? this.translateService.instant(themeKey) : ''
+  }
+}