geonetwork-ui 2.3.0-dev.6e2b8bea → 2.3.0-dev.b46332e6

package/fesm2022/geonetwork-ui.mjs

@@ -1,7 +1,7 @@
 import { parseXml, XmlDocument, XmlElement, XmlText } from '@rgrove/parse-xml';
 import format from 'date-fns/format';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostListener, EventEmitter, Output, ElementRef, ViewChildren, ViewContainerRef, TemplateRef, Host, ContentChild, HostBinding, ContentChildren, inject } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostListener, EventEmitter, Output, ElementRef, ViewChildren, ViewContainerRef, HostBinding, ContentChild, ContentChildren, TemplateRef, Host, inject } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClient, HttpClientModule, HTTP_INTERCEPTORS, HttpClientXsrfModule } from '@angular/common/http';
 import * as i1$1 from '@ngx-translate/core';
@@ -70,9 +70,9 @@ import { MatInputModule } from '@angular/material/input';
 import * as i1$7 from '@angular/router';
 import { RouterModule, RouterLink, RouteReuseStrategy } from '@angular/router';
 import Duration from 'duration-relativetimeformat';
+import * as basicLightbox from 'basiclightbox';
 import { marked } from 'marked';
 import EmblaCarousel from 'embla-carousel';
-import * as basicLightbox from 'basiclightbox';
 import * as i1$8 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule, Actions } from '@ngrx/effects';
 import tippy from 'tippy.js';
@@ -6008,6 +6008,19 @@ class RecordsApiService {
         }
         this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
     }
+    /**
+     * @param consumes string[] mime-types
+     * @return true: consumes contains 'multipart/form-data', false: otherwise
+     */
+    canConsumeForm(consumes) {
+        const form = 'multipart/form-data';
+        for (const consume of consumes) {
+            if (form === consume) {
+                return true;
+            }
+        }
+        return false;
+    }
     addToHttpParams(httpParams, value, key) {
         if (typeof value === 'object' && value instanceof Date === false) {
             httpParams = this.addToHttpParamsRecursive(httpParams, value);
@@ -8981,10 +8994,13 @@ class RecordsApiService {
             reportProgress: reportProgress,
         });
     }
