Add editable label directive to UI module

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

@@ -1,14 +1,15 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { EditorService, FormField } from '../services/editor.service'
+import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
 
 @Component({
   selector: 'gn-ui-record-form',
   templateUrl: './record-form.component.html',
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, UiInputsModule],
 })
 export class RecordFormComponent {
   constructor(public editorService: EditorService) {}

libs/ui/inputs/src/lib/editable-label/editable-label.directive.spec.ts

@@ -0,0 +1,78 @@
+import { EditableLabelDirective } from './editable-label.directive'
+import { Component } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+@Component({
+  template: `<span [gnUiEditableLabel]="false"></span>`,
+})
+class TestWithEditableLabelFalseComponent {}
+
+@Component({
+  template: `<span
+    gnUiEditableLabel
+    (editableLabelChanged)="handleEditableLabelChanged($event)"
+  >
+    This is the text content.
+  </span>`,
+})
+class TestWithEditableLabelComponent {
+  handleEditableLabelChanged = jest.fn()
+}
+
+describe('EditableLabelDirective', () => {
+  describe('Deactivated', () => {
+    let fixture: ComponentFixture<TestWithEditableLabelFalseComponent>
+    let spanElement: HTMLElement
+
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        declarations: [
+          EditableLabelDirective,
+          TestWithEditableLabelFalseComponent,
+        ],
+      }).compileComponents()
+
+      fixture = TestBed.createComponent(TestWithEditableLabelFalseComponent)
+      spanElement = fixture.nativeElement.querySelector('span')
+    })
+
+    it('should not add an input element to the DOM when the directive is added to an element with the "false" value', () => {
+      fixture.detectChanges()
+      const inputElement = spanElement.querySelector('input')
+      expect(inputElement).toBeNull()
+    })
+  })
+
+  describe('Activated', () => {
+    let component: TestWithEditableLabelComponent
+    let fixture: ComponentFixture<TestWithEditableLabelComponent>
+    let spanElement: HTMLElement
+
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        declarations: [EditableLabelDirective, TestWithEditableLabelComponent],
+      }).compileComponents()
+
+      fixture = TestBed.createComponent(TestWithEditableLabelComponent)
+      component = fixture.componentInstance
+      spanElement = fixture.nativeElement.querySelector('span')
+    })
+
+    it('should add an input element to the DOM with the host text content as value when the directive is added to an element', () => {
+      fixture.detectChanges()
+      const inputElement = spanElement.querySelector('input')
+      expect(inputElement).not.toBeNull()
+      expect(inputElement.value).toEqual('This is the text content.')
+    })
+
+    it('should call handleEditableLabelChanged when editableLabelChanged is emitted', () => {
+      fixture.detectChanges()
+      const inputElement = spanElement.querySelector('input')
+      inputElement.value = 'New Value'
+      inputElement.dispatchEvent(new Event('input'))
+      expect(component.handleEditableLabelChanged).toHaveBeenCalledWith(
+        'New Value'
+      )
+    })
+  })
+})

libs/ui/inputs/src/lib/editable-label/editable-label.directive.stories.ts

@@ -0,0 +1,76 @@
+import { Component, Input } from '@angular/core'
+import { action } from '@storybook/addon-actions'
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'
+import { EditableLabelDirective } from './editable-label.directive'
+
+@Component({
+  selector: 'gn-ui-editable-label-story',
+  template: `<h3
+    class="text-3xl font-bold"
+    [gnUiEditableLabel]="editable"
+    (editableLabelChanged)="handleEditableLabelChanged($event)"
+  >
+    {{ label }}
+  </h3>`,
+})
+class EditableLabelStoryComponent {
+  @Input() editable?: boolean
+  @Input() label: string
+
+  handleEditableLabelChanged = action('editableLabelChanged')
+}
+
+export default {
+  title: 'Inputs/EditableLabel',
+  component: EditableLabelStoryComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [EditableLabelDirective],
+      imports: [],
+    }),
+  ],
+} as Meta<EditableLabelStoryComponent>
+
+export const Editable: StoryObj<EditableLabelStoryComponent> = {
+  args: {
+    editable: true,
+    label: 'This is an in place editable label.',
+  },
+  render: (args) => ({
+    props: { ...args, editableLabelChanged: action('editableLabelChanged') },
+  }),
+}
+
+export const NonEditable: StoryObj<EditableLabelStoryComponent> = {
+  args: {
+    editable: false,
+    label: 'This is a non editable label.',
+  },
+  render: (args) => ({
+    props: { ...args, editableLabelChanged: action('editableLabelChanged') },
+  }),
+}
+
+export const EditableWithNewLinesAndSpaces: StoryObj<EditableLabelStoryComponent> =
+  {
+    args: {
+      editable: true,
+      label: `   This is a multi-line
+    editable label.  `,
+    },
+    render: (args) => ({
+      props: { ...args, editableLabelChanged: action('editableLabelChanged') },
+    }),
+  }
+
+export const NonEditableWithNewLinesAndSpaces: StoryObj<EditableLabelStoryComponent> =
+  {
+    args: {
+      editable: false,
+      label: `   This is a multi-line
+    non editable label.  `,
+    },
+    render: (args) => ({
+      props: { ...args, editableLabelChanged: action('editableLabelChanged') },
+    }),
+  }

