geonetwork-ui 2.6.0-dev.9d3ad45e2 → 2.6.0-dev.a225a5e7a

package/libs/ui/search/src/lib/ui-search.module.d.ts

@@ -27,9 +27,10 @@ import * as i25 from "../../../layout/src/lib/interactive-table/interactive-tabl
 import * as i26 from "@ng-icons/core";
 import * as i27 from "../../../elements/src/lib/kind-badge/kind-badge.component";
 import * as i28 from "../../../elements/src/lib/metadata-quality/metadata-quality.component";
+import * as i29 from "./results-table/action-menu/action-menu.component";
 export declare class UiSearchModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiSearchModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiSearchModule, [typeof i1.RecordPreviewComponent, typeof i2.RecordPreviewListComponent, typeof i3.RecordPreviewCardComponent, typeof i4.RecordPreviewTextComponent, typeof i5.RecordPreviewTitleComponent, typeof i6.RecordMetricComponent, typeof i7.ResultsListComponent, typeof i8.ResultsHitsNumberComponent, typeof i9.ResultsHitsSearchKindComponent, typeof i10.ResultsListItemComponent, typeof i11.RecordPreviewFeedComponent, typeof i12.RecordPreviewRowComponent], [typeof i13.CommonModule, typeof i14.TranslateModule, typeof i15.NgxDropzoneModule, typeof i16.FacetsModule, typeof i17.FormsModule, typeof i17.ReactiveFormsModule, typeof i18.TagInputModule, typeof i19.UtilSharedModule, typeof i20.UiWidgetsModule, typeof i21.UiInputsModule, typeof i22.UiElementsModule, typeof i23.MatCheckboxModule, typeof i24.RouterLink, typeof i25.InteractiveTableComponent, typeof i26.NgIconsModule, typeof i27.KindBadgeComponent, typeof i28.MetadataQualityComponent], [typeof i2.RecordPreviewListComponent, typeof i3.RecordPreviewCardComponent, typeof i4.RecordPreviewTextComponent, typeof i5.RecordPreviewTitleComponent, typeof i6.RecordMetricComponent, typeof i7.ResultsListComponent, typeof i16.FacetsModule, typeof i1.RecordPreviewComponent, typeof i8.ResultsHitsNumberComponent, typeof i9.ResultsHitsSearchKindComponent, typeof i11.RecordPreviewFeedComponent, typeof i12.RecordPreviewRowComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiSearchModule, [typeof i1.RecordPreviewComponent, typeof i2.RecordPreviewListComponent, typeof i3.RecordPreviewCardComponent, typeof i4.RecordPreviewTextComponent, typeof i5.RecordPreviewTitleComponent, typeof i6.RecordMetricComponent, typeof i7.ResultsListComponent, typeof i8.ResultsHitsNumberComponent, typeof i9.ResultsHitsSearchKindComponent, typeof i10.ResultsListItemComponent, typeof i11.RecordPreviewFeedComponent, typeof i12.RecordPreviewRowComponent], [typeof i13.CommonModule, typeof i14.TranslateModule, typeof i15.NgxDropzoneModule, typeof i16.FacetsModule, typeof i17.FormsModule, typeof i17.ReactiveFormsModule, typeof i18.TagInputModule, typeof i19.UtilSharedModule, typeof i20.UiWidgetsModule, typeof i21.UiInputsModule, typeof i22.UiElementsModule, typeof i23.MatCheckboxModule, typeof i24.RouterLink, typeof i25.InteractiveTableComponent, typeof i26.NgIconsModule, typeof i27.KindBadgeComponent, typeof i28.MetadataQualityComponent, typeof i29.ActionMenuComponent], [typeof i2.RecordPreviewListComponent, typeof i3.RecordPreviewCardComponent, typeof i4.RecordPreviewTextComponent, typeof i5.RecordPreviewTitleComponent, typeof i6.RecordMetricComponent, typeof i7.ResultsListComponent, typeof i16.FacetsModule, typeof i1.RecordPreviewComponent, typeof i8.ResultsHitsNumberComponent, typeof i9.ResultsHitsSearchKindComponent, typeof i11.RecordPreviewFeedComponent, typeof i12.RecordPreviewRowComponent, typeof i29.ActionMenuComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiSearchModule>;
 }
 //# sourceMappingURL=ui-search.module.d.ts.map

package/libs/ui/search/src/lib/ui-search.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-search.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/search/src/lib/ui-search.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,qBA6Da,cAAc;yCAAd,cAAc;0CAAd,cAAc;0CAAd,cAAc;CAAG"}
+{"version":3,"file":"ui-search.module.d.ts","sourceRoot":"","sources":["../../../../../src/libs/ui/search/src/lib/ui-search.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,qBA+Da,cAAc;yCAAd,cAAc;0CAAd,cAAc;0CAAd,cAAc;CAAG"}

package/libs/util/i18n/src/lib/i18n.constants.d.ts

@@ -4,6 +4,7 @@ import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-comp
 import { FileTranslateLoader } from './file.translate.loader';
 export declare const DEFAULT_LANG = "en";
 export declare const LANGUAGE_STORAGE_KEY = "geonetwork-ui-language";
+export declare const SUPPORTED_LANGUAGES: string[];
 export declare function HttpLoaderFactory(http: HttpClient): FileTranslateLoader;
 export declare function getLangFromBrowser(): string;
 export declare const TRANSLATE_DEFAULT_CONFIG: {

package/libs/util/i18n/src/lib/i18n.constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.constants.d.ts","sourceRoot":"","sources":["../../../../../src/libs/util/i18n/src/lib/i18n.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACxE,OAAO,EAAE,8BAA8B,EAAE,MAAM,sCAAsC,CAAA;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAmB7D,eAAO,MAAM,YAAY,OAAO,CAAA;AAGhC,eAAO,MAAM,oBAAoB,2BAA2B,CAAA;AAE5D,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,uBAEjD;AAED,wBAAgB,kBAAkB,WAEjC;AAKD,eAAO,MAAM,wBAAwB;;;;;;;;;;;CAQpC,CAAA"}
+{"version":3,"file":"i18n.constants.d.ts","sourceRoot":"","sources":["../../../../../src/libs/util/i18n/src/lib/i18n.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACxE,OAAO,EAAE,8BAA8B,EAAE,MAAM,sCAAsC,CAAA;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AA+B7D,eAAO,MAAM,YAAY,OAAO,CAAA;AAGhC,eAAO,MAAM,oBAAoB,2BAA2B,CAAA;AAE5D,eAAO,MAAM,mBAAmB,UA4B/B,CAAA;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,uBAEjD;AAED,wBAAgB,kBAAkB,WAEjC;AAKD,eAAO,MAAM,wBAAwB;;;;;;;;;;;CAQpC,CAAA"}

package/libs/util/i18n/src/lib/language-codes.d.ts

@@ -15,6 +15,17 @@ export declare const LANG_3_TO_2_MAPPER: {
     chi: string;
     slo: string;
     roh: string;
+    ara: string;
+    dan: string;
+    nor: string;
+    pol: string;
+    swe: string;
+    tur: string;
+    arm: string;
+    aze: string;
+    geo: string;
+    ukr: string;
+    wel: string;
 };
 export declare const LANGUAGE_NAMES: {
     en: string;
@@ -32,7 +43,18 @@ export declare const LANGUAGE_NAMES: {
     ru: string;
     zh: string;
     sk: string;
-    roh: string;
+    rm: string;
+    ar: string;
+    da: string;
+    no: string;
+    pl: string;
+    sv: string;
+    tr: string;
+    hy: string;
+    az: string;
+    ka: string;
+    uk: string;
+    wel: string;
 };
 export declare const LANG_2_TO_3_MAPPER: {};
 //# sourceMappingURL=language-codes.d.ts.map

package/libs/util/i18n/src/lib/language-codes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"language-codes.d.ts","sourceRoot":"","sources":["../../../../../src/libs/util/i18n/src/lib/language-codes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;CAiB9B,CAAA;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;CAiB1B,CAAA;AAED,eAAO,MAAM,kBAAkB,IAK9B,CAAA"}
+{"version":3,"file":"language-codes.d.ts","sourceRoot":"","sources":["../../../../../src/libs/util/i18n/src/lib/language-codes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B9B,CAAA;AAED,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4B1B,CAAA;AAED,eAAO,MAAM,kBAAkB,IAK9B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.6.0-dev.9d3ad45e2",
+  "version": "2.6.0-dev.a225a5e7a",
   "engines": {
     "node": ">=20"
   },

package/src/libs/api/metadata-converter/src/lib/fixtures/geocat-ch.records.ts

@@ -617,7 +617,7 @@ Die Quelle ist zu bezeichnen: „Quelle: Stadt Zürich“.`,
   status: 'completed',
   updateFrequency: 'asNeeded',
   defaultLanguage: 'de',
-  otherLanguages: ['fr', 'it', 'en', 'rm'],
+  otherLanguages: ['fr', 'it', 'en', 'rm', 'aar'],
   translations: {
     abstract: {
       en: 'The perimeters of the Alpine Convention in Switzerland. The Alpine Convention is an international treaty between the eight Alpine countries: Germany, France, Italy, Liechtenstein, Monaco, Austria, Switzerland and Slovenia, plus the European Union. The aim of the treaty is to protect the Alps by means of cross-sectoral, integrated and sustainable policies.',

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

@@ -152,12 +152,22 @@ export class Gn4FieldMapper {
       )
       const languages = langList.map((lang) => LANG_3_TO_2_MAPPER[lang])
       const defaultLanguage = output.defaultLanguage ?? languages[0] ?? null // set the first language as main one as fallback
+
+      return {
+        ...output,
+        defaultLanguage,
+      }
+    },
+    otherLanguage: (output, source) => {
+      const langList = getAsArray(selectField<string>(source, 'otherLanguage'))
+      const languages = langList.map((lang) => LANG_3_TO_2_MAPPER[lang])
+      const defaultLanguage = output.defaultLanguage ?? languages[0] ?? null
       const otherLanguages = languages.filter(
         (lang) => lang !== defaultLanguage
       )
+
       return {
         ...output,
-        defaultLanguage,
         otherLanguages,
       }
     },
@@ -294,12 +304,52 @@ export class Gn4FieldMapper {
         ) ?? {},
         '_source'
       )
-      const featureCatalogIdentifier = selectField(
+      const featureCatalogIdentifier: string = selectField(
         <SourceWithUnknownProps>fcatSource,
         'uuid'
       )
-      return featureCatalogIdentifier
-        ? this.addExtra({ featureCatalogIdentifier }, output)
+      const sourceOfLinks = getAsArray(
+        selectField(
+          <SourceWithUnknownProps>selectField(source, 'related'),
+          'hassources'
+        )
+      )
+      const sourceOfIdentifiers: string[] = sourceOfLinks
+        .filter((link) => link['origin'] === 'catalog')
+        .map((link) => {
+          return selectField(
+            selectField(<SourceWithUnknownProps>link, '_source'),
+            'uuid'
+          )
+        })
+      const extraValues: Record<string, string | string[]> = {}
+      if (featureCatalogIdentifier) {
+        extraValues.featureCatalogIdentifier = featureCatalogIdentifier
+      }
+      if (sourceOfIdentifiers && sourceOfIdentifiers.length > 0) {
+        extraValues.sourceOfIdentifiers = sourceOfIdentifiers
+      }
+      return Object.keys(extraValues).length > 0
+        ? this.addExtra(extraValues, output)
+        : output
+    },
+    recordLink: (output, source) => {
+      const recordLinks = getAsArray(
+        selectField<SourceWithUnknownProps[]>(source, 'recordLink')
+      )
+      const sourcesIdentifiers: string[] = recordLinks
+        .filter(
+          (link) => link['origin'] === 'catalog' && link['type'] === 'sources'
+        )
+        .map((link) => selectField(<SourceWithUnknownProps>link, 'to'))
+
+      return sourcesIdentifiers && sourcesIdentifiers.length > 0
+        ? this.addExtra(
+            {
+              sourcesIdentifiers,
+            },
+            output
+          )
         : output
     },
     isPublishedToAll: (output, source) =>

package/src/libs/api/metadata-converter/src/lib/gn4/types/metadata.model.ts

@@ -164,7 +164,6 @@ export type MetadataObject = Partial<{
   resourceDate: ResourceDate[]
   resourceEdition: string
   resourceIdentifier: ResourceIdentifier[]
-  resourceLanguage: string[]
   resourceTemporalDateRange: ResourceTemporalDateRange[]
   resourceTemporalExtentDateRange: ResourceTemporalDateRange[]
   resourceTitleObject: MultilingualField

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

@@ -363,11 +363,18 @@ export function readOnlineResources(rootEl: XmlElement): OnlineResource[] {
   )(rootEl)
 }
 
-function readLocaleElement(): ChainableFunction<XmlElement, LanguageCode> {
+export function readLocaleElement(): ChainableFunction<
+  XmlElement,
+  LanguageCode
+> {
   return pipe(
     findChildElement('lan:LanguageCode'),
     readAttribute('codeListValue'),
-    map((lang) => (lang ? LANG_3_TO_2_MAPPER[lang.toLowerCase()] : null))
+    map((lang) => {
+      const normalized = lang?.toLowerCase()
+      const iso2Lang = LANG_3_TO_2_MAPPER[normalized]
+      return iso2Lang ?? lang
+    })
   )
 }
 
@@ -381,6 +388,9 @@ export function readDefaultLanguage(rootEl: XmlElement): LanguageCode {
 export function readOtherLanguages(rootEl: XmlElement): LanguageCode[] {
   return pipe(
     findChildrenElement('mdb:otherLocale', false),
-    mapArray(readLocaleElement())
+    mapArray(readLocaleElement()),
+    map((languages) =>
+      languages.filter((lang): lang is LanguageCode => lang !== null)
+    )
   )(rootEl)
 }

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

@@ -529,7 +529,11 @@ export function writeOnlineResources(
 }
 
 function writeLocaleElement(language: LanguageCode) {
-  const lang3 = LANG_2_TO_3_MAPPER[language.toLowerCase()]
+  const normalizedLang = language.toLowerCase()
+  const lang3 =
+    normalizedLang.length === 2
+      ? LANG_2_TO_3_MAPPER[normalizedLang]
+      : normalizedLang
   return pipe(
     findChildOrCreate('lan:PT_Locale'),
     writeAttribute('id', language.toUpperCase()),

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

@@ -1162,11 +1162,14 @@ export function readOtherLanguages(rootEl: XmlElement): LanguageCode[] {
     findChildrenElement('gmd:locale', false),
     mapArray(
       pipe(
-        findChildElement('gmd:LanguageCode'),
+        findChildElement('lan:LanguageCode'),
         readAttribute('codeListValue'),
-        map((lang) => LANG_3_TO_2_MAPPER[lang.toLowerCase()])
+        map((lang) => LANG_3_TO_2_MAPPER[lang.toLowerCase()] ?? lang)
       )
     ),
+    map((languages) =>
+      languages.filter((lang): lang is LanguageCode => lang !== null)
+    ),
     map((languages) => (languages.length ? languages : [defaultLanguage]))
   )(rootEl)
 }
@@ -1174,7 +1177,7 @@ export function readOtherLanguages(rootEl: XmlElement): LanguageCode[] {
 export function readDefaultLanguage(rootEl: XmlElement): LanguageCode {
   return pipe(
     findChildElement('gmd:language', false),
-    findChildElement('gmd:LanguageCode'),
+    findChildElement('lan:LanguageCode'),
     readAttribute('codeListValue'),
     map((lang) => (lang ? LANG_3_TO_2_MAPPER[lang.toLowerCase()] : null))
   )(rootEl)

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

@@ -1471,7 +1471,10 @@ 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', LANG_2_TO_3_MAPPER[lang])
+      writeAttribute(
+        'codeListValue',
+        lang.length === 2 ? LANG_2_TO_3_MAPPER[lang] : lang
+      )
     )
 
   // add new languages (only if other than default one)

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

@@ -124,11 +124,11 @@ export class ElasticsearchService {
     this.runtimeFields[fieldName] = expression
   }
 
-  getMetadataByIdPayload(uuid: string): EsSearchParams {
+  getMetadataByIdsPayload(uuids: string[]): EsSearchParams {
     return {
       query: {
         ids: {
-          values: [uuid],
+          values: uuids,
         },
       },
     }

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

@@ -31,7 +31,7 @@ import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain
 import {
   RecordsApiService,
   SearchApiService,
-  FeatureResponseApiModel,
+  LanguagesApiService,
 } from '../../../../../../libs/data-access/gn4/src'
 import {
   combineLatest,
@@ -47,6 +47,7 @@ import {
 import { catchError, map, tap } from 'rxjs/operators'
 import { lt } from 'semver'
 import { ElasticsearchService } from './elasticsearch'
+import { LANG_3_TO_2_MAPPER } from '../../../../../../libs/util/i18n/src'
 
 const minPublicationApiVersion = '4.2.5'
 
@@ -65,7 +66,8 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     private gn4SearchHelper: ElasticsearchService,
     private gn4Mapper: Gn4Converter,
     private gn4RecordsApi: RecordsApiService,
-    private platformService: PlatformServiceInterface
+    private platformService: PlatformServiceInterface,
+    private gn4LanguagesApi: LanguagesApiService
   ) {}
 
   search({
@@ -129,9 +131,9 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     return this.gn4SearchApi
       .search(
         'bucket',
-        ['fcats'],
+        ['fcats', 'hassources'],
         JSON.stringify(
-          this.gn4SearchHelper.getMetadataByIdPayload(uniqueIdentifier)
+          this.gn4SearchHelper.getMetadataByIdsPayload([uniqueIdentifier])
         )
       )
       .pipe(
@@ -142,6 +144,27 @@ export class Gn4Repository implements RecordsRepositoryInterface {
       )
   }
 
+  getMultipleRecords(
+    uniqueIdentifiers: string[]
+  ): Observable<CatalogRecord[] | null> {
+    return this.gn4SearchApi
+      .search(
+        'bucket',
+        undefined,
+        JSON.stringify(
+          this.gn4SearchHelper.getMetadataByIdsPayload(uniqueIdentifiers)
+        )
+      )
+      .pipe(
+        map((results: Gn4SearchResults) => results.hits.hits),
+        switchMap((records) =>
+          records && records.length > 0
+            ? this.gn4Mapper.readRecords(records)
+            : of(null)
+        )
+      )
+  }
+
   private mapEmbeddedFeatureCatalog(
     featureTypes: Array<DatasetFeatureType>
   ): DatasetFeatureCatalog {
@@ -203,6 +226,24 @@ export class Gn4Repository implements RecordsRepositoryInterface {
       )
   }
 
+  getSources(record: CatalogRecord): Observable<CatalogRecord[]> {
+    const sourcesIdentifiers = record.extras?.['sourcesIdentifiers'] as string[]
+    if (sourcesIdentifiers && sourcesIdentifiers.length > 0) {
+      return this.getMultipleRecords(sourcesIdentifiers)
+    }
+    return of(null)
+  }
+
+  getSourceOf(record: CatalogRecord): Observable<CatalogRecord[]> {
+    const sourceOfIdentifiers = record.extras?.[
+      'sourceOfIdentifiers'
+    ] as string[]
+    if (sourceOfIdentifiers && sourceOfIdentifiers.length > 0) {
+      return this.getMultipleRecords(sourceOfIdentifiers)
+    }
+    return of(null)
+  }
+
   aggregate(params: AggregationsParams): Observable<Aggregations> {
     // if aggregations are empty, return an empty object right away
     if (Object.keys(params).length === 0) return of({})
@@ -471,6 +512,18 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     )
   }
 
+  getApplicationLanguages(): Observable<string[]> {
+    return this.gn4LanguagesApi
+      .getApplicationLanguages()
+      .pipe(
+        map((languages) =>
+          languages
+            .map((lang) => LANG_3_TO_2_MAPPER[lang.id ?? ''])
+            .filter((code): code is string => !!code)
+        )
+      )
+  }
+
   private getRecordAsXml(uniqueIdentifier: string): Observable<string | null> {
     return this.gn4RecordsApi
       .getRecordAs(

package/src/libs/common/domain/src/lib/repository/records-repository.interface.ts

@@ -19,6 +19,8 @@ export abstract class RecordsRepositoryInterface {
   abstract getSimilarRecords(
     similarTo: CatalogRecord
   ): Observable<CatalogRecord[]>
+  abstract getSources(record: CatalogRecord): Observable<CatalogRecord[]>
+  abstract getSourceOf(record: CatalogRecord): Observable<CatalogRecord[]>
   abstract fuzzySearch(query: string): Observable<SearchResults>
   abstract canEditRecord(uniqueIdentifier: string): Observable<boolean>
   /**
@@ -95,4 +97,5 @@ export abstract class RecordsRepositoryInterface {
     localRecord: CatalogRecord
   ): Observable<{ user: string; date: Date }>
   abstract getRecordPublicationStatus(uuid: string): Observable<boolean>
+  abstract getApplicationLanguages(): Observable<string[]>
 }

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

@@ -1,14 +1,120 @@
 <div
-  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-9 px-3 gap-8"
+  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
 >
-  <span class="text-3xl font-title text-black/80 px-2" translate
-    >editor.record.form.multilingual.title</span
-  >
-  <gn-ui-check-toggle
-    class="p-2"
-    [label]="'editor.record.form.multilingual.enable' | translate"
-    [color]="'primary'"
-    [value]="translationsEnabled"
-    (toggled)="translationsEnabled = $event"
-  ></gn-ui-check-toggle>
+  <div class="flex flex-row px-2 justify-between">
+    <span class="text-3xl font-title text-black/80" translate
+      >editor.record.form.multilingual.title</span
+    >
+    <button
+      [title]="'editor.record.form.multilingual.open' | translate"
+      (click)="toggleLanguageSelection()"
+      *ngIf="isMultilingual"
+      data-test="activateSelection"
+    >
+      <ng-icon class="mt-1" name="iconoirSettings"></ng-icon>
+    </button>
+  </div>
+  <div class="flex flex-col gap-2" *ngIf="editTranslations || !isMultilingual">
+    <gn-ui-check-toggle
+      class="p-2"
+      [label]="'editor.record.form.multilingual.enable' | translate"
+      [color]="'primary'"
+      [(value)]="isMultilingual"
+      (toggled)="switchMultilingual($event)"
+    ></gn-ui-check-toggle>
+    <div *ngIf="isMultilingual" class="flex flex-col gap-2">
+      <div class="flex flex-row justify-between border-t border-gray-300 p-3">
+        <span class="mt-2 text-sm text-gray-600" translate
+          >editor.record.form.multilingual.activate</span
+        >
+        <gn-ui-button
+          extraClass="w-16 h-8 font-bold"
+          type="gray"
+          (buttonClick)="validateTranslations()"
+          data-test="validateSelection"
+          >{{ 'editor.record.form.multilingual.validate' | translate }}
+        </gn-ui-button>
+      </div>
+      <ng-container *ngIf="supportedLanguages$ | async as languages">
+        <div
+          class="flex flex-col gap-2 w-full px-2"
+          data-test="langAvailable"
+          *ngFor="let lang of languages"
+        >
+          <gn-ui-button
+            [extraClass]="getExtraClass(lang)"
+            type="gray"
+            (buttonClick)="toggleLanguage(lang)"
+            [disabled]="lang === _record.defaultLanguage"
+            [title]="getToggleTitle(lang)"
+          >
+            <span [class]="getIconClass(lang)"></span>
+            <span class="ml-2">{{ 'language.' + lang | translate }}</span>
+          </gn-ui-button>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+  <div *ngIf="!editTranslations && isMultilingual" class="flex flex-col gap-2">
+    <gn-ui-button
+      *ngFor="let recordLang of sortLanguages(recordLanguages); let i = index"
+      extraClass="flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full"
+      [ngClass]="{
+        'mt-8': isFirstUnsupported(i),
+        '': true,
+      }"
+      (buttonClick)="switchFormLang(recordLang)"
+      type="outline"
+      data-test="langSwitch"
+    >
+      <div class="flex flex-row gap-2 items-center">
+        <ng-icon
+          *ngIf="recordLang === formLanguage"
+          class="text-primary mt-1"
+          name="iconoirCheckCircle"
+        ></ng-icon>
+        <ng-icon
+          *ngIf="recordLang !== formLanguage"
+          class="text-gray-800 mt-1"
+          name="iconoirCircle"
+        ></ng-icon>
+        <span
+          *ngIf="recordLang.length === 2"
+          [class]="getIconClass(recordLang) + 'mt-1'"
+        ></span>
+        <span [ngClass]="recordLang === formLanguage ? 'text-black' : ''">{{
+          isLangSupported(recordLang)
+            ? ('language.' + recordLang | translate)
+            : recordLang.toUpperCase()
+        }}</span>
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <span
+          *ngIf="recordLang === formLanguage"
+          class="text-xs text-base"
+          translate
+          >editor.record.form.multilingual.default</span
+        >
+        <button
+          (click)="
+            openActionMenu(recordLang, template); $event.stopPropagation()
+          "
+          cdkOverlayOrigin
+          #actionMenuButton
+        >
+          <ng-icon class="pb-5" name="matMoreHorizOutline"></ng-icon>
+        </button>
+        <ng-template #template>
+          <gn-ui-action-menu
+            [canDelete]="recordLang !== _record.defaultLanguage"
+            page="record"
+            (delete)="confirmDeleteAction(recordLang)"
+            (closeActionMenu)="closeActionMenu()"
+            (switch)="switchDefaultLang(recordLang)"
+          >
+          </gn-ui-action-menu>
+        </ng-template>
+      </div>
+    </gn-ui-button>
+  </div>
 </div>