-    putResource(metadataUuid, visibility, approved, inlineObject3ApiModel, observe = 'body', reportProgress = false, options) {
+    putResource(metadataUuid, file, visibility, approved, observe = 'body', reportProgress = false, options) {
         if (metadataUuid === null || metadataUuid === undefined) {
             throw new Error('Required parameter metadataUuid was null or undefined when calling putResource.');
         }
+        if (file === null || file === undefined) {
+            throw new Error('Required parameter file was null or undefined when calling putResource.');
+        }
         let queryParameters = new HttpParams({ encoder: this.encoder });
         if (visibility !== undefined && visibility !== null) {
             queryParameters = this.addToHttpParams(queryParameters, visibility, 'visibility');
@@ -9004,17 +9020,29 @@ class RecordsApiService {
             headers = headers.set('Accept', httpHeaderAcceptSelected);
         }
         // to determine the Content-Type header
-        const consumes = ['application/json'];
-        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
-        if (httpContentTypeSelected !== undefined) {
-            headers = headers.set('Content-Type', httpContentTypeSelected);
+        const consumes = ['multipart/form-data'];
+        const canConsumeForm = this.canConsumeForm(consumes);
+        let formParams;
+        let useForm = false;
+        let convertFormParamsToString = false;
+        // use FormData to transmit files using content-type "multipart/form-data"
+        // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
+        useForm = canConsumeForm;
+        if (useForm) {
+            formParams = new FormData();
+        }
+        else {
+            formParams = new HttpParams({ encoder: this.encoder });
+        }
+        if (file !== undefined) {
+            formParams = formParams.append('file', file) || formParams;
         }
         let responseType_ = 'json';
         if (httpHeaderAcceptSelected &&
             httpHeaderAcceptSelected.startsWith('text')) {
             responseType_ = 'text';
         }
-        return this.httpClient.post(`${this.configuration.basePath}/records/${encodeURIComponent(String(metadataUuid))}/attachments`, inlineObject3ApiModel, {
+        return this.httpClient.post(`${this.configuration.basePath}/records/${encodeURIComponent(String(metadataUuid))}/attachments`, convertFormParamsToString ? formParams.toString() : formParams, {
             params: queryParameters,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
@@ -16235,303 +16263,291 @@ var GroupPrivilegeApiModel;
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-var JsonNodeApiModel;
-(function (JsonNodeApiModel) {
-    JsonNodeApiModel.NodeTypeEnum = {
-        Array: 'ARRAY',
-        Binary: 'BINARY',
-        Boolean: 'BOOLEAN',
-        Missing: 'MISSING',
-        Null: 'NULL',
-        Number: 'NUMBER',
-        Object: 'OBJECT',
-        Pojo: 'POJO',
-        String: 'STRING',
-    };
-})(JsonNodeApiModel || (JsonNodeApiModel = {}));
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-var LinkApiModel;
-(function (LinkApiModel) {
-    LinkApiModel.LinkTypeEnum = {
-        Http: 'HTTP',
-        Metadata: 'METADATA',
-    };
-})(LinkApiModel || (LinkApiModel = {}));
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-var MetadataResourceApiModel;
-(function (MetadataResourceApiModel) {
-    MetadataResourceApiModel.VisibilityEnum = {
-        Public: 'public',
-        Private: 'private',
-    };
-})(MetadataResourceApiModel || (MetadataResourceApiModel = {}));
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-var MetadataResourceExternalManagementPropertiesApiModel;
-(function (MetadataResourceExternalManagementPropertiesApiModel) {
-    MetadataResourceExternalManagementPropertiesApiModel.ValidationStatusEnum = {
-        Unknown: 'UNKNOWN',
-        Valid: 'VALID',
-        Incomplete: 'INCOMPLETE',
-    };
-})(MetadataResourceExternalManagementPropertiesApiModel || (MetadataResourceExternalManagementPropertiesApiModel = {}));
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-var MetadataStatusParameterApiModel;
-(function (MetadataStatusParameterApiModel) {
-    MetadataStatusParameterApiModel.TypeEnum = {
-        Workflow: 'workflow',
-        Task: 'task',
-        Event: 'event',
-    };
-})(MetadataStatusParameterApiModel || (MetadataStatusParameterApiModel = {}));
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-var OperationApiModel;
-(function (OperationApiModel) {
-    OperationApiModel.ReservedOperationEnum = {
-        View: 'view',
-        Download: 'download',
-        Editing: 'editing',
-        Notify: 'notify',
-        Dynamic: 'dynamic',
-        Featured: 'featured',
-    };
-})(OperationApiModel || (OperationApiModel = {}));
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-var PagePropertiesApiModel;
-(function (PagePropertiesApiModel) {
-    PagePropertiesApiModel.SectionsEnum = {
-        Top: 'TOP',
-        Footer: 'FOOTER',
-        Menu: 'MENU',
-        Submenu: 'SUBMENU',
-        CustomMenu1: 'CUSTOM_MENU1',
-        CustomMenu2: 'CUSTOM_MENU2',
-        CustomMenu3: 'CUSTOM_MENU3',
-    };
-    PagePropertiesApiModel.StatusEnum = {
-        Public: 'PUBLIC',
-        PublicOnly: 'PUBLIC_ONLY',
-        Private: 'PRIVATE',
-        Hidden: 'HIDDEN',
-    };
-    PagePropertiesApiModel.FormatEnum = {
-        Link: 'LINK',
-        Html: 'HTML',
-        Htmlpage: 'HTMLPAGE',
-        Text: 'TEXT',
-    };
-})(PagePropertiesApiModel || (PagePropertiesApiModel = {}));
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var JsonNodeApiModel;
+(function (JsonNodeApiModel) {
+    JsonNodeApiModel.NodeTypeEnum = {
+        Array: 'ARRAY',
+        Binary: 'BINARY',
+        Boolean: 'BOOLEAN',
+        Missing: 'MISSING',
+        Null: 'NULL',
+        Number: 'NUMBER',
+        Object: 'OBJECT',
+        Pojo: 'POJO',
+        String: 'STRING',
+    };
+})(JsonNodeApiModel || (JsonNodeApiModel = {}));
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+var LinkApiModel;
+(function (LinkApiModel) {
+    LinkApiModel.LinkTypeEnum = {
+        Http: 'HTTP',
+        Metadata: 'METADATA',
+    };
+})(LinkApiModel || (LinkApiModel = {}));
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+var MetadataResourceApiModel;
+(function (MetadataResourceApiModel) {
+    MetadataResourceApiModel.VisibilityEnum = {
+        Public: 'public',
+        Private: 'private',
+    };
+})(MetadataResourceApiModel || (MetadataResourceApiModel = {}));
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var MetadataResourceExternalManagementPropertiesApiModel;
+(function (MetadataResourceExternalManagementPropertiesApiModel) {
+    MetadataResourceExternalManagementPropertiesApiModel.ValidationStatusEnum = {
+        Unknown: 'UNKNOWN',
+        Valid: 'VALID',
+        Incomplete: 'INCOMPLETE',
+    };
+})(MetadataResourceExternalManagementPropertiesApiModel || (MetadataResourceExternalManagementPropertiesApiModel = {}));
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var MetadataStatusParameterApiModel;
+(function (MetadataStatusParameterApiModel) {
+    MetadataStatusParameterApiModel.TypeEnum = {
+        Workflow: 'workflow',
+        Task: 'task',
+        Event: 'event',
+    };
+})(MetadataStatusParameterApiModel || (MetadataStatusParameterApiModel = {}));
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var OperationApiModel;
+(function (OperationApiModel) {
+    OperationApiModel.ReservedOperationEnum = {
+        View: 'view',
+        Download: 'download',
+        Editing: 'editing',
+        Notify: 'notify',
+        Dynamic: 'dynamic',
+        Featured: 'featured',
+    };
+})(OperationApiModel || (OperationApiModel = {}));
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * GeoNetwork 4.2.7 OpenAPI Documentation
+ * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
+ *
+ * The version of the OpenAPI document: 4.2.7
+ * Contact: geonetwork-users@lists.sourceforge.net
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+var PagePropertiesApiModel;
+(function (PagePropertiesApiModel) {
+    PagePropertiesApiModel.SectionsEnum = {
+        Top: 'TOP',
+        Footer: 'FOOTER',
+        Menu: 'MENU',
+        Submenu: 'SUBMENU',
+        CustomMenu1: 'CUSTOM_MENU1',
+        CustomMenu2: 'CUSTOM_MENU2',
+        CustomMenu3: 'CUSTOM_MENU3',
+    };
+    PagePropertiesApiModel.StatusEnum = {
+        Public: 'PUBLIC',
+        PublicOnly: 'PUBLIC_ONLY',
+        Private: 'PRIVATE',
+        Hidden: 'HIDDEN',
+    };
+    PagePropertiesApiModel.FormatEnum = {
+        Link: 'LINK',
+        Html: 'HTML',
+        Htmlpage: 'HTMLPAGE',
+        Text: 'TEXT',
+    };
+})(PagePropertiesApiModel || (PagePropertiesApiModel = {}));
 
 /**
  * GeoNetwork 4.2.7 OpenAPI Documentation
@@ -17414,6 +17430,16 @@ var de = {
 	"facets.block.title.tag.default": "Stichwort",
 	"facets.block.title.th_regions_tree.default": "Regionen",
 	"favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Anmelden</a>, um auf diese Funktion zuzugreifen</div>",
+	"input.image.altTextPlaceholder": "",
+	"input.image.delete": "",
+	"input.image.displayAltTextInput": "",
+	"input.image.displayUrlInput": "",
+	"input.image.dropFileLabel": "",
+	"input.image.selectFileLabel": "",
+	"input.image.uploadErrorLabel": "",
+	"input.image.uploadErrorRetry": "",
+	"input.image.uploadProgressCancel": "",
+	"input.image.uploadProgressLabel": "",
 	"language.ca": "Katalanisch",
 	"language.cs": "Tschechisch",
 	"language.de": "Deutsch",
@@ -17766,6 +17792,16 @@ var en = {
 	"facets.block.title.tag.default": "Tag",
 	"facets.block.title.th_regions_tree.default": "Regions",
 	"favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Login</a> to access this feature</div>",
+	"input.image.altTextPlaceholder": "Image alternate text",
+	"input.image.delete": "Delete",
+	"input.image.displayAltTextInput": "Alternate text",
+	"input.image.displayUrlInput": "Enter a URL",
+	"input.image.dropFileLabel": "or drop it here",
+	"input.image.selectFileLabel": "Select an image",
+	"input.image.uploadErrorLabel": "The image could not be uploaded",
+	"input.image.uploadErrorRetry": "Retry",
+	"input.image.uploadProgressCancel": "Cancel",
+	"input.image.uploadProgressLabel": "Upload in progress...",
 	"language.ca": "Catalan",
 	"language.cs": "Czech",
 	"language.de": "German",
@@ -18118,6 +18154,16 @@ var es = {
 	"facets.block.title.tag.default": "",
 	"facets.block.title.th_regions_tree.default": "",
 	"favorite.not.authenticated.tooltip": "",
+	"input.image.altTextPlaceholder": "",
+	"input.image.delete": "",
+	"input.image.displayAltTextInput": "",
+	"input.image.displayUrlInput": "",
+	"input.image.dropFileLabel": "",
+	"input.image.selectFileLabel": "",
+	"input.image.uploadErrorLabel": "",
+	"input.image.uploadErrorRetry": "",
+	"input.image.uploadProgressCancel": "",
+	"input.image.uploadProgressLabel": "",
 	"language.ca": "Catalán",
 	"language.cs": "Checo",
 	"language.de": "Alemán",
@@ -18470,6 +18516,16 @@ var fr = {
 	"facets.block.title.tag.default": "Tag",
 	"facets.block.title.th_regions_tree.default": "Régions",
 	"favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Connectez-vous</a> pour avoir accès à cette fonctionnalité</div>",
+	"input.image.altTextPlaceholder": "Texte alternatif de l'image",
+	"input.image.delete": "Supprimer",
+	"input.image.displayAltTextInput": "Texte alternatif",
+	"input.image.displayUrlInput": "Saisir une URL",
+	"input.image.dropFileLabel": "ou la glisser ici",
+	"input.image.selectFileLabel": "Sélectionner une image",
+	"input.image.uploadErrorLabel": "L'image n'a pas pu être chargée",
+	"input.image.uploadErrorRetry": "Réessayer",
+	"input.image.uploadProgressCancel": "Annuler",
+	"input.image.uploadProgressLabel": "Chargement en cours...",
 	"language.ca": "Catalan",
 	"language.cs": "Tchèque",
 	"language.de": "Allemand",
@@ -18822,6 +18878,16 @@ var it = {
 	"facets.block.title.tag.default": "Tag",
 	"facets.block.title.th_regions_tree.default": "Regioni",
 	"favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Login</a> per accedere a questa funzionalità</div>",
+	"input.image.altTextPlaceholder": "",
+	"input.image.delete": "",
+	"input.image.displayAltTextInput": "",
+	"input.image.displayUrlInput": "",
+	"input.image.dropFileLabel": "",
+	"input.image.selectFileLabel": "",
+	"input.image.uploadErrorLabel": "",
+	"input.image.uploadErrorRetry": "",
+	"input.image.uploadProgressCancel": "",
+	"input.image.uploadProgressLabel": "",
 	"language.ca": "Catalano",
 	"language.cs": "Ceco",
 	"language.de": "Tedesco",
@@ -19174,6 +19240,16 @@ var nl = {
 	"facets.block.title.tag.default": "",
 	"facets.block.title.th_regions_tree.default": "",
 	"favorite.not.authenticated.tooltip": "",
+	"input.image.altTextPlaceholder": "",
+	"input.image.delete": "",
+	"input.image.displayAltTextInput": "",
+	"input.image.displayUrlInput": "",
+	"input.image.dropFileLabel": "",
+	"input.image.selectFileLabel": "",
+	"input.image.uploadErrorLabel": "",
+	"input.image.uploadErrorRetry": "",
+	"input.image.uploadProgressCancel": "",
+	"input.image.uploadProgressLabel": "",
 	"language.ca": "Catalaans",
 	"language.cs": "Tsjechisch",
 	"language.de": "Duits",
@@ -19526,6 +19602,16 @@ var pt = {
 	"facets.block.title.tag.default": "",
 	"facets.block.title.th_regions_tree.default": "",
 	"favorite.not.authenticated.tooltip": "",
+	"input.image.altTextPlaceholder": "",
+	"input.image.delete": "",
+	"input.image.displayAltTextInput": "",
+	"input.image.displayUrlInput": "",
+	"input.image.dropFileLabel": "",
+	"input.image.selectFileLabel": "",
+	"input.image.uploadErrorLabel": "",
+	"input.image.uploadErrorRetry": "",
+	"input.image.uploadProgressCancel": "",
+	"input.image.uploadProgressLabel": "",
 	"language.ca": "Catalão",
 	"language.cs": "Tcheco",
 	"language.de": "Alemão",
@@ -19796,6 +19882,10 @@ class Gn4FieldMapper {
                 ...output,
                 datasetCreated: toDate(getFirstValue(selectField(source, 'creationDateForResource'))),
             }),
+            revisionDateForResource: (output, source) => ({
+                ...output,
+                datasetUpdated: toDate(getFirstValue(selectField(source, 'revisionDateForResource'))),
+            }),
             createDate: (output, source) => ({
                 ...output,
                 recordCreated: toDate(selectField(source, 'createDate')),
@@ -21663,6 +21753,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     args: [PROXY_PATH]
                 }] }]; } });
 
+function megabytesToBytes(megabytes) {
+    return megabytes * 1048576;
+}
+
+/**
+ * This should be called instead of event.stopPropagation()
+ * to make sure that the document receives the event
+ * @param event
+ */
+function propagateToDocumentOnly(event) {
+    event.stopPropagation();
+    setTimeout(() => {
+        window.document.dispatchEvent(event);
+    }, 0);
+}
+
+function normalize(input) {
+    return input
+        .toLowerCase()
+        .normalize('NFD') // explode composite chars (e.g. é) into multiple chars
+        .replace(/[\u0300-\u036f]/g, '') // remove accents
+        .replace(/œ/g, 'oe') // remove accents
+        .replace(/[^a-z0-9\s]/g, ' '); // replace special characters with space
+}
+function asNormalizedParts(input) {
+    return normalize(input)
+        .split(/\s+/)
+        .map((part) => part.trim())
+        .filter((part) => part.length > 0);
+}
+/**
+ * This creates a filter function based on a pattern (typically a user-input
+ * search text).
+ * @param pattern
+ */
+function createFuzzyFilter(pattern) {
+    const patternParts = asNormalizedParts(pattern);
+    return (input) => {
+        const inputParts = asNormalizedParts(input);
+        return patternParts.every((patternPart) => inputParts.some((part) => part.includes(patternPart)));
+    };
+}
+
+function getGeometryFromGeoJSON(data) {
+    if (data.type === 'FeatureCollection') {
+        return data?.features?.[0]?.geometry || null;
+    }
+    if (data.type === 'Feature') {
+        return data?.geometry || null;
+    }
+    if (data.type === 'GeometryCollection') {
+        return data?.geometries?.[0] || null;
+    }
+    if (data.type === 'Polygon' ||
+        data.type === 'Point' ||
+        data.type === 'LineString' ||
+        data.type === 'MultiPolygon' ||
+        data.type === 'MultiPoint' ||
+        data.type === 'MultiLineString') {
+        return data || null;
+    }
+    return null;
+}
+
+function downsizeImage(blob, maxWidth, maxHeight) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.src = URL.createObjectURL(blob);
+        image.onload = () => {
+            let width = image.width;
+            let height = image.height;
+            if (width > maxWidth || height > maxHeight) {
+                if (width > height) {
+                    height = height * (maxWidth / width);
+                    width = maxWidth;
+                }
+                else {
+                    width = width * (maxHeight / height);
+                    height = maxHeight;
+                }
+            }
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const context = canvas.getContext('2d');
+            context.drawImage(image, 0, 0, width, height);
+            canvas.toBlob(resolve, blob.type);
+        };
+        image.onerror = reject;
+    });
+}
+function downgradeImage(blob, maxSizeBytes) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.src = URL.createObjectURL(blob);
+        image.onload = () => {
+            const width = image.width;
+            const height = image.height;
+            let quality = 1.0;
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const context = canvas.getContext('2d');
+            context.drawImage(image, 0, 0, width, height);
+            const compressAndResolveBlob = (blobToCompress) => {
+                if (blobToCompress.size <= maxSizeBytes) {
+                    resolve(blobToCompress);
+                }
+                else {
+                    quality -= 0.1;
+                    if (quality >= 0) {
+                        canvas.toBlob(compressAndResolveBlob, blob.type, quality);
+                    }
+                    else {
+                        reject('Unable to compress image below max size');
+                    }
+                }
+            };
+            canvas.toBlob(compressAndResolveBlob, blob.type, quality);
+        };
+        image.onerror = reject;
+    });
+}
+
 /*
  * Implement AngularJS $parse
  * delimiter is `^^^^` cause object properties can contain `.`
@@ -21696,38 +21910,10 @@ const parse = (path) => {
     return fn;
 };
 
-const stripHtml = function (html) {
-    if (!html)
-        return undefined;
-    const doc = new DOMParser().parseFromString(html, 'text/html');
-    return doc.body.textContent || '';
-};
-
 const removeWhitespace = function (str) {
     return str?.replace(/\s+/g, ' ').trim();
 };
 
-function getGeometryFromGeoJSON(data) {
-    if (data.type === 'FeatureCollection') {
-        return data?.features?.[0]?.geometry || null;
-    }
-    if (data.type === 'Feature') {
-        return data?.geometry || null;
-    }
-    if (data.type === 'GeometryCollection') {
-        return data?.geometries?.[0] || null;
-    }
-    if (data.type === 'Polygon' ||
-        data.type === 'Point' ||
-        data.type === 'LineString' ||
-        data.type === 'MultiPolygon' ||
-        data.type === 'MultiPoint' ||
-        data.type === 'MultiLineString') {
-        return data || null;
-    }
-    return null;
-}
-
 function sortByToStrings(sortBy) {
     const array = Array.isArray(sortBy[0]) ? sortBy : [sortBy];
     return array.map((param) => `${param[0] === 'desc' ? '-' : ''}${param[1]}`);
@@ -21742,62 +21928,12 @@ function sortByFromString(sortByString) {
     ];
 }
 
-/**
- * Removes the given search params from the URL completely; this is case-insensitive
- * @param url
- * @param searchParams
- */
-function removeSearchParams(url, searchParams) {
-    const toDelete = [];
-    const urlObj = new URL(url, window.location.toString());
-    const keysLower = searchParams.map((p) => p.toLowerCase());
-    for (const param of urlObj.searchParams.keys()) {
-        if (keysLower.indexOf(param.toLowerCase()) > -1) {
-            toDelete.push(param);
-        }
-    }
-    toDelete.map((param) => urlObj.searchParams.delete(param));
-    return urlObj.toString();
-}
-
-/**
- * This should be called instead of event.stopPropagation()
- * to make sure that the document receives the event
- * @param event
- */
-function propagateToDocumentOnly(event) {
-    event.stopPropagation();
-    setTimeout(() => {
-        window.document.dispatchEvent(event);
-    }, 0);
-}
-
-function normalize(input) {
-    return input
-        .toLowerCase()
-        .normalize('NFD') // explode composite chars (e.g. é) into multiple chars
-        .replace(/[\u0300-\u036f]/g, '') // remove accents
-        .replace(/œ/g, 'oe') // remove accents
-        .replace(/[^a-z0-9\s]/g, ' '); // replace special characters with space
-}
-function asNormalizedParts(input) {
-    return normalize(input)
-        .split(/\s+/)
-        .map((part) => part.trim())
-        .filter((part) => part.length > 0);
-}
-/**
- * This creates a filter function based on a pattern (typically a user-input
- * search text).
- * @param pattern
- */
-function createFuzzyFilter(pattern) {
-    const patternParts = asNormalizedParts(pattern);
-    return (input) => {
-        const inputParts = asNormalizedParts(input);
-        return patternParts.every((patternPart) => inputParts.some((part) => part.includes(patternPart)));
-    };
-}
+const stripHtml = function (html) {
+    if (!html)
+        return undefined;
+    const doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || '';
+};
 
 function getTemporalRangeUnion(ranges) {
     let earliestStartDate = Infinity;
@@ -21831,6 +21967,24 @@ function getTemporalRangeUnion(ranges) {
     }
 }
 
+/**
+ * Removes the given search params from the URL completely; this is case-insensitive
+ * @param url
+ * @param searchParams
+ */
+function removeSearchParams(url, searchParams) {
+    const toDelete = [];
+    const urlObj = new URL(url, window.location.toString());
+    const keysLower = searchParams.map((p) => p.toLowerCase());
+    for (const param of urlObj.searchParams.keys()) {
+        if (keysLower.indexOf(param.toLowerCase()) > -1) {
+            toDelete.push(param);
+        }
+    }
+    toDelete.map((param) => urlObj.searchParams.delete(param));
+    return urlObj.toString();
+}
+
 marker('downloads.wfs.featuretype.not.found');
 const FORMATS = {
     csv: {
@@ -23602,6 +23756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class ButtonComponent {
     constructor() {
+        this.btnClass = 'gn-ui-btn-default';
         this.disabled = false;
         this.extraClass = '';
         this.buttonClick = new EventEmitter();
@@ -24653,192 +24808,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-class FormFieldSimpleComponent {
-    constructor() {
-        this.readonly = false;
-        this.invalid = false;
-        this.placeholder = '';
-    }
-    get inputType() {
-        switch (this.type) {
-            case 'url':
-            case 'text':
-                return 'text';
-            case 'date':
-                return 'datetime-local';
-            case 'number':
-                return 'number';
-            case 'toggle':
-                return 'checkbox';
-            default:
-                return '';
-        }
-    }
-    get isSelect() {
-        return this.type === 'list';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: { type: "type", control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", options: "options" }, ngImport: i0, template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSimpleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-simple', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\n" }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }] } });
-
-class FormFieldFileComponent {
-    constructor() {
-        this.readonly = false;
-        this.invalid = false;
-        this.placeholder = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldFileComponent, selector: "gn-ui-form-field-file", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldFileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-file', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n" }]
-        }], propDecorators: { control: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }] } });
-
-class FormFieldRichComponent {
-    constructor() {
-        this.readonly = false;
-        this.invalid = false;
-        this.placeholder = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldRichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<textarea\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white h-full resize-none transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n></textarea>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldRichComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-rich', changeDetection: ChangeDetectionStrategy.OnPush, template: "<textarea\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white h-full resize-none transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n></textarea>\n" }]
-        }], propDecorators: { control: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }] } });
-
-class FormFieldObjectComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldObjectComponent, selector: "gn-ui-form-field-object", ngImport: i0, template: "<p>form-field-object works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldObjectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-object', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>form-field-object works!</p>\n" }]
-        }] });
-
-class FormFieldArrayComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldArrayComponent, selector: "gn-ui-form-field-array", ngImport: i0, template: "<p>form-field-array works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldArrayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-array', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>form-field-array works!</p>\n" }]
-        }] });
-
-class FormFieldSpatialExtentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSpatialExtentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent", ngImport: i0, template: "<p>form-field-spatial-extent works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSpatialExtentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-spatial-extent', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>form-field-spatial-extent works!</p>\n" }]
-        }] });
-
-class FormFieldTemporalExtentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldTemporalExtentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldTemporalExtentComponent, selector: "gn-ui-form-field-temporal-extent", ngImport: i0, template: "<p>form-field-temporal-extent works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldTemporalExtentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-temporal-extent', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>form-field-temporal-extent works!</p>\n" }]
-        }] });
-
-class FormFieldComponent {
-    set value(v) {
-        this.formControl.setValue(v, {
-            emitEvent: false,
-        });
-    }
-    constructor() {
-        this.formControl = new FormControl();
-        this.valueChange = this.formControl.valueChanges;
-    }
-    get simpleType() {
-        return this.config.type;
-    }
-    get isSimpleField() {
-        return (this.config.type === 'text' ||
-            this.config.type === 'number' ||
-            this.config.type === 'date' ||
-            this.config.type === 'list' ||
-            this.config.type === 'url' ||
-            this.config.type === 'toggle');
-    }
-    get isRichField() {
-        return this.config.type === 'rich';
-    }
-    get isFileField() {
-        return this.config.type === 'file';
-    }
-    get isSpatialExtentField() {
-        return this.config.type === 'spatial_extent';
-    }
-    get isTemporalExtentField() {
-        return this.config.type === 'temporal_extent';
-    }
-    get isArrayField() {
-        return this.config.type === 'array';
-    }
-    get isObjectField() {
-        return this.config.type === 'object';
-    }
-    get isFieldOk() {
-        return !this.config.locked && !this.config.invalid;
-    }
-    get isFieldLocked() {
-        return this.config.locked;
-    }
-    get isFieldInvalid() {
-        return !this.config.locked && this.config.invalid;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldComponent, selector: "gn-ui-form-field", inputs: { config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isRichField\">\n    <gn-ui-form-field-rich\n      class=\"grow\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "control", "readonly", "invalid", "placeholder", "options"] }, { kind: "component", type: FormFieldArrayComponent, selector: "gn-ui-form-field-array" }, { kind: "component", type: FormFieldObjectComponent, selector: "gn-ui-form-field-object" }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["control", "readonly", "invalid", "placeholder"] }, { kind: "component", type: FormFieldFileComponent, selector: "gn-ui-form-field-file", inputs: ["control", "readonly", "invalid", "placeholder"] }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldTemporalExtentComponent, selector: "gn-ui-form-field-temporal-extent" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isRichField\">\n    <gn-ui-form-field-rich\n      class=\"grow\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
 class CopyTextButtonComponent {
     constructor() {
         this.displayText = true;
@@ -24983,6 +24952,229 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+class FilesDropDirective {
+    constructor() {
+        this.dragFilesOver = new EventEmitter();
+        this.dropFiles = new EventEmitter();
+        this.dragEnterCounter = 0;
+    }
+    _onDragEnter(event) {
+        event.preventDefault();
+        this.dragEnterCounter++;
+        this.dragFilesOver.emit(true);
+    }
+    _onDragOver(event) {
+        event.preventDefault();
+    }
+    _onDragLeave(event) {
+        event.preventDefault();
+        this.dragEnterCounter = Math.max(0, this.dragEnterCounter - 1);
+        if (this.dragEnterCounter === 0) {
+            this.dragFilesOver.emit(false);
+        }
+    }
+    _onDrop(event) {
+        event.preventDefault();
+        this.dragEnterCounter = 0;
+        this.dragFilesOver.emit(false);
+        const files = Array.from(event.dataTransfer.files);
+        if (files.length > 0) {
+            this.dropFiles.emit(files);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilesDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: FilesDropDirective, isStandalone: true, selector: "[gnUiFilesDrop]", outputs: { dragFilesOver: "dragFilesOver", dropFiles: "dropFiles" }, host: { listeners: { "dragenter": "_onDragEnter($event)", "dragover": "_onDragOver($event)", "dragleave": "_onDragLeave($event)", "drop": "_onDrop($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FilesDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gnUiFilesDrop]',
+                    standalone: true,
+                }]
+        }], propDecorators: { dragFilesOver: [{
+                type: Output
+            }], dropFiles: [{
+                type: Output
+            }], _onDragEnter: [{
+                type: HostListener,
+                args: ['dragenter', ['$event']]
+            }], _onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], _onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], _onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class ImageInputComponent {
+    constructor(http, cd) {
+        this.http = http;
+        this.cd = cd;
+        this.fileChange = new EventEmitter();
+        this.urlChange = new EventEmitter();
+        this.uploadCancel = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.altTextChange = new EventEmitter();
+        this.dragFilesOver = false;
+        this.showUrlInput = false;
+        this.downloadError = false;
+        this.showAltTextInput = false;
+    }
+    getPrimaryText() {
+        if (this.uploadError) {
+            return marker('input.image.uploadErrorLabel');
+        }
+        if (this.uploadProgress) {
+            return marker('input.image.uploadProgressLabel');
+        }
+        return marker('input.image.selectFileLabel');
+    }
+    getSecondaryText() {
+        if (this.uploadError) {
+            return marker('input.image.uploadErrorRetry');
+        }
+        if (this.uploadProgress) {
+            return marker('input.image.uploadProgressCancel');
+        }
+        return marker('input.image.dropFileLabel');
+    }
+    handleDragFilesOver(dragFilesOver) {
+        if (!this.showUrlInput) {
+            this.dragFilesOver = dragFilesOver;
+            this.cd.markForCheck();
+        }
+    }
+    handleDropFiles(files) {
+        if (!this.showUrlInput) {
+            const validFiles = this.filterTypeImage(files);
+            if (validFiles.length > 0) {
+                this.resizeAndEmit(validFiles[0]);
+            }
+        }
+    }
+    handleFileInput(event) {
+        const inputFiles = Array.from(event.target.files);
+        const validFiles = this.filterTypeImage(inputFiles);
+        if (validFiles.length > 0) {
+            this.resizeAndEmit(validFiles[0]);
+        }
+    }
+    displayUrlInput() {
+        this.uploadCancel.emit();
+        this.showUrlInput = true;
+    }
+    handleUrlChange(event) {
+        this.downloadError = false;
+        this.urlInputValue = event.target.value;
+    }
+    async downloadUrl() {
+        const name = this.urlInputValue.split('/').pop();
+        try {
+            const response = await firstValueFrom(this.http.head(this.urlInputValue, { observe: 'response' }));
+            if (response.headers.get('content-type')?.startsWith('image/') &&
+                parseInt(response.headers.get('content-length')) <
+                    megabytesToBytes(this.maxSizeMB)) {
+                this.http.get(this.urlInputValue, { responseType: 'blob' }).subscribe({
+                    next: (blob) => {
+                        this.cd.markForCheck();
+                        const file = new File([blob], name);
+                        this.fileChange.emit(file);
+                    },
+                    error: () => {
+                        this.downloadError = true;
+                        this.cd.markForCheck();
+                        this.urlChange.emit(this.urlInputValue);
+                    },
+                });
+            }
+        }
+        catch {
+            this.downloadError = true;
+            this.cd.markForCheck();
+            return;
+        }
+    }
+    handleSecondaryTextClick() {
+        if (this.uploadError) {
+            this.handleRetry();
+        }
+        else if (this.uploadProgress) {
+            this.handleCancel();
+        }
+    }
+    handleCancel() {
+        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();
+    }
+    toggleAltTextInput() {
+        this.showAltTextInput = !this.showAltTextInput;
+    }
+    handleAltTextChange(event) {
+        const input = event.target;
+        this.altTextChange.emit(input.value);
+    }
+    filterTypeImage(files) {
+        return files.filter((file) => {
+            return file.type.startsWith('image/');
+        });
+    }
+    resizeAndEmit(imageToResize) {
+        const maxSizeBytes = megabytesToBytes(this.maxSizeMB);
+        downgradeImage(imageToResize, maxSizeBytes).then((resizedImage) => {
+            const fileToEmit = new File([resizedImage], imageToResize.name);
+            this.fileChange.emit(fileToEmit);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", 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: "16.1.7", type: ImageInputComponent, isStandalone: true, selector: "gn-ui-image-input", inputs: { maxSizeMB: "maxSizeMB", previewUrl: "previewUrl", altText: "altText", uploadProgress: "uploadProgress", uploadError: "uploadError" }, outputs: { fileChange: "fileChange", urlChange: "urlChange", uploadCancel: "uploadCancel", delete: "delete", altTextChange: "altTextChange" }, ngImport: i0, template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <div class=\"flex-1 group relative\">\n      <img\n        class=\"w-full h-full object-cover border-2 border-gray-300 rounded-lg\"\n        [alt]=\"altText\"\n        loading=\"lazy\"\n        [src]=\"previewUrl\"\n      />\n      <gn-ui-button\n        [extraClass]=\"\n          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'\n        \"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">delete</mat-icon>\n      </gn-ui-button>\n    </div>\n    <input\n      *ngIf=\"showAltTextInput\"\n      type=\"text\"\n      class=\"py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText\"\n      (change)=\"handleAltTextChange($event)\"\n    />\n    <div class=\"flex flex-row gap-2\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">delete</mat-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">add</mat-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=\"block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div class=\"w-14 h-14 rounded-md bg-gray-200 grid\">\n        <mat-icon\n          *ngIf=\"!dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >image</mat-icon\n        >\n        <mat-icon\n          *ngIf=\"dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >add_box</mat-icon\n        >\n        <div *ngIf=\"uploadProgress\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            [mode]=\"'determinate'\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n          <span\n            class=\"text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]\"\n          >\n            {{ uploadProgress }}%\n          </span>\n        </div>\n        <mat-icon\n          *ngIf=\"uploadError\"\n          class=\"material-symbols-outlined place-self-center text-rose-500\"\n          >broken_image</mat-icon\n        >\n      </div>\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            uploadProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick()\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"showUrlInput || uploadProgress || uploadError\"\n      />\n    </label>\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"displayUrlInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">link</mat-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n    <div *ngIf=\"showUrlInput\" class=\"flex-none flex flex-col gap-2\">\n      <div class=\"h-2\"></div>\n      <div class=\"flex gap-2 items-center\">\n        <div class=\"flex-1 flex rounded-lg\">\n          <span\n            class=\"material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300\"\n            >link</span\n          >\n          <input\n            type=\"text\"\n            class=\"py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium\"\n            placeholder=\"https://exemple.com/image.jpg\"\n            (change)=\"handleUrlChange($event)\"\n          />\n          <gn-ui-button\n            class=\"px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white\"\n            [extraClass]=\"\n              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'\n            \"\n            [disabled]=\"!urlInputValue || downloadError\"\n            (buttonClick)=\"downloadUrl()\"\n          >\n            <mat-icon class=\"material-symbols-outlined\">arrow_upward</mat-icon>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-image-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ButtonComponent,
+                        MatIconModule,
+                        FilesDropDirective,
+                        MatProgressSpinnerModule,
+                        TranslateModule,
+                    ], template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <div class=\"flex-1 group relative\">\n      <img\n        class=\"w-full h-full object-cover border-2 border-gray-300 rounded-lg\"\n        [alt]=\"altText\"\n        loading=\"lazy\"\n        [src]=\"previewUrl\"\n      />\n      <gn-ui-button\n        [extraClass]=\"\n          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'\n        \"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">delete</mat-icon>\n      </gn-ui-button>\n    </div>\n    <input\n      *ngIf=\"showAltTextInput\"\n      type=\"text\"\n      class=\"py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText\"\n      (change)=\"handleAltTextChange($event)\"\n    />\n    <div class=\"flex flex-row gap-2\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">delete</mat-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">add</mat-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=\"block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div class=\"w-14 h-14 rounded-md bg-gray-200 grid\">\n        <mat-icon\n          *ngIf=\"!dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >image</mat-icon\n        >\n        <mat-icon\n          *ngIf=\"dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >add_box</mat-icon\n        >\n        <div *ngIf=\"uploadProgress\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            [mode]=\"'determinate'\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n          <span\n            class=\"text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]\"\n          >\n            {{ uploadProgress }}%\n          </span>\n        </div>\n        <mat-icon\n          *ngIf=\"uploadError\"\n          class=\"material-symbols-outlined place-self-center text-rose-500\"\n          >broken_image</mat-icon\n        >\n      </div>\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            uploadProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick()\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"showUrlInput || uploadProgress || uploadError\"\n      />\n    </label>\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"displayUrlInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">link</mat-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n    <div *ngIf=\"showUrlInput\" class=\"flex-none flex flex-col gap-2\">\n      <div class=\"h-2\"></div>\n      <div class=\"flex gap-2 items-center\">\n        <div class=\"flex-1 flex rounded-lg\">\n          <span\n            class=\"material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300\"\n            >link</span\n          >\n          <input\n            type=\"text\"\n            class=\"py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium\"\n            placeholder=\"https://exemple.com/image.jpg\"\n            (change)=\"handleUrlChange($event)\"\n          />\n          <gn-ui-button\n            class=\"px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white\"\n            [extraClass]=\"\n              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'\n            \"\n            [disabled]=\"!urlInputValue || downloadError\"\n            (buttonClick)=\"downloadUrl()\"\n          >\n            <mat-icon class=\"material-symbols-outlined\">arrow_upward</mat-icon>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { maxSizeMB: [{
+                type: Input
+            }], previewUrl: [{
+                type: Input
+            }], altText: [{
+                type: Input
+            }], uploadProgress: [{
+                type: Input
+            }], uploadError: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }], urlChange: [{
+                type: Output
+            }], uploadCancel: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], altTextChange: [{
+                type: Output
+            }] } });
+
 class UiInputsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, declarations: [DropdownSelectorComponent,
@@ -24994,14 +25186,6 @@ class UiInputsModule {
             StarToggleComponent,
             DropdownMultiselectComponent,
             ViewportIntersectorComponent,
-            FormFieldComponent,
-            FormFieldSimpleComponent,
-            FormFieldArrayComponent,
-            FormFieldObjectComponent,
-            FormFieldRichComponent,
-            FormFieldFileComponent,
-            FormFieldSpatialExtentComponent,
-            FormFieldTemporalExtentComponent,
             CheckToggleComponent,
             CopyTextButtonComponent,
             CheckboxComponent,
@@ -25023,7 +25207,8 @@ class UiInputsModule {
             MatNativeDateModule,
             EditableLabelDirective,
             TextAreaComponent,
-            ButtonComponent], exports: [DropdownSelectorComponent,
+            ButtonComponent,
+            ImageInputComponent], exports: [DropdownSelectorComponent,
             AutocompleteComponent,
             ButtonComponent,
             TextInputComponent,
@@ -25034,13 +25219,13 @@ class UiInputsModule {
             StarToggleComponent,
             DropdownMultiselectComponent,
             ViewportIntersectorComponent,
-            FormFieldComponent,
             CheckToggleComponent,
             CopyTextButtonComponent,
             CheckboxComponent,
             SearchInputComponent,
             DateRangePickerComponent,
-            EditableLabelDirective] }); }
+            EditableLabelDirective,
+            ImageInputComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, imports: [CommonModule,
             TranslateModule.forChild(),
             NgxDropzoneModule,
@@ -25057,7 +25242,8 @@ class UiInputsModule {
             MatFormFieldModule,
             MatInputModule,
             MatDatepickerModule,
-            MatNativeDateModule] }); }
+            MatNativeDateModule,
+            ImageInputComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, decorators: [{
             type: NgModule,
@@ -25072,14 +25258,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         StarToggleComponent,
                         DropdownMultiselectComponent,
                         ViewportIntersectorComponent,
-                        FormFieldComponent,
-                        FormFieldSimpleComponent,
-                        FormFieldArrayComponent,
-                        FormFieldObjectComponent,
-                        FormFieldRichComponent,
-                        FormFieldFileComponent,
-                        FormFieldSpatialExtentComponent,
-                        FormFieldTemporalExtentComponent,
                         CheckToggleComponent,
                         CopyTextButtonComponent,
                         CheckboxComponent,
@@ -25107,6 +25285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         EditableLabelDirective,
                         TextAreaComponent,
                         ButtonComponent,
+                        ImageInputComponent,
                     ],
                     exports: [
                         DropdownSelectorComponent,
@@ -25120,13 +25299,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         StarToggleComponent,
                         DropdownMultiselectComponent,
                         ViewportIntersectorComponent,
-                        FormFieldComponent,
                         CheckToggleComponent,
                         CopyTextButtonComponent,
                         CheckboxComponent,
                         SearchInputComponent,
                         DateRangePickerComponent,
                         EditableLabelDirective,
+                        ImageInputComponent,
                     ],
                 }]
         }] });
