geonetwork-ui 2.3.0-dev.6e2b8bea → 2.3.0-dev.c22cb78a

package/libs/ui/layout/src/index.d.ts

@@ -1,9 +1,10 @@
-export * from './lib/ui-layout.module';
 export * from './lib/anchor-link/anchor-link.directive';
 export * from './lib/carousel/carousel.component';
-export * from './lib/expandable-panel/expandable-panel.component';
-export * from './lib/sticky-header/sticky-header.component';
 export * from './lib/expandable-panel-button/expandable-panel-button.component';
-export * from './lib/interactive-table/interactive-table.component';
+export * from './lib/expandable-panel/expandable-panel.component';
+export * from './lib/form-field-wrapper/form-field-wrapper.component';
 export * from './lib/interactive-table/interactive-table-column/interactive-table-column.component';
+export * from './lib/interactive-table/interactive-table.component';
+export * from './lib/sticky-header/sticky-header.component';
+export * from './lib/ui-layout.module';
 //# sourceMappingURL=index.d.ts.map

package/libs/ui/layout/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/libs/ui/layout/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,yCAAyC,CAAA;AACvD,cAAc,mCAAmC,CAAA;AACjD,cAAc,mDAAmD,CAAA;AACjE,cAAc,6CAA6C,CAAA;AAC3D,cAAc,iEAAiE,CAAA;AAC/E,cAAc,qDAAqD,CAAA;AACnE,cAAc,qFAAqF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/libs/ui/layout/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yCAAyC,CAAA;AACvD,cAAc,mCAAmC,CAAA;AACjD,cAAc,iEAAiE,CAAA;AAC/E,cAAc,mDAAmD,CAAA;AACjE,cAAc,uDAAuD,CAAA;AACrE,cAAc,qFAAqF,CAAA;AACnG,cAAc,qDAAqD,CAAA;AACnE,cAAc,6CAA6C,CAAA;AAC3D,cAAc,wBAAwB,CAAA"}

package/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class FormFieldWrapperComponent {
+    label: string;
+    hint: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldWrapperComponent, "gn-ui-form-field-wrapper", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; }, {}, never, ["[form-field-interaction]", "*"], true, never>;
+}
+//# sourceMappingURL=form-field-wrapper.component.d.ts.map

package/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-wrapper.component.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts"],"names":[],"mappings":";AAIA,qBAQa,yBAAyB;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;yCAFV,yBAAyB;2CAAzB,yBAAyB;CAGrC"}

package/libs/util/shared/src/lib/utils/bytes-convert.d.ts

@@ -0,0 +1,2 @@
+export declare function megabytesToBytes(megabytes: any): number;
+//# sourceMappingURL=bytes-convert.d.ts.map

package/libs/util/shared/src/lib/utils/bytes-convert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bytes-convert.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/utils/bytes-convert.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAAC,SAAS,KAAA,UAEzC"}

package/libs/util/shared/src/lib/utils/image-resize.d.ts

@@ -0,0 +1,3 @@
+export declare function downsizeImage(blob: Blob, maxWidth: number, maxHeight: number): Promise<Blob>;
+export declare function downgradeImage(blob: Blob, maxSizeBytes: number): Promise<Blob>;
+//# sourceMappingURL=image-resize.d.ts.map

package/libs/util/shared/src/lib/utils/image-resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-resize.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/utils/image-resize.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAC3B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,IAAI,CAAC,CA6Bf;AAED,wBAAgB,cAAc,CAC5B,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,MAAM,GACnB,OAAO,CAAC,IAAI,CAAC,CAiCf"}

package/libs/util/shared/src/lib/utils/index.d.ts

@@ -1,10 +1,12 @@
+export * from './bytes-convert';
+export * from './event';
+export * from './fuzzy-filter';
+export * from './geojson';
+export * from './image-resize';
 export * from './parse';
-export * from './strip-html';
 export * from './remove-whitespace';
-export * from './geojson';
 export * from './sort-by';
-export * from './url';
-export * from './event';
-export * from './fuzzy-filter';
+export * from './strip-html';
 export * from './temporal-extent-union';
+export * from './url';
 //# sourceMappingURL=index.d.ts.map

package/libs/util/shared/src/lib/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/util/shared/src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,yBAAyB,CAAA;AACvC,cAAc,OAAO,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.3.0-dev.6e2b8bea",
+  "version": "2.3.0-dev.c22cb78a",
   "engines": {
     "node": ">=14.17.0"
   },

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

@@ -124,6 +124,12 @@ export class Gn4FieldMapper {
         getFirstValue(selectField<string>(source, 'creationDateForResource'))
       ),
     }),
