geonetwork-ui 2.10.0-dev.6fa5006eb → 2.10.0-dev.8101478f2

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.html

@@ -11,20 +11,11 @@
   ></gn-ui-autocomplete>
   <div class="flex gap-2 flex-wrap">
     @for (keyword of keywords; track keyword) {
-      <gn-ui-badge
-        [removable]="true"
-        (badgeRemoveClicked)="removeKeyword(keyword)"
-        >{{ keyword.label }}
-        @if (isPlaceWithoutExtent(keyword)) {
-          <ng-icon
-            [title]="
-              'editor.record.form.keywords.place.withoutExtent' | translate
-            "
-            class="badge-warning"
-            name="matWarningAmberOutline"
-          ></ng-icon>
-        }
-      </gn-ui-badge>
+      <gn-ui-keyword-badge
+        [keyword]="keyword"
+        [editable]="true"
+        (keywordRemove)="removeKeyword($event)"
+      ></gn-ui-keyword-badge>
     }
   </div>
 </div>

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts

@@ -7,40 +7,20 @@ import {
   inject,
 } from '@angular/core'
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
-import { AutocompleteComponent, BadgeComponent } from '../../../../../../../libs/ui/inputs/src'
+import { AutocompleteComponent } from '../../../../../../../libs/ui/inputs/src'
+import { KeywordBadgeComponent } from '../../../../../../../libs/ui/elements/src'
 import { map } from 'rxjs'
 import { Keyword } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
-import { TranslatePipe } from '@ngx-translate/core'
-import {
-  NgIconComponent,
-  provideIcons,
-  provideNgIconsConfig,
-} from '@ng-icons/core'
-import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
 
 type AutocompleteItem = { title: string; value: Keyword }
 
 @Component({
   selector: 'gn-ui-generic-keywords',
   templateUrl: './generic-keywords.component.html',
-  styleUrls: ['./generic-keywords.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    AutocompleteComponent,
-    NgIconComponent,
-    BadgeComponent,
-    TranslatePipe,
-  ],
-  providers: [
-    provideIcons({
-      matWarningAmberOutline,
-    }),
-    provideNgIconsConfig({
-      size: '1.5em',
-    }),
-  ],
+  imports: [AutocompleteComponent, KeywordBadgeComponent],
 })
 export class GenericKeywordsComponent {
   private platformService = inject(PlatformServiceInterface)
@@ -87,9 +67,4 @@ export class GenericKeywordsComponent {
     this.changedKeywords.emit(this.keywords)
     this.deletedKeyword.emit(keyword)
   }
-
-  isPlaceWithoutExtent(keyword: Keyword): boolean {
-    if (keyword.type !== 'place') return false
-    return !keyword.bbox
-  }
 }

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

@@ -3,13 +3,13 @@
     editor.record.form.field.onlineResource.edit.protocol
   </h3>
   @if (protocolHint) {
-    <span
-      class="material-symbols-outlined m-2 gn-ui-icon-small"
+    <ng-icon
+      name="matHelpOutline"
+      size="16"
+      class="m-2"
       [matTooltip]="protocolHint"
       matTooltipPosition="above"
-    >
-      help
-    </span>
+    ></ng-icon>
   }
 </div>
 <div class="flex flex-row items-center gap-4 h-[48px]">

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

