geonetwork-ui 2.5.0-dev.f8f8616a0 → 2.6.0-dev.01d2b5fc0

package/fesm2022/geonetwork-ui.mjs

@@ -16,7 +16,7 @@ import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-comp
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { map as map$1, catchError, tap as tap$1, shareReplay, filter, startWith, withLatestFrom, switchMap as switchMap$1, take, mergeMap, throttleTime, distinctUntilChanged, debounceTime, finalize, first as first$1, share, pairwise, delay, defaultIfEmpty, toArray } from 'rxjs/operators';
 import * as i1$2 from '@angular/common';
-import { CommonModule, NgOptimizedImage, DatePipe, NgIf } from '@angular/common';
+import { CommonModule, NgSwitch, NgSwitchCase, NgSwitchDefault, NgOptimizedImage, DatePipe, NgIf } from '@angular/common';
 import { of, map as map$2, lastValueFrom, Subject, switchMap, combineLatest, from, exhaustMap, throwError, forkJoin, takeLast, firstValueFrom, merge, BehaviorSubject, fromEvent, animationFrameScheduler, ReplaySubject, Subscription, first, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, tap as tap$2, Observable, buffer, debounceTime as debounceTime$1, combineLatestWith, catchError as catchError$1, timer, takeUntil, EMPTY, mergeMap as mergeMap$1, startWith as startWith$1, withLatestFrom as withLatestFrom$1, shareReplay as shareReplay$1, pairwise as pairwise$1 } from 'rxjs';
 import { lt, valid, coerce, satisfies, ltr } from 'semver';
 import chroma from 'chroma-js';
@@ -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';
@@ -41,7 +41,7 @@ import { TagInputModule } from 'ngx-chips';
 import * as i1$5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import tippy from 'tippy.js';
-import { matErrorOutlineOutline, matCloudDownloadOutline, matComputerOutline, matCallOutline, matLocationOnOutline, matMailOutline as matMailOutline$1, matWarningAmberOutline, matInfoOutline, matCloseOutline, matSendOutline, matMapOutline, matHomeWorkOutline, matSwipeOutline, matLayersOutline, matAddCircleOutlineOutline } from '@ng-icons/material-icons/outline';
+import { matErrorOutlineOutline, matInfoOutline, matCloudDownloadOutline, matComputerOutline, matCallOutline, matLocationOnOutline, matMailOutline as matMailOutline$1, matWarningAmberOutline, matCloseOutline, matSendOutline, matMapOutline, matHomeWorkOutline, matSwipeOutline, matLayersOutline, matAddCircleOutlineOutline } from '@ng-icons/material-icons/outline';
 import * as i2 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import * as i1$7 from '@angular/material/checkbox';
@@ -1842,7 +1842,9 @@ function writeSpatialRepresentation$1(record, rootEl) {
     pipe(findOrCreateIdentification(), findNestedChildOrCreate('gmd:spatialRepresentationType', 'gmd:MD_SpatialRepresentationTypeCode'), writeAttribute('codeList', 'http://standards.iso.org/iso/19139/resources/gmxCodelists.xml#MD_SpatialRepresentationTypeCode'), writeAttribute('codeListValue', record.spatialRepresentation))(rootEl);
 }
 function writeGraphicOverviews(record, rootEl) {
-    pipe(findOrCreateIdentification(), removeChildrenByName('gmd:graphicOverview'), appendChildren(...record.overviews.map((overview) => pipe(createNestedElement('gmd:graphicOverview', 'gmd:MD_BrowseGraphic'), appendChildren(pipe(createElement('gmd:fileName'), writeCharacterString(overview.url.toString()))), 'description' in overview
+    pipe(findOrCreateIdentification(), removeChildrenByName('gmd:graphicOverview'), appendChildren(...record.overviews
+        .filter((overview) => overview.url)
+        .map((overview) => pipe(createNestedElement('gmd:graphicOverview', 'gmd:MD_BrowseGraphic'), appendChildren(pipe(createElement('gmd:fileName'), writeCharacterString(overview.url.toString()))), 'description' in overview
         ? appendChildren(pipe(createElement('gmd:fileDescription'), writeCharacterString(overview.description)))
         : noop))))(rootEl);
 }
@@ -19072,7 +19074,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 +19619,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 +20709,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 +21254,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 +22594,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 +23546,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);
         }));
     }
