geonetwork-ui 2.5.0-dev.6e4d22b12 → 2.5.0-dev.70f4ef380

package/fesm2022/geonetwork-ui.mjs

@@ -26,7 +26,7 @@ import { createAction, props, createReducer, on, createFeatureSelector, createSe
 import EmblaCarousel from 'embla-carousel';
 import * as i2$2 from '@ng-icons/core';
 import { provideIcons, NgIcon, NgIconComponent, provideNgIconsConfig, NgIconsModule } from '@ng-icons/core';
-import { iconoirNavArrowRight, iconoirNavArrowLeft, iconoirNavArrowDown, iconoirNavArrowUp, iconoirSearch, iconoirCalendar, iconoirLink, iconoirArrowUp, iconoirCloudUpload, iconoirFramePlusIn, iconoirMediaImage, iconoirMediaImageXmark, iconoirBin, iconoirPlus, iconoirUser, iconoirLock, iconoirImport, iconoirLightBulbOn, iconoirArrowLeft, iconoirAttachment, iconoirRefresh } from '@ng-icons/iconoir';
+import { iconoirNavArrowRight, iconoirNavArrowLeft, iconoirNavArrowDown, iconoirNavArrowUp, iconoirSearch, iconoirLongArrowDownLeft, iconoirCalendar, iconoirLink, iconoirArrowUp, iconoirCloudUpload, iconoirFramePlusIn, iconoirMediaImage, iconoirMediaImageXmark, iconoirBin, iconoirPlus, iconoirUser, iconoirLock, iconoirImport, iconoirLightBulbOn, iconoirArrowLeft, iconoirAttachment, iconoirRefresh } from '@ng-icons/iconoir';
 import { matExpandMore, matExpandLess, matAdd, matRemove, matClose, matContentCopy, matSearch, matStar, matStarBorder, matChevronLeft, matChevronRight, matArrowForward, matArrowBack, matCheck, matWarningAmber, matMoreHoriz, matFace, matQuestionMark, matMoodBad, matZoomOutMap, matOpenInNew, matMailOutline, matPersonOutline, matCheckCircleOutline, matWarning, matMoreVert, matCorporateFare } from '@ng-icons/material-icons/baseline';
 import * as i1$4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -19072,7 +19072,7 @@ var de = {
 	"search.error.receivedError": "Ein Fehler ist aufgetreten",
 	"search.error.recordHasnolink": "",
 	"search.error.recordNotFound": "Der Datensatz mit der Kennung \"{ id }\" konnte nicht gefunden werden.",
-	"search.field.any.placeholder": "Suche Datensätze ...",
+	"search.field.any.placeholder": "Suche im katalog ...",
 	"search.field.sortBy": "Sortieren nach:",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
@@ -19617,7 +19617,7 @@ var en = {
 	"search.error.receivedError": "An error was received",
 	"search.error.recordHasnolink": "This dataset currently has no link yet, please come back later.",
 	"search.error.recordNotFound": "The dataset with identifier \"{ id }\" could not be found.",
-	"search.field.any.placeholder": "Search datasets ...",
+	"search.field.any.placeholder": "Search in the catalog ...",
 	"search.field.sortBy": "Sort by:",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
@@ -20707,7 +20707,7 @@ var fr = {
 	"search.error.receivedError": "Erreur retournée",
 	"search.error.recordHasnolink": "Ce jeu de données n'a pas encore de lien, réessayez plus tard s'il vous plaît.",
 	"search.error.recordNotFound": "Cette donnée n'a pu être trouvée.",
-	"search.field.any.placeholder": "Rechercher un jeu de données...",
+	"search.field.any.placeholder": "Rechercher dans le catalogue...",
 	"search.field.sortBy": "Trier par :",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
@@ -21252,7 +21252,7 @@ var it = {
 	"search.error.receivedError": "Errore restituito",
 	"search.error.recordHasnolink": "Questo dataset non ha ancora alcun collegamento, riprova più tardi.",
 	"search.error.recordNotFound": "Impossibile trovare questi dati.",
-	"search.field.any.placeholder": "Cerca un dataset...",
+	"search.field.any.placeholder": "Cerca del catalogo...",
 	"search.field.sortBy": "Ordina per:",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
@@ -22592,7 +22592,7 @@ class Gn4FieldMapper {
                 featureTypes: selectField(source, 'featureTypes'),
             }, output),
             related: (output, source) => {
-                const fcatSource = selectField(getFirstValue(selectField(selectField(source, 'related'), 'fcats')), '_source');
+                const fcatSource = selectField(getFirstValue(selectField(selectField(source, 'related'), 'fcats')) ?? {}, '_source');
                 const featureCatalogIdentifier = selectField(fcatSource, 'uuid');
                 return featureCatalogIdentifier
                     ? this.addExtra({ featureCatalogIdentifier }, output)
@@ -23544,14 +23544,10 @@ class Gn4Repository {
         return this.getExternalRecordAsXml(recordDownloadUrl).pipe(exhaustMap(async (fetchedRecordAsXml) => {
             const converter = findConverterForDocument(fetchedRecordAsXml);
             const record = await converter.readRecord(fetchedRecordAsXml);
-            const tempId = this.generateTemporaryId();
             record.title = `${record.title} (Copy)`;
-            record.uniqueIdentifier = tempId;
-            const recordAsXml = await converter.writeRecord(record, fetchedRecordAsXml);
-            this.saveRecordToLocalStorage(recordAsXml, record.uniqueIdentifier);
-            this._draftsChanged.next();
-            return tempId;
-        }), catchError((error) => {
+            await converter.writeRecord(record, fetchedRecordAsXml);
+            return this.saveRecord(record, '', false);
+        }), exhaustMap((uuidObservable) => uuidObservable), catchError((error) => {
             return throwError(() => error);
         }));
     }
@@ -26120,8 +26116,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class AutocompleteComponent {
+    get displayEnterBtn() {
+        return this.enterButton && this.allowSubmit && !this.searchActive;
+    }
+    getExtraClass() {
+        if (this.allowSubmit) {
+            if (this.enterButton) {
+                return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+var(--icon-padding))] inset-y-[--icon-padding]';
+            }
+            else {
+                return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+0.25*var(--icon-width))] inset-y-[calc(0.25*var(--icon-width))]';
+            }
+        }
+        else {
+            if (!this.enterButton) {
+                return 'border rounded-lg absolute w-8 h-8 right-2 inset-y-2';
+            }
+        }
+        return 'border rounded-lg absolute w-8 h-8';
+    }
     constructor(cdRef) {
         this.cdRef = cdRef;
+        this.enterButton = false;
         this.clearOnSelection = false;
         this.preventCompleteOnSelection = false;
         this.autoFocus = false;
@@ -26132,6 +26148,7 @@ class AutocompleteComponent {
         this.itemSelected = new EventEmitter();
         this.inputSubmitted = new EventEmitter();
         this.inputCleared = new EventEmitter();
+        this.isSearchActive = new EventEmitter();
         this.control = new UntypedFormControl();
         this.cancelEnter = true;
         this.selectionSubject = new ReplaySubject(1);
@@ -26139,6 +26156,8 @@ class AutocompleteComponent {
         this.error = null;
         this.subscription = new Subscription();
         this.lastPosition = null;
+        this.enterBtnPosition = 0;
+        this.searchActive = false;
         this.displayWithFn = (item) => item.toString();
         this.displayWithFnInternal = (item) => {
             if (item === null || item === undefined)
@@ -26169,6 +26188,14 @@ class AutocompleteComponent {
             const previousTextValue = this.displayWithFnInternal(value.previousValue);
             const currentTextValue = this.displayWithFnInternal(value.currentValue);
             if (previousTextValue !== currentTextValue) {
+                if (currentTextValue) {
+                    this.searchActive = true;
+                    this.isSearchActive.emit(true);
+                }
+                else {
+                    this.searchActive = false;
+                    this.isSearchActive.emit(false);
+                }
                 this.updateInputValue(value.currentValue);
             }
         }
@@ -26241,6 +26268,8 @@ class AutocompleteComponent {
     }
     clear() {
         this.inputRef.nativeElement.value = '';
+        this.searchActive = false;
+        this.isSearchActive.emit(false);
         this.inputCleared.emit();
         this.selectionSubject
             .pipe(take(1))
@@ -26249,6 +26278,8 @@ class AutocompleteComponent {
     }
     handleEnter(any) {
         if (!this.cancelEnter && this.allowSubmit) {
+            this.isSearchActive.emit(true);
+            this.searchActive = true;
             this.inputSubmitted.emit(any);
         }
     }
@@ -26276,16 +26307,22 @@ class AutocompleteComponent {
             this.control.setValue('');
         }
     }
+    handleInput(event) {
+        this.searchActive = false;
+        this.isSearchActive.emit(false);
+        this.enterBtnPosition = event.target['value'].length * 8 + 80;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "gn-ui-autocomplete", inputs: { placeholder: "placeholder", action: "action", value: "value", clearOnSelection: "clearOnSelection", preventCompleteOnSelection: "preventCompleteOnSelection", autoFocus: "autoFocus", minCharacterCount: "minCharacterCount", allowSubmit: "allowSubmit", forceTrackPosition: "forceTrackPosition", displayWithFn: "displayWithFn" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", inputCleared: "inputCleared" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "gn-ui-autocomplete", inputs: { placeholder: "placeholder", enterButton: "enterButton", action: "action", value: "value", clearOnSelection: "clearOnSelection", preventCompleteOnSelection: "preventCompleteOnSelection", autoFocus: "autoFocus", minCharacterCount: "minCharacterCount", allowSubmit: "allowSubmit", forceTrackPosition: "forceTrackPosition", displayWithFn: "displayWithFn" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", inputCleared: "inputCleared", isSearchActive: "isSearchActive" }, providers: [
             provideIcons({
                 iconoirSearch,
                 matClose,
+                iconoirLongArrowDownLeft,
             }),
             provideNgIconsConfig({
-                size: '1.5rem',
+                size: '1.75rem',
             }),
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <div\n    class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    *ngIf=\"!allowSubmit\"\n  >\n    <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n  </div>\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"gn-ui-text-input\"\n    [ngClass]=\"{\n      'px-[--icon-width]': !allowSubmit,\n    }\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter(searchInput.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 text-primary-lightest hover:text-primary focus:text-primary absolute inset-y-[--icon-padding] {{\n      allowSubmit\n        ? 'right-[calc(var(--icon-width)+var(--icon-padding))]'\n        : 'right-[--icon-padding]'\n    }}\"\n    data-test=\"clear-btn\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (buttonClick)=\"clear()\"\n  >\n    <ng-icon name=\"matClose\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n    aria-label=\"Trigger search\"\n    *ngIf=\"allowSubmit\"\n    data-test=\"autocomplete-submit-btn\"\n    (buttonClick)=\"handleClickSearch()\"\n  >\n    <ng-icon name=\"iconoirSearch\"></ng-icon>\n  </gn-ui-button>\n\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"matErrorOutlineOutline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <div\n    class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    *ngIf=\"!allowSubmit\"\n  >\n    <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n  </div>\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleEnter(searchInput.value)\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    <gn-ui-button\n      type=\"gray\"\n      *ngIf=\"searchInput.value && displayEnterBtn\"\n      extraClass=\"w-32 h-8 !opacity-100\"\n      [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n      class=\"absolute\"\n      disabled=\"true\"\n    >\n      <ng-icon\n        name=\"iconoirLongArrowDownLeft\"\n        class=\"!w-4 text-gray-900 font-bold\"\n      ></ng-icon>\n      <span translate class=\"text-bold text-gray-900 font-bold\">\n        Enter to search\n      </span>\n    </gn-ui-button>\n  </div>\n  <gn-ui-button\n    type=\"primary\"\n    [extraClass]=\"getExtraClass()\"\n    data-test=\"clear-btn\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (buttonClick)=\"clear()\"\n  >\n    <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n    aria-label=\"Trigger search\"\n    *ngIf=\"allowSubmit\"\n    data-test=\"autocomplete-submit-btn\"\n    (buttonClick)=\"handleClickSearch()\"\n  >\n    <ng-icon name=\"iconoirSearch\"></ng-icon>\n  </gn-ui-button>\n\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"matErrorOutlineOutline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -26301,13 +26338,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideIcons({
                             iconoirSearch,
                             matClose,
+                            iconoirLongArrowDownLeft,
                         }),
                         provideNgIconsConfig({
-                            size: '1.5rem',
+                            size: '1.75rem',
                         }),
-                    ], template: "<span class=\"w-full inline-block relative\">\n  <div\n    class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    *ngIf=\"!allowSubmit\"\n  >\n    <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n  </div>\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"gn-ui-text-input\"\n    [ngClass]=\"{\n      'px-[--icon-width]': !allowSubmit,\n    }\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter(searchInput.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 text-primary-lightest hover:text-primary focus:text-primary absolute inset-y-[--icon-padding] {{\n      allowSubmit\n        ? 'right-[calc(var(--icon-width)+var(--icon-padding))]'\n        : 'right-[--icon-padding]'\n    }}\"\n    data-test=\"clear-btn\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (buttonClick)=\"clear()\"\n  >\n    <ng-icon name=\"matClose\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n    aria-label=\"Trigger search\"\n    *ngIf=\"allowSubmit\"\n    data-test=\"autocomplete-submit-btn\"\n    (buttonClick)=\"handleClickSearch()\"\n  >\n    <ng-icon name=\"iconoirSearch\"></ng-icon>\n  </gn-ui-button>\n\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"matErrorOutlineOutline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"] }]
+                    ], template: "<span class=\"w-full inline-block relative\">\n  <div\n    class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    *ngIf=\"!allowSubmit\"\n  >\n    <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n  </div>\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleEnter(searchInput.value)\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    <gn-ui-button\n      type=\"gray\"\n      *ngIf=\"searchInput.value && displayEnterBtn\"\n      extraClass=\"w-32 h-8 !opacity-100\"\n      [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n      class=\"absolute\"\n      disabled=\"true\"\n    >\n      <ng-icon\n        name=\"iconoirLongArrowDownLeft\"\n        class=\"!w-4 text-gray-900 font-bold\"\n      ></ng-icon>\n      <span translate class=\"text-bold text-gray-900 font-bold\">\n        Enter to search\n      </span>\n    </gn-ui-button>\n  </div>\n  <gn-ui-button\n    type=\"primary\"\n    [extraClass]=\"getExtraClass()\"\n    data-test=\"clear-btn\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (buttonClick)=\"clear()\"\n  >\n    <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n    aria-label=\"Trigger search\"\n    *ngIf=\"allowSubmit\"\n    data-test=\"autocomplete-submit-btn\"\n    (buttonClick)=\"handleClickSearch()\"\n  >\n    <ng-icon name=\"iconoirSearch\"></ng-icon>\n  </gn-ui-button>\n\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"matErrorOutlineOutline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
                 type: Input
+            }], enterButton: [{
+                type: Input
             }], action: [{
                 type: Input
             }], value: [{
@@ -26330,6 +26370,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }], inputCleared: [{
                 type: Output
+            }], isSearchActive: [{
+                type: Output
             }], triggerRef: [{
                 type: ViewChild,
                 args: [MatAutocompleteTrigger]
@@ -28908,11 +28950,10 @@ class ImageInputComponent {
         }
     }
     handleDropFiles(files) {
-        if (!this.showUrlInput) {
-            const validFiles = this.filterTypeImage(files);
-            if (validFiles.length > 0) {
-                this.resizeAndEmit(validFiles[0]);
-            }
+        const validFiles = this.filterTypeImage(files);
+        if (validFiles.length > 0) {
+            this.showUrlInput = false;
+            this.resizeAndEmit(validFiles[0]);
         }
     }
     handleFileInput(event) {
@@ -29010,7 +29051,7 @@ class ImageInputComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-80 h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview class=\"h-48\" [imageUrl]=\"previewUrl\">\n    </gn-ui-image-overlay-preview>\n    <gn-ui-text-input\n      *ngIf=\"showAltTextInput\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText ?? ''\"\n      (valueChange)=\"handleAltTextChange($event)\"\n      extraClass=\"gn-ui-editor-textarea\"\n      [disabled]=\"true\"\n    ></gn-ui-text-input>\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button type=\"gray\" (buttonClick)=\"handleDelete()\">\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        type=\"gray\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500':\n          !isUploadInProgress && !uploadError && !showUrlInput && !disabled,\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"\n        isUploadInProgress || uploadError || showUrlInput || disabled ? null : 0\n      \"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div\n        class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n        *ngIf=\"!isUploadInProgress && !uploadError\"\n      >\n        <ng-icon\n          *ngIf=\"!dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirMediaImage\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirFramePlusIn\"\n        ></ng-icon>\n      </div>\n\n      <div\n        *ngIf=\"isUploadInProgress && !uploadError\"\n        class=\"w-14 h-14 grid items-center justify-center relative\"\n      >\n        <div class=\"text-gray-100 absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"100\"\n          ></mat-progress-spinner>\n        </div>\n        <div class=\"text-primary absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n        </div>\n        <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n      </div>\n\n      <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\" *ngIf=\"uploadError\">\n        <ng-icon\n          name=\"iconoirMediaImageXmark\"\n          class=\"place-self-center text-rose-500\"\n        ></ng-icon>\n      </div>\n\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            isUploadInProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"\n          showUrlInput || isUploadInProgress || uploadError || disabled\n        \"\n      />\n    </label>\n\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none mt-2\">\n      <gn-ui-button\n        (buttonClick)=\"displayUrlInput()\"\n        type=\"gray\"\n        [disabled]=\"disabled\"\n        [extraClass]=\"disabled && 'cursor-not-allowed'\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n\n    <gn-ui-url-input\n      *ngIf=\"showUrlInput\"\n      class=\"mt-3.5\"\n      (uploadClick)=\"downloadUrl($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    >\n    </gn-ui-url-input>\n  </div>\n</ng-template>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: ["imageUrl"], outputs: ["isPlaceholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-80 h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview class=\"h-48\" [imageUrl]=\"previewUrl\">\n    </gn-ui-image-overlay-preview>\n    <gn-ui-text-input\n      *ngIf=\"showAltTextInput\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText ?? ''\"\n      (valueChange)=\"handleAltTextChange($event)\"\n      extraClass=\"gn-ui-editor-textarea\"\n      [disabled]=\"true\"\n    ></gn-ui-text-input>\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        type=\"gray\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500':\n          !isUploadInProgress && !uploadError && !disabled,\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"isUploadInProgress || uploadError || disabled ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div\n        class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n        *ngIf=\"!isUploadInProgress && !uploadError\"\n      >\n        <ng-icon\n          *ngIf=\"!dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirMediaImage\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirFramePlusIn\"\n        ></ng-icon>\n      </div>\n\n      <div\n        *ngIf=\"isUploadInProgress && !uploadError\"\n        class=\"w-14 h-14 grid items-center justify-center relative\"\n      >\n        <div class=\"text-gray-100 absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"100\"\n          ></mat-progress-spinner>\n        </div>\n        <div class=\"text-primary absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n        </div>\n        <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n      </div>\n\n      <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\" *ngIf=\"uploadError\">\n        <ng-icon\n          name=\"iconoirMediaImageXmark\"\n          class=\"place-self-center text-rose-500\"\n        ></ng-icon>\n      </div>\n\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            isUploadInProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || uploadError || disabled\"\n      />\n    </label>\n\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none mt-2\">\n      <gn-ui-button\n        (buttonClick)=\"displayUrlInput()\"\n        type=\"gray\"\n        [disabled]=\"disabled\"\n        [extraClass]=\"disabled && 'cursor-not-allowed'\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n\n    <gn-ui-url-input\n      *ngIf=\"showUrlInput\"\n      class=\"mt-3.5\"\n      (uploadClick)=\"downloadUrl($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    >\n    </gn-ui-url-input>\n  </div>\n</ng-template>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: ["imageUrl"], outputs: ["isPlaceholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageInputComponent, decorators: [{
             type: Component,
@@ -29036,7 +29077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideNgIconsConfig({
                             size: '1.5rem',
                         }),
-                    ], template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-80 h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview class=\"h-48\" [imageUrl]=\"previewUrl\">\n    </gn-ui-image-overlay-preview>\n    <gn-ui-text-input\n      *ngIf=\"showAltTextInput\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText ?? ''\"\n      (valueChange)=\"handleAltTextChange($event)\"\n      extraClass=\"gn-ui-editor-textarea\"\n      [disabled]=\"true\"\n    ></gn-ui-text-input>\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button type=\"gray\" (buttonClick)=\"handleDelete()\">\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        type=\"gray\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500':\n          !isUploadInProgress && !uploadError && !showUrlInput && !disabled,\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"\n        isUploadInProgress || uploadError || showUrlInput || disabled ? null : 0\n      \"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div\n        class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n        *ngIf=\"!isUploadInProgress && !uploadError\"\n      >\n        <ng-icon\n          *ngIf=\"!dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirMediaImage\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirFramePlusIn\"\n        ></ng-icon>\n      </div>\n\n      <div\n        *ngIf=\"isUploadInProgress && !uploadError\"\n        class=\"w-14 h-14 grid items-center justify-center relative\"\n      >\n        <div class=\"text-gray-100 absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"100\"\n          ></mat-progress-spinner>\n        </div>\n        <div class=\"text-primary absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n        </div>\n        <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n      </div>\n\n      <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\" *ngIf=\"uploadError\">\n        <ng-icon\n          name=\"iconoirMediaImageXmark\"\n          class=\"place-self-center text-rose-500\"\n        ></ng-icon>\n      </div>\n\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            isUploadInProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"\n          showUrlInput || isUploadInProgress || uploadError || disabled\n        \"\n      />\n    </label>\n\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none mt-2\">\n      <gn-ui-button\n        (buttonClick)=\"displayUrlInput()\"\n        type=\"gray\"\n        [disabled]=\"disabled\"\n        [extraClass]=\"disabled && 'cursor-not-allowed'\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n\n    <gn-ui-url-input\n      *ngIf=\"showUrlInput\"\n      class=\"mt-3.5\"\n      (uploadClick)=\"downloadUrl($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    >\n    </gn-ui-url-input>\n  </div>\n</ng-template>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"] }]
+                    ], template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-80 h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview class=\"h-48\" [imageUrl]=\"previewUrl\">\n    </gn-ui-image-overlay-preview>\n    <gn-ui-text-input\n      *ngIf=\"showAltTextInput\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText ?? ''\"\n      (valueChange)=\"handleAltTextChange($event)\"\n      extraClass=\"gn-ui-editor-textarea\"\n      [disabled]=\"true\"\n    ></gn-ui-text-input>\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        type=\"gray\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500':\n          !isUploadInProgress && !uploadError && !disabled,\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"isUploadInProgress || uploadError || disabled ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div\n        class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n        *ngIf=\"!isUploadInProgress && !uploadError\"\n      >\n        <ng-icon\n          *ngIf=\"!dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirMediaImage\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirFramePlusIn\"\n        ></ng-icon>\n      </div>\n\n      <div\n        *ngIf=\"isUploadInProgress && !uploadError\"\n        class=\"w-14 h-14 grid items-center justify-center relative\"\n      >\n        <div class=\"text-gray-100 absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"100\"\n          ></mat-progress-spinner>\n        </div>\n        <div class=\"text-primary absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n        </div>\n        <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n      </div>\n\n      <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\" *ngIf=\"uploadError\">\n        <ng-icon\n          name=\"iconoirMediaImageXmark\"\n          class=\"place-self-center text-rose-500\"\n        ></ng-icon>\n      </div>\n\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            isUploadInProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || uploadError || disabled\"\n      />\n    </label>\n\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none mt-2\">\n      <gn-ui-button\n        (buttonClick)=\"displayUrlInput()\"\n        type=\"gray\"\n        [disabled]=\"disabled\"\n        [extraClass]=\"disabled && 'cursor-not-allowed'\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n\n    <gn-ui-url-input\n      *ngIf=\"showUrlInput\"\n      class=\"mt-3.5\"\n      (uploadClick)=\"downloadUrl($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    >\n    </gn-ui-url-input>\n  </div>\n</ng-template>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"] }]
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { maxSizeMB: [{
                 type: Input
             }], previewUrl: [{
@@ -31254,8 +31295,10 @@ class FuzzySearchComponent {
         this.recordsRepository = recordsRepository;
         this.autoFocus = false;
         this.forceTrackPosition = false;
+        this.enterButton = false;
         this.itemSelected = new EventEmitter();
         this.inputSubmitted = new EventEmitter();
+        this.isSearchActive = new EventEmitter();
         this.displayWithFn = (record) => record.title;
         this.autoCompleteAction = (query) => this.recordsRepository
             .fuzzySearch(query)
@@ -31295,12 +31338,15 @@ class FuzzySearchComponent {
             this.searchService.updateFilters({ any: '' });
         }
     }
+    handleSearchActive(event) {
+        this.isSearchActive.emit(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FuzzySearchComponent, deps: [{ token: SearchFacade }, { token: SearchService }, { token: RecordsRepositoryInterface }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FuzzySearchComponent, selector: "gn-ui-fuzzy-search", inputs: { autoFocus: "autoFocus", forceTrackPosition: "forceTrackPosition" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: AutocompleteComponent, descendants: true }], ngImport: i0, template: "<gn-ui-autocomplete\n  [placeholder]=\"'search.field.any.placeholder' | translate\"\n  [displayWithFn]=\"displayWithFn\"\n  [action]=\"autoCompleteAction\"\n  (itemSelected)=\"handleItemSelection($event)\"\n  (inputSubmitted)=\"handleInputSubmission($event)\"\n  (inputCleared)=\"handleInputCleared()\"\n  [value]=\"searchInputValue$ | async\"\n  [preventCompleteOnSelection]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  [allowSubmit]=\"true\"\n  [forceTrackPosition]=\"forceTrackPosition\"\n></gn-ui-autocomplete>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FuzzySearchComponent, selector: "gn-ui-fuzzy-search", inputs: { autoFocus: "autoFocus", forceTrackPosition: "forceTrackPosition", enterButton: "enterButton" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", isSearchActive: "isSearchActive" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: AutocompleteComponent, descendants: true }], ngImport: i0, template: "<gn-ui-autocomplete\n  [placeholder]=\"'search.field.any.placeholder' | translate\"\n  [displayWithFn]=\"displayWithFn\"\n  [action]=\"autoCompleteAction\"\n  (itemSelected)=\"handleItemSelection($event)\"\n  (inputSubmitted)=\"handleInputSubmission($event)\"\n  (inputCleared)=\"handleInputCleared()\"\n  (isSearchActive)=\"handleSearchActive($event)\"\n  [value]=\"searchInputValue$ | async\"\n  [preventCompleteOnSelection]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  [allowSubmit]=\"true\"\n  [forceTrackPosition]=\"forceTrackPosition\"\n  [enterButton]=\"enterButton\"\n></gn-ui-autocomplete>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FuzzySearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-fuzzy-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-autocomplete\n  [placeholder]=\"'search.field.any.placeholder' | translate\"\n  [displayWithFn]=\"displayWithFn\"\n  [action]=\"autoCompleteAction\"\n  (itemSelected)=\"handleItemSelection($event)\"\n  (inputSubmitted)=\"handleInputSubmission($event)\"\n  (inputCleared)=\"handleInputCleared()\"\n  [value]=\"searchInputValue$ | async\"\n  [preventCompleteOnSelection]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  [allowSubmit]=\"true\"\n  [forceTrackPosition]=\"forceTrackPosition\"\n></gn-ui-autocomplete>\n" }]
+            args: [{ selector: 'gn-ui-fuzzy-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-autocomplete\n  [placeholder]=\"'search.field.any.placeholder' | translate\"\n  [displayWithFn]=\"displayWithFn\"\n  [action]=\"autoCompleteAction\"\n  (itemSelected)=\"handleItemSelection($event)\"\n  (inputSubmitted)=\"handleInputSubmission($event)\"\n  (inputCleared)=\"handleInputCleared()\"\n  (isSearchActive)=\"handleSearchActive($event)\"\n  [value]=\"searchInputValue$ | async\"\n  [preventCompleteOnSelection]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  [allowSubmit]=\"true\"\n  [forceTrackPosition]=\"forceTrackPosition\"\n  [enterButton]=\"enterButton\"\n></gn-ui-autocomplete>\n" }]
         }], ctorParameters: () => [{ type: SearchFacade }, { type: SearchService }, { type: RecordsRepositoryInterface }], propDecorators: { autocomplete: [{
                 type: ViewChild,
                 args: [AutocompleteComponent]
@@ -31308,10 +31354,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], forceTrackPosition: [{
                 type: Input
+            }], enterButton: [{
+                type: Input
             }], itemSelected: [{
                 type: Output
             }], inputSubmitted: [{
                 type: Output
+            }], isSearchActive: [{
+                type: Output
             }] } });
 
 class RecordsMetricsComponent {
@@ -34370,7 +34420,7 @@ class AddLayerFromCatalogComponent {
                     ADDLAYER: new ResultsLayoutConfigItem(AddLayerRecordPreviewComponent, 'py-2', '', 'flex flex-col divide-y divide-y-grey-50'),
                 },
             },
-        ], ngImport: i0, template: "<div class=\"h-full text-sm\">\n  <gn-ui-fuzzy-search></gn-ui-fuzzy-search>\n  <gn-ui-results-list-container\n    layout=\"ADDLAYER\"\n  ></gn-ui-results-list-container>\n</div>\n", styles: ["::ng-deep .mat-tab-body-wrapper{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: FeatureSearchModule }, { kind: "component", type: FuzzySearchComponent, selector: "gn-ui-fuzzy-search", inputs: ["autoFocus", "forceTrackPosition"], outputs: ["itemSelected", "inputSubmitted"] }, { kind: "component", type: ResultsListContainerComponent, selector: "gn-ui-results-list-container", inputs: ["metadataQualityDisplay", "layout", "showMore"], outputs: ["mdSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"h-full text-sm\">\n  <gn-ui-fuzzy-search></gn-ui-fuzzy-search>\n  <gn-ui-results-list-container\n    layout=\"ADDLAYER\"\n  ></gn-ui-results-list-container>\n</div>\n", styles: ["::ng-deep .mat-tab-body-wrapper{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: FeatureSearchModule }, { kind: "component", type: FuzzySearchComponent, selector: "gn-ui-fuzzy-search", inputs: ["autoFocus", "forceTrackPosition", "enterButton"], outputs: ["itemSelected", "inputSubmitted", "isSearchActive"] }, { kind: "component", type: ResultsListContainerComponent, selector: "gn-ui-results-list-container", inputs: ["metadataQualityDisplay", "layout", "showMore"], outputs: ["mdSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddLayerFromCatalogComponent, decorators: [{
             type: Component,
@@ -39015,15 +39065,15 @@ class ImportRecordComponent {
     importRecord(url) {
         this.isRecordImportInProgress = true;
         this.recordsRepository.duplicateExternalRecord(url).subscribe({
-            next: (recordTempId) => {
-                if (recordTempId) {
+            next: (uuid) => {
+                if (uuid) {
                     this.notificationsService.showNotification({
                         type: 'success',
                         title: this.translateService.instant('editor.record.importFromExternalFile.success.title'),
                         text: `${this.translateService.instant('editor.record.importFromExternalFile.success.body')}`,
                     }, 2500);
                     this.router
-                        .navigate(['/edit', recordTempId])
+                        .navigate(['/edit', uuid])
                         .catch((err) => console.error(err));
                 }
                 this.closeImportMenu.next();
@@ -39115,7 +39165,7 @@ class GenericKeywordsComponent {
             provideIcons({
                 matWarningAmberOutline,
             }),
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <gn-ui-autocomplete\n    [placeholder]=\"placeholder\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [preventCompleteOnSelection]=\"false\"\n    [minCharacterCount]=\"1\"\n    [allowSubmit]=\"false\"\n    [clearOnSelection]=\"true\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    <gn-ui-badge\n      *ngFor=\"let keyword of keywords\"\n      [removable]=\"true\"\n      (badgeRemoveClicked)=\"removeKeyword(keyword)\"\n      >{{ keyword.label }}\n\n      <ng-icon\n        *ngIf=\"isPlaceWithoutExtent(keyword)\"\n        [title]=\"'editor.record.form.keywords.place.withoutExtent' | translate\"\n        class=\"badge-warning\"\n        name=\"matWarningAmberOutline\"\n      ></ng-icon>\n    </gn-ui-badge>\n  </div>\n</div>\n", styles: [".badge-warning{font-size:1.4em}\n"], dependencies: [{ kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UiWidgetsModule }, { kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <gn-ui-autocomplete\n    [placeholder]=\"placeholder\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [preventCompleteOnSelection]=\"false\"\n    [minCharacterCount]=\"1\"\n    [allowSubmit]=\"false\"\n    [clearOnSelection]=\"true\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    <gn-ui-badge\n      *ngFor=\"let keyword of keywords\"\n      [removable]=\"true\"\n      (badgeRemoveClicked)=\"removeKeyword(keyword)\"\n      >{{ keyword.label }}\n\n      <ng-icon\n        *ngIf=\"isPlaceWithoutExtent(keyword)\"\n        [title]=\"'editor.record.form.keywords.place.withoutExtent' | translate\"\n        class=\"badge-warning\"\n        name=\"matWarningAmberOutline\"\n      ></ng-icon>\n    </gn-ui-badge>\n  </div>\n</div>\n", styles: [".badge-warning{font-size:1.4em}\n"], dependencies: [{ kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UiWidgetsModule }, { kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GenericKeywordsComponent, decorators: [{
             type: Component,
@@ -39628,20 +39678,16 @@ class FormFieldContactsForResourceComponent {
         this.organizationsServiceInterface = organizationsServiceInterface;
         this.valueChange = new EventEmitter();
         this.contactsForRessourceByRole = new Map();
-        this.rolesToPick = [
-            'resource_provider',
-            'custodian',
-            'owner',
-            'point_of_contact',
-            'author',
-            'publisher',
-        ];
+        this.roleValues = RoleValues;
+        this.rolesToPick = this.roleValues.filter((role) => role !== 'other' && role !== 'unspecified');
         this.roleSectionsToDisplay = [];
         this.allOrganizations = new Map();
         /**
          * gn-ui-autocomplete
          */
-        this.displayWithFn = (user) => `${user.name} ${user.surname} ${user.organisation ? `(${user.organisation})` : ''}`;
+        this.displayWithFn = (user) => user.name
+            ? `${user.name} ${user.surname} ${user.organisation ? `(${user.organisation})` : ''}`
+            : ``;
         /**
          * gn-ui-autocomplete
          */
@@ -39733,7 +39779,7 @@ class FormFieldContactsForResourceComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    <ng-container *ngFor=\"let role of rolesToPick\">\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    </ng-container>\n  </div>\n  <div\n    class=\"mt-8\"\n    *ngIf=\"\n      roleSectionsToDisplay && roleSectionsToDisplay.length > 0;\n      else noContact\n    \"\n    data-test=\"displayedRoles\"\n  >\n    <div\n      *ngFor=\"\n        let role of roleSectionsToDisplay;\n        let index = index;\n        let isLast = last\n      \"\n      class=\"flex flex-col gap-4\"\n    >\n      <div class=\"flex flex-row justify-between\">\n        <span class=\"font-bold text-base\" translate>{{\n          roleToLabel(role)\n        }}</span>\n      </div>\n\n      <gn-ui-autocomplete\n        [placeholder]=\"\n          'editor.record.form.field.contactsForResource.placeholder' | translate\n        \"\n        [action]=\"autoCompleteAction\"\n        (itemSelected)=\"addContact($event, role)\"\n        [displayWithFn]=\"displayWithFn\"\n        [minCharacterCount]=\"1\"\n        [clearOnSelection]=\"true\"\n        [allowSubmit]=\"false\"\n      >\n      </gn-ui-autocomplete>\n\n      <ng-container *ngIf=\"contactsForRessourceByRole.get(role) as contacts\">\n        <gn-ui-sortable-list\n          [items]=\"contacts\"\n          (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n          [elementTemplate]=\"contactTemplate\"\n        ></gn-ui-sortable-list>\n        <ng-template #contactTemplate let-contact>\n          <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n        </ng-template>\n      </ng-container>\n\n      <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" *ngIf=\"!isLast\" />\n    </div>\n  </div>\n  <ng-template #noContact>\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UiWidgetsModule }, { kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    <ng-container *ngFor=\"let role of rolesToPick\">\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    </ng-container>\n  </div>\n  <div\n    class=\"mt-8\"\n    *ngIf=\"\n      roleSectionsToDisplay && roleSectionsToDisplay.length > 0;\n      else noContact\n    \"\n    data-test=\"displayedRoles\"\n  >\n    <div\n      *ngFor=\"\n        let role of roleSectionsToDisplay;\n        let index = index;\n        let isLast = last\n      \"\n      class=\"flex flex-col gap-4\"\n    >\n      <div class=\"flex flex-row justify-between\">\n        <span class=\"font-bold text-base\" translate>{{\n          roleToLabel(role)\n        }}</span>\n      </div>\n\n      <gn-ui-autocomplete\n        *ngIf=\"role !== 'unspecified' && role !== 'other'\"\n        [placeholder]=\"\n          'editor.record.form.field.contactsForResource.placeholder' | translate\n        \"\n        [action]=\"autoCompleteAction\"\n        (itemSelected)=\"addContact($event, role)\"\n        [displayWithFn]=\"displayWithFn\"\n        [minCharacterCount]=\"1\"\n        [clearOnSelection]=\"true\"\n        [allowSubmit]=\"false\"\n      >\n      </gn-ui-autocomplete>\n\n      <ng-container *ngIf=\"contactsForRessourceByRole.get(role) as contacts\">\n        <gn-ui-sortable-list\n          [items]=\"contacts\"\n          (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n          [elementTemplate]=\"contactTemplate\"\n        ></gn-ui-sortable-list>\n        <ng-template #contactTemplate let-contact>\n          <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n        </ng-template>\n      </ng-container>\n\n      <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" *ngIf=\"!isLast\" />\n    </div>\n  </div>\n  <ng-template #noContact>\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UiWidgetsModule }, { kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldContactsForResourceComponent, decorators: [{
             type: Component,
@@ -39752,7 +39798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideNgIconsConfig({
                             size: '1.5rem',
                         }),
-                    ], template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    <ng-container *ngFor=\"let role of rolesToPick\">\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    </ng-container>\n  </div>\n  <div\n    class=\"mt-8\"\n    *ngIf=\"\n      roleSectionsToDisplay && roleSectionsToDisplay.length > 0;\n      else noContact\n    \"\n    data-test=\"displayedRoles\"\n  >\n    <div\n      *ngFor=\"\n        let role of roleSectionsToDisplay;\n        let index = index;\n        let isLast = last\n      \"\n      class=\"flex flex-col gap-4\"\n    >\n      <div class=\"flex flex-row justify-between\">\n        <span class=\"font-bold text-base\" translate>{{\n          roleToLabel(role)\n        }}</span>\n      </div>\n\n      <gn-ui-autocomplete\n        [placeholder]=\"\n          'editor.record.form.field.contactsForResource.placeholder' | translate\n        \"\n        [action]=\"autoCompleteAction\"\n        (itemSelected)=\"addContact($event, role)\"\n        [displayWithFn]=\"displayWithFn\"\n        [minCharacterCount]=\"1\"\n        [clearOnSelection]=\"true\"\n        [allowSubmit]=\"false\"\n      >\n      </gn-ui-autocomplete>\n\n      <ng-container *ngIf=\"contactsForRessourceByRole.get(role) as contacts\">\n        <gn-ui-sortable-list\n          [items]=\"contacts\"\n          (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n          [elementTemplate]=\"contactTemplate\"\n        ></gn-ui-sortable-list>\n        <ng-template #contactTemplate let-contact>\n          <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n        </ng-template>\n      </ng-container>\n\n      <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" *ngIf=\"!isLast\" />\n    </div>\n  </div>\n  <ng-template #noContact>\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"] }]
+                    ], template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    <ng-container *ngFor=\"let role of rolesToPick\">\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    </ng-container>\n  </div>\n  <div\n    class=\"mt-8\"\n    *ngIf=\"\n      roleSectionsToDisplay && roleSectionsToDisplay.length > 0;\n      else noContact\n    \"\n    data-test=\"displayedRoles\"\n  >\n    <div\n      *ngFor=\"\n        let role of roleSectionsToDisplay;\n        let index = index;\n        let isLast = last\n      \"\n      class=\"flex flex-col gap-4\"\n    >\n      <div class=\"flex flex-row justify-between\">\n        <span class=\"font-bold text-base\" translate>{{\n          roleToLabel(role)\n        }}</span>\n      </div>\n\n      <gn-ui-autocomplete\n        *ngIf=\"role !== 'unspecified' && role !== 'other'\"\n        [placeholder]=\"\n          'editor.record.form.field.contactsForResource.placeholder' | translate\n        \"\n        [action]=\"autoCompleteAction\"\n        (itemSelected)=\"addContact($event, role)\"\n        [displayWithFn]=\"displayWithFn\"\n        [minCharacterCount]=\"1\"\n        [clearOnSelection]=\"true\"\n        [allowSubmit]=\"false\"\n      >\n      </gn-ui-autocomplete>\n\n      <ng-container *ngIf=\"contactsForRessourceByRole.get(role) as contacts\">\n        <gn-ui-sortable-list\n          [items]=\"contacts\"\n          (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n          [elementTemplate]=\"contactTemplate\"\n        ></gn-ui-sortable-list>\n        <ng-template #contactTemplate let-contact>\n          <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n        </ng-template>\n      </ng-container>\n\n      <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" *ngIf=\"!isLast\" />\n    </div>\n  </div>\n  <ng-template #noContact>\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"] }]
         }], ctorParameters: () => [{ type: PlatformServiceInterface }, { type: OrganizationsServiceInterface }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
@@ -39831,7 +39877,7 @@ class FormFieldContactsComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldContactsComponent, deps: [{ token: PlatformServiceInterface }, { token: OrganizationsServiceInterface }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldContactsComponent, isStandalone: true, selector: "gn-ui-form-field-contacts", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'editor.record.form.field.contacts.placeholder' | translate\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"addContact($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"1\"\n    [clearOnSelection]=\"true\"\n  >\n  </gn-ui-autocomplete>\n\n  <ng-container *ngIf=\"contacts.length > 0; else noContact\">\n    <ng-container *ngIf=\"contacts.length === 1\">\n      <ng-container *ngFor=\"let contact of contacts; let index = index\">\n        <gn-ui-contact-card\n          [contact]=\"contact\"\n        ></gn-ui-contact-card> </ng-container\n    ></ng-container>\n\n    <ng-container *ngIf=\"contacts.length > 1\">\n      <gn-ui-sortable-list\n        [items]=\"contacts\"\n        (itemsOrderChange)=\"handleContactsChanged($event)\"\n        [elementTemplate]=\"contactTemplate\"\n      ></gn-ui-sortable-list>\n      <ng-template #contactTemplate let-contact>\n        <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #noContact>\n  <div\n    class=\"p-4 text-sm border border-primary bg-primary-lightest rounded-lg\"\n    translate\n  >\n    editor.record.form.field.contacts.noContact\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: UiInputsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UiWidgetsModule }, { kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldContactsComponent, isStandalone: true, selector: "gn-ui-form-field-contacts", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'editor.record.form.field.contacts.placeholder' | translate\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"addContact($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"1\"\n    [clearOnSelection]=\"true\"\n  >\n  </gn-ui-autocomplete>\n\n  <ng-container *ngIf=\"contacts.length > 0; else noContact\">\n    <ng-container *ngIf=\"contacts.length === 1\">\n      <ng-container *ngFor=\"let contact of contacts; let index = index\">\n        <gn-ui-contact-card\n          [contact]=\"contact\"\n        ></gn-ui-contact-card> </ng-container\n    ></ng-container>\n\n    <ng-container *ngIf=\"contacts.length > 1\">\n      <gn-ui-sortable-list\n        [items]=\"contacts\"\n        (itemsOrderChange)=\"handleContactsChanged($event)\"\n        [elementTemplate]=\"contactTemplate\"\n      ></gn-ui-sortable-list>\n      <ng-template #contactTemplate let-contact>\n        <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #noContact>\n  <div\n    class=\"p-4 text-sm border border-primary bg-primary-lightest rounded-lg\"\n    translate\n  >\n    editor.record.form.field.contacts.noContact\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: UiInputsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UiWidgetsModule }, { kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldContactsComponent, decorators: [{
             type: Component,
@@ -40180,7 +40226,7 @@ class OnlineServiceResourceInputComponent {
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], ngImport: i0, template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  <span\n    *ngIf=\"protocolHint\"\n    class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n    [matTooltip]=\"protocolHint\"\n    matTooltipPosition=\"above\"\n  >\n    help\n  </span>\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    <mat-radio-button\n      *ngFor=\"let protocolOption of protocolOptions\"\n      [value]=\"protocolOption.value\"\n    >\n      {{ protocolOption.label | translate }}\n    </mat-radio-button>\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n  >\n    <ng-content *ngIf=\"activeLayerSuggestion\">\n      <ng-icon name=\"iconoirRefresh\"></ng-icon>\n    </ng-content>\n  </gn-ui-url-input>\n\n  <p class=\"text-sm text-red-500 pl-4\" *ngIf=\"errorMessage\" translate>\n    editor.record.form.field.onlineResource.edit.identifier.error\n  </p>\n\n  <gn-ui-text-input\n    class=\"grow border-b border-gray-300 pb-4\"\n    [(value)]=\"_service.identifierInService\"\n    [placeholder]=\"getIdentifierPlaceholder() | translate\"\n    data-cy=\"identifier-in-service\"\n    [disabled]=\"disabled\"\n    *ngIf=\"\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage) ||\n      (modifyMode && (layers$ | async).length === 0)\n    \"\n  ></gn-ui-text-input>\n  <gn-ui-autocomplete\n    class=\"border-b border-gray-300 pb-4\"\n    [placeholder]=\"\n      'editor.record.form.field.onlineResource.edit.identifier.select.label'\n        | translate\n    \"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleSelectValue($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"0\"\n    [clearOnSelection]=\"false\"\n    *ngIf=\"activeLayerSuggestion && (layers$ | async)?.length > 0\"\n  >\n  </gn-ui-autocomplete>\n  <gn-ui-button\n    (buttonClick)=\"submit()\"\n    [disabled]=\"disabled || !_service.identifierInService\"\n    type=\"primary\"\n    *ngIf=\"\n      !modifyMode &&\n      ((activeLayerSuggestion && (layers$ | async)) ||\n        !activeLayerSuggestion ||\n        (_service.url && errorMessage))\n    \"\n  >\n    <span class=\"text-white font-bold\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.submit</span\n    >\n  </gn-ui-button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton"], outputs: ["valueChange", "uploadClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  <span\n    *ngIf=\"protocolHint\"\n    class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n    [matTooltip]=\"protocolHint\"\n    matTooltipPosition=\"above\"\n  >\n    help\n  </span>\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    <mat-radio-button\n      *ngFor=\"let protocolOption of protocolOptions\"\n      [value]=\"protocolOption.value\"\n    >\n      {{ protocolOption.label | translate }}\n    </mat-radio-button>\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n  >\n    <ng-content *ngIf=\"activeLayerSuggestion\">\n      <ng-icon name=\"iconoirRefresh\"></ng-icon>\n    </ng-content>\n  </gn-ui-url-input>\n\n  <p class=\"text-sm text-red-500 pl-4\" *ngIf=\"errorMessage\" translate>\n    editor.record.form.field.onlineResource.edit.identifier.error\n  </p>\n\n  <gn-ui-text-input\n    class=\"grow border-b border-gray-300 pb-4\"\n    [(value)]=\"_service.identifierInService\"\n    [placeholder]=\"getIdentifierPlaceholder() | translate\"\n    data-cy=\"identifier-in-service\"\n    [disabled]=\"disabled\"\n    *ngIf=\"\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage) ||\n      (modifyMode && (layers$ | async).length === 0)\n    \"\n  ></gn-ui-text-input>\n  <gn-ui-autocomplete\n    class=\"border-b border-gray-300 pb-4\"\n    [placeholder]=\"\n      'editor.record.form.field.onlineResource.edit.identifier.select.label'\n        | translate\n    \"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleSelectValue($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"0\"\n    [clearOnSelection]=\"false\"\n    *ngIf=\"activeLayerSuggestion && (layers$ | async)?.length > 0\"\n  >\n  </gn-ui-autocomplete>\n  <gn-ui-button\n    (buttonClick)=\"submit()\"\n    [disabled]=\"disabled || !_service.identifierInService\"\n    type=\"primary\"\n    *ngIf=\"\n      !modifyMode &&\n      ((activeLayerSuggestion && (layers$ | async)) ||\n        !activeLayerSuggestion ||\n        (_service.url && errorMessage))\n    \"\n  >\n    <span class=\"text-white font-bold\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.submit</span\n    >\n  </gn-ui-button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton"], outputs: ["valueChange", "uploadClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnlineServiceResourceInputComponent, decorators: [{
             type: Component,