@@ -30,6 +30,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirRefresh } from '@ng-icons/iconoir'
+import { matHelpOutline } from '@ng-icons/material-icons/outline'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BehaviorSubject,
@@ -65,7 +66,7 @@ marker(
     UrlInputComponent,
   ],
   providers: [
-    provideIcons({ iconoirRefresh }),
+    provideIcons({ iconoirRefresh, matHelpOutline }),
     provideNgIconsConfig({
       size: '1.5em',
     }),

package/src/libs/feature/editor/src/lib/components/record-form/form-field/field-focus.directive.ts

@@ -0,0 +1,41 @@
+import { Directive, ElementRef, inject, Input } from '@angular/core'
+
+@Directive({
+  selector: '[gnUiFieldFocus]',
+  standalone: true,
+  exportAs: 'fieldFocus',
+})
+export class FieldFocusDirective {
+  @Input() gnUiFieldFocusGlowClass = 'gn-ui-field-focus-glow'
+
+  private el = inject(ElementRef)
+
+  public focusField(focusInnerTarget = true) {
+    setTimeout(() => {
+      const host = this.el.nativeElement as HTMLElement
+      const glowClass = this.gnUiFieldFocusGlowClass
+
+      host.classList.remove(glowClass)
+      void host.offsetWidth
+      host.classList.add(glowClass)
+      host.addEventListener(
+        'animationend',
+        () => host.classList.remove(glowClass),
+        { once: true }
+      )
+
+      host.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      if (!focusInnerTarget) {
+        return
+      }
+      const target =
+        host.querySelector<HTMLElement>(
+          'input, textarea, select, [contenteditable="true"]'
+        ) ??
+        host.querySelector<HTMLElement>(
+          'button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        )
+      target?.focus({ preventScroll: true })
+    })
+  }
+}

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

@@ -131,13 +131,12 @@ export class FormFieldConstraintsShortcutsComponent implements OnDestroy {
           map((c) => c.length > 0),
           distinctUntilChanged()
         )
-        combineLatest([
-          isConstraintNotEmpty$,
-          this.anyToggleActivated$,
-        ]).subscribe(([isNotEmpty, anyToggleActivated]) => {
-          const visible = isNotEmpty && !anyToggleActivated
-          this.editorFacade.setFieldVisibility({ model }, visible)
-        })
+        combineLatest([isConstraintNotEmpty$, this.anyToggleActivated$])
+          .pipe(takeUntil(this.onDestroy$))
+          .subscribe(([isNotEmpty, anyToggleActivated]) => {
+            const visible = isNotEmpty && !anyToggleActivated
+            this.editorFacade.setFieldVisibility({ model }, visible)
+          })
       }
       hideEmptyConstraints(this.legalConstraints$, 'legalConstraints')
       hideEmptyConstraints(this.securityConstraints$, 'securityConstraints')

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

@@ -15,8 +15,15 @@
       (itemsOrderChange)="handleContactsChanged($event)"
       [elementTemplate]="contactTemplate"
     ></gn-ui-sortable-list>
-    <ng-template #contactTemplate let-contact>
-      <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+    <ng-template #contactTemplate let-contact let-index="index">
+      @if (modelSpecifier === 'contact:editableDetails') {
+        <gn-ui-contact-details-form
+          [contact]="contact"
+          (contactChange)="handleContactChanged($event, index)"
+        ></gn-ui-contact-details-form>
+      } @else {
+        <gn-ui-contact-card [contact]="contact"></gn-ui-contact-card>
+      }
     </ng-template>
   } @else {
     <div

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

@@ -28,6 +28,7 @@ import { UserModel } from '../../../../../../../../../libs/common/domain/src/lib
 import { PlatformServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/platform.service.interface'
 import { OrganizationsServiceInterface } from '../../../../../../../../../libs/common/domain/src/lib/organizations.service.interface'
 import { ContactCardComponent } from '../../../contact-card/contact-card.component'
+import { ContactDetailsFormComponent } from '../../../contact-details/contact-details-form.component'
 import {
   createFuzzyFilter,
   getIndividualDisplayName,
@@ -35,6 +36,7 @@ import {
 } from '../../../../../../../../../libs/util/shared/src'
 import { map } from 'rxjs/operators'
 import { SortableListComponent } from '../../../../../../../../../libs/ui/layout/src'
+import { FieldModelSpecifier } from '../../../../models/editor-config.model'
 
 @Component({
   selector: 'gn-ui-form-field-contacts',
@@ -47,6 +49,7 @@ import { SortableListComponent } from '../../../../../../../../../libs/ui/layout
     TranslateDirective,
     TranslatePipe,
     ContactCardComponent,
+    ContactDetailsFormComponent,
     SortableListComponent,
   ],
 })
@@ -56,6 +59,7 @@ export class FormFieldContactsComponent implements OnDestroy, OnChanges {
   private changeDetectorRef = inject(ChangeDetectorRef)
 
   @Input() value: Individual[]
+  @Input() modelSpecifier: FieldModelSpecifier
   @Output() valueChange: EventEmitter<Individual[]> = new EventEmitter()
 
   contacts: Individual[] = []
@@ -117,6 +121,14 @@ export class FormFieldContactsComponent implements OnDestroy, OnChanges {
     this.valueChange.emit(contacts)
   }
 
+  handleContactChanged(updatedContact: Individual, index: number) {
+    const contacts = this.contacts.map((contact, i) =>
+      i === index ? updatedContact : contact
+    )
+
+    this.handleContactsChanged(contacts)
+  }
+
   /**
    * gn-ui-autocomplete
    */

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

@@ -3,11 +3,11 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
   TemplateRef,
   ViewChild,
-  inject,
 } from '@angular/core'
 import { MatDialog } from '@angular/material/dialog'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'

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

@@ -3,11 +3,14 @@ import {
   ChangeDetectorRef,
   Component,
   EventEmitter,
+  inject,
   Input,
   Output,
-  inject,
 } from '@angular/core'
-import { GraphicOverview } from '../../../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  GraphicOverview,
+  RecordKind,
+} from '../../../../../../../../../libs/common/domain/src/lib/model/record'
 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'
@@ -30,6 +33,7 @@ export class FormFieldOverviewsComponent {
   private cd = inject(ChangeDetectorRef)
 
   @Input() metadataUuid: string
+  @Input() recordKind: RecordKind
   @Input() value: Array<GraphicOverview>
   @Output() valueChange: EventEmitter<Array<GraphicOverview>> =
     new EventEmitter()
@@ -111,13 +115,16 @@ export class FormFieldOverviewsComponent {
       {
         type: 'error',
         title: this.translateService.instant(
-          'editor.record.resourceError.title'
+          'editor.record.resourceError.title',
+          { recordKind: this.recordKind }
         ),
         text: `${this.translateService.instant(
-          'editor.record.resourceError.body'
+          'editor.record.resourceError.body',
+          { recordKind: this.recordKind }
         )} ${error.message}`,
         closeMessage: this.translateService.instant(
-          'editor.record.resourceError.closeMessage'
+          'editor.record.resourceError.closeMessage',
+          { recordKind: this.recordKind }
         ),
       },
       undefined,

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

@@ -9,11 +9,11 @@
     "
     (buttonClick)="togglePreview()"
   >
-    <span
-      class="material-symbols-outlined gn-ui-icon-small"
+    <ng-icon
+      [name]="preview ? 'matVisibilityOffOutline' : 'matVisibilityOutline'"
+      size="16"
       [ngClass]="{ 'text-primary': !preview }"
-      >{{ preview ? 'visibility_off' : 'visibility' }}</span
-    >
+    ></ng-icon>
     &nbsp;
     {{ preview ? 'Edit' : 'Preview' }}
   </gn-ui-button>

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

@@ -10,6 +10,11 @@ import { 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'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  matVisibilityOffOutline,
+  matVisibilityOutline,
+} from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-form-field-rich',
@@ -23,7 +28,9 @@ import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/la
     MarkdownEditorComponent,
     FormFieldWrapperComponent,
     ButtonComponent,
+    NgIconComponent,
   ],
+  providers: [provideIcons({ matVisibilityOutline, matVisibilityOffOutline })],
 })
 export class FormFieldRichComponent {
   @Input() label: string

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

@@ -5,7 +5,7 @@ import {
   DropdownMultiselectComponent,
 } from '../../../../../../../../../libs/ui/inputs/src'
 import { TranslatePipe, TranslateService } from '@ngx-translate/core'
-import { INSPIRE_TOPICS } from '../../../../fields.config'
+import { ISO_TOPICS } from '../../../../fields.config'
 
 @Component({
   selector: 'gn-ui-form-field-topics',
@@ -22,7 +22,7 @@ export class FormFieldTopicsComponent {
     this.topics = topics
   }
   @Output() valueChange: EventEmitter<string[]> = new EventEmitter()
-  availableTopics = INSPIRE_TOPICS.map((topic) => {
+  availableTopics = ISO_TOPICS.map((topic) => {
     return {
       label: this.translateService.instant(topic.label),
       value: topic.value,

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

@@ -1,11 +1,15 @@
 <div class="flex flex-col gap-2">
   <gn-ui-check-toggle
-    [label]="'editor.record.form.updateFrequency.planned' | translate"
+    [label]="
+      'editor.record.form.updateFrequency.planned' | translate: { recordKind }
+    "
     [value]="planned"
     (toggled)="onPlannedToggled()"
   ></gn-ui-check-toggle>
   <gn-ui-dropdown-selector
-    [title]="'editor.record.form.field.updateFrequency' | translate"
+    [title]="
+      'editor.record.form.field.updateFrequency' | translate: { recordKind }
+    "
     [showTitle]="false"
     [choices]="choices"
     [selected]="selectedFrequency"

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

@@ -2,12 +2,13 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  inject,
   Input,
   OnInit,
   Output,
-  inject,
 } from '@angular/core'
 import {
+  RecordKind,
   UpdateFrequency,
   UpdateFrequencyCode,
   updateFrequencyCodeValues,
@@ -37,6 +38,7 @@ export class FormFieldUpdateFrequencyComponent implements OnInit {
   private translateService = inject(TranslateService)
 
   @Input() value: UpdateFrequency
+  @Input() recordKind: RecordKind
   @Output() valueChange: EventEmitter<UpdateFrequency> = new EventEmitter()
 
   protected choices: DropdownChoice[] = []

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

@@ -0,0 +1,3 @@
+:host {
+  scroll-margin-top: 90px;
+}

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

@@ -12,8 +12,8 @@
   </ng-container>
   <ng-template #withGenericWrapper>
     <gn-ui-form-field-wrapper
-      [label]="config.labelKey! | translate"
-      [hint]="config.hintKey! | translate"
+      [label]="config.labelKey! | translate: { recordKind }"
+      [hint]="config.hintKey! | translate: { recordKind }"
     >
       <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
     </gn-ui-form-field-wrapper>
@@ -34,30 +34,32 @@
           [value]="valueAsString"
           (change)="valueChange.emit($event.target.value)"
           [placeholder]="
-            'editor.record.form.field.title.placeholder' | translate
+            'editor.record.form.field.title.placeholder'
+              | translate: { recordKind }
           "
         ></textarea>
         <div class="flex flex-row justify-between self-start mt-0.5">
-          <span
-            class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+          <ng-icon
+            name="matEditOutline"
+            size="16"
+            class="m-2 cursor-pointer"
             (click)="focusTitleInput()"
-            >edit</span
-          >
-          <span
+          ></ng-icon>
+          <ng-icon
             *ngIf="config.hintKey"
-            class="material-symbols-outlined gn-ui-icon-small m-2"
-            [matTooltip]="config.hintKey! | translate"
+            name="matHelpOutline"
+            size="16"
+            class="m-2"
+            [matTooltip]="config.hintKey! | translate: { recordKind }"
             matTooltipPosition="above"
-          >
-            help
-          </span>
+          ></ng-icon>
         </div>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="'abstract'">
       <gn-ui-form-field-rich
-        [label]="config.labelKey! | translate"
-        [hint]="config.hintKey! | translate"
+        [label]="config.labelKey! | translate: { recordKind }"
+        [hint]="config.hintKey! | translate: { recordKind }"
         [value]="valueAsString"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-rich>
@@ -65,6 +67,7 @@
     <ng-container *ngSwitchCase="'overviews'">
       <gn-ui-form-field-overviews
         [metadataUuid]="uniqueIdentifier"
+        [recordKind]="recordKind"
         [value]="valueAsOverviews"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-overviews>
@@ -92,6 +95,7 @@
       <gn-ui-form-field-update-frequency
         [value]="valueAsUpdateFrequency"
         (valueChange)="valueChange.emit($event)"
+        [recordKind]="recordKind"
       ></gn-ui-form-field-update-frequency>
     </ng-container>
     <ng-container *ngSwitchCase="'temporalExtents'">
@@ -117,7 +121,7 @@
     </ng-container>
     <ng-container *ngSwitchCase="'licenses'">
       <gn-ui-form-field-license
-        [label]="config.labelKey! | translate"
+        [label]="config.labelKey! | translate: { recordKind }"
         [recordLicences]="valueAsConstraints"
         (recordLicencesChange)="valueChange.emit($event)"
       ></gn-ui-form-field-license>
@@ -150,6 +154,7 @@
     <ng-container *ngSwitchCase="'contacts'">
       <gn-ui-form-field-contacts
         [value]="valueAsIndividuals"
+        [modelSpecifier]="modelSpecifier"
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-contacts>
     </ng-container>

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

@@ -4,6 +4,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   Output,
   ViewChild,
@@ -17,11 +18,18 @@ import {
   Individual,
   Keyword,
   OnlineResource,
+  RecordKind,
   UpdateFrequency,
 } from '../../../../../../../../libs/common/domain/src/lib/model/record'
 import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  matEditOutline,
+  matHelpOutline,
+} from '@ng-icons/material-icons/outline'
 import { TranslatePipe } from '@ngx-translate/core'
 import {
+  FieldFocusDirective,
   FormFieldDateComponent,
   FormFieldLicenseComponent,
   FormFieldTemporalExtentsComponent,
@@ -76,10 +84,14 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldSpatialToggleComponent,
     FormFieldTopicsComponent,
     TextFieldModule,
+    NgIconComponent,
   ],
+  providers: [provideIcons({ matEditOutline, matHelpOutline })],
+  hostDirectives: [FieldFocusDirective],
 })
 export class FormFieldComponent {
   @Input() uniqueIdentifier: string
+  @Input() recordKind: RecordKind
   @Input() model: CatalogRecordKeys
   @Input() modelSpecifier: FieldModelSpecifier
   @Input() componentName: FormFieldComponentName
@@ -92,6 +104,8 @@ export class FormFieldComponent {
   @ViewChild('titleInput') titleInput: ElementRef
   isOpenData = false
 
+  fieldFocus = inject(FieldFocusDirective)
+
   toggleIsOpenData(event: boolean) {
     this.isOpenData = event
   }

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

@@ -1,3 +1,4 @@
+export * from './field-focus.directive'
 export * from './form-field-keywords/form-field-keywords.component'
 export * from './form-field-license/form-field-license.component'
 export * from './form-field-date/form-field-date.component'

package/src/libs/feature/editor/src/lib/components/record-form/record-form.component.css

@@ -1,3 +1,35 @@
-gn-ui-form-field {
-  scroll-margin-top: 90px;
+/* Glow applied by FieldFocusDirective (gnUiFieldFocus) to a focused field or,
+   when the field is hidden, to its whole section. */
+.gn-ui-field-focus-glow {
+  position: relative;
+}
+
+.gn-ui-field-focus-glow::after {
+  content: '';
+  position: absolute;
+  inset: -8px;
+  border-radius: 8px;
+  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  pointer-events: none;
+  animation: gn-ui-field-focus-glow 3s ease-out forwards;
+}
+
+.gn-ui-field-focus-glow::before {
+  content: '';
+  position: absolute;
+  inset: -16px;
+  border: 2px dashed var(--color-primary);
+  border-radius: 10px;
+  pointer-events: none;
+  animation: gn-ui-field-focus-glow 3s ease-out forwards;
+}
+
+@keyframes gn-ui-field-focus-glow {
+  0%,
+  55% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }

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

@@ -3,16 +3,28 @@
     section of facade.currentSections$ | async;
     track sectionTracker($index, section)
   ) {
-    @if (!section.hidden) {
-      <div class="flex flex-col gap-6 border p-8 rounded-[8px] shadow">
+    @if (evaluateExpression(section.hidden)() !== true) {
+      <div
+        class="flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px]"
+        gnUiFieldFocus
+        #sectionFocus="fieldFocus"
+      >
         <div class="flex flex-col gap-2">
           @if (section.labelKey) {
-            <div class="text-2xl font-title text-black" translate>
+            <div
+              class="text-2xl font-title text-black"
+              translate
+              [translateParams]="{ recordKind: recordKind$ | async }"
+            >
               {{ section.labelKey }}
             </div>
           }
           @if (section.descriptionKey) {
-            <div class="text-gray-800 text-sm" translate>
+            <div
+              class="text-gray-800 text-sm"
+              translate
+              [translateParams]="{ recordKind: recordKind$ | async }"
+            >
               {{ section.descriptionKey }}
             </div>
           }
@@ -22,15 +34,15 @@
             field of section.fieldsWithValues;
             track fieldTracker($index, field)
           ) {
-            @if (!field.config.hidden) {
+            @if (evaluateExpression(field.config.hidden)() !== true) {
               <gn-ui-form-field
-                [id]="anchorIdPrefix + field.config.model"
                 [ngClass]="
                   field.config.gridColumnSpan === 1
                     ? 'col-span-1'
                     : 'col-span-2'
                 "
                 [uniqueIdentifier]="recordUniqueIdentifier$ | async"
+                [recordKind]="recordKind$ | async"
                 [model]="field.config.model!"
                 [modelSpecifier]="field.config.modelSpecifier!"
                 [config]="field.config.formFieldConfig"