@@ -25620,11 +25799,11 @@ class ThumbnailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ThumbnailComponent, deps: [{ token: THUMBNAIL_PLACEHOLDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: { thumbnailUrl: "thumbnailUrl", fit: "fit" }, outputs: { placeholderShown: "placeholderShown" }, viewQueries: [{ propertyName: "imgElement", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #containerElement\n  class=\"h-full w-full relative shrink-0 overflow-hidden flex items-center justify-center\"\n  [ngClass]=\"isPlaceholder ? 'bg-gray-100' : 'bg-white'\"\n  [attr.data-cy-is-placeholder]=\"isPlaceholder.toString()\"\n>\n  <img\n    #imageElement\n    class=\"relative w-full object-center\"\n    [ngClass]=\"imgFit === 'contain' ? 'h-4/5 w-4/5' : 'h-full'\"\n    [ngStyle]=\"{ objectFit: imgFit }\"\n    alt=\"thumbnail\"\n    loading=\"lazy\"\n    (load)=\"setObjectFit()\"\n    [src]=\"imgUrl\"\n    (error)=\"useFallback()\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ThumbnailComponent, isStandalone: true, selector: "gn-ui-thumbnail", inputs: { thumbnailUrl: "thumbnailUrl", fit: "fit" }, outputs: { placeholderShown: "placeholderShown" }, viewQueries: [{ propertyName: "imgElement", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #containerElement\n  class=\"h-full w-full relative shrink-0 overflow-hidden flex items-center justify-center\"\n  [ngClass]=\"isPlaceholder ? 'bg-gray-100' : 'bg-white'\"\n  [attr.data-cy-is-placeholder]=\"isPlaceholder.toString()\"\n>\n  <img\n    #imageElement\n    class=\"relative w-full object-center\"\n    [ngClass]=\"imgFit === 'contain' ? 'h-4/5 w-4/5' : 'h-full'\"\n    [ngStyle]=\"{ objectFit: imgFit }\"\n    alt=\"thumbnail\"\n    loading=\"lazy\"\n    (load)=\"setObjectFit()\"\n    [src]=\"imgUrl\"\n    (error)=\"useFallback()\"\n  />\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #containerElement\n  class=\"h-full w-full relative shrink-0 overflow-hidden flex items-center justify-center\"\n  [ngClass]=\"isPlaceholder ? 'bg-gray-100' : 'bg-white'\"\n  [attr.data-cy-is-placeholder]=\"isPlaceholder.toString()\"\n>\n  <img\n    #imageElement\n    class=\"relative w-full object-center\"\n    [ngClass]=\"imgFit === 'contain' ? 'h-4/5 w-4/5' : 'h-full'\"\n    [ngStyle]=\"{ objectFit: imgFit }\"\n    alt=\"thumbnail\"\n    loading=\"lazy\"\n    (load)=\"setObjectFit()\"\n    [src]=\"imgUrl\"\n    (error)=\"useFallback()\"\n  />\n</div>\n" }]
+            args: [{ selector: 'gn-ui-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div\n  #containerElement\n  class=\"h-full w-full relative shrink-0 overflow-hidden flex items-center justify-center\"\n  [ngClass]=\"isPlaceholder ? 'bg-gray-100' : 'bg-white'\"\n  [attr.data-cy-is-placeholder]=\"isPlaceholder.toString()\"\n>\n  <img\n    #imageElement\n    class=\"relative w-full object-center\"\n    [ngClass]=\"imgFit === 'contain' ? 'h-4/5 w-4/5' : 'h-full'\"\n    [ngStyle]=\"{ objectFit: imgFit }\"\n    alt=\"thumbnail\"\n    loading=\"lazy\"\n    (load)=\"setObjectFit()\"\n    [src]=\"imgUrl\"\n    (error)=\"useFallback()\"\n  />\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -25919,44 +26098,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class ExpandablePanelComponent {
+class ApiCardComponent {
     constructor() {
-        this.collapsed = true;
-        this.maxHeight = this.setMaxHeight();
+        this.currentlyActive = false;
+        this.openRecordApiForm = new EventEmitter();
     }
-    toggle() {
-        this.collapsed = !this.collapsed;
-        this.maxHeight = this.setMaxHeight();
+    ngOnInit() {
+        this.displayApiFormButton =
+            this.link.accessServiceProtocol === 'ogcFeatures' ? true : false;
     }
-    setMaxHeight() {
-        return `${this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight}px`;
+    ngOnChanges(changes) {
+        this.currentlyActive =
+            changes.currentLink.currentValue === this.link ? true : false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ExpandablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: { title: "title", collapsed: "collapsed" }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"collapsed\">add</mat-icon>\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"!collapsed\"\n      >remove</mat-icon\n    >\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    openRecordApiFormPanel() {
+        if (this.displayApiFormButton) {
+            this.currentlyActive = !this.currentlyActive;
+            this.openRecordApiForm.emit(this.currentlyActive ? this.link : undefined);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ApiCardComponent, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ExpandablePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"collapsed\">add</mat-icon>\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"!collapsed\"\n      >remove</mat-icon\n    >\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { title: [{
+            args: [{ selector: 'gn-ui-api-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { link: [{
                 type: Input
-            }], collapsed: [{
+            }], currentLink: [{
                 type: Input
-            }], contentDiv: [{
-                type: ViewChild,
-                args: ['contentDiv']
+            }], openRecordApiForm: [{
+                type: Output
             }] } });
 
-class MarkdownParserComponent {
-    get parsedMarkdown() {
-        return marked.parse(this.textContent);
+class AvatarComponent {
+    hideImage() {
+        this.avatarUrl = this.avatarPlaceholder;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownParserComponent, isStandalone: true, selector: "gn-ui-markdown-parser", inputs: { textContent: "textContent" }, ngImport: i0, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AvatarComponent, selector: "gn-ui-avatar", inputs: { avatarUrl: "avatarUrl", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<img\n  *ngIf=\"avatarUrl\"\n  class=\"rounded-full object-cover\"\n  [src]=\"avatarUrl\"\n  (error)=\"hideImage()\"\n/>\n<div\n  *ngIf=\"!avatarUrl\"\n  class=\"w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200\"\n></div>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-markdown-parser', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"] }]
-        }], propDecorators: { textContent: [{
+            args: [{ selector: 'gn-ui-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n  *ngIf=\"avatarUrl\"\n  class=\"rounded-full object-cover\"\n  [src]=\"avatarUrl\"\n  (error)=\"hideImage()\"\n/>\n<div\n  *ngIf=\"!avatarUrl\"\n  class=\"w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200\"\n></div>\n" }]
+        }], propDecorators: { avatarUrl: [{
+                type: Input
+            }], avatarPlaceholder: [{
                 type: Input
             }] } });
 
@@ -25976,80 +26163,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-/* eslint-disable @angular-eslint/directive-selector */
-class GnUiLinkifyDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
+class DownloadItemComponent {
+    constructor() {
+        this.exportUrl = new EventEmitter();
     }
-    ngOnInit() {
-        setTimeout(() => {
-            this.processLinks(this.el.nativeElement);
-        }, 0);
+    openUrl() {
+        this.exportUrl.emit(this.link.url.toString());
     }
-    processLinks(container) {
-        const nodes = Array.from(container.childNodes);
-        nodes.forEach((node) => {
-            if (node instanceof Text) {
-                const textNode = node;
-                const linkified = this.linkifyNode(textNode.nodeValue);
-                if (linkified) {
-                    this.createLinkElements(container, linkified, node);
-                }
-            }
-            else if (node instanceof HTMLAnchorElement) {
-                const url = node.href;
-                const displayValue = node.innerHTML;
-                const linkified = this.linkifyNode(displayValue, url);
-                if (linkified) {
-                    this.createLinkElements(container, linkified, node);
-                }
-            }
-            else {
-                this.processLinks(node);
-            }
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: { link: "link", color: "color", format: "format", isFromWfs: "isFromWfs" }, outputs: { exportUrl: "exportUrl" }, ngImport: i0, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromWfs\"\n        translate=\"\"\n        >datahub.search.filter.generatedByWfs</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <mat-icon class=\"!w-8 !h-8 card-icon text-3xl material-symbols-outlined\">\n      cloud_download\n    </mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-download-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromWfs\"\n        translate=\"\"\n        >datahub.search.filter.generatedByWfs</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <mat-icon class=\"!w-8 !h-8 card-icon text-3xl material-symbols-outlined\">\n      cloud_download\n    </mat-icon>\n  </div>\n</a>\n" }]
+        }], propDecorators: { link: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], isFromWfs: [{
+                type: Input
+            }], exportUrl: [{
+                type: Output
+            }] } });
+
+marker('datahub.search.filter.all');
+marker('datahub.search.filter.others');
+const FILTER_FORMATS = ['all', 'csv', 'excel', 'json', 'shp', 'others'];
+class DownloadsListComponent {
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.activeFilterFormats = ['all'];
     }
-    linkifyNode(displayValue, url) {
-        if (url) {
-            displayValue = this.createLink(displayValue, url);
+    get filteredLinks() {
+        return this.links.filter((link) => this.activeFilterFormats.some((format) => this.isLinkOfFormat(link, format)));
+    }
+    get visibleFormats() {
+        return FILTER_FORMATS.filter((format) => this.links.some((link) => this.isLinkOfFormat(link, format)));
+    }
+    toggleFilterFormat(format) {
+        if (format === 'all') {
+            this.activeFilterFormats = ['all'];
+            return;
+        }
+        if (this.isFilterActive(format)) {
+            this.activeFilterFormats = this.activeFilterFormats.filter((f) => format !== f);
         }
         else {
-            const urlRegex = /\bhttps?:\/\/(?:\([^\s()]+\)|[^\s()]+)+/g;
-            const matches = displayValue.match(urlRegex);
-            if (matches && matches.length > 0) {
-                matches.forEach((match) => {
-                    url = match;
-                    displayValue = displayValue.replace(match, (match) => {
-                        return this.createLink(match, url);
-                    });
-                });
-            }
+            this.activeFilterFormats = [
+                ...this.activeFilterFormats.filter((f) => f !== 'all'),
+                format,
+            ];
+        }
+        if (this.activeFilterFormats.length === 0) {
+            this.activeFilterFormats = ['all'];
         }
-        return displayValue;
     }
-    createLinkElements(container, htmlContent, node) {
-        const div = this.renderer.createElement('div');
-        div.innerHTML = htmlContent;
-        const fragment = document.createDocumentFragment();
-        Array.from(div.childNodes).forEach((childNode) => {
-            fragment.appendChild(childNode);
-        });
-        container.insertBefore(fragment, node);
-        container.removeChild(node);
+    isFilterActive(filter) {
+        return this.activeFilterFormats.includes(filter);
     }
-    createLink(displayValue, url) {
-        return `<a href="${url}" target="_blank" class="text-primary cursor-pointer hover:underline">${displayValue} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`;
+    getFilterFormatTitle(format) {
+        if (format === 'all' || format === 'others') {
+            return this.translateService.instant(`datahub.search.filter.${format}`);
+        }
+        return format;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GnUiLinkifyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]", ngImport: i0 }); }
+    isLinkOfFormat(link, format) {
+        if (format === 'all') {
+            return true;
+        }
+        if (getFileFormat(link) === null) {
+            return format === 'others';
+        }
+        if (format === 'others') {
+            const knownFormats = FILTER_FORMATS.filter((format) => format !== 'all' && format !== 'others');
+            return knownFormats.every((knownFormat) => !getFileFormat(link).includes(knownFormat));
+        }
+        return getFileFormat(link).includes(format);
+    }
+    getLinkFormat(link) {
+        return getFileFormat(link);
+    }
+    getLinkColor(link) {
+        return getBadgeColor(getFileFormat(link));
+    }
+    isFromWfs(link) {
+        return link.type === 'service' && link.accessServiceProtocol === 'wfs';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadsListComponent, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromWfs"], outputs: ["exportUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GnUiLinkifyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[gnUiLinkify]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-downloads-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; }, propDecorators: { links: [{
+                type: Input
+            }] } });
+
+class ImageOverlayPreviewComponent {
+    constructor() {
+        this.isPlaceholderShown = new EventEmitter();
+    }
+    openLightbox(src) {
+        basicLightbox.create(`<img src="${src}"/>`).show();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: { imageUrl: "imageUrl" }, outputs: { isPlaceholderShown: "isPlaceholderShown" }, ngImport: i0, template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-image-overlay-preview', template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n" }]
+        }], propDecorators: { imageUrl: [{
+                type: Input
+            }], isPlaceholderShown: [{
+                type: Output
+            }] } });
+
+class LinkCardComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LinkCardComponent, selector: "gn-ui-link-card", inputs: { link: "link" }, ngImport: i0, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-link-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n" }]
+        }], propDecorators: { link: [{
+                type: Input
+            }] } });
+
+class MarkdownParserComponent {
+    get parsedMarkdown() {
+        return marked.parse(this.textContent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownParserComponent, isStandalone: true, selector: "gn-ui-markdown-parser", inputs: { textContent: "textContent" }, ngImport: i0, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-markdown-parser', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"] }]
+        }], propDecorators: { textContent: [{
+                type: Input
+            }] } });
+
+class MarkdownEditorComponent {
+    constructor() {
+        this.preview = false;
+        this.textContentChanged = new EventEmitter();
+    }
+    textContentChangedHandler(textContent) {
+        this.textContent = textContent;
+        this.textContentChanged.emit(this.textContent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownEditorComponent, isStandalone: true, selector: "gn-ui-markdown-editor", inputs: { preview: "preview", helperText: "helperText", placeholder: "placeholder", textContent: "textContent" }, outputs: { textContentChanged: "textContentChanged" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <p class=\"flex-none mb-2 font-medium text-sm text-gray-900\">\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-markdown-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        ButtonComponent,
+                        TextAreaComponent,
+                        MarkdownParserComponent,
+                        TranslateModule,
+                    ], template: "<div class=\"h-full flex flex-col\">\n  <p class=\"flex-none mb-2 font-medium text-sm text-gray-900\">\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n" }]
+        }], propDecorators: { preview: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], textContent: [{
+                type: Input
+            }], textContentChanged: [{
+                type: Output
+            }] } });
 
 class MaxLinesComponent {
     constructor(cdr) {
@@ -26116,6 +26406,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['container']
             }] } });
 