@@ -25202,18 +25200,19 @@ class Gn4PlatformService {
         return combineLatest([
             this.recordsApiService.getAssociatedResources(record.uniqueIdentifier),
             this.recordsApiService.getAllResources(record.uniqueIdentifier),
-        ]).pipe(map$1(([associatedResources, recordResources]) => {
-            // Received object from API is not a RelatedResponseApiModel, so we need
-            // to cast it as any and do the bellow mappings to get the wanted values.
-            const resourceIdsToKeep = [
-                ...(associatedResources.onlines ?? []).map((o) => Object.values(o.title)[0]),
-                ...(associatedResources.thumbnails ?? []).map((o) => Object.values(o.title)[0]),
-            ];
-            const resourceIdsToRemove = recordResources
-                .map((r) => r.filename)
-                .filter((resourceId) => !resourceIdsToKeep.includes(resourceId));
-            return resourceIdsToRemove;
-        }), mergeMap((resourceIdsToRemove) => forkJoin(resourceIdsToRemove.map((attachementId) => this.recordsApiService.delResource(record.uniqueIdentifier, attachementId))).pipe(map$1(() => undefined))), catchError((error) => {
+        ]).pipe(map$1(([associated, attachments]) => {
+            const { onlines = [], thumbnails = [] } = associated;
+            const urlsToKeep = [
+                ...(Array.isArray(onlines) ? onlines : []),
+                ...(Array.isArray(thumbnails) ? thumbnails : []),
+            ].map((resource) => Object.values(resource.url)[0]);
+            const fileToDelete = attachments
+                .filter((attachment) => !urlsToKeep.includes(attachment.url))
+                .map((attachment) => attachment.filename);
+            return fileToDelete;
+        }), mergeMap((filesToDelete) => filesToDelete.length
+            ? forkJoin(filesToDelete.map((filename) => this.recordsApiService.delResource(record.uniqueIdentifier, filename))).pipe(map$1(() => undefined))
+            : of(undefined)), catchError((error) => {
             console.error('Error while cleaning attachments:', error);
             throw error;
         }));
@@ -25916,14 +25915,20 @@ class ProgressBarComponent {
                     innerBar: 'bg-secondary-lighter',
                     text: 'text-white',
                 };
+            case 'light':
+                return {
+                    outerBar: 'bg-primary-white',
+                    innerBar: 'bg-primary',
+                    text: 'text-main',
+                };
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProgressBarComponent, isStandalone: true, selector: "gn-ui-progress-bar", inputs: { value: "value", type: "type" }, ngImport: i0, template: "<div class=\"flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg\">\n  <div\n    [style.width.%]=\"progress\"\n    class=\"flex {{\n      color.innerBar\n    }} my-1 mx-1 transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl\"\n  >\n    <div class=\"flex items-center pl-2 py-1 {{ color.text }} font-bold text-4\">\n      {{ progress }}%\n    </div>\n  </div>\n</div>\n", styles: [".font-bold{font-weight:var(--progress-bar-font-weight, \"bold\")}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProgressBarComponent, isStandalone: true, selector: "gn-ui-progress-bar", inputs: { value: "value", type: "type" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n  <!-- Light Theme -->\n  <ng-container *ngSwitchCase=\"'light'\">\n    <div class=\"flex items-center relative\">\n      <div\n        class=\"flex-shrink-0 {{ color.text }} text-xs font-medium mr-2\n             text-opacity-100 !text-slate-800\"\n      >\n        {{ progress }}%\n      </div>\n      <div class=\"flex-grow h-[6px] w-full {{ color.outerBar }} rounded-full\">\n        <div\n          [style.width.%]=\"progress\"\n          class=\"{{ color.innerBar }} transition-width duration-500\n               ease-in-out rounded-full shadow-sm h-full\"\n        ></div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Default / Primary / Secondary Themes -->\n  <ng-container *ngSwitchDefault>\n    <div class=\"flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg\">\n      <div\n        [style.width.%]=\"progress\"\n        class=\"flex {{ color.innerBar }} my-1 mx-1 transition-width\n               duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl\"\n      >\n        <div\n          class=\"flex items-center pl-2 py-1 {{ color.text }} font-bold text-4\"\n        >\n          {{ progress }}%\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".font-bold{font-weight:var(--progress-bar-font-weight, \"bold\")}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-progress-bar', standalone: true, template: "<div class=\"flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg\">\n  <div\n    [style.width.%]=\"progress\"\n    class=\"flex {{\n      color.innerBar\n    }} my-1 mx-1 transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl\"\n  >\n    <div class=\"flex items-center pl-2 py-1 {{ color.text }} font-bold text-4\">\n      {{ progress }}%\n    </div>\n  </div>\n</div>\n", styles: [".font-bold{font-weight:var(--progress-bar-font-weight, \"bold\")}\n"] }]
+            args: [{ selector: 'gn-ui-progress-bar', standalone: true, imports: [NgSwitch, NgSwitchCase, NgSwitchDefault], template: "<ng-container [ngSwitch]=\"type\">\n  <!-- Light Theme -->\n  <ng-container *ngSwitchCase=\"'light'\">\n    <div class=\"flex items-center relative\">\n      <div\n        class=\"flex-shrink-0 {{ color.text }} text-xs font-medium mr-2\n             text-opacity-100 !text-slate-800\"\n      >\n        {{ progress }}%\n      </div>\n      <div class=\"flex-grow h-[6px] w-full {{ color.outerBar }} rounded-full\">\n        <div\n          [style.width.%]=\"progress\"\n          class=\"{{ color.innerBar }} transition-width duration-500\n               ease-in-out rounded-full shadow-sm h-full\"\n        ></div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Default / Primary / Secondary Themes -->\n  <ng-container *ngSwitchDefault>\n    <div class=\"flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg\">\n      <div\n        [style.width.%]=\"progress\"\n        class=\"flex {{ color.innerBar }} my-1 mx-1 transition-width\n               duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl\"\n      >\n        <div\n          class=\"flex items-center pl-2 py-1 {{ color.text }} font-bold text-4\"\n        >\n          {{ progress }}%\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".font-bold{font-weight:var(--progress-bar-font-weight, \"bold\")}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], type: [{
@@ -26120,8 +26125,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 +26157,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 +26165,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 +26197,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 +26277,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 +26287,8 @@ class AutocompleteComponent {
     }
     handleEnter(any) {
         if (!this.cancelEnter && this.allowSubmit) {
+            this.isSearchActive.emit(true);
+            this.searchActive = true;
             this.inputSubmitted.emit(any);
         }
     }
@@ -26276,16 +26316,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 +26347,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 +26379,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]
@@ -27113,6 +27164,11 @@ class UrlInputComponent {
         this.uploadClick = new EventEmitter();
         this.inputValue = '';
     }
+    ngOnChanges(changes) {
+        if (changes['resetUrlOnChange']) {
+            this.inputValue = '';
+        }
+    }
     handleInput(event) {
         const value = event.target.value;
         this.inputValue = value;
@@ -27139,12 +27195,12 @@ class UrlInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UrlInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UrlInputComponent, isStandalone: true, selector: "gn-ui-url-input", inputs: { value: "value", extraClass: "extraClass", placeholder: "placeholder", disabled: "disabled", showValidateButton: "showValidateButton" }, outputs: { valueChange: "valueChange", uploadClick: "uploadClick" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UrlInputComponent, isStandalone: true, selector: "gn-ui-url-input", inputs: { value: "value", extraClass: "extraClass", placeholder: "placeholder", disabled: "disabled", showValidateButton: "showValidateButton", resetUrlOnChange: "resetUrlOnChange" }, outputs: { valueChange: "valueChange", uploadClick: "uploadClick" }, providers: [
             provideIcons({ iconoirLink, iconoirArrowUp }),
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <input\n    #input\n    class=\"gn-ui-text-input gn-ui-url-input px-[var(--text-padding)]\"\n    [ngClass]=\"extraClass\"\n    type=\"url\"\n    [value]=\"inputValue\"\n    (input)=\"handleInput($event)\"\n    (keydown.enter)=\"handleUpload(input)\"\n    [placeholder]=\"placeholder\"\n    [attr.aria-label]=\"placeholder\"\n    [disabled]=\"disabled\"\n  />\n  <div\n    class=\"absolute inset-y-[var(--side-padding)] left-[var(--2x-side-padding)] grid justify-center items-center pointer-events-none\"\n    [ngClass]=\"{\n      'text-primary': !disabled,\n      'text-primary-lightest': disabled,\n    }\"\n  >\n    <ng-icon name=\"iconoirLink\"></ng-icon>\n  </div>\n  <gn-ui-button\n    *ngIf=\"showValidateButton\"\n    extraClass=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]\"\n    type=\"primary\"\n    [disabled]=\"disabled || input.value === '' || !isValidUrl(input.value)\"\n    (buttonClick)=\"handleUpload(input)\"\n  >\n    <ng-content>\n      <ng-icon name=\"iconoirArrowUp\"></ng-icon>\n    </ng-content>\n  </gn-ui-button>\n</span>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6rem) - 6px);--2x-side-padding: calc(var(--side-padding) * 2);--text-padding: calc(var(--side-padding) + 40px)}\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: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <input\n    #input\n    class=\"gn-ui-text-input gn-ui-url-input px-[var(--text-padding)]\"\n    [ngClass]=\"extraClass\"\n    type=\"url\"\n    [value]=\"inputValue\"\n    (input)=\"handleInput($event)\"\n    (keydown.enter)=\"handleUpload(input)\"\n    [placeholder]=\"placeholder\"\n    [attr.aria-label]=\"placeholder\"\n    [disabled]=\"disabled\"\n  />\n  <div\n    class=\"absolute inset-y-[var(--side-padding)] left-[var(--2x-side-padding)] grid justify-center items-center pointer-events-none\"\n    [ngClass]=\"{\n      'text-primary': !disabled,\n      'text-primary-lightest': disabled,\n    }\"\n  >\n    <ng-icon name=\"iconoirLink\"></ng-icon>\n  </div>\n  <gn-ui-button\n    *ngIf=\"showValidateButton\"\n    extraClass=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]\"\n    type=\"primary\"\n    [disabled]=\"disabled || input.value === '' || !isValidUrl(input.value)\"\n    (buttonClick)=\"handleUpload(input)\"\n  >\n    <ng-content>\n      <ng-icon name=\"iconoirArrowUp\"></ng-icon>\n    </ng-content>\n  </gn-ui-button>\n</span>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6rem) - 6px);--2x-side-padding: calc(var(--side-padding) * 2);--text-padding: calc(var(--side-padding) + 40px)}\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: "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: UrlInputComponent, decorators: [{
             type: Component,
@@ -27164,6 +27220,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], showValidateButton: [{
                 type: Input
+            }], resetUrlOnChange: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], uploadClick: [{
@@ -27229,7 +27287,7 @@ class FileInputComponent {
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-[16px]\">\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': !isUploadInProgress && !disabled,\n      'cursor-not-allowed': disabled,\n    }\"\n    [attr.tabindex]=\"isUploadInProgress || disabled ? null : 0\"\n    (dragFilesOver)=\"handleDragFilesOver($event)\"\n    (dropFiles)=\"handleDropFiles($event)\"\n    (keydown.enter)=\"fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"hidden\"\n      (change)=\"handleFileInput($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    />\n\n    <div\n      class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n      *ngIf=\"!isUploadInProgress\"\n    >\n      <ng-icon\n        *ngIf=\"!dragFilesOver\"\n        class=\"place-self-center text-primary\"\n        name=\"iconoirCloudUpload\"\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    <div\n      *ngIf=\"isUploadInProgress\"\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    <div class=\"flex flex-col items-center gap-1\">\n      <p class=\"font-medium\">\n        {{ getPrimaryText() | translate: { sizeMB: maxSizeMB.toFixed(0) } }}\n      </p>\n      <p\n        class=\"text-sm\"\n        [class]=\"\n          isUploadInProgress\n            ? 'font-bold text-primary cursor-pointer'\n            : 'font-medium text-gray-500'\n        \"\n        (click)=\"handleSecondaryTextClick($event)\"\n      >\n        {{ getSecondaryText() | translate }}\n      </p>\n    </div>\n    <p class=\"w-full flex flex-row items-center justify-stretch gap-[16px]\">\n      <span class=\"border-b border-gray-300 grow\"></span>\n      <span class=\"text-sm font-medium text-gray-500 or-input-url\" translate>\n        input.file.orInputUrl</span\n      >\n      <span class=\"border-b border-gray-300 grow\"></span>\n    </p>\n    <gn-ui-url-input\n      class=\"w-full\"\n      [disabled]=\"isUploadInProgress || disabled\"\n      (uploadClick)=\"handleUrlChange($event)\"\n    ></gn-ui-url-input>\n  </label>\n</div>\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: "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: "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"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-[16px]\">\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': !isUploadInProgress && !disabled,\n      'cursor-not-allowed': disabled,\n    }\"\n    [attr.tabindex]=\"isUploadInProgress || disabled ? null : 0\"\n    (dragFilesOver)=\"handleDragFilesOver($event)\"\n    (dropFiles)=\"handleDropFiles($event)\"\n    (keydown.enter)=\"fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"hidden\"\n      (change)=\"handleFileInput($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    />\n\n    <div\n      class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n      *ngIf=\"!isUploadInProgress\"\n    >\n      <ng-icon\n        *ngIf=\"!dragFilesOver\"\n        class=\"place-self-center text-primary\"\n        name=\"iconoirCloudUpload\"\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    <div\n      *ngIf=\"isUploadInProgress\"\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    <div class=\"flex flex-col items-center gap-1\">\n      <p class=\"font-medium\">\n        {{ getPrimaryText() | translate: { sizeMB: maxSizeMB.toFixed(0) } }}\n      </p>\n      <p\n        class=\"text-sm\"\n        [class]=\"\n          isUploadInProgress\n            ? 'font-bold text-primary cursor-pointer'\n            : 'font-medium text-gray-500'\n        \"\n        (click)=\"handleSecondaryTextClick($event)\"\n      >\n        {{ getSecondaryText() | translate }}\n      </p>\n    </div>\n    <p class=\"w-full flex flex-row items-center justify-stretch gap-[16px]\">\n      <span class=\"border-b border-gray-300 grow\"></span>\n      <span class=\"text-sm font-medium text-gray-500 or-input-url\" translate>\n        input.file.orInputUrl</span\n      >\n      <span class=\"border-b border-gray-300 grow\"></span>\n    </p>\n    <gn-ui-url-input\n      class=\"w-full\"\n      [disabled]=\"isUploadInProgress || disabled\"\n      (uploadClick)=\"handleUrlChange($event)\"\n    ></gn-ui-url-input>\n  </label>\n</div>\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: "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: "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", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { 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: FileInputComponent, decorators: [{
             type: Component,
@@ -28378,7 +28436,15 @@ class MetadataQualityComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataQualityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataQualityComponent, isStandalone: true, selector: "gn-ui-metadata-quality", inputs: { metadata: "metadata", smaller: "smaller", metadataQualityDisplay: "metadataQualityDisplay" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"metadataQualityDisplay\" class=\"mb-6 metadata-quality\">\n  <gn-ui-popover [content]=\"popoverItems\" theme=\"light-border\">\n    <div class=\"min-w-[200px]\" [class]=\"smaller ? 'leading-[8px]' : ''\">\n      <gn-ui-progress-bar\n        tabindex=\"0\"\n        [value]=\"qualityScore\"\n        type=\"primary\"\n      ></gn-ui-progress-bar>\n    </div>\n  </gn-ui-popover>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div class=\"mb-4 font-bold\" translate>record.metadata.quality.details</div>\n    <gn-ui-metadata-quality-item\n      *ngFor=\"let e of items\"\n      [name]=\"e.name\"\n      [value]=\"e.value\"\n    ></gn-ui-metadata-quality-item>\n  </div>\n</ng-template>\n", styles: [":host gn-ui-progress-bar{--progress-bar-font-weight: \"normal\"}\n"], dependencies: [{ 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: "component", type: PopoverComponent, selector: "gn-ui-popover", inputs: ["content", "theme"] }, { kind: "component", type: ProgressBarComponent, selector: "gn-ui-progress-bar", inputs: ["value", "type"] }, { kind: "component", type: MetadataQualityItemComponent, selector: "gn-ui-metadata-quality-item", inputs: ["name", "value"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataQualityComponent, isStandalone: true, selector: "gn-ui-metadata-quality", inputs: { metadata: "metadata", smaller: "smaller", metadataQualityDisplay: "metadataQualityDisplay" }, providers: [
+            provideIcons({
+                matInfoOutline,
+            }),
+            provideNgIconsConfig({
+                size: '1.2em',
+                strokeWidth: '1.5px',
+            }),
+        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"metadataQualityDisplay\" class=\"mb-6 metadata-quality\">\n  <div\n    class=\"flex items-center\"\n    [class]=\"smaller ? 'leading-[8px] min-w-[120px]' : 'min-w-[200px]'\"\n  >\n    <gn-ui-progress-bar\n      tabindex=\"0\"\n      [value]=\"qualityScore\"\n      [type]=\"'light'\"\n      class=\"flex-grow\"\n    ></gn-ui-progress-bar>\n    <gn-ui-popover\n      [content]=\"popoverItems\"\n      theme=\"light-border\"\n      [class]=\"smaller ? 'ml-2' : 'ml-2 mt-1'\"\n    >\n      <ng-icon\n        name=\"matInfoOutline\"\n        class=\"flex-shrink-0 text-gray-600\"\n      ></ng-icon>\n    </gn-ui-popover>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div class=\"mb-4 font-bold\" translate>record.metadata.quality.details</div>\n    <gn-ui-metadata-quality-item\n      *ngFor=\"let e of items\"\n      [name]=\"e.name\"\n      [value]=\"e.value\"\n    ></gn-ui-metadata-quality-item>\n  </div>\n</ng-template>\n", styles: [":host gn-ui-progress-bar{--progress-bar-font-weight: \"normal\"}\n"], dependencies: [{ 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: "component", type: PopoverComponent, selector: "gn-ui-popover", inputs: ["content", "theme"] }, { kind: "component", type: ProgressBarComponent, selector: "gn-ui-progress-bar", inputs: ["value", "type"] }, { kind: "component", type: MetadataQualityItemComponent, selector: "gn-ui-metadata-quality-item", inputs: ["name", "value"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: NgIcon, 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: MetadataQualityComponent, decorators: [{
             type: Component,
@@ -28388,7 +28454,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ProgressBarComponent,
                         MetadataQualityItemComponent,
                         TranslateModule,
-                    ], template: "<div *ngIf=\"metadataQualityDisplay\" class=\"mb-6 metadata-quality\">\n  <gn-ui-popover [content]=\"popoverItems\" theme=\"light-border\">\n    <div class=\"min-w-[200px]\" [class]=\"smaller ? 'leading-[8px]' : ''\">\n      <gn-ui-progress-bar\n        tabindex=\"0\"\n        [value]=\"qualityScore\"\n        type=\"primary\"\n      ></gn-ui-progress-bar>\n    </div>\n  </gn-ui-popover>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div class=\"mb-4 font-bold\" translate>record.metadata.quality.details</div>\n    <gn-ui-metadata-quality-item\n      *ngFor=\"let e of items\"\n      [name]=\"e.name\"\n      [value]=\"e.value\"\n    ></gn-ui-metadata-quality-item>\n  </div>\n</ng-template>\n", styles: [":host gn-ui-progress-bar{--progress-bar-font-weight: \"normal\"}\n"] }]
+                        NgIcon,
+                    ], providers: [
+                        provideIcons({
+                            matInfoOutline,
+                        }),
+                        provideNgIconsConfig({
+                            size: '1.2em',
+                            strokeWidth: '1.5px',
+                        }),
+                    ], template: "<div *ngIf=\"metadataQualityDisplay\" class=\"mb-6 metadata-quality\">\n  <div\n    class=\"flex items-center\"\n    [class]=\"smaller ? 'leading-[8px] min-w-[120px]' : 'min-w-[200px]'\"\n  >\n    <gn-ui-progress-bar\n      tabindex=\"0\"\n      [value]=\"qualityScore\"\n      [type]=\"'light'\"\n      class=\"flex-grow\"\n    ></gn-ui-progress-bar>\n    <gn-ui-popover\n      [content]=\"popoverItems\"\n      theme=\"light-border\"\n      [class]=\"smaller ? 'ml-2' : 'ml-2 mt-1'\"\n    >\n      <ng-icon\n        name=\"matInfoOutline\"\n        class=\"flex-shrink-0 text-gray-600\"\n      ></ng-icon>\n    </gn-ui-popover>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div class=\"mb-4 font-bold\" translate>record.metadata.quality.details</div>\n    <gn-ui-metadata-quality-item\n      *ngFor=\"let e of items\"\n      [name]=\"e.name\"\n      [value]=\"e.value\"\n    ></gn-ui-metadata-quality-item>\n  </div>\n</ng-template>\n", styles: [":host gn-ui-progress-bar{--progress-bar-font-weight: \"normal\"}\n"] }]
         }], propDecorators: { metadata: [{
                 type: Input
             }], smaller: [{
@@ -28403,11 +28478,11 @@ class RecordPreviewRowComponent extends RecordPreviewComponent {
         this.elementRef = elementRef;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordPreviewRowComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RecordPreviewRowComponent, selector: "gn-ui-record-preview-row", usesInheritance: true, ngImport: i0, template: "<a\n  class=\"group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap\"\n  [title]=\"record.title\"\n  [attr.href]=\"linkHref\"\n>\n  <div class=\"shrink-0 w-full sm:w-52\">\n    <div\n      class=\"overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full object-cover object-left-top\"\n        [thumbnailUrl]=\"[\n          record.overviews?.[0]?.url?.toString(),\n          organization?.logoUrl?.toString(),\n        ]\"\n        [fit]=\"['cover', 'contain']\"\n      ></gn-ui-thumbnail>\n    </div>\n  </div>\n  <div\n    class=\"content grid grow relative sm:pl-6 sm:pr-12\"\n    style=\"grid-template-columns: auto 70px\"\n  >\n    <div class=\"mb-3 mt-5 sm:mt-2\">\n      <div\n        class=\"font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </div>\n    </div>\n    <div\n      class=\"abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0\"\n      data-cy=\"recordAbstract\"\n    >\n      <gn-ui-markdown-parser\n        [textContent]=\"abstract\"\n        whitoutStyles=\"true\"\n      ></gn-ui-markdown-parser>\n    </div>\n    <div\n      class=\"text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1\"\n      data-cy=\"recordOrg\"\n      [class]=\"metadataQualityDisplay ? 'limit-organisation-with-quality' : ''\"\n    >\n      {{ organization?.name }}\n    </div>\n    <div\n      class=\"icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]\"\n    >\n      <ng-icon\n        *ngIf=\"isDownloadable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matCloudDownloadOutline\"\n      ></ng-icon>\n      <ng-icon\n        *ngIf=\"isViewable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matMapOutline\"\n      ></ng-icon>\n    </div>\n    <div\n      *ngIf=\"metadataQualityDisplay\"\n      class=\"col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]\"\n    >\n      <gn-ui-metadata-quality\n        smaller=\"true\"\n        [metadata]=\"record\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n      ></gn-ui-metadata-quality>\n    </div>\n    <div\n      class=\"text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]\"\n      data-cy=\"recordFav\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"favoriteTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: record }\"\n      ></ng-container>\n    </div>\n  </div>\n</a>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: i2$2.NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RecordPreviewRowComponent, selector: "gn-ui-record-preview-row", usesInheritance: true, ngImport: i0, template: "<a\n  class=\"group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap\"\n  [title]=\"record.title\"\n  [attr.href]=\"linkHref\"\n>\n  <div class=\"shrink-0 w-full sm:w-52\">\n    <div\n      class=\"overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full object-cover object-left-top\"\n        [thumbnailUrl]=\"[\n          record.overviews?.[0]?.url?.toString(),\n          organization?.logoUrl?.toString(),\n        ]\"\n        [fit]=\"['cover', 'contain']\"\n      ></gn-ui-thumbnail>\n    </div>\n  </div>\n  <div\n    class=\"content grid grow relative sm:pl-6 sm:pr-12\"\n    style=\"grid-template-columns: auto 70px\"\n  >\n    <div class=\"mb-3 mt-5 sm:mt-2\">\n      <div\n        class=\"font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </div>\n    </div>\n    <div\n      class=\"abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0\"\n      data-cy=\"recordAbstract\"\n    >\n      <gn-ui-markdown-parser\n        [textContent]=\"abstract\"\n        whitoutStyles=\"true\"\n      ></gn-ui-markdown-parser>\n    </div>\n    <div\n      class=\"text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1\"\n      data-cy=\"recordOrg\"\n      [class]=\"metadataQualityDisplay ? 'limit-organisation-with-quality' : ''\"\n    >\n      {{ organization?.name }}\n    </div>\n    <div\n      class=\"icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]\"\n    >\n      <ng-icon\n        *ngIf=\"isDownloadable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matCloudDownloadOutline\"\n      ></ng-icon>\n      <ng-icon\n        *ngIf=\"isViewable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matMapOutline\"\n      ></ng-icon>\n    </div>\n    <div\n      *ngIf=\"metadataQualityDisplay\"\n      class=\"col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]\"\n    >\n      <gn-ui-metadata-quality\n        [smaller]=\"true\"\n        [metadata]=\"record\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n      ></gn-ui-metadata-quality>\n    </div>\n    <div\n      class=\"text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]\"\n      data-cy=\"recordFav\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"favoriteTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: record }\"\n      ></ng-container>\n    </div>\n  </div>\n</a>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: i2$2.NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordPreviewRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-preview-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap\"\n  [title]=\"record.title\"\n  [attr.href]=\"linkHref\"\n>\n  <div class=\"shrink-0 w-full sm:w-52\">\n    <div\n      class=\"overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full object-cover object-left-top\"\n        [thumbnailUrl]=\"[\n          record.overviews?.[0]?.url?.toString(),\n          organization?.logoUrl?.toString(),\n        ]\"\n        [fit]=\"['cover', 'contain']\"\n      ></gn-ui-thumbnail>\n    </div>\n  </div>\n  <div\n    class=\"content grid grow relative sm:pl-6 sm:pr-12\"\n    style=\"grid-template-columns: auto 70px\"\n  >\n    <div class=\"mb-3 mt-5 sm:mt-2\">\n      <div\n        class=\"font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </div>\n    </div>\n    <div\n      class=\"abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0\"\n      data-cy=\"recordAbstract\"\n    >\n      <gn-ui-markdown-parser\n        [textContent]=\"abstract\"\n        whitoutStyles=\"true\"\n      ></gn-ui-markdown-parser>\n    </div>\n    <div\n      class=\"text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1\"\n      data-cy=\"recordOrg\"\n      [class]=\"metadataQualityDisplay ? 'limit-organisation-with-quality' : ''\"\n    >\n      {{ organization?.name }}\n    </div>\n    <div\n      class=\"icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]\"\n    >\n      <ng-icon\n        *ngIf=\"isDownloadable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matCloudDownloadOutline\"\n      ></ng-icon>\n      <ng-icon\n        *ngIf=\"isViewable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matMapOutline\"\n      ></ng-icon>\n    </div>\n    <div\n      *ngIf=\"metadataQualityDisplay\"\n      class=\"col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]\"\n    >\n      <gn-ui-metadata-quality\n        smaller=\"true\"\n        [metadata]=\"record\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n      ></gn-ui-metadata-quality>\n    </div>\n    <div\n      class=\"text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]\"\n      data-cy=\"recordFav\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"favoriteTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: record }\"\n      ></ng-container>\n    </div>\n  </div>\n</a>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"] }]
+            args: [{ selector: 'gn-ui-record-preview-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap\"\n  [title]=\"record.title\"\n  [attr.href]=\"linkHref\"\n>\n  <div class=\"shrink-0 w-full sm:w-52\">\n    <div\n      class=\"overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full object-cover object-left-top\"\n        [thumbnailUrl]=\"[\n          record.overviews?.[0]?.url?.toString(),\n          organization?.logoUrl?.toString(),\n        ]\"\n        [fit]=\"['cover', 'contain']\"\n      ></gn-ui-thumbnail>\n    </div>\n  </div>\n  <div\n    class=\"content grid grow relative sm:pl-6 sm:pr-12\"\n    style=\"grid-template-columns: auto 70px\"\n  >\n    <div class=\"mb-3 mt-5 sm:mt-2\">\n      <div\n        class=\"font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </div>\n    </div>\n    <div\n      class=\"abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0\"\n      data-cy=\"recordAbstract\"\n    >\n      <gn-ui-markdown-parser\n        [textContent]=\"abstract\"\n        whitoutStyles=\"true\"\n      ></gn-ui-markdown-parser>\n    </div>\n    <div\n      class=\"text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1\"\n      data-cy=\"recordOrg\"\n      [class]=\"metadataQualityDisplay ? 'limit-organisation-with-quality' : ''\"\n    >\n      {{ organization?.name }}\n    </div>\n    <div\n      class=\"icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]\"\n    >\n      <ng-icon\n        *ngIf=\"isDownloadable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matCloudDownloadOutline\"\n      ></ng-icon>\n      <ng-icon\n        *ngIf=\"isViewable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matMapOutline\"\n      ></ng-icon>\n    </div>\n    <div\n      *ngIf=\"metadataQualityDisplay\"\n      class=\"col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]\"\n    >\n      <gn-ui-metadata-quality\n        [smaller]=\"true\"\n        [metadata]=\"record\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n      ></gn-ui-metadata-quality>\n    </div>\n    <div\n      class=\"text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]\"\n      data-cy=\"recordFav\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"favoriteTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: record }\"\n      ></ng-container>\n    </div>\n  </div>\n</a>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 class RecordPreviewTextComponent extends RecordPreviewComponent {
@@ -28866,6 +28941,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class ImageInputComponent {
+    get altText() {
+        return this._altText;
+    }
+    set altText(value) {
+        if (value !== 'KO' && this._altText === 'KO') {
+            //This is a dataset rollback after upload error
+            this.resetErrors();
+        }
+        this._altText = value;
+    }
     get isUploadInProgress() {
         return this.uploadProgress !== undefined;
     }
@@ -28880,11 +28965,14 @@ class ImageInputComponent {
         this.altTextChange = new EventEmitter();
         this.dragFilesOver = false;
         this.showUrlInput = false;
-        this.downloadError = false;
+        this.imageFileError = this.uploadError;
         this.showAltTextInput = false;
     }
+    getIsActionBlocked() {
+        return this.isUploadInProgress || this.disabled;
+    }
     getPrimaryText() {
-        if (this.uploadError) {
+        if (this.imageFileError) {
             return marker('input.image.uploadErrorLabel');
         }
         if (this.uploadProgress) {
@@ -28893,8 +28981,8 @@ class ImageInputComponent {
         return marker('input.image.selectFileLabel');
     }
     getSecondaryText() {
-        if (this.uploadError) {
-            return marker('input.image.uploadErrorRetry');
+        if (this.imageFileError) {
+            return '\u00A0'; // (only to keep same spacing, next step is to handle "Retry")
         }
         if (this.uploadProgress) {
             return marker('input.image.uploadProgressCancel');
@@ -28908,26 +28996,35 @@ class ImageInputComponent {
         }
     }
     handleDropFiles(files) {
-        if (!this.showUrlInput) {
-            const validFiles = this.filterTypeImage(files);
-            if (validFiles.length > 0) {
-                this.resizeAndEmit(validFiles[0]);
-            }
+        this.resetErrors();
+        const validFiles = this.filterTypeImage(files);
+        if (validFiles.length > 0) {
+            this.showUrlInput = false;
+            this.resizeAndEmit(validFiles[0]);
+        }
+        else {
+            this.imageFileError = true;
+            this.handleAltTextChange('KO');
         }
     }
     handleFileInput(event) {
+        this.resetErrors();
         const inputFiles = Array.from(event.target.files);
         const validFiles = this.filterTypeImage(inputFiles);
         if (validFiles.length > 0) {
             this.resizeAndEmit(validFiles[0]);
         }
+        else {
+            this.imageFileError = true;
+            this.handleAltTextChange('KO');
+        }
     }
     displayUrlInput() {
         this.uploadCancel.emit();
         this.showUrlInput = true;
     }
     async downloadUrl(url) {
-        this.downloadError = false;
+        this.resetErrors();
         const name = url.split('/').pop();
         try {
             const response = await firstValueFrom(this.http.head(url, { observe: 'response' }));
@@ -28941,7 +29038,8 @@ class ImageInputComponent {
                         this.fileChange.emit(file);
                     },
                     error: () => {
-                        this.downloadError = true;
+                        this.imageFileError = true;
+                        this.handleAltTextChange('KO');
                         this.cd.markForCheck();
                         this.urlChange.emit(url);
                     },
@@ -28949,36 +29047,28 @@ class ImageInputComponent {
             }
         }
         catch {
-            this.downloadError = true;
+            this.imageFileError = true;
+            this.handleAltTextChange('KO');
             this.cd.markForCheck();
             return;
         }
     }
     handleSecondaryTextClick(event) {
-        if (this.uploadError) {
-            this.handleRetry();
-        }
-        else if (this.uploadProgress) {
-            this.handleCancel();
+        if (this.uploadProgress) {
+            this.handleCancelUpload();
             event.preventDefault();
         }
     }
-    handleCancel() {
+    handleCancelUpload() {
         this.uploadCancel.emit();
     }
-    handleRetry() {
-        switch (this.lastUploadType) {
-            case 'file':
-                this.fileChange.emit(this.lastUploadContent);
-                break;
-            case 'url':
-                this.urlChange.emit(this.lastUploadContent);
-                break;
-        }
-    }
     handleDelete() {
         this.delete.emit();
     }
+    resetErrors() {
+        this.imageFileError = false;
+        this.uploadError = false;
+    }
     toggleAltTextInput() {
         this.showAltTextInput = !this.showAltTextInput;
     }
@@ -28998,7 +29088,7 @@ class ImageInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageInputComponent, deps: [{ token: i1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageInputComponent, isStandalone: true, selector: "gn-ui-image-input", inputs: { maxSizeMB: "maxSizeMB", previewUrl: "previewUrl", altText: "altText", uploadProgress: "uploadProgress", uploadError: "uploadError", disabled: "disabled" }, outputs: { fileChange: "fileChange", urlChange: "urlChange", uploadCancel: "uploadCancel", delete: "delete", altTextChange: "altTextChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageInputComponent, isStandalone: true, selector: "gn-ui-image-input", inputs: { previewUrl: "previewUrl", altText: "altText", maxSizeMB: "maxSizeMB", uploadProgress: "uploadProgress", uploadError: "uploadError", disabled: "disabled" }, outputs: { fileChange: "fileChange", urlChange: "urlChange", uploadCancel: "uploadCancel", delete: "delete", altTextChange: "altTextChange" }, providers: [
             provideIcons({
                 iconoirMediaImage,
                 iconoirFramePlusIn,
@@ -29010,7 +29100,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    ></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': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? 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 && !imageFileError\"\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 && !imageFileError\"\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=\"imageFileError\">\n        <ng-icon\n          name=\"iconoirMediaImageXmark\"\n          class=\"place-self-center text-rose-500\"\n          data-cy=\"imgErrorIcon\"\n        ></ng-icon>\n      </div>\n\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\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        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none mt-2\">\n      <gn-ui-button\n        data-cy=\"imgUrlBtn\"\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      data-cy=\"imgUrlInput\"\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", "resetUrlOnChange"], 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,13 +29126,13 @@ 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"] }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }], propDecorators: { maxSizeMB: [{
-                type: Input
-            }], previewUrl: [{
+                    ], 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    ></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': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? 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 && !imageFileError\"\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 && !imageFileError\"\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=\"imageFileError\">\n        <ng-icon\n          name=\"iconoirMediaImageXmark\"\n          class=\"place-self-center text-rose-500\"\n          data-cy=\"imgErrorIcon\"\n        ></ng-icon>\n      </div>\n\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\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        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none mt-2\">\n      <gn-ui-button\n        data-cy=\"imgUrlBtn\"\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      data-cy=\"imgUrlInput\"\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: { previewUrl: [{
                 type: Input
             }], altText: [{
                 type: Input
+            }], maxSizeMB: [{
+                type: Input
             }], uploadProgress: [{
                 type: Input
             }], uploadError: [{
@@ -31254,8 +31344,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 +31387,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 +31403,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 +34469,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,
@@ -36151,7 +36250,7 @@ class DataTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataTableComponent, isStandalone: true, selector: "gn-ui-data-table", inputs: { dataset: "dataset", activeId: "activeId" }, outputs: { selected: "selected" }, providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      <ng-container *ngFor=\"let prop of properties\" [matColumnDef]=\"prop\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ prop }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[prop] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"row.id === activeId\"\n      ></tr>\n    </table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading$ | async\"\n      class=\"sticky inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"matErrorOutlineOutline\"\n      class=\"absolute m-2 inset-0 z-[100]\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: ScrollingModule }, { 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: "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: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataTableComponent, isStandalone: true, selector: "gn-ui-data-table", inputs: { dataset: "dataset", activeId: "activeId" }, outputs: { selected: "selected" }, providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      <ng-container *ngFor=\"let prop of properties\" [matColumnDef]=\"prop\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ prop }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[prop] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading$ | async\"\n      class=\"sticky inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"matErrorOutlineOutline\"\n      class=\"absolute m-2 inset-0 z-[100]\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: ScrollingModule }, { 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: "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: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -36165,7 +36264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LoadingMaskComponent,
                         PopupAlertComponent,
                         LetDirective,
-                    ], providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], selector: 'gn-ui-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      <ng-container *ngFor=\"let prop of properties\" [matColumnDef]=\"prop\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ prop }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[prop] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"row.id === activeId\"\n      ></tr>\n    </table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading$ | async\"\n      class=\"sticky inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"matErrorOutlineOutline\"\n      class=\"absolute m-2 inset-0 z-[100]\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"] }]
+                    ], providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], selector: 'gn-ui-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      <ng-container *ngFor=\"let prop of properties\" [matColumnDef]=\"prop\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ prop }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[prop] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading$ | async\"\n      class=\"sticky inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"matErrorOutlineOutline\"\n      class=\"absolute m-2 inset-0 z-[100]\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { dataset: [{
                 type: Input
             }], activeId: [{
@@ -39015,15 +39114,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();
@@ -39049,7 +39148,7 @@ class ImportRecordComponent {
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], ngImport: i0, template: "<ng-container [ngSwitch]=\"sectionDisplayed\">\n  <ng-container *ngSwitchCase=\"'mainMenu'\">\n    <div\n      data-test=\"importMenuMainSection\"\n      class=\"mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl\"\n    >\n      <ul class=\"flex flex-col gap-2 w-full\">\n        <li *ngFor=\"let menuItem of importMenuItems\">\n          <gn-ui-button\n            [attr.data-test]=\"menuItem.dataTest\"\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"menuItem.action()\"\n            [disabled]=\"menuItem.disabled\"\n            [title]=\"\n              (menuItem.disabled ? 'editor.temporary.disabled' : '') | translate\n            \"\n            ><ng-icon [name]=\"menuItem.icon\"></ng-icon\n            ><span>{{ menuItem.label }}</span></gn-ui-button\n          >\n        </li>\n      </ul>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'importExternalFile'\">\n    <div\n      data-test=\"importMenuImportExternalFileSection\"\n      class=\"p-6 flex flex-col gap-2 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <div class=\"flex flex-row items-center gap-2\">\n        <gn-ui-button\n          data-test=\"importMenuImportExternalFileSectionBackButton\"\n          type=\"light\"\n          (buttonClick)=\"displayMainMenu()\"\n        >\n          <ng-icon name=\"iconoirArrowLeft\"></ng-icon>\n        </gn-ui-button>\n        <span class=\"font-bold\" translate\n          >dashboard.importRecord.importExternal.title</span\n        >\n        <span translate>dashboard.importRecord.importExternal.subtitle</span>\n      </div>\n      <gn-ui-url-input\n        (uploadClick)=\"importRecord($event)\"\n        [disabled]=\"isRecordImportInProgress\"\n      ></gn-ui-url-input>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton"], outputs: ["valueChange", "uploadClick"] }, { 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: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-container [ngSwitch]=\"sectionDisplayed\">\n  <ng-container *ngSwitchCase=\"'mainMenu'\">\n    <div\n      data-test=\"importMenuMainSection\"\n      class=\"mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl\"\n    >\n      <ul class=\"flex flex-col gap-2 w-full\">\n        <li *ngFor=\"let menuItem of importMenuItems\">\n          <gn-ui-button\n            [attr.data-test]=\"menuItem.dataTest\"\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"menuItem.action()\"\n            [disabled]=\"menuItem.disabled\"\n            [title]=\"\n              (menuItem.disabled ? 'editor.temporary.disabled' : '') | translate\n            \"\n            ><ng-icon [name]=\"menuItem.icon\"></ng-icon\n            ><span>{{ menuItem.label }}</span></gn-ui-button\n          >\n        </li>\n      </ul>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'importExternalFile'\">\n    <div\n      data-test=\"importMenuImportExternalFileSection\"\n      class=\"p-6 flex flex-col gap-2 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <div class=\"flex flex-row items-center gap-2\">\n        <gn-ui-button\n          data-test=\"importMenuImportExternalFileSectionBackButton\"\n          type=\"light\"\n          (buttonClick)=\"displayMainMenu()\"\n        >\n          <ng-icon name=\"iconoirArrowLeft\"></ng-icon>\n        </gn-ui-button>\n        <span class=\"font-bold\" translate\n          >dashboard.importRecord.importExternal.title</span\n        >\n        <span translate>dashboard.importRecord.importExternal.subtitle</span>\n      </div>\n      <gn-ui-url-input\n        (uploadClick)=\"importRecord($event)\"\n        [disabled]=\"isRecordImportInProgress\"\n      ></gn-ui-url-input>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { 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: 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: ImportRecordComponent, decorators: [{
             type: Component,
@@ -39115,7 +39214,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 +39727,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 +39828,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 +39847,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 +39926,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,
@@ -40036,7 +40131,7 @@ class FormFieldOnlineLinkResourcesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOnlineLinkResourcesComponent, deps: [{ token: NotificationsService }, { token: i1$1.TranslateService }, { token: PlatformServiceInterface }, { token: i0.ChangeDetectorRef }, { token: i1$b.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldOnlineLinkResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-link-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-file-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"linkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.title\n        </h3>\n        <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n      </div>\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.description\n        </h3>\n        <gn-ui-text-area\n          [(value)]=\"onlineResource.description\"\n        ></gn-ui-text-area>\n      </div>\n      <span class=\"w-full border-b border-gray-300\"></span>\n      <gn-ui-url-input\n        class=\"w-full\"\n        [disabled]=\"true\"\n        [value]=\"onlineResource.url\"\n        [showValidateButton]=\"false\"\n      ></gn-ui-url-input>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton"], outputs: ["valueChange", "uploadClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldOnlineLinkResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-link-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-file-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"linkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.title\n        </h3>\n        <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n      </div>\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.description\n        </h3>\n        <gn-ui-text-area\n          [(value)]=\"onlineResource.description\"\n        ></gn-ui-text-area>\n      </div>\n      <span class=\"w-full border-b border-gray-300\"></span>\n      <gn-ui-url-input\n        class=\"w-full\"\n        [disabled]=\"true\"\n        [value]=\"onlineResource.url\"\n        [showValidateButton]=\"false\"\n      ></gn-ui-url-input>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOnlineLinkResourcesComponent, decorators: [{
             type: Component,
@@ -40073,6 +40168,7 @@ class OnlineServiceResourceInputComponent {
         this.modifyMode = false;
         this.serviceChange = new EventEmitter();
         this.errorMessage = false;
+        this.resetUrlOnChange = Math.random();
         this.layersSubject = new BehaviorSubject([]);
         this.layers$ = this.layersSubject.asObservable();
         this.protocolOptions = [
@@ -40137,6 +40233,7 @@ class OnlineServiceResourceInputComponent {
         this.cdr.detectChanges();
     }
     resetAllFormFields() {
+        this.resetUrlOnChange = Math.random();
         this._service.url = null;
         this.resetLayersSuggestion();
     }
@@ -40180,7 +40277,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    [resetUrlOnChange]=\"resetUrlOnChange\"\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", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnlineServiceResourceInputComponent, decorators: [{
             type: Component,
@@ -40200,7 +40297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideNgIconsConfig({
                             size: '1.5em',
                         }),
-                    ], 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" }]
+                    ], 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    [resetUrlOnChange]=\"resetUrlOnChange\"\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" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { service: [{
                 type: Input
             }], protocolHint: [{
@@ -40349,7 +40446,7 @@ class FormFieldOnlineResourcesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOnlineResourcesComponent, deps: [{ token: NotificationsService }, { token: i1$1.TranslateService }, { token: PlatformServiceInterface }, { token: i0.ChangeDetectorRef }, { token: i1$b.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldOnlineResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-switch-toggle\n    [options]=\"typeOptions\"\n    (selectedValue)=\"onSelectedTypeChange($event.value)\"\n    extraClasses=\"grow text-sm\"\n    data-cy=\"online-resources-type\"\n  ></gn-ui-switch-toggle>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-file-input\n    *ngIf=\"selectedType === 'download'\"\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleDownloadUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div\n    *ngIf=\"selectedType === 'service'\"\n    class=\"w-full border-2 border-dashed rounded-lg p-6 flex flex-col gap-[16px]\"\n  >\n    <gn-ui-online-service-resource-input\n      [service]=\"newService\"\n      (serviceChange)=\"handleServiceChange($event)\"\n    ></gn-ui-online-service-resource-input>\n  </div>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"notLinkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <ng-container *ngIf=\"onlineResource.type === 'service'; else urlInput\">\n        <gn-ui-online-service-resource-input\n          [service]=\"onlineResource\"\n          [modifyMode]=\"true\"\n          [disabled]=\"true\"\n        ></gn-ui-online-service-resource-input>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n      </ng-container>\n      <ng-template #urlInput>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.title\n          </h3>\n          <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n        </div>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n        <span class=\"w-full border-b border-gray-300\"></span>\n        <gn-ui-url-input\n          class=\"w-full\"\n          [disabled]=\"true\"\n          [value]=\"onlineResource.url\"\n          [showValidateButton]=\"false\"\n        ></gn-ui-url-input>\n      </ng-template>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SwitchToggleComponent, selector: "gn-ui-switch-toggle", inputs: ["options", "ariaLabel", "extraClasses", "disabled"], outputs: ["selectedValue"] }, { kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "component", type: OnlineServiceResourceInputComponent, selector: "gn-ui-online-service-resource-input", inputs: ["service", "protocolHint", "disabled", "modifyMode"], outputs: ["serviceChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldOnlineResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-switch-toggle\n    [options]=\"typeOptions\"\n    (selectedValue)=\"onSelectedTypeChange($event.value)\"\n    extraClasses=\"grow text-sm\"\n    data-cy=\"online-resources-type\"\n  ></gn-ui-switch-toggle>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-file-input\n    *ngIf=\"selectedType === 'download'\"\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleDownloadUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div\n    *ngIf=\"selectedType === 'service'\"\n    class=\"w-full border-2 border-dashed rounded-lg p-6 flex flex-col gap-[16px]\"\n  >\n    <gn-ui-online-service-resource-input\n      [service]=\"newService\"\n      (serviceChange)=\"handleServiceChange($event)\"\n    ></gn-ui-online-service-resource-input>\n  </div>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"notLinkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <ng-container *ngIf=\"onlineResource.type === 'service'; else urlInput\">\n        <gn-ui-online-service-resource-input\n          [service]=\"onlineResource\"\n          [modifyMode]=\"true\"\n          [disabled]=\"true\"\n        ></gn-ui-online-service-resource-input>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n      </ng-container>\n      <ng-template #urlInput>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.title\n          </h3>\n          <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n        </div>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n        <span class=\"w-full border-b border-gray-300\"></span>\n        <gn-ui-url-input\n          class=\"w-full\"\n          [disabled]=\"true\"\n          [value]=\"onlineResource.url\"\n          [showValidateButton]=\"false\"\n        ></gn-ui-url-input>\n      </ng-template>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SwitchToggleComponent, selector: "gn-ui-switch-toggle", inputs: ["options", "ariaLabel", "extraClasses", "disabled"], outputs: ["selectedValue"] }, { kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "component", type: OnlineServiceResourceInputComponent, selector: "gn-ui-online-service-resource-input", inputs: ["service", "protocolHint", "disabled", "modifyMode"], outputs: ["serviceChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOnlineResourcesComponent, decorators: [{
             type: Component,
@@ -40456,7 +40553,7 @@ class FormFieldOverviewsComponent {
                     this.cd.detectChanges();
                     this.emitOverview({
                         url: event.attachment.url,
-                        description: event.attachment.fileName,
+                        description: event.attachment.fileName.replace(/\.[^/.]+$/, ''),
                     });
                 }
             },
@@ -40494,7 +40591,7 @@ class FormFieldOverviewsComponent {
         this.valueChange.emit(overView ? [overView] : []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOverviewsComponent, deps: [{ token: PlatformServiceInterface }, { token: NotificationsService }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldOverviewsComponent, isStandalone: true, selector: "gn-ui-form-field-overviews", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <gn-ui-image-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    [previewUrl]=\"firstOverview.url\"\n    [altText]=\"firstOverview.description\"\n    (fileChange)=\"handleFileChange($event)\"\n    (urlChange)=\"handleUrlChange($event)\"\n    (altTextChange)=\"handleAltTextChange($event)\"\n    (delete)=\"handleDelete()\"\n    [uploadProgress]=\"uploadProgress\"\n    (uploadCancel)=\"handleUploadCancel()\"\n  ></gn-ui-image-input>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImageInputComponent, selector: "gn-ui-image-input", inputs: ["maxSizeMB", "previewUrl", "altText", "uploadProgress", "uploadError", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel", "delete", "altTextChange"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldOverviewsComponent, isStandalone: true, selector: "gn-ui-form-field-overviews", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <gn-ui-image-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    [previewUrl]=\"firstOverview.url\"\n    [altText]=\"firstOverview.description\"\n    (fileChange)=\"handleFileChange($event)\"\n    (urlChange)=\"handleUrlChange($event)\"\n    (altTextChange)=\"handleAltTextChange($event)\"\n    (delete)=\"handleDelete()\"\n    [uploadProgress]=\"uploadProgress\"\n    (uploadCancel)=\"handleUploadCancel()\"\n  ></gn-ui-image-input>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImageInputComponent, selector: "gn-ui-image-input", inputs: ["previewUrl", "altText", "maxSizeMB", "uploadProgress", "uploadError", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel", "delete", "altTextChange"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOverviewsComponent, decorators: [{
             type: Component,
@@ -40775,7 +40872,7 @@ class ConstraintCardComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-1 border rounded-lg p-4\">\n  <gn-ui-form-field-rich\n    class=\"mt-[-8px]\"\n    [label]=\"label\"\n    [placeholder]=\"hint | translate\"\n    [value]=\"constraint_.text ?? ''\"\n    (valueChange)=\"handleConstraintTextChange($event)\"\n  ></gn-ui-form-field-rich>\n\n  <div *ngIf=\"!showUrl\" class=\"flex-none mt-1\">\n    <gn-ui-button\n      (buttonClick)=\"showUrl = true\"\n      type=\"gray\"\n      data-cy=\"add-url-btn\"\n    >\n      <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>&nbsp;\n      <span translate>input.image.displayUrlInput</span>\n    </gn-ui-button>\n  </div>\n  <gn-ui-url-input\n    *ngIf=\"showUrl\"\n    class=\"mt-3.5\"\n    [value]=\"constraint_.url?.toString()\"\n    (valueChange)=\"handleURLChange($event)\"\n    [showValidateButton]=\"false\"\n  >\n  </gn-ui-url-input>\n</div>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["label", "hint", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatIconModule }, { 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: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-1 border rounded-lg p-4\">\n  <gn-ui-form-field-rich\n    class=\"mt-[-8px]\"\n    [label]=\"label\"\n    [placeholder]=\"hint | translate\"\n    [value]=\"constraint_.text ?? ''\"\n    (valueChange)=\"handleConstraintTextChange($event)\"\n  ></gn-ui-form-field-rich>\n\n  <div *ngIf=\"!showUrl\" class=\"flex-none mt-1\">\n    <gn-ui-button\n      (buttonClick)=\"showUrl = true\"\n      type=\"gray\"\n      data-cy=\"add-url-btn\"\n    >\n      <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>&nbsp;\n      <span translate>input.image.displayUrlInput</span>\n    </gn-ui-button>\n  </div>\n  <gn-ui-url-input\n    *ngIf=\"showUrl\"\n    class=\"mt-3.5\"\n    [value]=\"constraint_.url?.toString()\"\n    (valueChange)=\"handleURLChange($event)\"\n    [showValidateButton]=\"false\"\n  >\n  </gn-ui-url-input>\n</div>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["label", "hint", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatIconModule }, { 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: 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: ConstraintCardComponent, decorators: [{
             type: Component,