geonetwork-ui 2.3.0-dev.6083baae → 2.3.0-dev.a288b23a

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

@@ -1,3 +1,4 @@
+import { ElementRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { FormFieldConfig } from './form-field.model';
@@ -7,8 +8,10 @@ export declare class FormFieldComponent {
     config: FormFieldConfig;
     set value(v: unknown);
     valueChange: Observable<unknown>;
+    titleInput: ElementRef;
     formControl: FormControl<any>;
     constructor();
+    focusTitleInput(): void;
     get simpleType(): "number" | "text" | "url" | "toggle" | "date" | "list";
     get isSimpleField(): boolean;
     get isFileField(): boolean;
@@ -19,6 +22,7 @@ export declare class FormFieldComponent {
     get isFieldOk(): boolean;
     get isFieldLocked(): boolean;
     get isFieldInvalid(): boolean;
+    get isTitle(): boolean;
     get isAbstract(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "gn-ui-form-field", never, { "model": { "alias": "model"; "required": false; }; "config": { "alias": "config"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;

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

@@ -1 +1 @@
-{"version":3,"file":"form-field.component.d.ts","sourceRoot":"","sources":["../../../../../../../../src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAuB,MAAM,gBAAgB,CAAA;AAGjE,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AAQjC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;;AAGpD,qBAoBa,kBAAkB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,eAAe,CAAA;IAChC,IAAa,KAAK,CAAC,CAAC,EAAE,OAAO,EAI5B;IACS,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;IAE1C,WAAW,mBAAoB;;IAM/B,IAAI,UAAU,2DAQb;IAED,IAAI,aAAa,YAShB;IACD,IAAI,WAAW,YAEd;IACD,IAAI,oBAAoB,YAEvB;IACD,IAAI,qBAAqB,YAExB;IACD,IAAI,YAAY,YAEf;IACD,IAAI,aAAa,YAEhB;IAED,IAAI,SAAS,YAEZ;IACD,IAAI,aAAa,YAEhB;IACD,IAAI,cAAc,YAEjB;IAED,IAAI,UAAU,YAEb;yCAhEU,kBAAkB;2CAAlB,kBAAkB;CAiE9B"}
+{"version":3,"file":"form-field.component.d.ts","sourceRoot":"","sources":["../../../../../../../../src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,UAAU,EAIX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,WAAW,EAAuB,MAAM,gBAAgB,CAAA;AAKjE,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AAQjC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;;AAEpD,qBAsBa,kBAAkB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,eAAe,CAAA;IAChC,IAAa,KAAK,CAAC,CAAC,EAAE,OAAO,EAI5B;IACS,WAAW,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;IAEjB,UAAU,EAAE,UAAU,CAAA;IAE/C,WAAW,mBAAoB;;IAM/B,eAAe;IAIf,IAAI,UAAU,2DAQb;IAED,IAAI,aAAa,YAShB;IACD,IAAI,WAAW,YAEd;IACD,IAAI,oBAAoB,YAEvB;IACD,IAAI,qBAAqB,YAExB;IACD,IAAI,YAAY,YAEf;IACD,IAAI,aAAa,YAEhB;IAED,IAAI,SAAS,YAEZ;IACD,IAAI,aAAa,YAEhB;IACD,IAAI,cAAc,YAEjB;IAED,IAAI,OAAO,YAEV;IACD,IAAI,UAAU,YAEb;yCAzEU,kBAAkB;2CAAlB,kBAAkB;CA0E9B"}

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

@@ -1 +1 @@
-{"version":3,"file":"record-form.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/libs/feature/editor/src/lib/components/record-form/record-form.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;;AAY9E,qBAkBa,mBAAmB;IAGX,MAAM,EAAE,YAAY;IAFvC,OAAO;;;SAA4B;gBAEhB,MAAM,EAAE,YAAY;IAEvC,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB;IAO1E,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB;yCAZxC,mBAAmB;2CAAnB,mBAAmB;CAe/B"}
+{"version":3,"file":"record-form.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/libs/feature/editor/src/lib/components/record-form/record-form.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;;AAG9E,qBAQa,mBAAmB;IAGX,MAAM,EAAE,YAAY;IAFvC,OAAO;;;SAA4B;gBAEhB,MAAM,EAAE,YAAY;IAEvC,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB;IAO1E,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB;yCAZxC,mBAAmB;2CAAnB,mBAAmB;CAe/B"}

package/package.json

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

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

@@ -1,5 +0,0 @@
-.icon-small {
-  font-size: 16px;
-  height: 16px;
-  width: 16px;
-}

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

@@ -4,7 +4,7 @@
     [extraClass]="getButtonExtraClass()"
     (buttonClick)="togglePreview()"
   >
-    <span class="material-symbols-outlined mr-1 icon-small">{{
+    <span class="material-symbols-outlined mr-1 gn-ui-icon-small">{{
       preview ? 'visibility' : 'visibility_off'
     }}</span>
     {{ preview ? 'WYSIWYG' : 'Markdown' }}

package/src/libs/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"

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

@@ -1,11 +1,16 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   Input,
   Output,
+  ViewChild,
 } from '@angular/core'
 import { FormControl, ReactiveFormsModule } from '@angular/forms'
 import { MatIconModule } from '@angular/material/icon'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { EditableLabelDirective } from '../../../../../../../../libs/ui/inputs/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { Observable } from 'rxjs'
 import { FormFieldArrayComponent } from './form-field-array/form-field-array.component'
@@ -16,7 +21,6 @@ import { FormFieldSimpleComponent } from './form-field-simple/form-field-simple.
 import { FormFieldSpatialExtentComponent } from './form-field-spatial-extent/form-field-spatial-extent.component'
 import { FormFieldTemporalExtentComponent } from './form-field-temporal-extent/form-field-temporal-extent.component'
 import { FormFieldConfig } from './form-field.model'
-import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-form-field',
@@ -25,6 +29,11 @@ import { CommonModule } from '@angular/common'
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    EditableLabelDirective,
+    MatIconModule,
+    MatTooltipModule,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
     FormFieldObjectComponent,
@@ -32,10 +41,7 @@ import { CommonModule } from '@angular/common'
     FormFieldTemporalExtentComponent,
     FormFieldFileComponent,
     FormFieldArrayComponent,
-    CommonModule,
-    ReactiveFormsModule,
     TranslateModule,
-    MatIconModule,
   ],
 })
 export class FormFieldComponent {
@@ -48,12 +54,18 @@ export class FormFieldComponent {
   }
   @Output() valueChange: Observable<unknown>
 
+  @ViewChild('titleInput') titleInput: ElementRef
+
   formControl = new FormControl()
 
   constructor() {
     this.valueChange = this.formControl.valueChanges
   }
 
+  focusTitleInput() {
+    this.titleInput.nativeElement.children[0].focus()
+  }
+
   get simpleType() {
     return this.config.type as
       | 'date'
@@ -100,6 +112,9 @@ export class FormFieldComponent {
     return !this.config.locked && this.config.invalid
   }
 
+  get isTitle() {
+    return this.model === 'title'
+  }
   get isAbstract() {
     return this.model === 'abstract'
   }

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

@@ -2,16 +2,7 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
 import { EditorFieldState, EditorFieldValue } from '../../models/fields.model'
-import {
-  FormFieldArrayComponent,
-  FormFieldComponent,
-  FormFieldFileComponent,
-  FormFieldObjectComponent,
-  FormFieldRichComponent,
-  FormFieldSimpleComponent,
-  FormFieldSpatialExtentComponent,
-  FormFieldTemporalExtentComponent,
-} from './form-field'
+import { FormFieldComponent } from './form-field'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -19,17 +10,7 @@ import {
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    CommonModule,
-    FormFieldComponent,
-    FormFieldArrayComponent,
-    FormFieldFileComponent,
-    FormFieldObjectComponent,
-    FormFieldRichComponent,
-    FormFieldSimpleComponent,
-    FormFieldSpatialExtentComponent,
-    FormFieldTemporalExtentComponent,
-  ],
+  imports: [CommonModule, FormFieldComponent],
 })
 export class RecordFormComponent {
   fields$ = this.facade.recordFields$

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

@@ -1,5 +0,0 @@
-.icon-small {
-  font-size: 16px;
-  height: 16px;
-  width: 16px;
-}

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

@@ -4,7 +4,7 @@
     <div class="flex-1 flex justify-end items-center">
       <ng-content select="[form-field-interaction]"></ng-content>
       <span
-        class="material-symbols-outlined m-2 icon-small"
+        class="material-symbols-outlined m-2 gn-ui-icon-small"
         [matTooltip]="hint"
         matTooltipPosition="above"
       >

package/tailwind.base.css

@@ -9,6 +9,13 @@
     @apply shadow-xl hover:shadow-xl-hover transition-shadow;
   }
 
+  /* ICON CLASSES */
+  .gn-ui-icon-small {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
   /* LINK CLASSES */
   .gn-ui-link {
     @apply text-blue-600 hover:text-blue-700 hover:underline;