+class MetadataCatalogComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataCatalogComponent, selector: "gn-ui-metadata-catalog", inputs: { sourceLabel: "sourceLabel" }, ngImport: i0, template: "<div>\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.catalog\n  </p>\n  <p class=\"text-primary font-title text-21 mb-1\">\n    {{ sourceLabel }}\n  </p>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataCatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-metadata-catalog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.catalog\n  </p>\n  <p class=\"text-primary font-title text-21 mb-1\">\n    {{ sourceLabel }}\n  </p>\n</div>\n" }]
+        }], propDecorators: { sourceLabel: [{
+                type: Input
+            }] } });
+
+class MetadataContactComponent {
+    constructor() {
+        this.organizationClick = new EventEmitter();
+        this.contactClick = new EventEmitter();
+    }
+    get shownOrganization() {
+        return this.metadata.ownerOrganization;
+    }
+    get contacts() {
+        return ((this.metadata.kind === 'dataset'
+            ? this.metadata.contactsForResource
+            : this.metadata.contacts) || []);
+    }
+    get address() {
+        const addressParts = this.contacts[0].address
+            .split(',')
+            .map((part) => part.trim());
+        return addressParts;
+    }
+    onOrganizationClick() {
+        this.organizationClick.emit(this.shownOrganization);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataContactComponent, selector: "gn-ui-metadata-contact", inputs: { metadata: "metadata" }, outputs: { organizationClick: "organizationClick", contactClick: "contactClick" }, ngImport: i0, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6\">\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-metadata-contact', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6\">\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { metadata: [{
+                type: Input
+            }], organizationClick: [{
+                type: Output
+            }], contactClick: [{
+                type: Output
+            }] } });
+
+class ExpandablePanelComponent {
+    constructor() {
+        this.collapsed = true;
+        this.maxHeight = this.setMaxHeight();
+    }
+    toggle() {
+        this.collapsed = !this.collapsed;
+        this.maxHeight = this.setMaxHeight();
+    }
+    setMaxHeight() {
+        return `${this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight}px`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ExpandablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: { title: "title", collapsed: "collapsed" }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"collapsed\">add</mat-icon>\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"!collapsed\"\n      >remove</mat-icon\n    >\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ExpandablePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"collapsed\">add</mat-icon>\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"!collapsed\"\n      >remove</mat-icon\n    >\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], contentDiv: [{
+                type: ViewChild,
+                args: ['contentDiv']
+            }] } });
+
+/* eslint-disable @angular-eslint/directive-selector */
+class GnUiLinkifyDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.processLinks(this.el.nativeElement);
+        }, 0);
+    }
+    processLinks(container) {
+        const nodes = Array.from(container.childNodes);
+        nodes.forEach((node) => {
+            if (node instanceof Text) {
+                const textNode = node;
+                const linkified = this.linkifyNode(textNode.nodeValue);
+                if (linkified) {
+                    this.createLinkElements(container, linkified, node);
+                }
+            }
+            else if (node instanceof HTMLAnchorElement) {
+                const url = node.href;
+                const displayValue = node.innerHTML;
+                const linkified = this.linkifyNode(displayValue, url);
+                if (linkified) {
+                    this.createLinkElements(container, linkified, node);
+                }
+            }
+            else {
+                this.processLinks(node);
+            }
+        });
+    }
+    linkifyNode(displayValue, url) {
+        if (url) {
+            displayValue = this.createLink(displayValue, url);
+        }
+        else {
+            const urlRegex = /\bhttps?:\/\/(?:\([^\s()]+\)|[^\s()]+)+/g;
+            const matches = displayValue.match(urlRegex);
+            if (matches && matches.length > 0) {
+                matches.forEach((match) => {
+                    url = match;
+                    displayValue = displayValue.replace(match, (match) => {
+                        return this.createLink(match, url);
+                    });
+                });
+            }
+        }
+        return displayValue;
+    }
+    createLinkElements(container, htmlContent, node) {
+        const div = this.renderer.createElement('div');
+        div.innerHTML = htmlContent;
+        const fragment = document.createDocumentFragment();
+        Array.from(div.childNodes).forEach((childNode) => {
+            fragment.appendChild(childNode);
+        });
+        container.insertBefore(fragment, node);
+        container.removeChild(node);
+    }
+    createLink(displayValue, url) {
+        return `<a href="${url}" target="_blank" class="text-primary cursor-pointer hover:underline">${displayValue} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GnUiLinkifyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GnUiLinkifyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gnUiLinkify]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+
 class MetadataInfoComponent {
     constructor() {
         this.keyword = new EventEmitter();
@@ -26180,7 +26619,7 @@ class MetadataInfoComponent {
         this.keyword.emit(keyword);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataInfoComponent, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"mt-6 mb-3 font-medium text-primary text-sm\" translate>\n        record.metadata.keywords\n      </p>\n      <div class=\"sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <gn-ui-markdown-parser\n        *ngFor=\"let constraint of legalConstraints\"\n        [textContent]=\"constraint\"\n      >\n      </gn-ui-markdown-parser>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\n        <gn-ui-markdown-parser [textContent]=\"constraint\">\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\n    <div\n      *ngIf=\"resourceContact.organization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div *ngIf=\"metadata.recordCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordCreated.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.recordPublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordPublished.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.languages\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium\"\n          translate\n          *ngFor=\"let language of metadata.languages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.technical' | translate\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "collapsed"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataInfoComponent, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"mt-6 mb-3 font-medium text-primary text-sm\" translate>\n        record.metadata.keywords\n      </p>\n      <div class=\"sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <gn-ui-markdown-parser\n        *ngFor=\"let constraint of legalConstraints\"\n        [textContent]=\"constraint\"\n      >\n      </gn-ui-markdown-parser>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\n        <gn-ui-markdown-parser [textContent]=\"constraint\">\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\n    <div\n      *ngIf=\"resourceContact.organization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div *ngIf=\"metadata.recordCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordCreated.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.recordPublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordPublished.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.languages\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium\"\n          translate\n          *ngFor=\"let language of metadata.languages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.technical' | translate\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "collapsed"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataInfoComponent, decorators: [{
             type: Component,
@@ -26193,210 +26632,210 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class DownloadItemComponent {
+class PaginationButtonsComponent {
     constructor() {
-        this.exportUrl = new EventEmitter();
-    }
-    openUrl() {
-        this.exportUrl.emit(this.link.url.toString());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: { link: "link", color: "color", format: "format", isFromWfs: "isFromWfs" }, outputs: { exportUrl: "exportUrl" }, ngImport: i0, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromWfs\"\n        translate=\"\"\n        >datahub.search.filter.generatedByWfs</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <mat-icon class=\"!w-8 !h-8 card-icon text-3xl material-symbols-outlined\">\n      cloud_download\n    </mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-download-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromWfs\"\n        translate=\"\"\n        >datahub.search.filter.generatedByWfs</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <mat-icon class=\"!w-8 !h-8 card-icon text-3xl material-symbols-outlined\">\n      cloud_download\n    </mat-icon>\n  </div>\n</a>\n" }]
-        }], propDecorators: { link: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], isFromWfs: [{
-                type: Input
-            }], exportUrl: [{
-                type: Output
-            }] } });
-
-marker('datahub.search.filter.all');
-marker('datahub.search.filter.others');
-const FILTER_FORMATS = ['all', 'csv', 'excel', 'json', 'shp', 'others'];
-class DownloadsListComponent {
-    constructor(translateService) {
-        this.translateService = translateService;
-        this.activeFilterFormats = ['all'];
-    }
-    get filteredLinks() {
-        return this.links.filter((link) => this.activeFilterFormats.some((format) => this.isLinkOfFormat(link, format)));
+        this.visiblePages = [];
+        this.newCurrentPageEvent = new EventEmitter();
     }
-    get visibleFormats() {
-        return FILTER_FORMATS.filter((format) => this.links.some((link) => this.isLinkOfFormat(link, format)));
+    ngOnChanges() {
+        this.calculateVisiblePages();
     }
-    toggleFilterFormat(format) {
-        if (format === 'all') {
-            this.activeFilterFormats = ['all'];
-            return;
-        }
-        if (this.isFilterActive(format)) {
-            this.activeFilterFormats = this.activeFilterFormats.filter((f) => format !== f);
-        }
-        else {
-            this.activeFilterFormats = [
-                ...this.activeFilterFormats.filter((f) => f !== 'all'),
-                format,
-            ];
+    calculateVisiblePages() {
+        const maxVisiblePages = 5;
+        const halfVisible = Math.floor(maxVisiblePages / 2);
+        const startPage = Math.max(this.currentPage - halfVisible, 1);
+        const endPage = Math.min(this.currentPage + halfVisible, this.totalPages);
+        const visiblePages = [];
+        if (startPage > 1) {
+            visiblePages.push(1);
+            if (startPage > 2) {
+                visiblePages.push('...');
+            }
         }
-        if (this.activeFilterFormats.length === 0) {
-            this.activeFilterFormats = ['all'];
+        for (let page = startPage; page <= endPage; page++) {
+            visiblePages.push(page);
         }
-    }
-    isFilterActive(filter) {
-        return this.activeFilterFormats.includes(filter);
-    }
-    getFilterFormatTitle(format) {
-        if (format === 'all' || format === 'others') {
-            return this.translateService.instant(`datahub.search.filter.${format}`);
+        if (endPage < this.totalPages) {
+            if (endPage < this.totalPages - 1) {
+                visiblePages.push('...');
+            }
+            visiblePages.push(this.totalPages);
         }
-        return format;
+        this.visiblePages = visiblePages;
     }
-    isLinkOfFormat(link, format) {
-        if (format === 'all') {
-            return true;
-        }
-        if (getFileFormat(link) === null) {
-            return format === 'others';
-        }
-        if (format === 'others') {
-            const knownFormats = FILTER_FORMATS.filter((format) => format !== 'all' && format !== 'others');
-            return knownFormats.every((knownFormat) => !getFileFormat(link).includes(knownFormat));
-        }
-        return getFileFormat(link).includes(format);
+    changePage(page) {
+        this.setPage(page);
     }
-    getLinkFormat(link) {
-        return getFileFormat(link);
+    nextPage() {
+        this.setPage(this.currentPage + 1);
     }
-    getLinkColor(link) {
-        return getBadgeColor(getFileFormat(link));
+    previousPage() {
+        this.setPage(this.currentPage - 1);
     }
-    isFromWfs(link) {
-        return link.type === 'service' && link.accessServiceProtocol === 'wfs';
+    setPage(newPage) {
+        if (!Number.isInteger(newPage))
+            return;
+        this.currentPage = newPage;
+        this.calculateVisiblePages();
+        this.newCurrentPageEvent.emit(this.currentPage);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadsListComponent, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromWfs"], outputs: ["exportUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PaginationButtonsComponent, selector: "gn-ui-pagination-buttons", inputs: { currentPage: "currentPage", totalPages: "totalPages" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"flex flex-row gap-[5px] items-center\">\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === 1\"\n      (buttonClick)=\"previousPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_left</mat-icon>\n    </gn-ui-button>\n    <ng-container *ngFor=\"let page of visiblePages\">\n      <ng-container *ngIf=\"page === '...'\">\n        <span class=\"mx-[5px]\">{{ page }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"page !== '...'\">\n        <gn-ui-button\n          [type]=\"page === currentPage ? 'primary' : 'light'\"\n          [disabled]=\"page === currentPage\"\n          (buttonClick)=\"changePage(page)\"\n          >{{ page }}</gn-ui-button\n        >\n      </ng-container>\n    </ng-container>\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === totalPages\"\n      (buttonClick)=\"nextPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_right</mat-icon>\n    </gn-ui-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-downloads-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; }, propDecorators: { links: [{
+            args: [{ selector: 'gn-ui-pagination-buttons', template: "<div class=\"relative\">\n  <div class=\"flex flex-row gap-[5px] items-center\">\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === 1\"\n      (buttonClick)=\"previousPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_left</mat-icon>\n    </gn-ui-button>\n    <ng-container *ngFor=\"let page of visiblePages\">\n      <ng-container *ngIf=\"page === '...'\">\n        <span class=\"mx-[5px]\">{{ page }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"page !== '...'\">\n        <gn-ui-button\n          [type]=\"page === currentPage ? 'primary' : 'light'\"\n          [disabled]=\"page === currentPage\"\n          (buttonClick)=\"changePage(page)\"\n          >{{ page }}</gn-ui-button\n        >\n      </ng-container>\n    </ng-container>\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === totalPages\"\n      (buttonClick)=\"nextPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_right</mat-icon>\n    </gn-ui-button>\n  </div>\n</div>\n" }]
+        }], propDecorators: { currentPage: [{
                 type: Input
+            }], totalPages: [{
+                type: Input
+            }], newCurrentPageEvent: [{
+                type: Output
             }] } });
 
-class ApiCardComponent {
+class PaginationComponent {
     constructor() {
-        this.currentlyActive = false;
-        this.openRecordApiForm = new EventEmitter();
+        this.currentPage = 1;
+        this.nPages = 1;
+        this.hideButton = false;
+        this.newCurrentPageEvent = new EventEmitter();
     }
-    ngOnInit() {
-        this.displayApiFormButton =
-            this.link.accessServiceProtocol === 'ogcFeatures' ? true : false;
+    applyPageBounds() {
+        // make sure this works with NaN inputs as well by adding `|| 1`
+        this.nPages = Math.max(1, this.nPages || 1);
+        this.currentPage = Math.max(1, Math.min(this.nPages, this.currentPage || 1));
     }
     ngOnChanges(changes) {
-        this.currentlyActive =
-            changes.currentLink.currentValue === this.link ? true : false;
-    }
-    openRecordApiFormPanel() {
-        if (this.displayApiFormButton) {
-            this.currentlyActive = !this.currentlyActive;
-            this.openRecordApiForm.emit(this.currentlyActive ? this.link : undefined);
+        // make sure the inputs are valid
+        if ('currentPage' in changes || 'nPages' in changes) {
+            this.applyPageBounds();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ApiCardComponent, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    setPage(newPage) {
+        if (!Number.isInteger(newPage))
+            return;
+        this.currentPage = newPage;
+        this.applyPageBounds();
+        this.newCurrentPageEvent.emit(this.currentPage);
+    }
+    nextPage() {
+        this.setPage(this.currentPage + 1);
+    }
+    previousPage() {
+        this.setPage(this.currentPage - 1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PaginationComponent, selector: "gn-ui-pagination", inputs: { currentPage: "currentPage", nPages: "nPages", hideButton: "hideButton" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-api-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { link: [{
+            args: [{ selector: 'gn-ui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { currentPage: [{
                 type: Input
-            }], currentLink: [{
+            }], nPages: [{
                 type: Input
-            }], openRecordApiForm: [{
+            }], hideButton: [{
+                type: Input
+            }], newCurrentPageEvent: [{
                 type: Output
             }] } });
 
-/**
- * This component will make a block that will stay sticky on the top of the page,
- * but will also shrink down to a minimum height when scrolling.
- * The ratio between minimum and nominal height is stored in the shrinkRatio
- * property, and can be used to change e.g. the opacity or size of child elements.
- * This component renders at z-index: 50 by default.
- * The first parent element with an overflow of `scroll` or `overflow` is considered
- * for scroll events.
- */
-class StickyHeaderComponent {
-    constructor(changeDetector, hostEl, zone) {
-        this.changeDetector = changeDetector;
-        this.hostEl = hostEl;
-        this.zone = zone;
+const DEFAULT_PARAMS = {
+    OFFSET: '',
+    LIMIT: '-1',
+    FORMAT: 'json',
+};
+class RecordApiFormComponent {
+    constructor() {
+        this.offset$ = new BehaviorSubject('');
+        this.limit$ = new BehaviorSubject('');
+        this.format$ = new BehaviorSubject('');
+        this.formatsList = [
+            { label: 'JSON', value: 'json' },
+            { label: 'CSV', value: 'csv' },
+        ];
+        this.apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(map$2(([offset, limit, format]) => {
+            let outputUrl;
+            if (this.apiBaseUrl) {
+                const url = new URL(this.apiBaseUrl);
+                const params = { offset: offset, limit: limit, f: format };
+                for (const [key, value] of Object.entries(params)) {
+                    if (value && value !== '0') {
+                        url.searchParams.set(key, value);
+                    }
+                    else {
+                        url.searchParams.delete(key);
+                    }
+                }
+                outputUrl = url.toString();
+            }
+            return outputUrl;
+        }));
+        this.noLimitChecked$ = this.limit$.pipe(map$2((limit) => limit === '-1' || limit === ''));
+        this.displayLimit$ = this.limit$.pipe(map$2((limit) => (limit !== '-1' ? limit : '')));
     }
-    ngAfterViewInit() {
-        this.scrollSub = fromEvent(window, 'scroll', {
-            passive: true,
-        })
-            .pipe(throttleTime(0, animationFrameScheduler, {
-            leading: true,
-            trailing: true,
-        }))
-            .subscribe(this.updateSize.bind(this));
+    set apiLink(value) {
+        this.apiBaseUrl = value ? value.url.href : undefined;
+        this.resetUrl();
     }
-    ngOnInit() {
-        this.placeholderEl = document.createElement('div');
-        this.placeholderEl.style.position = 'absolute';
-        this.placeholderEl.classList.add('sticky-header-placeholder');
-        this.hostEl.nativeElement.insertAdjacentElement('beforebegin', this.placeholderEl);
+    setOffset(value) {
+        this.offset$.next(value);
     }
-    ngAfterViewChecked() {
-        this.updateSize();
+    setLimit(value) {
+        const newLimit = value === '' ? '-1' : value;
+        this.limit$.next(newLimit);
     }
-    ngOnDestroy() {
-        this.scrollSub.unsubscribe();
-        this.placeholderEl.remove();
+    setFormat(value) {
+        this.format$.next(String(value));
     }
-    updateSize() {
-        this.zone.runOutsideAngular(() => {
-            if (window.scrollY === this.parentScroll)
-                return;
-            this.parentScroll = window.scrollY;
-            const offsetTop = Math.max(0, this.parentScroll - this.placeholderEl.offsetTop);
-            const newHeightPx = Math.max(this.minHeightPx, this.fullHeightPx - offsetTop);
-            this.innerContainer.nativeElement.style.transform = `translate(0, ${newHeightPx - this.fullHeightPx}px)`;
-            this.expandRatio =
-                (newHeightPx - this.minHeightPx) /
-                    (this.fullHeightPx - this.minHeightPx);
-            this.changeDetector.detectChanges();
-        });
+    resetUrl() {
+        this.offset$.next(DEFAULT_PARAMS.OFFSET);
+        this.limit$.next(DEFAULT_PARAMS.LIMIT);
+        this.format$.next(DEFAULT_PARAMS.FORMAT);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: StickyHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef, host: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: StickyHeaderComponent, selector: "gn-ui-sticky-header", inputs: { minHeightPx: "minHeightPx", fullHeightPx: "fullHeightPx" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer"], descendants: true }, { propertyName: "innerContainer", first: true, predicate: ["innerContainer"], descendants: true }], ngImport: i0, template: "<div\n  #outerContainer\n  class=\"sticky pointer-events-none z-50 top-0\"\n  [style.height]=\"fullHeightPx + 'px'\"\n>\n  <div\n    #innerContainer\n    class=\"relative pointer-events-auto\"\n    [style.height]=\"fullHeightPx + 'px'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: expandRatio }\"\n    ></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between flex-grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: StickyHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-sticky-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #outerContainer\n  class=\"sticky pointer-events-none z-50 top-0\"\n  [style.height]=\"fullHeightPx + 'px'\"\n>\n  <div\n    #innerContainer\n    class=\"relative pointer-events-auto\"\n    [style.height]=\"fullHeightPx + 'px'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: expandRatio }\"\n    ></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef, decorators: [{
-                    type: Host
-                }] }, { type: i0.NgZone }]; }, propDecorators: { minHeightPx: [{
+            args: [{ selector: 'gn-ui-record-api-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between flex-grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"] }]
+        }], propDecorators: { apiLink: [{
                 type: Input
-            }], fullHeightPx: [{
+            }] } });
+
+class RelatedRecordCardComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record" }, ngImport: i0, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-related-record-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n" }]
+        }], propDecorators: { record: [{
+                type: Input
+            }] } });
+
+var ErrorType;
+(function (ErrorType) {
+    ErrorType[ErrorType["COULD_NOT_REACH_API"] = 0] = "COULD_NOT_REACH_API";
+    ErrorType[ErrorType["RECEIVED_ERROR"] = 1] = "RECEIVED_ERROR";
+    ErrorType[ErrorType["RECORD_NOT_FOUND"] = 2] = "RECORD_NOT_FOUND";
+})(ErrorType || (ErrorType = {}));
+class SearchResultsErrorComponent {
+    constructor() {
+        this.types = ErrorType;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchResultsErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SearchResultsErrorComponent, selector: "gn-ui-search-results-error", inputs: { type: "type", error: "error", recordId: "recordId" }, ngImport: i0, template: "<div\n  class=\"p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg\"\n>\n  <div *ngIf=\"type === types.COULD_NOT_REACH_API\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">face</mat-icon>\n      <mat-icon class=\"material-symbols-outlined question-mark1\"\n        >question_mark</mat-icon\n      >\n      <mat-icon class=\"material-symbols-outlined question-mark2\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate>search.error.couldNotReachApi</div>\n  </div>\n  <div *ngIf=\"type === types.RECEIVED_ERROR\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">mood_bad</mat-icon>\n    </div>\n    <div translate>search.error.receivedError</div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n  <div *ngIf=\"type === types.RECORD_NOT_FOUND\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined computer\">computer</mat-icon>\n      <mat-icon class=\"material-symbols-outlined computer-question-mark\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate [translateParams]=\"{ id: recordId }\">\n      search.error.recordNotFound\n    </div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n</div>\n", styles: ["mat-icon{width:auto;height:auto}mat-icon.face{font-size:3em}mat-icon.question-mark1{position:absolute;bottom:1.1em;left:calc(50% + .7em);font-size:1.7em}mat-icon.question-mark2{position:absolute;bottom:1.6em;left:calc(50% + 1.6em);font-size:1.4em}.computer{font-size:3em}.computer-question-mark{position:absolute;top:.6em;left:calc(50% - .5em);font-size:1.2em}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchResultsErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-search-results-error', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg\"\n>\n  <div *ngIf=\"type === types.COULD_NOT_REACH_API\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">face</mat-icon>\n      <mat-icon class=\"material-symbols-outlined question-mark1\"\n        >question_mark</mat-icon\n      >\n      <mat-icon class=\"material-symbols-outlined question-mark2\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate>search.error.couldNotReachApi</div>\n  </div>\n  <div *ngIf=\"type === types.RECEIVED_ERROR\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">mood_bad</mat-icon>\n    </div>\n    <div translate>search.error.receivedError</div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n  <div *ngIf=\"type === types.RECORD_NOT_FOUND\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined computer\">computer</mat-icon>\n      <mat-icon class=\"material-symbols-outlined computer-question-mark\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate [translateParams]=\"{ id: recordId }\">\n      search.error.recordNotFound\n    </div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n</div>\n", styles: ["mat-icon{width:auto;height:auto}mat-icon.face{font-size:3em}mat-icon.question-mark1{position:absolute;bottom:1.1em;left:calc(50% + .7em);font-size:1.7em}mat-icon.question-mark2{position:absolute;bottom:1.6em;left:calc(50% + 1.6em);font-size:1.4em}.computer{font-size:3em}.computer-question-mark{position:absolute;top:.6em;left:calc(50% - .5em);font-size:1.2em}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], recordId: [{
                 type: Input
-            }], template: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], outerContainer: [{
-                type: ViewChild,
-                args: ['outerContainer']
-            }], innerContainer: [{
-                type: ViewChild,
-                args: ['innerContainer']
             }] } });
 
 class AnchorLinkDirective {
@@ -26501,39 +26940,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['carouselOverflowContainer']
             }] } });
 
-class UiLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, declarations: [ExpandablePanelComponent,
-            StickyHeaderComponent,
-            AnchorLinkDirective,
-            ExpandablePanelButtonComponent,
-            CarouselComponent], imports: [CommonModule, MatIconModule, i1$1.TranslateModule], exports: [ExpandablePanelComponent,
-            StickyHeaderComponent,
-            AnchorLinkDirective,
-            ExpandablePanelButtonComponent,
-            CarouselComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, imports: [CommonModule, MatIconModule, TranslateModule.forChild()] }); }
+class FormFieldWrapperComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldWrapperComponent, isStandalone: true, selector: "gn-ui-form-field-wrapper", inputs: { label: "label", hint: "hint" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".icon-small{font-size:16px;height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, MatIconModule, TranslateModule.forChild()],
-                    declarations: [
-                        ExpandablePanelComponent,
-                        StickyHeaderComponent,
-                        AnchorLinkDirective,
-                        ExpandablePanelButtonComponent,
-                        CarouselComponent,
-                    ],
-                    exports: [
-                        ExpandablePanelComponent,
-                        StickyHeaderComponent,
-                        AnchorLinkDirective,
-                        ExpandablePanelButtonComponent,
-                        CarouselComponent,
-                    ],
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconModule, MatTooltipModule], template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".icon-small{font-size:16px;height:16px;width:16px}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }] } });
 
 class InteractiveTableColumnComponent {
     constructor() {
@@ -26598,161 +27016,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class LinkCardComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LinkCardComponent, selector: "gn-ui-link-card", inputs: { link: "link" }, ngImport: i0, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-link-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n" }]
-        }], propDecorators: { link: [{
-                type: Input
-            }] } });
-
-class RelatedRecordCardComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record" }, ngImport: i0, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-related-record-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n" }]
-        }], propDecorators: { record: [{
-                type: Input
-            }] } });
-
-class MetadataContactComponent {
-    constructor() {
-        this.organizationClick = new EventEmitter();
-        this.contactClick = new EventEmitter();
-    }
-    get shownOrganization() {
-        return this.metadata.ownerOrganization;
-    }
-    get contacts() {
-        return ((this.metadata.kind === 'dataset'
-            ? this.metadata.contactsForResource
-            : this.metadata.contacts) || []);
-    }
-    get address() {
-        const addressParts = this.contacts[0].address
-            .split(',')
-            .map((part) => part.trim());
-        return addressParts;
-    }
-    onOrganizationClick() {
-        this.organizationClick.emit(this.shownOrganization);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataContactComponent, selector: "gn-ui-metadata-contact", inputs: { metadata: "metadata" }, outputs: { organizationClick: "organizationClick", contactClick: "contactClick" }, ngImport: i0, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6\">\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-metadata-contact', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6\">\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { metadata: [{
-                type: Input
-            }], organizationClick: [{
-                type: Output
-            }], contactClick: [{
-                type: Output
-            }] } });
-
-class MetadataCatalogComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataCatalogComponent, selector: "gn-ui-metadata-catalog", inputs: { sourceLabel: "sourceLabel" }, ngImport: i0, template: "<div>\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.catalog\n  </p>\n  <p class=\"text-primary font-title text-21 mb-1\">\n    {{ sourceLabel }}\n  </p>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataCatalogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-metadata-catalog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.catalog\n  </p>\n  <p class=\"text-primary font-title text-21 mb-1\">\n    {{ sourceLabel }}\n  </p>\n</div>\n" }]
-        }], propDecorators: { sourceLabel: [{
-                type: Input
-            }] } });
-
-var ErrorType;
-(function (ErrorType) {
-    ErrorType[ErrorType["COULD_NOT_REACH_API"] = 0] = "COULD_NOT_REACH_API";
-    ErrorType[ErrorType["RECEIVED_ERROR"] = 1] = "RECEIVED_ERROR";
-    ErrorType[ErrorType["RECORD_NOT_FOUND"] = 2] = "RECORD_NOT_FOUND";
-})(ErrorType || (ErrorType = {}));
-class SearchResultsErrorComponent {
-    constructor() {
-        this.types = ErrorType;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchResultsErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SearchResultsErrorComponent, selector: "gn-ui-search-results-error", inputs: { type: "type", error: "error", recordId: "recordId" }, ngImport: i0, template: "<div\n  class=\"p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg\"\n>\n  <div *ngIf=\"type === types.COULD_NOT_REACH_API\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">face</mat-icon>\n      <mat-icon class=\"material-symbols-outlined question-mark1\"\n        >question_mark</mat-icon\n      >\n      <mat-icon class=\"material-symbols-outlined question-mark2\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate>search.error.couldNotReachApi</div>\n  </div>\n  <div *ngIf=\"type === types.RECEIVED_ERROR\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">mood_bad</mat-icon>\n    </div>\n    <div translate>search.error.receivedError</div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n  <div *ngIf=\"type === types.RECORD_NOT_FOUND\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined computer\">computer</mat-icon>\n      <mat-icon class=\"material-symbols-outlined computer-question-mark\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate [translateParams]=\"{ id: recordId }\">\n      search.error.recordNotFound\n    </div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n</div>\n", styles: ["mat-icon{width:auto;height:auto}mat-icon.face{font-size:3em}mat-icon.question-mark1{position:absolute;bottom:1.1em;left:calc(50% + .7em);font-size:1.7em}mat-icon.question-mark2{position:absolute;bottom:1.6em;left:calc(50% + 1.6em);font-size:1.4em}.computer{font-size:3em}.computer-question-mark{position:absolute;top:.6em;left:calc(50% - .5em);font-size:1.2em}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchResultsErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-search-results-error', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg\"\n>\n  <div *ngIf=\"type === types.COULD_NOT_REACH_API\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">face</mat-icon>\n      <mat-icon class=\"material-symbols-outlined question-mark1\"\n        >question_mark</mat-icon\n      >\n      <mat-icon class=\"material-symbols-outlined question-mark2\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate>search.error.couldNotReachApi</div>\n  </div>\n  <div *ngIf=\"type === types.RECEIVED_ERROR\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">mood_bad</mat-icon>\n    </div>\n    <div translate>search.error.receivedError</div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n  <div *ngIf=\"type === types.RECORD_NOT_FOUND\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined computer\">computer</mat-icon>\n      <mat-icon class=\"material-symbols-outlined computer-question-mark\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate [translateParams]=\"{ id: recordId }\">\n      search.error.recordNotFound\n    </div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n</div>\n", styles: ["mat-icon{width:auto;height:auto}mat-icon.face{font-size:3em}mat-icon.question-mark1{position:absolute;bottom:1.1em;left:calc(50% + .7em);font-size:1.7em}mat-icon.question-mark2{position:absolute;bottom:1.6em;left:calc(50% + 1.6em);font-size:1.4em}.computer{font-size:3em}.computer-question-mark{position:absolute;top:.6em;left:calc(50% - .5em);font-size:1.2em}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], recordId: [{
-                type: Input
-            }] } });
-
-class PaginationComponent {
-    constructor() {
-        this.currentPage = 1;
-        this.nPages = 1;
-        this.hideButton = false;
-        this.newCurrentPageEvent = new EventEmitter();
+/**
+ * This component will make a block that will stay sticky on the top of the page,
+ * but will also shrink down to a minimum height when scrolling.
+ * The ratio between minimum and nominal height is stored in the shrinkRatio
+ * property, and can be used to change e.g. the opacity or size of child elements.
+ * This component renders at z-index: 50 by default.
+ * The first parent element with an overflow of `scroll` or `overflow` is considered
+ * for scroll events.
+ */
+class StickyHeaderComponent {
+    constructor(changeDetector, hostEl, zone) {
+        this.changeDetector = changeDetector;
+        this.hostEl = hostEl;
+        this.zone = zone;
     }
-    applyPageBounds() {
-        // make sure this works with NaN inputs as well by adding `|| 1`
-        this.nPages = Math.max(1, this.nPages || 1);
-        this.currentPage = Math.max(1, Math.min(this.nPages, this.currentPage || 1));
+    ngAfterViewInit() {
+        this.scrollSub = fromEvent(window, 'scroll', {
+            passive: true,
+        })
+            .pipe(throttleTime(0, animationFrameScheduler, {
+            leading: true,
+            trailing: true,
+        }))
+            .subscribe(this.updateSize.bind(this));
     }
-    ngOnChanges(changes) {
-        // make sure the inputs are valid
-        if ('currentPage' in changes || 'nPages' in changes) {
-            this.applyPageBounds();
-        }
+    ngOnInit() {
+        this.placeholderEl = document.createElement('div');
+        this.placeholderEl.style.position = 'absolute';
+        this.placeholderEl.classList.add('sticky-header-placeholder');
+        this.hostEl.nativeElement.insertAdjacentElement('beforebegin', this.placeholderEl);
     }
-    setPage(newPage) {
-        if (!Number.isInteger(newPage))
-            return;
-        this.currentPage = newPage;
-        this.applyPageBounds();
-        this.newCurrentPageEvent.emit(this.currentPage);
+    ngAfterViewChecked() {
+        this.updateSize();
     }
-    nextPage() {
-        this.setPage(this.currentPage + 1);
+    ngOnDestroy() {
+        this.scrollSub.unsubscribe();
+        this.placeholderEl.remove();
     }
-    previousPage() {
-        this.setPage(this.currentPage - 1);
+    updateSize() {
+        this.zone.runOutsideAngular(() => {
+            if (window.scrollY === this.parentScroll)
+                return;
+            this.parentScroll = window.scrollY;
+            const offsetTop = Math.max(0, this.parentScroll - this.placeholderEl.offsetTop);
+            const newHeightPx = Math.max(this.minHeightPx, this.fullHeightPx - offsetTop);
+            this.innerContainer.nativeElement.style.transform = `translate(0, ${newHeightPx - this.fullHeightPx}px)`;
+            this.expandRatio =
+                (newHeightPx - this.minHeightPx) /
+                    (this.fullHeightPx - this.minHeightPx);
+            this.changeDetector.detectChanges();
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PaginationComponent, selector: "gn-ui-pagination", inputs: { currentPage: "currentPage", nPages: "nPages", hideButton: "hideButton" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: StickyHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef, host: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: StickyHeaderComponent, selector: "gn-ui-sticky-header", inputs: { minHeightPx: "minHeightPx", fullHeightPx: "fullHeightPx" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer"], descendants: true }, { propertyName: "innerContainer", first: true, predicate: ["innerContainer"], descendants: true }], ngImport: i0, template: "<div\n  #outerContainer\n  class=\"sticky pointer-events-none z-50 top-0\"\n  [style.height]=\"fullHeightPx + 'px'\"\n>\n  <div\n    #innerContainer\n    class=\"relative pointer-events-auto\"\n    [style.height]=\"fullHeightPx + 'px'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: expandRatio }\"\n    ></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: StickyHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { currentPage: [{
-                type: Input
-            }], nPages: [{
+            args: [{ selector: 'gn-ui-sticky-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #outerContainer\n  class=\"sticky pointer-events-none z-50 top-0\"\n  [style.height]=\"fullHeightPx + 'px'\"\n>\n  <div\n    #innerContainer\n    class=\"relative pointer-events-auto\"\n    [style.height]=\"fullHeightPx + 'px'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: expandRatio }\"\n    ></ng-container>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef, decorators: [{
+                    type: Host
+                }] }, { type: i0.NgZone }]; }, propDecorators: { minHeightPx: [{
                 type: Input
-            }], hideButton: [{
+            }], fullHeightPx: [{
                 type: Input
-            }], newCurrentPageEvent: [{
-                type: Output
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], outerContainer: [{
+                type: ViewChild,
+                args: ['outerContainer']
+            }], innerContainer: [{
+                type: ViewChild,
+                args: ['innerContainer']
             }] } });
 
-class AvatarComponent {
-    hideImage() {
-        this.avatarUrl = this.avatarPlaceholder;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AvatarComponent, selector: "gn-ui-avatar", inputs: { avatarUrl: "avatarUrl", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<img\n  *ngIf=\"avatarUrl\"\n  class=\"rounded-full object-cover\"\n  [src]=\"avatarUrl\"\n  (error)=\"hideImage()\"\n/>\n<div\n  *ngIf=\"!avatarUrl\"\n  class=\"w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200\"\n></div>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+class UiLayoutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, declarations: [ExpandablePanelComponent,
+            StickyHeaderComponent,
+            AnchorLinkDirective,
+            ExpandablePanelButtonComponent,
+            CarouselComponent], imports: [CommonModule, MatIconModule, i1$1.TranslateModule], exports: [ExpandablePanelComponent,
+            StickyHeaderComponent,
+            AnchorLinkDirective,
+            ExpandablePanelButtonComponent,
+            CarouselComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, imports: [CommonModule, MatIconModule, TranslateModule.forChild()] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n  *ngIf=\"avatarUrl\"\n  class=\"rounded-full object-cover\"\n  [src]=\"avatarUrl\"\n  (error)=\"hideImage()\"\n/>\n<div\n  *ngIf=\"!avatarUrl\"\n  class=\"w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200\"\n></div>\n" }]
-        }], propDecorators: { avatarUrl: [{
-                type: Input
-            }], avatarPlaceholder: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, MatIconModule, TranslateModule.forChild()],
+                    declarations: [
+                        ExpandablePanelComponent,
+                        StickyHeaderComponent,
+                        AnchorLinkDirective,
+                        ExpandablePanelButtonComponent,
+                        CarouselComponent,
+                    ],
+                    exports: [
+                        ExpandablePanelComponent,
+                        StickyHeaderComponent,
+                        AnchorLinkDirective,
+                        ExpandablePanelButtonComponent,
+                        CarouselComponent,
+                    ],
+                }]
+        }] });
 
 class UserPreviewComponent {
     get userFullName() {
@@ -26770,149 +27141,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-class PaginationButtonsComponent {
-    constructor() {
-        this.visiblePages = [];
-        this.newCurrentPageEvent = new EventEmitter();
-    }
-    ngOnChanges() {
-        this.calculateVisiblePages();
-    }
-    calculateVisiblePages() {
-        const maxVisiblePages = 5;
-        const halfVisible = Math.floor(maxVisiblePages / 2);
-        const startPage = Math.max(this.currentPage - halfVisible, 1);
-        const endPage = Math.min(this.currentPage + halfVisible, this.totalPages);
-        const visiblePages = [];
-        if (startPage > 1) {
-            visiblePages.push(1);
-            if (startPage > 2) {
-                visiblePages.push('...');
-            }
-        }
-        for (let page = startPage; page <= endPage; page++) {
-            visiblePages.push(page);
-        }
-        if (endPage < this.totalPages) {
-            if (endPage < this.totalPages - 1) {
-                visiblePages.push('...');
-            }
-            visiblePages.push(this.totalPages);
-        }
-        this.visiblePages = visiblePages;
-    }
-    changePage(page) {
-        this.setPage(page);
-    }
-    nextPage() {
-        this.setPage(this.currentPage + 1);
-    }
-    previousPage() {
-        this.setPage(this.currentPage - 1);
-    }
-    setPage(newPage) {
-        if (!Number.isInteger(newPage))
-            return;
-        this.currentPage = newPage;
-        this.calculateVisiblePages();
-        this.newCurrentPageEvent.emit(this.currentPage);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PaginationButtonsComponent, selector: "gn-ui-pagination-buttons", inputs: { currentPage: "currentPage", totalPages: "totalPages" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"flex flex-row gap-[5px] items-center\">\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === 1\"\n      (buttonClick)=\"previousPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_left</mat-icon>\n    </gn-ui-button>\n    <ng-container *ngFor=\"let page of visiblePages\">\n      <ng-container *ngIf=\"page === '...'\">\n        <span class=\"mx-[5px]\">{{ page }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"page !== '...'\">\n        <gn-ui-button\n          [type]=\"page === currentPage ? 'primary' : 'light'\"\n          [disabled]=\"page === currentPage\"\n          (buttonClick)=\"changePage(page)\"\n          >{{ page }}</gn-ui-button\n        >\n      </ng-container>\n    </ng-container>\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === totalPages\"\n      (buttonClick)=\"nextPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_right</mat-icon>\n    </gn-ui-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationButtonsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-pagination-buttons', template: "<div class=\"relative\">\n  <div class=\"flex flex-row gap-[5px] items-center\">\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === 1\"\n      (buttonClick)=\"previousPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_left</mat-icon>\n    </gn-ui-button>\n    <ng-container *ngFor=\"let page of visiblePages\">\n      <ng-container *ngIf=\"page === '...'\">\n        <span class=\"mx-[5px]\">{{ page }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"page !== '...'\">\n        <gn-ui-button\n          [type]=\"page === currentPage ? 'primary' : 'light'\"\n          [disabled]=\"page === currentPage\"\n          (buttonClick)=\"changePage(page)\"\n          >{{ page }}</gn-ui-button\n        >\n      </ng-container>\n    </ng-container>\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === totalPages\"\n      (buttonClick)=\"nextPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_right</mat-icon>\n    </gn-ui-button>\n  </div>\n</div>\n" }]
-        }], propDecorators: { currentPage: [{
-                type: Input
-            }], totalPages: [{
-                type: Input
-            }], newCurrentPageEvent: [{
-                type: Output
-            }] } });
-
-const DEFAULT_PARAMS = {
-    OFFSET: '',
-    LIMIT: '-1',
-    FORMAT: 'json',
-};
-class RecordApiFormComponent {
-    constructor() {
-        this.offset$ = new BehaviorSubject('');
-        this.limit$ = new BehaviorSubject('');
-        this.format$ = new BehaviorSubject('');
-        this.formatsList = [
-            { label: 'JSON', value: 'json' },
-            { label: 'CSV', value: 'csv' },
-        ];
-        this.apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(map$2(([offset, limit, format]) => {
-            let outputUrl;
-            if (this.apiBaseUrl) {
-                const url = new URL(this.apiBaseUrl);
-                const params = { offset: offset, limit: limit, f: format };
-                for (const [key, value] of Object.entries(params)) {
-                    if (value && value !== '0') {
-                        url.searchParams.set(key, value);
-                    }
-                    else {
-                        url.searchParams.delete(key);
-                    }
-                }
-                outputUrl = url.toString();
-            }
-            return outputUrl;
-        }));
-        this.noLimitChecked$ = this.limit$.pipe(map$2((limit) => limit === '-1' || limit === ''));
-        this.displayLimit$ = this.limit$.pipe(map$2((limit) => (limit !== '-1' ? limit : '')));
-    }
-    set apiLink(value) {
-        this.apiBaseUrl = value ? value.url.href : undefined;
-        this.resetUrl();
-    }
-    setOffset(value) {
-        this.offset$.next(value);
-    }
-    setLimit(value) {
-        const newLimit = value === '' ? '-1' : value;
-        this.limit$.next(newLimit);
-    }
-    setFormat(value) {
-        this.format$.next(String(value));
-    }
-    resetUrl() {
-        this.offset$.next(DEFAULT_PARAMS.OFFSET);
-        this.limit$.next(DEFAULT_PARAMS.LIMIT);
-        this.format$.next(DEFAULT_PARAMS.FORMAT);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between flex-grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-record-api-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between flex-grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"] }]
-        }], propDecorators: { apiLink: [{
-                type: Input
-            }] } });
-
-class ImageOverlayPreviewComponent {
-    constructor() {
-        this.isPlaceholderShown = new EventEmitter();
-    }
-    openLightbox(src) {
-        basicLightbox.create(`<img src="${src}"/>`).show();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: { imageUrl: "imageUrl" }, outputs: { isPlaceholderShown: "isPlaceholderShown" }, ngImport: i0, template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-image-overlay-preview', template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n" }]
-        }], propDecorators: { imageUrl: [{
-                type: Input
-            }], isPlaceholderShown: [{
-                type: Output
-            }] } });
-
 class UiElementsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, declarations: [MetadataInfoComponent,
@@ -26928,7 +27156,6 @@ class UiElementsModule {
             MetadataQualityItemComponent,
             SearchResultsErrorComponent,
             PaginationComponent,
-            ThumbnailComponent,
             AvatarComponent,
             UserPreviewComponent,
             GnUiLinkifyDirective,
@@ -26944,7 +27171,8 @@ class UiElementsModule {
             UiInputsModule,
             FormsModule,
             NgOptimizedImage,
-            MarkdownParserComponent], exports: [MetadataInfoComponent,
+            MarkdownParserComponent,
+            ThumbnailComponent], exports: [MetadataInfoComponent,
             ContentGhostComponent,
             DownloadItemComponent,
             DownloadsListComponent,
@@ -26974,7 +27202,8 @@ class UiElementsModule {
             UtilSharedModule,
             RouterModule,
             UiInputsModule,
-            FormsModule] }); }
+            FormsModule,
+            ThumbnailComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, decorators: [{
             type: NgModule,
@@ -26992,6 +27221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         FormsModule,
                         NgOptimizedImage,
                         MarkdownParserComponent,
+                        ThumbnailComponent,
                     ],
                     declarations: [
                         MetadataInfoComponent,
@@ -27007,7 +27237,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MetadataQualityItemComponent,
                         SearchResultsErrorComponent,
                         PaginationComponent,
-                        ThumbnailComponent,
                         AvatarComponent,
                         UserPreviewComponent,
                         GnUiLinkifyDirective,
@@ -31092,7 +31321,7 @@ class DataService {
                 }), {}),
                 geojson: endpoint.supportsJson(featureType.name)
                     ? endpoint.getFeatureUrl(featureType.name, {
-                        outputFormat: 'application/json',
+                        asJson: true,
                         outputCrs: 'EPSG:4326',
                     })
                     : null,
@@ -32428,6 +32657,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             type: Injectable
         }] });
 
+function evaluate(expression) {
+    if (expression.match(/^\${.*}$/)) {
+        return evaluate(expression.slice(2, -1));
+    }
+    const operator = expression.split('(')[0];
+    switch (operator) {
+        case 'dateNow':
+            return () => new Date();
+        default:
+            throw new Error(`Unknown operator: ${operator}`);
+    }
+}
+
+class EditorService {
+    constructor(http, apiConfiguration) {
+        this.http = http;
+        this.apiConfiguration = apiConfiguration;
+        this.apiUrl = `${this.apiConfiguration?.basePath || '/geonetwork/srv/api'}`;
+    }
+    // TODO: use the catalog repository instead
+    loadRecordByUuid(uuid) {
+        return this.http
+            .get(`${this.apiUrl}/records/${uuid}/formatters/xml`, {
+            responseType: 'text',
+            headers: {
+                Accept: 'application/xml',
+            },
+        })
+            .pipe(switchMap$1((response) => findConverterForDocument(response).readRecord(response.toString())));
+    }
+    // returns the record as it was when saved
+    saveRecord(record, fieldsConfig) {
+        const savedRecord = { ...record };
+        // run onSave processes
+        for (const field of fieldsConfig) {
+            if (field.onSaveProcess && field.model) {
+                const evaluator = evaluate(field.onSaveProcess);
+                savedRecord[field.model] = evaluator({
+                    config: field,
+                    value: record[field.model],
+                });
+            }
+        }
+        // TODO: use the catalog repository instead
+        // TODO: use converter based on the format of the record before change
+        return from(new Iso19139Converter().writeRecord(savedRecord)).pipe(switchMap$1((recordXml) => this.http.put(`${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`, recordXml, {
+            headers: {
+                'Content-Type': 'application/xml',
+            },
+            withCredentials: true,
+        })), map$1(() => savedRecord));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, deps: [{ token: i1.HttpClient }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: Configuration, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [Configuration]
+                }] }]; } });
+
+class EditorEffects {
+    constructor() {
+        this.actions$ = inject(Actions);
+        this.editorService = inject(EditorService);
+        this.store = inject(Store);
+        this.saveRecord$ = createEffect(() => this.actions$.pipe(ofType(saveRecord), withLatestFrom$1(this.store.select(selectRecord), this.store.select(selectRecordFieldsConfig)), switchMap$1(([, record, fieldsConfig]) => this.editorService.saveRecord(record, fieldsConfig).pipe(switchMap$1((newRecord) => of(saveRecordSuccess(), openRecord({ record: newRecord }))), catchError((error) => of(saveRecordFailure({
+            error: error.message,
+        })))))));
+        this.markAsChanged$ = createEffect(() => this.actions$.pipe(ofType(updateRecordField), map$1(() => markRecordAsChanged())));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects, decorators: [{
+            type: Injectable
+        }] });
+
+var WizardFieldType;
+(function (WizardFieldType) {
+    WizardFieldType[WizardFieldType["TEXT"] = 0] = "TEXT";
+    WizardFieldType[WizardFieldType["TEXT_AREA"] = 1] = "TEXT_AREA";
+    WizardFieldType[WizardFieldType["CHIPS"] = 2] = "CHIPS";
+    WizardFieldType[WizardFieldType["DATA_PICKER"] = 3] = "DATA_PICKER";
+    WizardFieldType[WizardFieldType["DROPDOWN"] = 4] = "DROPDOWN";
+})(WizardFieldType || (WizardFieldType = {}));
+
 class WizardService {
     constructor(translateService) {
         this.translateService = translateService;
@@ -32511,15 +32833,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
-var WizardFieldType;
-(function (WizardFieldType) {
-    WizardFieldType[WizardFieldType["TEXT"] = 0] = "TEXT";
-    WizardFieldType[WizardFieldType["TEXT_AREA"] = 1] = "TEXT_AREA";
-    WizardFieldType[WizardFieldType["CHIPS"] = 2] = "CHIPS";
-    WizardFieldType[WizardFieldType["DATA_PICKER"] = 3] = "DATA_PICKER";
-    WizardFieldType[WizardFieldType["DROPDOWN"] = 4] = "DROPDOWN";
-})(WizardFieldType || (WizardFieldType = {}));
-
 marker('datafeeder.month.january');
 marker('datafeeder.month.february');
 marker('datafeeder.month.march');
@@ -32678,6 +32991,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['dropdown']
             }] } });
 
+class WizardSummarizeComponent {
+    get title() {
+        return this.wizardService.getWizardFieldData('title') || '';
+    }
+    get abstract() {
+        return this.wizardService.getWizardFieldData('abstract') || '';
+    }
+    get tags() {
+        if (!this.wizardService.getWizardFieldData('tags')) {
+            return '';
+        }
+        return JSON.parse(this.wizardService.getWizardFieldData('tags'))
+            .map((t) => t.display)
+            .join(' - ');
+    }
+    get createdDate() {
+        const time = this.wizardService.getWizardFieldData('datepicker');
+        const locale = this.translateService.currentLang;
+        return new Date(Number(time)).toLocaleDateString(locale, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+    }
+    get scale() {
+        if (!this.wizardService.getWizardFieldData('dropdown')) {
+            return '';
+        }
+        const scaleValue = JSON.parse(this.wizardService.getWizardFieldData('dropdown'));
+        return `1:${scaleValue}`;
+    }
+    get description() {
+        return this.wizardService.getWizardFieldData('description') || '';
+    }
+    constructor(wizardService, translateService) {
+        this.wizardService = wizardService;
+        this.translateService = translateService;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardSummarizeComponent, deps: [{ token: WizardService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: WizardSummarizeComponent, selector: "gn-ui-wizard-summarize", ngImport: i0, template: "<div>\n  <div class=\"text-2xl font-bold title\">\n    {{ title | uppercase }}\n  </div>\n  <div class=\"text-lg font-bold pt-2 abstract\">\n    {{ abstract }}\n  </div>\n  <div class=\"text-lg font-normal\">\n    <span translate>datafeeder.wizardSummarize.createdAt</span>\n    &nbsp;<span class=\"date\">{{ createdDate }}</span> -\n    <span translate>datafeeder.wizardSummarize.scale</span>\n    &nbsp;<span class=\"scale\">{{ scale }}</span>\n  </div>\n  <div class=\"text-lg italic font-normal description\">\n    {{ description }}\n  </div>\n  <div class=\"text-sm font-medium pt-4 tags\">\n    <span class=\"icon-tag pr-2\"></span>\n    {{ tags }}\n  </div>\n</div>\n", styles: [".icon-tag:before{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$3.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardSummarizeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-wizard-summarize', template: "<div>\n  <div class=\"text-2xl font-bold title\">\n    {{ title | uppercase }}\n  </div>\n  <div class=\"text-lg font-bold pt-2 abstract\">\n    {{ abstract }}\n  </div>\n  <div class=\"text-lg font-normal\">\n    <span translate>datafeeder.wizardSummarize.createdAt</span>\n    &nbsp;<span class=\"date\">{{ createdDate }}</span> -\n    <span translate>datafeeder.wizardSummarize.scale</span>\n    &nbsp;<span class=\"scale\">{{ scale }}</span>\n  </div>\n  <div class=\"text-lg italic font-normal description\">\n    {{ description }}\n  </div>\n  <div class=\"text-sm font-medium pt-4 tags\">\n    <span class=\"icon-tag pr-2\"></span>\n    {{ tags }}\n  </div>\n</div>\n", styles: [".icon-tag:before{font-size:18px}\n"] }]
+        }], ctorParameters: function () { return [{ type: WizardService }, { type: i1$1.TranslateService }]; } });
+
 class WizardComponent {
     constructor(wizardService, translate) {
         this.wizardService = wizardService;
@@ -32743,136 +33102,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['wizardFields']
             }] } });
 
-class WizardSummarizeComponent {
-    get title() {
-        return this.wizardService.getWizardFieldData('title') || '';
-    }
-    get abstract() {
-        return this.wizardService.getWizardFieldData('abstract') || '';
-    }
-    get tags() {
-        if (!this.wizardService.getWizardFieldData('tags')) {
-            return '';
-        }
-        return JSON.parse(this.wizardService.getWizardFieldData('tags'))
-            .map((t) => t.display)
-            .join(' - ');
-    }
-    get createdDate() {
-        const time = this.wizardService.getWizardFieldData('datepicker');
-        const locale = this.translateService.currentLang;
-        return new Date(Number(time)).toLocaleDateString(locale, {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-        });
-    }
-    get scale() {
-        if (!this.wizardService.getWizardFieldData('dropdown')) {
-            return '';
-        }
-        const scaleValue = JSON.parse(this.wizardService.getWizardFieldData('dropdown'));
-        return `1:${scaleValue}`;
-    }
-    get description() {
-        return this.wizardService.getWizardFieldData('description') || '';
-    }
-    constructor(wizardService, translateService) {
-        this.wizardService = wizardService;
-        this.translateService = translateService;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardSummarizeComponent, deps: [{ token: WizardService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: WizardSummarizeComponent, selector: "gn-ui-wizard-summarize", ngImport: i0, template: "<div>\n  <div class=\"text-2xl font-bold title\">\n    {{ title | uppercase }}\n  </div>\n  <div class=\"text-lg font-bold pt-2 abstract\">\n    {{ abstract }}\n  </div>\n  <div class=\"text-lg font-normal\">\n    <span translate>datafeeder.wizardSummarize.createdAt</span>\n    &nbsp;<span class=\"date\">{{ createdDate }}</span> -\n    <span translate>datafeeder.wizardSummarize.scale</span>\n    &nbsp;<span class=\"scale\">{{ scale }}</span>\n  </div>\n  <div class=\"text-lg italic font-normal description\">\n    {{ description }}\n  </div>\n  <div class=\"text-sm font-medium pt-4 tags\">\n    <span class=\"icon-tag pr-2\"></span>\n    {{ tags }}\n  </div>\n</div>\n", styles: [".icon-tag:before{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$3.UpperCasePipe, name: "uppercase" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardSummarizeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-wizard-summarize', template: "<div>\n  <div class=\"text-2xl font-bold title\">\n    {{ title | uppercase }}\n  </div>\n  <div class=\"text-lg font-bold pt-2 abstract\">\n    {{ abstract }}\n  </div>\n  <div class=\"text-lg font-normal\">\n    <span translate>datafeeder.wizardSummarize.createdAt</span>\n    &nbsp;<span class=\"date\">{{ createdDate }}</span> -\n    <span translate>datafeeder.wizardSummarize.scale</span>\n    &nbsp;<span class=\"scale\">{{ scale }}</span>\n  </div>\n  <div class=\"text-lg italic font-normal description\">\n    {{ description }}\n  </div>\n  <div class=\"text-sm font-medium pt-4 tags\">\n    <span class=\"icon-tag pr-2\"></span>\n    {{ tags }}\n  </div>\n</div>\n", styles: [".icon-tag:before{font-size:18px}\n"] }]
-        }], ctorParameters: function () { return [{ type: WizardService }, { type: i1$1.TranslateService }]; } });
-
-function evaluate(expression) {
-    if (expression.match(/^\${.*}$/)) {
-        return evaluate(expression.slice(2, -1));
-    }
-    const operator = expression.split('(')[0];
-    switch (operator) {
-        case 'dateNow':
-            return () => new Date();
-        default:
-            throw new Error(`Unknown operator: ${operator}`);
-    }
-}
-
-class EditorService {
-    constructor(http, apiConfiguration) {
-        this.http = http;
-        this.apiConfiguration = apiConfiguration;
-        this.apiUrl = `${this.apiConfiguration?.basePath || '/geonetwork/srv/api'}`;
-    }
-    // TODO: use the catalog repository instead
-    loadRecordByUuid(uuid) {
-        return this.http
-            .get(`${this.apiUrl}/records/${uuid}/formatters/xml`, {
-            responseType: 'text',
-            headers: {
-                Accept: 'application/xml',
-            },
-        })
-            .pipe(switchMap$1((response) => findConverterForDocument(response).readRecord(response.toString())));
-    }
-    // returns the record as it was when saved
-    saveRecord(record, fieldsConfig) {
-        const savedRecord = { ...record };
-        // run onSave processes
-        for (const field of fieldsConfig) {
-            if (field.onSaveProcess && field.model) {
-                const evaluator = evaluate(field.onSaveProcess);
-                savedRecord[field.model] = evaluator({
-                    config: field,
-                    value: record[field.model],
-                });
-            }
-        }
-        // TODO: use the catalog repository instead
-        // TODO: use converter based on the format of the record before change
-        return from(new Iso19139Converter().writeRecord(savedRecord)).pipe(switchMap$1((recordXml) => this.http.put(`${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`, recordXml, {
-            headers: {
-                'Content-Type': 'application/xml',
-            },
-            withCredentials: true,
-        })), map$1(() => savedRecord));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, deps: [{ token: i1.HttpClient }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: Configuration, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [Configuration]
-                }] }]; } });
-
-class EditorEffects {
-    constructor() {
-        this.actions$ = inject(Actions);
-        this.editorService = inject(EditorService);
-        this.store = inject(Store);
-        this.saveRecord$ = createEffect(() => this.actions$.pipe(ofType(saveRecord), withLatestFrom$1(this.store.select(selectRecord), this.store.select(selectRecordFieldsConfig)), switchMap$1(([, record, fieldsConfig]) => this.editorService.saveRecord(record, fieldsConfig).pipe(switchMap$1((newRecord) => of(saveRecordSuccess(), openRecord({ record: newRecord }))), catchError((error) => of(saveRecordFailure({
-            error: error.message,
-        })))))));
-        this.markAsChanged$ = createEffect(() => this.actions$.pipe(ofType(updateRecordField), map$1(() => markRecordAsChanged())));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects, decorators: [{
-            type: Injectable
-        }] });
-
 class FeatureEditorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FeatureEditorModule, declarations: [WizardComponent,
@@ -32922,6 +33151,222 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
+class FormFieldSimpleComponent {
+    constructor() {
+        this.readonly = false;
+        this.invalid = false;
+        this.placeholder = '';
+    }
+    get inputType() {
+        switch (this.type) {
+            case 'url':
+            case 'text':
+                return 'text';
+            case 'date':
+                return 'datetime-local';
+            case 'number':
+                return 'number';
+            case 'toggle':
+                return 'checkbox';
+            default:
+                return '';
+        }
+    }
+    get isSelect() {
+        return this.type === 'list';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldSimpleComponent, isStandalone: true, selector: "gn-ui-form-field-simple", inputs: { type: "type", control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", options: "options" }, ngImport: i0, template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-simple', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\n" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class FormFieldFileComponent {
+    constructor() {
+        this.readonly = false;
+        this.invalid = false;
+        this.placeholder = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldFileComponent, isStandalone: true, selector: "gn-ui-form-field-file", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-file', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+class FormFieldRichComponent {
+    constructor() {
+        this.placeholder = 'Votre texte ici'; //TODO: translate
+        this.preview = false;
+    }
+    getButtonExtraClass() {
+        return `${this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'} rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`;
+    }
+    togglePreview() {
+        this.preview = !this.preview;
+    }
+    handleTextContentChanged(textContent) {
+        this.control.setValue(textContent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldRichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldRichComponent, isStandalone: true, selector: "gn-ui-form-field-rich", inputs: { control: "control", label: "label", hint: "hint", helperText: "helperText", placeholder: "placeholder" }, ngImport: i0, template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [extraClass]=\"getButtonExtraClass()\"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <span class=\"material-symbols-outlined mr-1 icon-small\">{{\n      preview ? 'visibility' : 'visibility_off'\n    }}</span>\n    {{ preview ? 'WYSIWYG' : 'Markdown' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    class=\"h-full\"\n    [preview]=\"preview\"\n    [helperText]=\"helperText\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"control.value\"\n    (textContentChanged)=\"handleTextContentChanged($event)\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n", styles: [".icon-small{font-size:16px;height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MarkdownEditorComponent, selector: "gn-ui-markdown-editor", inputs: ["preview", "helperText", "placeholder", "textContent"], outputs: ["textContentChanged"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldRichComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-rich', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MarkdownEditorComponent,
+                        FormFieldWrapperComponent,
+                        ButtonComponent,
+                    ], template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [extraClass]=\"getButtonExtraClass()\"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <span class=\"material-symbols-outlined mr-1 icon-small\">{{\n      preview ? 'visibility' : 'visibility_off'\n    }}</span>\n    {{ preview ? 'WYSIWYG' : 'Markdown' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    class=\"h-full\"\n    [preview]=\"preview\"\n    [helperText]=\"helperText\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"control.value\"\n    (textContentChanged)=\"handleTextContentChanged($event)\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n", styles: [".icon-small{font-size:16px;height:16px;width:16px}\n"] }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+class FormFieldObjectComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldObjectComponent, isStandalone: true, selector: "gn-ui-form-field-object", ngImport: i0, template: "<p>form-field-object works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldObjectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-object', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p>form-field-object works!</p>\n" }]
+        }] });
+
+class FormFieldArrayComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldArrayComponent, isStandalone: true, selector: "gn-ui-form-field-array", ngImport: i0, template: "<p>form-field-array works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldArrayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-array', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p>form-field-array works!</p>\n" }]
+        }] });
+
+class FormFieldSpatialExtentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSpatialExtentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldSpatialExtentComponent, isStandalone: true, selector: "gn-ui-form-field-spatial-extent", ngImport: i0, template: "<p>form-field-spatial-extent works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSpatialExtentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-spatial-extent', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p>form-field-spatial-extent works!</p>\n" }]
+        }] });
+
+class FormFieldTemporalExtentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldTemporalExtentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldTemporalExtentComponent, isStandalone: true, selector: "gn-ui-form-field-temporal-extent", ngImport: i0, template: "<p>form-field-temporal-extent works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldTemporalExtentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-temporal-extent', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p>form-field-temporal-extent works!</p>\n" }]
+        }] });
+
+class FormFieldComponent {
+    set value(v) {
+        this.formControl.setValue(v, {
+            emitEvent: false,
+        });
+    }
+    constructor() {
+        this.formControl = new FormControl();
+        this.valueChange = this.formControl.valueChanges;
+    }
+    get simpleType() {
+        return this.config.type;
+    }
+    get isSimpleField() {
+        return (this.config.type === 'text' ||
+            this.config.type === 'number' ||
+            this.config.type === 'date' ||
+            this.config.type === 'list' ||
+            this.config.type === 'url' ||
+            this.config.type === 'toggle');
+    }
+    get isFileField() {
+        return this.config.type === 'file';
+    }
+    get isSpatialExtentField() {
+        return this.config.type === 'spatial_extent';
+    }
+    get isTemporalExtentField() {
+        return this.config.type === 'temporal_extent';
+    }
+    get isArrayField() {
+        return this.config.type === 'array';
+    }
+    get isObjectField() {
+        return this.config.type === 'object';
+    }
+    get isFieldOk() {
+        return !this.config.locked && !this.config.invalid;
+    }
+    get isFieldLocked() {
+        return this.config.locked;
+    }
+    get isFieldInvalid() {
+        return !this.config.locked && this.config.invalid;
+    }
+    get isAbstract() {
+        return this.model === 'abstract';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { model: "model", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "control", "readonly", "invalid", "placeholder", "options"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["control", "label", "hint", "helperText", "placeholder"] }, { kind: "component", type: FormFieldObjectComponent, selector: "gn-ui-form-field-object" }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldTemporalExtentComponent, selector: "gn-ui-form-field-temporal-extent" }, { kind: "component", type: FormFieldFileComponent, selector: "gn-ui-form-field-file", inputs: ["control", "readonly", "invalid", "placeholder"] }, { kind: "component", type: FormFieldArrayComponent, selector: "gn-ui-form-field-array" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FormFieldSimpleComponent,
+                        FormFieldRichComponent,
+                        FormFieldObjectComponent,
+                        FormFieldSpatialExtentComponent,
+                        FormFieldTemporalExtentComponent,
+                        FormFieldFileComponent,
+                        FormFieldArrayComponent,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        MatIconModule,
+                    ], template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 class RecordFormComponent {
     constructor(facade) {
         this.facade = facade;
@@ -32937,11 +33382,21 @@ class RecordFormComponent {
         return field.config.model;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordFormComponent, deps: [{ token: EditorFacade }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordFormComponent, isStandalone: true, selector: "gn-ui-record-form", ngImport: i0, template: "<div class=\"flex flex-col gap-6 p-6\">\n  <ng-container *ngFor=\"let field of fields$ | async; trackBy: fieldTracker\">\n    <gn-ui-form-field\n      *ngIf=\"field.config.formFieldConfig && !field.config.hidden\"\n      [config]=\"field.config.formFieldConfig\"\n      [value]=\"field.value\"\n      (valueChange)=\"handleFieldValueChange(field, $event)\"\n    ></gn-ui-form-field>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: FormFieldComponent, selector: "gn-ui-form-field", inputs: ["config", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordFormComponent, isStandalone: true, selector: "gn-ui-record-form", ngImport: i0, template: "<div class=\"flex flex-col gap-6 p-6\">\n  <ng-container *ngFor=\"let field of fields$ | async; trackBy: fieldTracker\">\n    <gn-ui-form-field\n      *ngIf=\"field.config.formFieldConfig && !field.config.hidden\"\n      [model]=\"field.config.model\"\n      [config]=\"field.config.formFieldConfig\"\n      [value]=\"field.value\"\n      (valueChange)=\"handleFieldValueChange(field, $event)\"\n    ></gn-ui-form-field>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "component", type: FormFieldComponent, selector: "gn-ui-form-field", inputs: ["model", "config", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, UiInputsModule], template: "<div class=\"flex flex-col gap-6 p-6\">\n  <ng-container *ngFor=\"let field of fields$ | async; trackBy: fieldTracker\">\n    <gn-ui-form-field\n      *ngIf=\"field.config.formFieldConfig && !field.config.hidden\"\n      [config]=\"field.config.formFieldConfig\"\n      [value]=\"field.value\"\n      (valueChange)=\"handleFieldValueChange(field, $event)\"\n    ></gn-ui-form-field>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'gn-ui-record-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        FormFieldComponent,
+                        FormFieldArrayComponent,
+                        FormFieldFileComponent,
+                        FormFieldObjectComponent,
+                        FormFieldRichComponent,
+                        FormFieldSimpleComponent,
+                        FormFieldSpatialExtentComponent,
+                        FormFieldTemporalExtentComponent,
+                    ], template: "<div class=\"flex flex-col gap-6 p-6\">\n  <ng-container *ngFor=\"let field of fields$ | async; trackBy: fieldTracker\">\n    <gn-ui-form-field\n      *ngIf=\"field.config.formFieldConfig && !field.config.hidden\"\n      [model]=\"field.config.model\"\n      [config]=\"field.config.formFieldConfig\"\n      [value]=\"field.value\"\n      (valueChange)=\"handleFieldValueChange(field, $event)\"\n    ></gn-ui-form-field>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: EditorFacade }]; } });
 
 const ROUTER_STATE_KEY = 'router';
@@ -33309,5 +33764,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, AuthService, AutocompleteComponent, AvatarComponent, AvatarServiceInterface, BLOCK_MODEL_FIXTURE, BadgeComponent, BaseReader, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CONFIG_MALFORMED, CONFIG_MINIMAL, CONFIG_MISSING_MANDATORY, CONFIG_OK, CONFIG_UNRECOGNIZED_KEYS, CONFIG_WITH_TRANSLATIONS, CONFIG_WRONG_LANGUAGE_CODE, CarouselComponent, CatalogTitleComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ChipsInputComponent, ClearError, ClearResults, ColorScaleComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_BASELAYER_CONTEXT, DEFAULT_GN4_LOGIN_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_STYLE_FIXTURE, DEFAULT_STYLE_HL_FIXTURE, DEFAULT_VIEW, DataService, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DateRangePickerComponent, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, EMPTY_BLOCK_MODEL_FIXTURE, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalViewerButtonComponent, FACET_ITEM_FIXTURE, FEATURE_MAP_OPTIONS, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDatavizModule, FeatureDetailComponent, FeatureEditorModule, FeatureInfoService, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileTranslateLoader, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldFileComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentComponent, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, GeocodingComponent, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, InteractiveTableColumnComponent, InteractiveTableComponent, Iso191153Converter, Iso19139Converter, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LANG_3_TO_2_MAPPER, LOGIN_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_CONFIG_FIXTURE, MAP_FEATURE_KEY, METADATA_LANGUAGE, MY_FORMATS, MapComponent, MapContainerComponent, MapContextComponent, MapContextLayerTypeEnum, MapContextService, MapFacade, MapInstanceDirective, MapManagerService, MapStyleService, MapUtilsService, MapViewComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationsFromGroupsService, OrganizationsFromMetadataService, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PatchResultsAggregations, PopupAlertComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SearchEffects, SearchFacade, SearchInputComponent, SearchResultsErrorComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SiteTitleComponent, SortByComponent, SourceLabelComponent, SourcesService, SpinningLoaderComponent, StarToggleComponent, StepBarComponent, StickyHeaderComponent, SupportedTypes, TABLE_ITEM_FIXTURE, TABLE_ITEM_FIXTURE_HAB, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableComponent, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiCatalogModule, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiMapModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UserPreviewComponent, UtilI18nModule, UtilSharedModule, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WFS_MAX_FEATURES, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, dragPanCondition, dropEmptyTranslations, editorReducer, findConverterForDocument, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLinkLabel, getLinkPriority, getMapLayers, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, openRecord, parse, placeholder, propagateToDocumentOnly, provideGn4, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$2 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, saveRecord, saveRecordFailure, saveRecordSuccess, selectEditorState, selectFallback, selectFallbackFields, selectField, selectRecord, selectRecordChangedSinceSave, selectRecordFields, selectRecordFieldsConfig, selectRecordSaveError, selectRecordSaving, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, totalPages, updateLayer, updateRecordField };
+export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, AuthService, AutocompleteComponent, AvatarComponent, AvatarServiceInterface, BLOCK_MODEL_FIXTURE, BadgeComponent, BaseReader, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CONFIG_MALFORMED, CONFIG_MINIMAL, CONFIG_MISSING_MANDATORY, CONFIG_OK, CONFIG_UNRECOGNIZED_KEYS, CONFIG_WITH_TRANSLATIONS, CONFIG_WRONG_LANGUAGE_CODE, CarouselComponent, CatalogTitleComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ChipsInputComponent, ClearError, ClearResults, ColorScaleComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_BASELAYER_CONTEXT, DEFAULT_GN4_LOGIN_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_STYLE_FIXTURE, DEFAULT_STYLE_HL_FIXTURE, DEFAULT_VIEW, DataService, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DateRangePickerComponent, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, EMPTY_BLOCK_MODEL_FIXTURE, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalViewerButtonComponent, FACET_ITEM_FIXTURE, FEATURE_MAP_OPTIONS, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDatavizModule, FeatureDetailComponent, FeatureEditorModule, FeatureInfoService, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileTranslateLoader, FilterDropdownComponent, FormFieldWrapperComponent, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, GeocodingComponent, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, InteractiveTableColumnComponent, InteractiveTableComponent, Iso191153Converter, Iso19139Converter, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LANG_3_TO_2_MAPPER, LOGIN_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_CONFIG_FIXTURE, MAP_FEATURE_KEY, METADATA_LANGUAGE, MY_FORMATS, MapComponent, MapContainerComponent, MapContextComponent, MapContextLayerTypeEnum, MapContextService, MapFacade, MapInstanceDirective, MapManagerService, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationsFromGroupsService, OrganizationsFromMetadataService, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PatchResultsAggregations, PopupAlertComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SearchEffects, SearchFacade, SearchInputComponent, SearchResultsErrorComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SiteTitleComponent, SortByComponent, SourceLabelComponent, SourcesService, SpinningLoaderComponent, StarToggleComponent, StepBarComponent, StickyHeaderComponent, SupportedTypes, TABLE_ITEM_FIXTURE, TABLE_ITEM_FIXTURE_HAB, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableComponent, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiCatalogModule, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiMapModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UserPreviewComponent, UtilI18nModule, UtilSharedModule, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WFS_MAX_FEATURES, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, downgradeImage, downsizeImage, dragPanCondition, dropEmptyTranslations, editorReducer, findConverterForDocument, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLinkLabel, getLinkPriority, getMapLayers, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, megabytesToBytes, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, openRecord, parse, placeholder, propagateToDocumentOnly, provideGn4, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$2 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, saveRecord, saveRecordFailure, saveRecordSuccess, selectEditorState, selectFallback, selectFallbackFields, selectField, selectRecord, selectRecordChangedSinceSave, selectRecordFields, selectRecordFieldsConfig, selectRecordSaveError, selectRecordSaving, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, totalPages, updateLayer, updateRecordField };
 //# sourceMappingURL=geonetwork-ui.mjs.map