+    revisionDateForResource: (output, source) => ({
+      ...output,
+      datasetUpdated: toDate(
+        getFirstValue(selectField<string>(source, 'revisionDateForResource'))
+      ),
+    }),
     createDate: (output, source) => ({
       ...output,
       recordCreated: toDate(selectField<string>(source, 'createDate')),

package/src/libs/data-access/gn4/src/openapi/api/records.api.service.ts

@@ -30,7 +30,6 @@ import {
 import { ExtentDtoApiModel } from '../model/models'
 import { FeatureResponseApiModel } from '../model/models'
 import { IProcessingReportApiModel } from '../model/models'
-import { InlineObject3ApiModel } from '../model/models'
 import { MetadataBatchApproveParameterApiModel } from '../model/models'
 import { MetadataBatchSubmitParameterApiModel } from '../model/models'
 import { MetadataCategoryApiModel } from '../model/models'
@@ -75,6 +74,20 @@ export class RecordsApiService {
     this.encoder = this.configuration.encoder || new CustomHttpParameterCodec()
   }
 
+  /**
+   * @param consumes string[] mime-types
+   * @return true: consumes contains 'multipart/form-data', false: otherwise
+   */
+  private canConsumeForm(consumes: string[]): boolean {
+    const form = 'multipart/form-data'
+    for (const consume of consumes) {
+      if (form === consume) {
+        return true
+      }
+    }
+    return false
+  }
+
   private addToHttpParams(
     httpParams: HttpParams,
     value: any,
@@ -8290,44 +8303,44 @@ export class RecordsApiService {
   /**
    * Create a new resource for a given metadata
    * @param metadataUuid The metadata UUID
+   * @param file The file to upload
    * @param visibility The sharing policy
    * @param approved Use approved version or not
-   * @param inlineObject3ApiModel
    * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
    * @param reportProgress flag to report request and response progress.
    */
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe?: 'body',
     reportProgress?: boolean,
     options?: { httpHeaderAccept?: 'application/json' }
   ): Observable<MetadataResourceApiModel>
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe?: 'response',
     reportProgress?: boolean,
     options?: { httpHeaderAccept?: 'application/json' }
   ): Observable<HttpResponse<MetadataResourceApiModel>>
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe?: 'events',
     reportProgress?: boolean,
     options?: { httpHeaderAccept?: 'application/json' }
   ): Observable<HttpEvent<MetadataResourceApiModel>>
   public putResource(
     metadataUuid: string,
+    file: Blob,
     visibility?: 'public' | 'private',
     approved?: boolean,
-    inlineObject3ApiModel?: InlineObject3ApiModel,
     observe: any = 'body',
     reportProgress: boolean = false,
     options?: { httpHeaderAccept?: 'application/json' }
@@ -8337,6 +8350,11 @@ export class RecordsApiService {
         'Required parameter metadataUuid was null or undefined when calling putResource.'
       )
     }
+    if (file === null || file === undefined) {
+      throw new Error(
+        'Required parameter file was null or undefined when calling putResource.'
+      )
+    }
 
     let queryParameters = new HttpParams({ encoder: this.encoder })
     if (visibility !== undefined && visibility !== null) {
@@ -8369,11 +8387,24 @@ export class RecordsApiService {
     }
 
     // to determine the Content-Type header
-    const consumes: string[] = ['application/json']
-    const httpContentTypeSelected: string | undefined =
-      this.configuration.selectHeaderContentType(consumes)
-    if (httpContentTypeSelected !== undefined) {
-      headers = headers.set('Content-Type', httpContentTypeSelected)
+    const consumes: string[] = ['multipart/form-data']
+
+    const canConsumeForm = this.canConsumeForm(consumes)
+
+    let formParams: { append(param: string, value: any): any }
+    let useForm = false
+    let convertFormParamsToString = false
+    // use FormData to transmit files using content-type "multipart/form-data"
+    // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
+    useForm = canConsumeForm
+    if (useForm) {
+      formParams = new FormData()
+    } else {
+      formParams = new HttpParams({ encoder: this.encoder })
+    }
+
+    if (file !== undefined) {
+      formParams = (formParams.append('file', <any>file) as any) || formParams
     }
 
     let responseType_: 'text' | 'json' = 'json'
@@ -8388,7 +8419,7 @@ export class RecordsApiService {
       `${this.configuration.basePath}/records/${encodeURIComponent(
         String(metadataUuid)
       )}/attachments`,
-      inlineObject3ApiModel,
+      convertFormParamsToString ? formParams.toString() : formParams,
       {
         params: queryParameters,
         responseType: <any>responseType_,

package/src/libs/data-access/gn4/src/openapi/model/models.ts

@@ -33,7 +33,6 @@ export * from './iProcessingReport.api.model'
 export * from './iSODate.api.model'
 export * from './infoReport.api.model'
 export * from './inlineObject1.api.model'
-export * from './inlineObject3.api.model'
 export * from './inlineObject4.api.model'
 export * from './isoLanguage.api.model'
 export * from './jSONObject.api.model'

package/src/libs/data-access/gn4/src/spec.yaml

@@ -7390,7 +7390,7 @@ paths:
           example: true
       requestBody:
         content:
-          application/json:
+          multipart/form-data:
             schema:
               required:
                 - file

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -94,7 +94,7 @@ export class DataService {
           ),
           geojson: endpoint.supportsJson(featureType.name)
             ? endpoint.getFeatureUrl(featureType.name, {
-                outputFormat: 'application/json',
+                asJson: true,
                 outputCrs: 'EPSG:4326',
               })
             : null,

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

@@ -5,7 +5,7 @@ export * from './lib/+state/editor.reducer'
 export * from './lib/+state/editor.actions'
 export * from './lib/feature-editor.module'
 export * from './lib/services/editor.service'
-export * from './lib/record-form/record-form.component'
+export * from './lib/components/record-form/record-form.component'
 export * from './lib/components/wizard/wizard.component'
 export * from './lib/components/wizard-field/wizard-field.component'
 export * from './lib/components/wizard-summarize/wizard-summarize.component'

package/src/libs/feature/editor/src/lib/+state/editor.facade.ts

@@ -3,14 +3,21 @@ import { select, Store } from '@ngrx/store'
 import * as EditorActions from './editor.actions'
 import * as EditorSelectors from './editor.selectors'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { filter, Observable } from 'rxjs'
+import { Actions, ofType } from '@ngrx/effects'
 
 @Injectable()
 export class EditorFacade {
   private readonly store = inject(Store)
+  private actions$ = inject(Actions)
 
   record$ = this.store.pipe(select(EditorSelectors.selectRecord))
   saving$ = this.store.pipe(select(EditorSelectors.selectRecordSaving))
-  saveError$ = this.store.pipe(select(EditorSelectors.selectRecordSaveError))
+  saveError$ = this.store.pipe(
+    select(EditorSelectors.selectRecordSaveError),
+    filter((error) => !!error)
+  )
+  saveSuccess$ = this.actions$.pipe(ofType(EditorActions.saveRecordSuccess))
   changedSinceSave$ = this.store.pipe(
     select(EditorSelectors.selectRecordChangedSinceSave)
   )

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html

@@ -0,0 +1,8 @@
+<gn-ui-image-input
+  [maxSizeMB]="5"
+  [previewUrl]="resourceUrl"
+  [altText]="resourceFileName"
+  (fileChange)="handleFileChange($event)"
+  (urlChange)="handleUrlChange($event)"
+  (delete)="handleDelete()"
+></gn-ui-image-input>

package/src/libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts

@@ -0,0 +1,70 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { RecordsApiService } from '../../../../../../../libs/data-access/gn4/src'
+import { UiInputsModule } from '../../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-overview-upload',
+  standalone: true,
+  imports: [CommonModule, UiInputsModule],
+  templateUrl: './overview-upload.component.html',
+  styleUrls: ['./overview-upload.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OverviewUploadComponent implements OnInit {
+  @Input() metadataUuid: string
+
+  resourceFileName: string
+  resourceUrl: string
+
+  constructor(
+    private recordsApiService: RecordsApiService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.recordsApiService
+      .getAllResources(this.metadataUuid)
+      .subscribe((resources) => {
+        this.resourceFileName = resources[0]?.filename
+        this.resourceUrl = resources[0]?.url
+        this.cd.markForCheck()
+      })
+  }
+
+  handleFileChange(file: File) {
+    this.recordsApiService
+      .putResource(this.metadataUuid, file, 'public')
+      .subscribe((resource) => {
+        this.resourceFileName = resource.filename
+        this.resourceUrl = resource.url
+        this.cd.markForCheck()
+      })
+  }
+
+  handleUrlChange(url: string) {
+    this.recordsApiService
+      .putResourceFromURL(this.metadataUuid, url, 'public')
+      .subscribe((resource) => {
+        this.resourceFileName = resource.filename
+        this.resourceUrl = resource.url
+        this.cd.markForCheck()
+      })
+  }
+
+  handleDelete() {
+    this.recordsApiService
+      .delResource(this.metadataUuid, this.resourceFileName)
+      .subscribe(() => {
+        this.resourceFileName = null
+        this.resourceUrl = null
+        this.cd.markForCheck()
+      })
+  }
+}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-array/form-field-array.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-array.component.html',
   styleUrls: ['./form-field-array.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldArrayComponent {}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-file/form-field-file.component.ts

@@ -1,11 +1,14 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-form-field-file',
   templateUrl: './form-field-file.component.html',
   styleUrls: ['./form-field-file.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
 })
 export class FormFieldFileComponent {
   @Input() control!: FormControl

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-object/form-field-object.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-object.component.html',
   styleUrls: ['./form-field-object.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldObjectComponent {}

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

@@ -0,0 +1,20 @@
+<gn-ui-form-field-wrapper [label]="label" [hint]="hint">
+  <gn-ui-button
+    form-field-interaction
+    [extraClass]="getButtonExtraClass()"
+    (buttonClick)="togglePreview()"
+  >
+    <span class="material-symbols-outlined mr-1 gn-ui-icon-small">{{
+      preview ? 'visibility' : 'visibility_off'
+    }}</span>
+    {{ preview ? 'WYSIWYG' : 'Markdown' }}
+  </gn-ui-button>
+  <gn-ui-markdown-editor
+    class="h-full"
+    [preview]="preview"
+    [helperText]="helperText"
+    [placeholder]="placeholder"
+    [textContent]="control.value"
+    (textContentChanged)="handleTextContentChanged($event)"
+  ></gn-ui-markdown-editor>
+</gn-ui-form-field-wrapper>

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

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
+import { MarkdownEditorComponent } from '../../../../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/layout/src'
+
+@Component({
+  selector: 'gn-ui-form-field-rich',
+  templateUrl: './form-field-rich.component.html',
+  styleUrls: ['./form-field-rich.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MarkdownEditorComponent,
+    FormFieldWrapperComponent,
+    ButtonComponent,
+  ],
+})
+export class FormFieldRichComponent {
+  @Input() control!: FormControl
+  @Input() label: string
+  @Input() hint: string
+  @Input() helperText: string
+  @Input() placeholder = 'Votre texte ici' //TODO: translate
+
+  preview = false
+
+  getButtonExtraClass() {
+    return `${
+      this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'
+    } rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`
+  }
+
+  togglePreview() {
+    this.preview = !this.preview
+  }
+
+  handleTextContentChanged(textContent: string) {
+    this.control.setValue(textContent)
+  }
+}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-simple/form-field-simple.component.ts

@@ -1,11 +1,14 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { FormControl } from '@angular/forms'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-form-field-simple',
   templateUrl: './form-field-simple.component.html',
   styleUrls: ['./form-field-simple.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
 })
 export class FormFieldSimpleComponent {
   @Input() type: 'date' | 'url' | 'text' | 'number' | 'list' | 'toggle'

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-spatial-extent.component.html',
   styleUrls: ['./form-field-spatial-extent.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldSpatialExtentComponent {}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field-temporal-extent/form-field-temporal-extent.component.ts

@@ -5,5 +5,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   templateUrl: './form-field-temporal-extent.component.html',
   styleUrls: ['./form-field-temporal-extent.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
 })
 export class FormFieldTemporalExtentComponent {}

package/src/libs/{ui/inputs/src/lib → feature/editor/src/lib/components/record-form}/form-field/form-field.component.html

@@ -24,6 +24,30 @@
       >cancel</mat-icon
     >
   </div>
+  <ng-container *ngIf="isTitle">
+    <div class="flex justify-between items-center gap-3">
+      <h2
+        #titleInput
+        class="grow text-3xl font-normal"
+        [gnUiEditableLabel]="true"
+        (editableLabelChanged)="formControl.setValue($event)"
+      >
+        {{ formControl.value }}
+      </h2>
+      <span
+        class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+        (click)="focusTitleInput()"
+        >edit</span
+      >
+      <span
+        class="material-symbols-outlined gn-ui-icon-small m-2"
+        [matTooltip]="config.hintKey | translate"
+        matTooltipPosition="above"
+      >
+        help
+      </span>
+    </div>
+  </ng-container>
   <ng-container *ngIf="isSimpleField">
     <gn-ui-form-field-simple
       [type]="simpleType"
@@ -39,12 +63,12 @@
       [invalid]="isFieldInvalid"
     ></gn-ui-form-field-file>
   </ng-container>
-  <ng-container *ngIf="isRichField">
+  <ng-container *ngIf="isAbstract">
     <gn-ui-form-field-rich
-      class="grow"
+      class="h-[8rem]"
       [control]="formControl"
-      [readonly]="isFieldLocked"
-      [invalid]="isFieldInvalid"
+      [label]="config.labelKey | translate"
+      [hint]="config.hintKey | translate"
     ></gn-ui-form-field-rich>
   </ng-container>
   <ng-container *ngIf="isArrayField">