geonetwork-ui 2.6.0-dev.4fa0a0afc → 2.6.0-dev.5257edce4

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.ts

@@ -0,0 +1,331 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  QueryList,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent, CheckToggleComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  iconoirCheckCircle,
+  iconoirCircle,
+  iconoirSettings,
+} from '@ng-icons/iconoir'
+import { matMoreHorizOutline } from '@ng-icons/material-icons/outline'
+import { EditorFacade } from '../../+state/editor.facade'
+import { ConfirmationDialogComponent } from '../../../../../../../libs/ui/elements/src'
+import { MatDialog } from '@angular/material/dialog'
+import { RecordsRepositoryInterface } from '../../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { map, Subscription } from 'rxjs'
+import { Overlay, OverlayRef } from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
+import { ActionMenuComponent } from '../../../../../../../libs/ui/search/src'
+
+const extraFlagMap: { [key: string]: string } = {
+  ar: 'arab',
+  en: 'gb',
+  ko: 'kr',
+  cs: 'cz',
+  zh: 'cn',
+  ca: 'es-ct',
+  rm: 'ch',
+  da: 'dk',
+  sv: 'se',
+  cy: 'gb-wls',
+  hy: 'am',
+  ka: 'ge',
+  uk: 'ua',
+}
+
+@Component({
+  selector: 'gn-ui-multilingual-panel',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CheckToggleComponent,
+    TranslateDirective,
+    TranslatePipe,
+    ButtonComponent,
+    NgIconComponent,
+    ActionMenuComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSettings,
+      matMoreHorizOutline,
+      iconoirCheckCircle,
+      iconoirCircle,
+    }),
+    provideNgIconsConfig({
+      size: '1.25em',
+    }),
+  ],
+  templateUrl: './multilingual-panel.component.html',
+  styleUrl: './multilingual-panel.component.css',
+})
+export class MultilingualPanelComponent implements OnDestroy {
+  isMultilingual: boolean
+  _record: CatalogRecord
+  editTranslations: boolean
+  selectedLanguages = []
+  recordLanguages = []
+  formLanguage = ''
+  @Input() set record(value: CatalogRecord) {
+    this._record = value
+    this.isMultilingual = value.otherLanguages.length > 0
+    this.editTranslations = false
+    this.recordLanguages = [...value.otherLanguages, value.defaultLanguage]
+    this.selectedLanguages = this.recordLanguages
+    this.formLanguage = value.defaultLanguage
+  }
+  @ViewChildren('actionMenuButton', { read: ElementRef })
+  actionMenuButtons!: QueryList<ElementRef>
+  private overlayRef!: OverlayRef
+
+  isActionMenuOpen = false
+  subscription = new Subscription()
+
+  supportedLanguages$ = this.recordsRepository
+    .getApplicationLanguages()
+    .pipe(map((languages) => this.sortLanguages(languages)))
+
+  constructor(
+    public facade: EditorFacade,
+    public dialog: MatDialog,
+    private translateService: TranslateService,
+    private recordsRepository: RecordsRepositoryInterface,
+    private overlay: Overlay,
+    private viewContainerRef: ViewContainerRef,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
+
+  sortLanguages(languages: string[]) {
+    return languages
+      .map((lang) => {
+        const label = this.translateService.instant('language.' + lang)
+        const isTranslated = label !== 'language.' + lang
+
+        return {
+          lang,
+          label,
+          isTranslated,
+        }
+      })
+      .sort((a, b) => {
+        if (a.isTranslated && !b.isTranslated) return -1
+        if (!a.isTranslated && b.isTranslated) return 1
+
+        return a.label.localeCompare(b.label)
+      })
+      .map((item) => item.lang)
+  }
+
+  toggleLanguageSelection() {
+    this.editTranslations = !this.editTranslations
+  }
+
+  getIconClass(lang: string) {
+    return extraFlagMap[lang]
+      ? `fi fi-${extraFlagMap[lang]} w-4 h-3`
+      : `fi fi-${lang} w-4 h-3`
+  }
+
+  switchMultilingual() {
+    if (this.isMultilingual && this.selectedLanguages.length > 1) {
+      this.confirmDeleteAction()
+    } else {
+      this.isMultilingual = true
+      this.editTranslations = true
+    }
+  }
+
+  getExtraClass(lang: string) {
+    const baseClass = 'h-[34px] w-full font-bold justify-start hover:bg-white'
+    if (this.selectedLanguages.includes(lang)) {
+      return `${baseClass} bg-white border border-black`
+    }
+    return baseClass
+  }
+
+  toggleLanguage(lang: string) {
+    if (this.selectedLanguages.includes(lang)) {
+      this.removeSelectedLanguage(lang)
+    } else {
+      this.selectedLanguages.push(lang)
+    }
+  }
+
+  removeSelectedLanguage(lang: string) {
+    this.selectedLanguages = this.selectedLanguages.filter(
+      (language) => language !== lang
+    )
+  }
+
+  validateTranslations() {
+    const equalLength =
+      this.selectedLanguages.length === this.recordLanguages.length
+    if (
+      this.selectedLanguages.length < this.recordLanguages.length ||
+      (equalLength && this.selectedLanguages !== this.recordLanguages)
+    ) {
+      this.confirmDeleteAction(this.selectedLanguages)
+    } else {
+      this.updateTranslations()
+    }
+  }
+
+  updateTranslations() {
+    const newLanguageSelection = this.selectedLanguages.filter(
+      (lang) => lang !== this.formLanguage
+    )
+    this.facade.updateRecordLanguages(this.formLanguage, newLanguageSelection)
+    this.recordLanguages = newLanguageSelection
+    this.editTranslations = false
+  }
+
+  switchFormLang(lang) {
+    // TO IMPLEMENT FURTHER
+  }
+
+  switchDefaultLang(lang: string) {
+    this.formLanguage = lang
+    this.facade.updateRecordLanguages(
+      lang,
+      this.selectedLanguages.filter((lang) => lang !== this.formLanguage)
+    )
+    this.closeActionMenu()
+  }
+
+  confirmDeleteAction(lang?: string[] | string) {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        title: this.translateService.instant(
+          'editor.record.multilingual.confirmation.title'
+        ),
+        message: this.translateService.instant(
+          'editor.record.multilingual.confirmation.message'
+        ),
+        confirmText: this.translateService.instant(
+          'editor.record.multilingual.confirmation.confirmText'
+        ),
+        cancelText: this.translateService.instant(
+          'editor.record.multilingual.confirmation.cancelText'
+        ),
+        focusCancel: true,
+      },
+      restoreFocus: true,
+    })
+    this.subscription.add(
+      dialogRef.afterClosed().subscribe((confirmed) => {
+        if (confirmed) {
+          if (lang) {
+            if (!Array.isArray(lang)) {
+              this.removeSelectedLanguage(lang)
+              this.closeActionMenu()
+            }
+            this.updateTranslations()
+          } else {
+            this.facade.updateRecordLanguages(this.formLanguage, [])
+            this.isMultilingual = false
+            this.selectedLanguages = []
+          }
+        } else {
+          this.isMultilingual = true
+          this.selectedLanguages = this.recordLanguages
+        }
+        this.editTranslations = false
+      })
+    )
+  }
+
+  isFirstUnsupported(index: number): boolean {
+    const langs = this.sortLanguages(this.recordLanguages)
+    return (
+      langs[index].length === 3 &&
+      langs.slice(0, index).every((lang) => lang.length !== 3)
+    )
+  }
+
+  isLangSupported(lang: string) {
+    return lang.length === 2
+  }
+
+  getToggleTitle(lang: string) {
+    if (lang === this._record.defaultLanguage) {
+      return this.translateService.instant(
+        'editor.record.form.multilingual.forbidden'
+      )
+    }
+    return ''
+  }
+
+  openActionMenu(item: string, template) {
+    this.isActionMenuOpen = true
+    const index = this.sortLanguages(this.selectedLanguages).indexOf(item)
+    const buttonElement = this.actionMenuButtons.toArray()[index]
+
+    const positionStrategy = this.overlay
+      .position()
+      .flexibleConnectedTo(buttonElement)
+      .withFlexibleDimensions(true)
+      .withPush(true)
+      .withPositions([
+        {
+          originX: 'end',
+          originY: 'bottom',
+          overlayX: 'end',
+          overlayY: 'top',
+        },
+        {
+          originX: 'end',
+          originY: 'top',
+          overlayX: 'end',
+          overlayY: 'bottom',
+        },
+      ])
+
+    this.overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      positionStrategy: positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+    })
+
+    const portal = new TemplatePortal(template, this.viewContainerRef)
+
+    this.overlayRef.attach(portal)
+    this.subscription.add(
+      this.overlayRef.backdropClick().subscribe(() => {
+        this.closeActionMenu()
+      })
+    )
+  }
+
+  closeActionMenu() {
+    if (this.overlayRef) {
+      this.isActionMenuOpen = false
+      this.overlayRef.dispose()
+      this.cdr.markForCheck()
+    }
+  }
+}