libs/ui/inputs/src/lib/editable-label/editable-label.directive.ts

@@ -0,0 +1,47 @@
+import {
+  Directive,
+  ElementRef,
+  Renderer2,
+  AfterViewInit,
+  EventEmitter,
+  Output,
+  Input,
+} from '@angular/core'
+
+@Directive({
+  selector: '[gnUiEditableLabel]',
+})
+export class EditableLabelDirective implements AfterViewInit {
+  @Output() editableLabelChanged = new EventEmitter<string>()
+  @Input() gnUiEditableLabel?: boolean
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngAfterViewInit() {
+    if (this.gnUiEditableLabel !== false) {
+      const appendedInput = this.renderer.createElement('input')
+
+      this.renderer.setStyle(appendedInput, 'background', 'inherit')
+      this.renderer.setStyle(appendedInput, 'color', 'inherit')
+      this.renderer.setStyle(appendedInput, 'font', 'inherit')
+      this.renderer.setStyle(appendedInput, 'border', 'inherit')
+      this.renderer.setStyle(appendedInput, 'width', '100%')
+      this.renderer.setStyle(appendedInput, 'padding', 'inherit')
+      this.renderer.setStyle(appendedInput, 'margin', '0')
+      this.renderer.setStyle(appendedInput, 'height', 'inherit')
+      this.renderer.setStyle(appendedInput, 'line-height', 'inherit')
+      this.renderer.setStyle(appendedInput, 'text-decoration', 'inherit')
+
+      const hostContent = this.el.nativeElement.textContent || ''
+      const formattedContent = hostContent.replace(/\s+/g, ' ').trim()
+      this.renderer.setProperty(appendedInput, 'value', formattedContent)
+      this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '')
+
+      this.renderer.listen(appendedInput, 'input', (event) => {
+        this.editableLabelChanged.emit(event.target.value)
+      })
+
+      this.renderer.appendChild(this.el.nativeElement, appendedInput)
+    }
+  }
+}

libs/ui/inputs/src/lib/ui-inputs.module.ts

@@ -41,6 +41,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatNativeDateModule } from '@angular/material/core'
+import { EditableLabelDirective } from './editable-label/editable-label.directive'
 
 @NgModule({
   declarations: [
@@ -68,6 +69,7 @@ import { MatNativeDateModule } from '@angular/material/core'
     CheckboxComponent,
     SearchInputComponent,
     DateRangePickerComponent,
+    EditableLabelDirective,
   ],
   imports: [
     CommonModule,
@@ -106,6 +108,7 @@ import { MatNativeDateModule } from '@angular/material/core'
     CheckboxComponent,
     SearchInputComponent,
     DateRangePickerComponent,
+    EditableLabelDirective,
   ],
 })
 export class UiInputsModule {}

libs/ui/search/src/lib/record-table/record-table.component.html

@@ -38,7 +38,7 @@
       </div>
       <div
         class="contents hover:text-gray-900 text-gray-800 cursor-pointer"
-        (click)="recordSelect.emit(record)"
+        (click)="recordsSelect.emit([record])"
         *ngFor="let record of records"
       >
         <div class="record-table-col text-16">
@@ -157,7 +157,7 @@
       </div>
       <div
         class="contents hover:text-gray-900 text-gray-800 cursor-pointer"
-        (click)="recordSelect.emit(record)"
+        (click)="recordsSelect.emit([record])"
         *ngFor="let record of records"
       >
         <div class="record-table-col">