package/src/libs/feature/editor/src/lib/components/online-resource-card/online-resource-card.component.ts

@@ -11,10 +11,8 @@ import {
   OnlineLinkResource,
   OnlineResource,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
-import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
 import { bytesToMegabytes, getFileFormat } from '../../../../../../../libs/util/shared/src'
-import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   NgIconComponent,
   provideIcons,
@@ -25,13 +23,7 @@ import { iconoirAttachment } from '@ng-icons/iconoir'
 @Component({
   selector: 'gn-ui-online-resource-card',
   standalone: true,
-  imports: [
-    CommonModule,
-    ThumbnailComponent,
-    ButtonComponent,
-    TranslateModule,
-    NgIconComponent,
-  ],
+  imports: [CommonModule, TranslateDirective, TranslatePipe, NgIconComponent],
   providers: [
     provideIcons({
       iconoirAttachment,
@@ -66,9 +58,8 @@ export class OnlineResourceCardComponent {
   get subtitle(): string {
     switch (this.onlineResource.type) {
       case 'service':
-        return `${this.onlineResource.accessServiceProtocol}`
       case 'endpoint':
-        return `${this.onlineResource.protocol}`
+        return `${this.onlineResource.accessServiceProtocol}`
       case 'link':
       case 'download':
         return this.getFormat(this.onlineResource)

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.ts

@@ -28,7 +28,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirRefresh } from '@ng-icons/iconoir'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BehaviorSubject,
   debounceTime,
@@ -57,7 +57,8 @@ marker(
     MatRadioModule,
     NgIconComponent,
     TextInputComponent,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     UrlInputComponent,
   ],
   providers: [
@@ -81,8 +82,8 @@ export class OnlineServiceResourceInputComponent {
   errorMessage = false
   resetUrlOnChange = Math.random()
 
-  layersSubject = new BehaviorSubject<{ name: string; title: string }[]>([])
-  layers$: Observable<{ name: string; title: string }[]> =
+  layersSubject = new BehaviorSubject<{ name?: string; title?: string }[]>([])
+  layers$: Observable<{ name?: string; title?: string }[]> =
     this.layersSubject.asObservable()
 
   protocolOptions: {

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

@@ -13,9 +13,9 @@ import {
   CatalogRecordKeys,
   Constraint,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
-import { ButtonComponent, UiInputsModule } from '../../../../../../../../../libs/ui/inputs/src'
+import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import {
   NgIconComponent,
   provideIcons,
@@ -36,10 +36,9 @@ marker('editor.record.form.constraint.header.otherConstraints')
     CommonModule,
     SortableListComponent,
     ConstraintCardComponent,
-    UiInputsModule,
     ButtonComponent,
-    TranslateModule,
     NgIconComponent,
+    TranslatePipe,
   ],
   providers: [
     provideIcons({ iconoirPlus }),

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-constraints-shortcuts/form-field-constraints-shortcuts.component.ts

@@ -7,7 +7,7 @@ import {
 import { CommonModule } from '@angular/common'
 import { EditorFacade } from '../../../../+state/editor.facade'
 import { ButtonComponent, CheckToggleComponent } from '../../../../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import {
   combineLatest,
   distinctUntilChanged,
@@ -53,7 +53,7 @@ export type ConstraintChoice =
     CommonModule,
     CheckToggleComponent,
     ButtonComponent,
-    TranslateModule,
+    TranslatePipe,
     NgIconComponent,
   ],
   providers: [

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

@@ -10,17 +10,12 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core'
-import {
-  AutocompleteComponent,
-  DropdownSelectorComponent,
-  UiInputsModule,
-} from '../../../../../../../../../libs/ui/inputs/src'
-import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
+import { AutocompleteComponent } from '../../../../../../../../../libs/ui/inputs/src'
 import {
   Individual,
   Organization,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   debounceTime,
   distinctUntilChanged,
@@ -44,12 +39,10 @@ import { SortableListComponent } from '../../../../../../../../../libs/ui/layout
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DropdownSelectorComponent,
-    UiInputsModule,
     CommonModule,
-    UiWidgetsModule,
     AutocompleteComponent,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     ContactCardComponent,
     SortableListComponent,
   ],

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-contacts-for-resource/form-field-contacts-for-resource.component.ts

@@ -13,6 +13,7 @@ import {
   Organization,
   Role,
   RoleLabels,
+  RoleValues,
 } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib/model/user'
 import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
@@ -20,12 +21,10 @@ import { PlatformServiceInterface } from '../../../../../../../../../libs/common
 import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
 import {
   AutocompleteComponent,
-  DropdownSelectorComponent,
-  UiInputsModule,
+  ButtonComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
-import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
 import { createFuzzyFilter } from '../../../../../../../../../libs/util/shared/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import {
   debounceTime,
   distinctUntilChanged,
@@ -40,7 +39,6 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirPlus } from '@ng-icons/iconoir'
-import { RoleValues } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-form-field-contacts-for-resource',
@@ -49,15 +47,13 @@ import { RoleValues } from '../../../../../../../../../libs/common/domain/src/li
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    DropdownSelectorComponent,
-    UiInputsModule,
     CommonModule,
-    UiWidgetsModule,
     AutocompleteComponent,
-    TranslateModule,
     ContactCardComponent,
     SortableListComponent,
     NgIconComponent,
+    ButtonComponent,
+    TranslatePipe,
   ],
   providers: [
     provideIcons({ iconoirPlus }),

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

@@ -6,20 +6,13 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import {
-  AutocompleteComponent,
-  DropdownSelectorComponent,
-  UiInputsModule,
-} from '../../../../../../../../../libs/ui/inputs/src'
-import { UiWidgetsModule } from '../../../../../../../../../libs/ui/widgets/src'
 import { Keyword } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { GenericKeywordsComponent } from '../../../generic-keywords/generic-keywords.component'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { KeywordType } from '../../../../../../../../../libs/common/domain/src/lib/model/thesaurus'
 import { EditorFacade } from '../../../../+state/editor.facade'
 import { firstValueFrom, map } from 'rxjs'
 import { SPATIAL_SCOPES } from '../../../../fields.config'
-import { all } from 'ol/loadingstrategy'
 
 @Component({
   selector: 'gn-ui-form-field-keywords',
@@ -27,15 +20,7 @@ import { all } from 'ol/loadingstrategy'
   styleUrls: ['./form-field-keywords.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    DropdownSelectorComponent,
-    UiInputsModule,
-    CommonModule,
-    UiWidgetsModule,
-    AutocompleteComponent,
-    GenericKeywordsComponent,
-    TranslateModule,
-  ],
+  imports: [CommonModule, GenericKeywordsComponent, TranslatePipe],
 })
 export class FormFieldKeywordsComponent {
   @Input() value: Keyword[]

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-link-resources/form-field-online-link-resources.component.ts

@@ -26,7 +26,7 @@ import {
   ModalDialogComponent,
   SortableListComponent,
 } from '../../../../../../../../../libs/ui/layout/src'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { TranslateDirective, TranslateService } from '@ngx-translate/core'
 import { Subscription } from 'rxjs'
 import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
 import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
@@ -45,7 +45,7 @@ import { OnlineResourceCardComponent } from '../../../online-resource-card/onlin
     TextInputComponent,
     TextAreaComponent,
     UrlInputComponent,
-    TranslateModule,
+    TranslateDirective,
   ],
 })
 export class FormFieldOnlineLinkResourcesComponent {

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-online-resources/form-field-online-resources.component.ts

@@ -31,7 +31,7 @@ import {
   ModalDialogComponent,
   SortableListComponent,
 } from '../../../../../../../../../libs/ui/layout/src'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { TranslateDirective, TranslateService } from '@ngx-translate/core'
 import { Subscription } from 'rxjs'
 import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
 import { OnlineResourceCardComponent } from '../../../online-resource-card/online-resource-card.component'
@@ -58,7 +58,7 @@ type OnlineNotLinkResource =
     OnlineResourceCardComponent,
     TextInputComponent,
     TextAreaComponent,
-    TranslateModule,
+    TranslateDirective,
   ],
 })
 export class FormFieldOnlineResourcesComponent {

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-open-data/form-field-open-data.component.ts

@@ -8,7 +8,7 @@ import {
 } from '@angular/core'
 import { Constraint } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 import { CheckToggleComponent } from '../../../../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { OPEN_DATA_LICENSE } from './../../../../fields.config'
 
 @Component({
@@ -16,7 +16,7 @@ import { OPEN_DATA_LICENSE } from './../../../../fields.config'
   templateUrl: './form-field-open-data.component.html',
   styleUrls: ['./form-field-open-data.component.css'],
   standalone: true,
-  imports: [CheckToggleComponent, TranslateModule],
+  imports: [CheckToggleComponent, TranslatePipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FormFieldOpenDataComponent implements OnChanges {

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

@@ -11,7 +11,7 @@ import { GraphicOverview } from '../../../../../../../../../libs/common/domain/s
 import { ImageInputComponent } from '../../../../../../../../../libs/ui/elements/src'
 import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { NotificationsService } from '../../../../../../../../../libs/feature/notifications/src'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { TranslateService } from '@ngx-translate/core'
 import { Subscription } from 'rxjs'
 import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
 
@@ -21,7 +21,7 @@ import { MAX_UPLOAD_SIZE_MB } from '../../../../fields.config'
   styleUrls: ['./form-field-overviews.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ImageInputComponent, TranslateModule],
+  imports: [CommonModule, ImageInputComponent],
 })
 export class FormFieldOverviewsComponent {
   @Input() metadataUuid: string

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html

@@ -8,8 +8,8 @@
   >
   </gn-ui-generic-keywords>
   <div class="w-full h-96 mt-2">
-    <gn-ui-form-field-map-container
+    <gn-ui-spatial-extent
       [spatialExtents]="spatialExtents$ | async"
-    ></gn-ui-form-field-map-container>
+    ></gn-ui-spatial-extent>
   </div>
 </div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts

@@ -9,9 +9,9 @@ import { PlatformServiceInterface } from '../../../../../../../../../libs/common
 import { firstValueFrom, map, shareReplay } from 'rxjs'
 import { EditorFacade } from '../../../../+state/editor.facade'
 import { switchMap } from 'rxjs/operators'
-import { FormFieldMapContainerComponent } from '../form-field-map-container/form-field-map-container.component'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
 import { SPATIAL_SCOPES } from '../../../../fields.config'
+import { SpatialExtentComponent } from '../../../../../../../../../libs/ui/map/src'
 
 // This intermediary type will let us keep track of which keyword is bound to
 // which extent; these properties will not be persisted
@@ -35,8 +35,8 @@ type KeywordWithExtent = Keyword & {
   imports: [
     CommonModule,
     GenericKeywordsComponent,
-    FormFieldMapContainerComponent,
-    TranslateModule,
+    TranslatePipe,
+    SpatialExtentComponent,
   ],
 })
 export class FormFieldSpatialExtentComponent {