geonetwork-ui 2.2.0-dev.3678ce55 → 2.2.0-dev.4983265e

package/fesm2022/geonetwork-ui.mjs

@@ -58,6 +58,7 @@ import * as i1$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { marked } from 'marked';
 import EmblaCarousel from 'embla-carousel';
 import * as i1$6 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
@@ -16846,10 +16847,14 @@ var de = {
 	"map.add.layer.file": "Aus einer Datei",
 	"map.add.layer.wfs": "Aus WFS",
 	"map.add.layer.wms": "Aus WMS",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "Ebenen",
 	"map.loading.data": "Kartendaten werden geladen...",
+	"map.loading.service": "",
 	"map.navigation.message": "Bitte verwenden Sie STRG + Maus (oder zwei Finger auf einem Mobilgerät), um die Karte zu navigieren",
 	"map.select.layer": "Datenquelle",
+	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "Suche",
 	"nav.back": "Zurück",
 	next: next$6,
@@ -17170,10 +17175,14 @@ var en = {
 	"map.add.layer.file": "From a file",
 	"map.add.layer.wfs": "From WFS",
 	"map.add.layer.wms": "From WMS",
+	"map.layer.add": "Add",
+	"map.layers.available": "Available Layers",
 	"map.layers.list": "Layers",
 	"map.loading.data": "Loading map data...",
+	"map.loading.service": "Loading service...",
 	"map.navigation.message": "Please use CTRL + mouse (or two fingers on mobile) to navigate the map",
 	"map.select.layer": "Data source",
+	"map.wms.urlInput.hint": "Enter WMS service URL",
 	"multiselect.filter.placeholder": "Search",
 	"nav.back": "Back",
 	next: next$5,
@@ -17494,10 +17503,14 @@ var es = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "",
 	"map.loading.data": "",
+	"map.loading.service": "",
 	"map.navigation.message": "",
 	"map.select.layer": "",
+	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
 	next: next$4,
@@ -17818,10 +17831,14 @@ var fr = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "",
 	"map.loading.data": "Chargement des données...",
+	"map.loading.service": "",
 	"map.navigation.message": "Veuillez utiliser CTRL + souris (ou deux doigts sur mobile) pour naviguer sur la carte",
 	"map.select.layer": "Source de données",
+	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "Rechercher",
 	"nav.back": "Retour",
 	next: next$3,
@@ -18142,10 +18159,14 @@ var it = {
 	"map.add.layer.file": "Da un file",
 	"map.add.layer.wfs": "Da un WFS",
 	"map.add.layer.wms": "Da un WMS",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "Layers",
 	"map.loading.data": "Caricamento dati...",
+	"map.loading.service": "",
 	"map.navigation.message": "Si prega di utilizzare CTRL + mouse (o due dita su mobile) per navigare sulla mappa",
 	"map.select.layer": "Sorgente dati",
+	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "Cerca",
 	"nav.back": "Indietro",
 	next: next$2,
@@ -18466,10 +18487,14 @@ var nl = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "",
 	"map.loading.data": "",
+	"map.loading.service": "",
 	"map.navigation.message": "",
 	"map.select.layer": "",
+	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
 	next: next$1,
@@ -18790,10 +18815,14 @@ var pt = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "",
 	"map.loading.data": "",
+	"map.loading.service": "",
 	"map.navigation.message": "",
 	"map.select.layer": "",
+	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
 	next: next,
@@ -20946,6 +20975,33 @@ function propagateToDocumentOnly(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)));
+    };
+}
+
 marker('downloads.wfs.featuretype.not.found');
 const FORMATS = {
     csv: {
@@ -23857,6 +23913,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['container']
             }] } });
 
+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, selector: "gn-ui-markdown-parser", inputs: { textContent: "textContent" }, ngImport: i0, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host /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 /deep/ .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host /deep/ .markdown-body h1,:host /deep/ .markdown-body h2,:host /deep/ .markdown-body h3,:host /deep/ .markdown-body h4,:host /deep/ .markdown-body h5,:host /deep/ .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host /deep/ .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host /deep/ .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host /deep/ .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host /deep/ .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host /deep/ .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host /deep/ .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host /deep/ .markdown-body p{margin-top:0;margin-bottom:10px}:host /deep/ .markdown-body p > a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none!important;@apply font-bold;}:host /deep/ .markdown-body p > a:hover{color:var(--color-primary-darker)!important}:host /deep/ .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host /deep/ .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host /deep/ .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host /deep/ .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host /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 /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 /deep/ .markdown-body hr::before{display:table;content:\"\"}:host /deep/ .markdown-body hr::after{display:table;clear:both;content:\"\"}:host /deep/ .markdown-body ul,:host /deep/ .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host /deep/ .markdown-body ol ol,:host /deep/ .markdown-body ul ol{list-style-type:lower-roman}:host /deep/ .markdown-body ul ul ol,:host /deep/ .markdown-body ul ol ol,:host /deep/ .markdown-body ol ul ol,:host /deep/ .markdown-body ol ol ol{list-style-type:lower-alpha}:host /deep/ .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host /deep/ .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host /deep/ .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host /deep/ .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host /deep/ .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host /deep/ .markdown-body div > ol:not([type]){list-style:unset;list-style-type:decimal}:host /deep/ .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host /deep/ .markdown-body td,:host /deep/ .markdown-body th{padding:0}:host /deep/ .markdown-body th{color:var(--color-secondary)}:host /deep/ .markdown-body table th,:host /deep/ .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host /deep/ .markdown-body table td > :last-child{margin-bottom:0}:host /deep/ .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host /deep/ .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host /deep/ .markdown-body table img{background-color:transparent}:host /deep/ .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host /deep/ .markdown-body img[align=\"right\"]{padding-left:20px}:host /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, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host /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 /deep/ .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host /deep/ .markdown-body h1,:host /deep/ .markdown-body h2,:host /deep/ .markdown-body h3,:host /deep/ .markdown-body h4,:host /deep/ .markdown-body h5,:host /deep/ .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host /deep/ .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host /deep/ .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host /deep/ .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host /deep/ .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host /deep/ .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host /deep/ .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host /deep/ .markdown-body p{margin-top:0;margin-bottom:10px}:host /deep/ .markdown-body p > a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none!important;@apply font-bold;}:host /deep/ .markdown-body p > a:hover{color:var(--color-primary-darker)!important}:host /deep/ .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host /deep/ .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host /deep/ .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host /deep/ .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host /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 /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 /deep/ .markdown-body hr::before{display:table;content:\"\"}:host /deep/ .markdown-body hr::after{display:table;clear:both;content:\"\"}:host /deep/ .markdown-body ul,:host /deep/ .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host /deep/ .markdown-body ol ol,:host /deep/ .markdown-body ul ol{list-style-type:lower-roman}:host /deep/ .markdown-body ul ul ol,:host /deep/ .markdown-body ul ol ol,:host /deep/ .markdown-body ol ul ol,:host /deep/ .markdown-body ol ol ol{list-style-type:lower-alpha}:host /deep/ .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host /deep/ .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host /deep/ .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host /deep/ .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host /deep/ .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host /deep/ .markdown-body div > ol:not([type]){list-style:unset;list-style-type:decimal}:host /deep/ .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host /deep/ .markdown-body td,:host /deep/ .markdown-body th{padding:0}:host /deep/ .markdown-body th{color:var(--color-secondary)}:host /deep/ .markdown-body table th,:host /deep/ .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host /deep/ .markdown-body table td > :last-child{margin-bottom:0}:host /deep/ .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host /deep/ .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host /deep/ .markdown-body table img{background-color:transparent}:host /deep/ .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host /deep/ .markdown-body img[align=\"right\"]{padding-left:20px}:host /deep/ .markdown-body img[align=\"left\"]{padding-right:20px}\n"] }]
+        }], propDecorators: { textContent: [{
+                type: Input
+            }] } });
+
 class MetadataInfoComponent {
     constructor() {
         this.keyword = new EventEmitter();
@@ -23895,11 +23965,11 @@ 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: "<p\n  class=\"text-[28px] text-title text-center mb-6 font-title sm:text-left\"\n  translate\n>\n  record.metadata.about\n</p>\n<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        <p\n          class=\"whitespace-pre-line break-words sm:mb-4 sm:pr-16\"\n          [innerHTML]=\"metadata.abstract\"\n          gnUiLinkify\n        ></p>\n        <ng-container *ngIf=\"metadata.keywords?.length\">\n          <p class=\"mb-3 font-medium text-primary text-sm\" translate>\n            record.metadata.keywords\n          </p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            <gn-ui-badge\n              class=\"inline-block mr-2 mb-2 lowercase\"\n              (click)=\"onKeywordClick(keyword)\"\n              [clickable]=\"true\"\n              *ngFor=\"let keyword of metadata.keywords\"\n              >{{ keyword }}</gn-ui-badge\n            >\n          </div>\n        </ng-container>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  class=\"metadata-origin\"\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.origin' | translate\"\n>\n  <p\n    *ngIf=\"metadata.lineage\"\n    class=\"mb-5 pt-4 whitespace-pre-line break-words\"\n    gnUiLinkify\n  >\n    {{ metadata.lineage }}\n  </p>\n  <div\n    class=\"py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid\"\n  >\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\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.status\">\n      <p class=\"text-sm\" translate>record.metadata.updateStatus</p>\n      <p class=\"text-primary font-medium mt-1\" translate>\n        domain.record.status.{{ metadata.status }}\n      </p>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"py-4 px-6 rounded bg-gray-100 text-gray-700 flex flex-wrap gap-2\">\n    <gn-ui-badge *ngIf=\"metadata.extras?.isOpenData\">\n      <span translate>record.metadata.isOpenData</span>\n    </gn-ui-badge>\n    <span\n      class=\"text-primary font-medium\"\n      *ngFor=\"let usage of usages\"\n      gnUiLinkify\n    >\n      {{ usage }}\n    </span>\n    <span class=\"text-primary font-medium noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div class=\"py-5 px-5 rounded bg-gray-100 text-gray-700\">\n    <p class=\"text-sm\" translate>record.metadata.sheet</p>\n    <p class=\"text-primary font-medium mt-1\" translate>\n      <a [href]=\"metadata.landingPage\" target=\"_blank\">\n        <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n      </a>\n    </p>\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;}\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: 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: 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 }); }
+    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: "<p\n  class=\"text-[28px] text-title text-center mb-6 font-title sm:text-left\"\n  translate\n>\n  record.metadata.about\n</p>\n<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        <ng-container *ngIf=\"metadata.keywords?.length\">\n          <p class=\"mb-3 font-medium text-primary text-sm\" translate>\n            record.metadata.keywords\n          </p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            <gn-ui-badge\n              class=\"inline-block mr-2 mb-2 lowercase\"\n              (click)=\"onKeywordClick(keyword)\"\n              [clickable]=\"true\"\n              *ngFor=\"let keyword of metadata.keywords\"\n              >{{ keyword }}</gn-ui-badge\n            >\n          </div>\n        </ng-container>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  class=\"metadata-origin\"\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.origin' | translate\"\n>\n  <p\n    *ngIf=\"metadata.lineage\"\n    class=\"mb-5 pt-4 whitespace-pre-line break-words\"\n    gnUiLinkify\n  >\n    {{ metadata.lineage }}\n  </p>\n  <div\n    class=\"py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid\"\n  >\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\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.status\">\n      <p class=\"text-sm\" translate>record.metadata.updateStatus</p>\n      <p class=\"text-primary font-medium mt-1\" translate>\n        domain.record.status.{{ metadata.status }}\n      </p>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"py-4 px-6 rounded bg-gray-100 text-gray-700 flex flex-wrap gap-2\">\n    <gn-ui-badge *ngIf=\"metadata.extras?.isOpenData\">\n      <span translate>record.metadata.isOpenData</span>\n    </gn-ui-badge>\n    <span\n      class=\"text-primary font-medium\"\n      *ngFor=\"let usage of usages\"\n      gnUiLinkify\n    >\n      {{ usage }}\n    </span>\n    <span class=\"text-primary font-medium noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div class=\"py-5 px-5 rounded bg-gray-100 text-gray-700\">\n    <p class=\"text-sm\" translate>record.metadata.sheet</p>\n    <p class=\"text-primary font-medium mt-1\" translate>\n      <a [href]=\"metadata.landingPage\" target=\"_blank\">\n        <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n      </a>\n    </p>\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;}\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: 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: 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: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { 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,
-            args: [{ selector: 'gn-ui-metadata-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n  class=\"text-[28px] text-title text-center mb-6 font-title sm:text-left\"\n  translate\n>\n  record.metadata.about\n</p>\n<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        <p\n          class=\"whitespace-pre-line break-words sm:mb-4 sm:pr-16\"\n          [innerHTML]=\"metadata.abstract\"\n          gnUiLinkify\n        ></p>\n        <ng-container *ngIf=\"metadata.keywords?.length\">\n          <p class=\"mb-3 font-medium text-primary text-sm\" translate>\n            record.metadata.keywords\n          </p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            <gn-ui-badge\n              class=\"inline-block mr-2 mb-2 lowercase\"\n              (click)=\"onKeywordClick(keyword)\"\n              [clickable]=\"true\"\n              *ngFor=\"let keyword of metadata.keywords\"\n              >{{ keyword }}</gn-ui-badge\n            >\n          </div>\n        </ng-container>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  class=\"metadata-origin\"\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.origin' | translate\"\n>\n  <p\n    *ngIf=\"metadata.lineage\"\n    class=\"mb-5 pt-4 whitespace-pre-line break-words\"\n    gnUiLinkify\n  >\n    {{ metadata.lineage }}\n  </p>\n  <div\n    class=\"py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid\"\n  >\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\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.status\">\n      <p class=\"text-sm\" translate>record.metadata.updateStatus</p>\n      <p class=\"text-primary font-medium mt-1\" translate>\n        domain.record.status.{{ metadata.status }}\n      </p>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"py-4 px-6 rounded bg-gray-100 text-gray-700 flex flex-wrap gap-2\">\n    <gn-ui-badge *ngIf=\"metadata.extras?.isOpenData\">\n      <span translate>record.metadata.isOpenData</span>\n    </gn-ui-badge>\n    <span\n      class=\"text-primary font-medium\"\n      *ngFor=\"let usage of usages\"\n      gnUiLinkify\n    >\n      {{ usage }}\n    </span>\n    <span class=\"text-primary font-medium noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div class=\"py-5 px-5 rounded bg-gray-100 text-gray-700\">\n    <p class=\"text-sm\" translate>record.metadata.sheet</p>\n    <p class=\"text-primary font-medium mt-1\" translate>\n      <a [href]=\"metadata.landingPage\" target=\"_blank\">\n        <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n      </a>\n    </p>\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;}\n"] }]
+            args: [{ selector: 'gn-ui-metadata-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n  class=\"text-[28px] text-title text-center mb-6 font-title sm:text-left\"\n  translate\n>\n  record.metadata.about\n</p>\n<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        <ng-container *ngIf=\"metadata.keywords?.length\">\n          <p class=\"mb-3 font-medium text-primary text-sm\" translate>\n            record.metadata.keywords\n          </p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            <gn-ui-badge\n              class=\"inline-block mr-2 mb-2 lowercase\"\n              (click)=\"onKeywordClick(keyword)\"\n              [clickable]=\"true\"\n              *ngFor=\"let keyword of metadata.keywords\"\n              >{{ keyword }}</gn-ui-badge\n            >\n          </div>\n        </ng-container>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  class=\"metadata-origin\"\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.origin' | translate\"\n>\n  <p\n    *ngIf=\"metadata.lineage\"\n    class=\"mb-5 pt-4 whitespace-pre-line break-words\"\n    gnUiLinkify\n  >\n    {{ metadata.lineage }}\n  </p>\n  <div\n    class=\"py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid\"\n  >\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\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.status\">\n      <p class=\"text-sm\" translate>record.metadata.updateStatus</p>\n      <p class=\"text-primary font-medium mt-1\" translate>\n        domain.record.status.{{ metadata.status }}\n      </p>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"py-4 px-6 rounded bg-gray-100 text-gray-700 flex flex-wrap gap-2\">\n    <gn-ui-badge *ngIf=\"metadata.extras?.isOpenData\">\n      <span translate>record.metadata.isOpenData</span>\n    </gn-ui-badge>\n    <span\n      class=\"text-primary font-medium\"\n      *ngFor=\"let usage of usages\"\n      gnUiLinkify\n    >\n      {{ usage }}\n    </span>\n    <span class=\"text-primary font-medium noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div class=\"py-5 px-5 rounded bg-gray-100 text-gray-700\">\n    <p class=\"text-sm\" translate>record.metadata.sheet</p>\n    <p class=\"text-primary font-medium mt-1\" translate>\n      <a [href]=\"metadata.landingPage\" target=\"_blank\">\n        <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n      </a>\n    </p>\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;}\n"] }]
         }], propDecorators: { metadata: [{
                 type: Input
             }], incomplete: [{
@@ -24360,15 +24430,21 @@ class MetadataContactComponent {
             ? 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 *ngIf=\"shownOrganization\" class=\"mb-6 sm:mb-12\">\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.contact\n  </p>\n  <div class=\"flex mb-1\">\n    <div\n      class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n      (click)=\"onOrganizationClick()\"\n    >\n      {{ shownOrganization.name }}\n    </div>\n  </div>\n  <a\n    *ngIf=\"contacts.length\"\n    [href]=\"'mailto:' + contacts[0].email\"\n    class=\"text-gray-700 text-sm hover:underline\"\n    target=\"_blank\"\n    >{{ contacts[0].email }}</a\n  >\n  <div *ngIf=\"shownOrganization.website\" class=\"mb-2\">\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\"\n        >open_in_new</mat-icon\n      >\n    </a>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 sm:mb-12\">\n  <div class=\"grid gap-3\">\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"] }], 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 *ngIf=\"shownOrganization\" class=\"mb-6 sm:mb-12\">\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.contact\n  </p>\n  <div class=\"flex mb-1\">\n    <div\n      class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n      (click)=\"onOrganizationClick()\"\n    >\n      {{ shownOrganization.name }}\n    </div>\n  </div>\n  <a\n    *ngIf=\"contacts.length\"\n    [href]=\"'mailto:' + contacts[0].email\"\n    class=\"text-gray-700 text-sm hover:underline\"\n    target=\"_blank\"\n    >{{ contacts[0].email }}</a\n  >\n  <div *ngIf=\"shownOrganization.website\" class=\"mb-2\">\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\"\n        >open_in_new</mat-icon\n      >\n    </a>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'gn-ui-metadata-contact', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12\">\n  <div class=\"grid gap-3\">\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: [{
@@ -24634,7 +24710,10 @@ class DropdownMultiselectComponent {
         return this.choices.filter((choice) => this.selected.indexOf(choice.value) > -1);
     }
     get filteredChoicesByText() {
-        return this.choices.filter((choice) => choice.label.toLowerCase().includes(this.searchInputValue?.toLowerCase()));
+        if (!this.searchInputValue)
+            return this.choices;
+        const filter = createFuzzyFilter(this.searchInputValue);
+        return this.choices.filter((choice) => filter(choice.label));
     }
     get focusedIndex() {
         return this.checkboxes.reduce((prev, curr, curIndex) => curr.nativeElement === document.activeElement ? curIndex : prev, -1);
@@ -25789,7 +25868,8 @@ class UiElementsModule {
             GnUiLinkifyDirective,
             PaginationButtonsComponent,
             MaxLinesComponent,
-            RecordApiFormComponent], imports: [CommonModule,
+            RecordApiFormComponent,
+            MarkdownParserComponent], imports: [CommonModule,
             MatIconModule,
             MatTooltipModule,
             UiWidgetsModule,
@@ -25814,7 +25894,8 @@ class UiElementsModule {
             AvatarComponent,
             UserPreviewComponent,
             PaginationButtonsComponent,
-            RecordApiFormComponent] }); }
+            RecordApiFormComponent,
+            MarkdownParserComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, imports: [CommonModule,
             MatIconModule,
             MatTooltipModule,
@@ -25863,6 +25944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         PaginationButtonsComponent,
                         MaxLinesComponent,
                         RecordApiFormComponent,
+                        MarkdownParserComponent,
                     ],
                     exports: [
                         MetadataInfoComponent,
@@ -25883,6 +25965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         UserPreviewComponent,
                         PaginationButtonsComponent,
                         RecordApiFormComponent,
+                        MarkdownParserComponent,
                     ],
                 }]
         }] });
@@ -28138,6 +28221,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     ], template: "<div class=\"h-full text-sm\">\n  <gn-ui-fuzzy-search></gn-ui-fuzzy-search>\n  <gn-ui-results-list-container\n    layout=\"ADDLAYER\"\n  ></gn-ui-results-list-container>\n</div>\n", styles: ["::ng-deep .mat-tab-body-wrapper{flex-grow:1}\n"] }]
         }], ctorParameters: function () { return [{ type: SearchFacade }]; } });
 
+class AddLayerFromWmsComponent {
+    constructor(mapFacade, changeDetectorRef) {
+        this.mapFacade = mapFacade;
+        this.changeDetectorRef = changeDetectorRef;
+        this.wmsUrl = '';
+        this.loading = false;
+        this.layers = [];
+        this.wmsEndpoint = null;
+        this.urlChange = new Subject();
+        this.errorMessage = null;
+    }
+    ngOnInit() {
+        this.urlChange.pipe(debounceTime(700)).subscribe(() => this.loadLayers());
+    }
+    async loadLayers() {
+        this.errorMessage = null;
+        try {
+            this.loading = true;
+            if (this.wmsUrl.trim() === '') {
+                this.layers = [];
+                return;
+            }
+            this.wmsEndpoint = await new WmsEndpoint(this.wmsUrl).isReady();
+            this.layers = this.wmsEndpoint.getLayers();
+        }
+        catch (error) {
+            const err = error;
+            this.layers = [];
+            this.errorMessage = 'Error loading layers: ' + err.message;
+        }
+        finally {
+            this.loading = false;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    addLayer(layer) {
+        const layerToAdd = {
+            name: layer.name,
+            url: this.wmsUrl.toString(),
+            type: MapContextLayerTypeEnum.WMS,
+        };
+        this.mapFacade.addLayer({ ...layerToAdd, title: layer.title });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWmsComponent, deps: [{ token: MapFacade }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container\n    *ngFor=\"let layer of layers\"\n    [ngTemplateOutlet]=\"layerTreeItem\"\n    [ngTemplateOutletContext]=\"{\n      layer: layer\n    }\"\n  ></ng-container>\n</div>\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    <gn-ui-button\n      *ngIf=\"layer.name\"\n      class=\"layer-add-btn\"\n      type=\"primary\"\n      (buttonClick)=\"addLayer(layer)\"\n      extraClass=\"text-sm !px-2 !py-1\"\n      translate\n      ><span translate> map.layer.add </span></gn-ui-button\n    >\n  </div>\n  <div *ngIf=\"layer.children?.length > 0\" class=\"ml-4\">\n    <ng-container\n      *ngFor=\"let child of layer.children\"\n      [ngTemplateOutlet]=\"layerTreeItem\"\n      [ngTemplateOutletContext]=\"{\n        layer: child\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\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$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWmsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-add-layer-from-wms', template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container\n    *ngFor=\"let layer of layers\"\n    [ngTemplateOutlet]=\"layerTreeItem\"\n    [ngTemplateOutletContext]=\"{\n      layer: layer\n    }\"\n  ></ng-container>\n</div>\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    <gn-ui-button\n      *ngIf=\"layer.name\"\n      class=\"layer-add-btn\"\n      type=\"primary\"\n      (buttonClick)=\"addLayer(layer)\"\n      extraClass=\"text-sm !px-2 !py-1\"\n      translate\n      ><span translate> map.layer.add </span></gn-ui-button\n    >\n  </div>\n  <div *ngIf=\"layer.children?.length > 0\" class=\"ml-4\">\n    <ng-container\n      *ngFor=\"let child of layer.children\"\n      [ngTemplateOutlet]=\"layerTreeItem\"\n      [ngTemplateOutletContext]=\"{\n        layer: child\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: MapFacade }, { type: i0.ChangeDetectorRef }]; } });
+
 class LayersPanelComponent {
     constructor(mapFacade) {
         this.mapFacade = mapFacade;
@@ -28147,11 +28281,11 @@ class LayersPanelComponent {
         this.mapFacade.removeLayer(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LayersPanelComponent, deps: [{ token: MapFacade }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LayersPanelComponent, selector: "gn-ui-layers-panel", ngImport: i0, template: "<div\n  class=\"bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden\"\n>\n  <div class=\"p-3 border-b border-gray-300 flex items-center\">\n    <mat-icon class=\"material-symbols-outlined mr-2\">layers</mat-icon>\n    <span translate>map.layers.list</span>\n  </div>\n  <div class=\"flex flex-col px-4 divide-y divide-y-gray-50\">\n    <div\n      *ngFor=\"let layer of layers$ | async; let index = index\"\n      class=\"flex flex-row py-3\"\n    >\n      <mat-icon class=\"material-symbols-outlined -ml-2 mr-2 shrink-0\"\n        >chevron_right</mat-icon\n      >\n      <span class=\"mr-2 grow\">{{ layer.title }}</span>\n      <a\n        href\n        class=\"underline text-sm text-red-700 hover:text-red-900\"\n        (click)=\"deleteLayer(index)\"\n      >\n        delete\n      </a>\n    </div>\n  </div>\n  <gn-ui-expandable-panel-button [titleTemplate]=\"addLayerTitle\">\n    <mat-tab-group animationDuration=\"200ms\" class=\"h-full\">\n      <mat-tab [label]=\"'map.add.layer.catalog' | translate\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-catalog></gn-ui-add-layer-from-catalog>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wms' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from WMS</div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wfs' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from WFS</div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from file</div>\n      </mat-tab>\n    </mat-tab-group>\n  </gn-ui-expandable-panel-button>\n</div>\n\n<ng-template #addLayerTitle>\n  <mat-icon class=\"material-symbols-outlined mr-4\">add_circle</mat-icon>\n  <span translate>map.add.layer</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ExpandablePanelButtonComponent, selector: "gn-ui-expandable-panel-button", inputs: ["titleTemplate", "collapsed"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: AddLayerFromCatalogComponent, selector: "gn-ui-add-layer-from-catalog" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LayersPanelComponent, selector: "gn-ui-layers-panel", ngImport: i0, template: "<div\n  class=\"bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden\"\n>\n  <div class=\"p-3 border-b border-gray-300 flex items-center\">\n    <mat-icon class=\"material-symbols-outlined mr-2\">layers</mat-icon>\n    <span translate>map.layers.list</span>\n  </div>\n  <div class=\"flex flex-col px-4 divide-y divide-y-gray-50\">\n    <div\n      *ngFor=\"let layer of layers$ | async; let index = index\"\n      class=\"flex flex-row py-3\"\n    >\n      <mat-icon class=\"material-symbols-outlined -ml-2 mr-2 shrink-0\"\n        >chevron_right</mat-icon\n      >\n      <span class=\"mr-2 grow\">{{ layer.title }}</span>\n      <a\n        href\n        class=\"underline text-sm text-red-700 hover:text-red-900\"\n        (click)=\"deleteLayer(index)\"\n      >\n        delete\n      </a>\n    </div>\n  </div>\n  <gn-ui-expandable-panel-button [titleTemplate]=\"addLayerTitle\">\n    <mat-tab-group animationDuration=\"200ms\" class=\"h-full\">\n      <mat-tab [label]=\"'map.add.layer.catalog' | translate\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-catalog></gn-ui-add-layer-from-catalog>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wms' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wms></gn-ui-add-layer-from-wms>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wfs' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from WFS</div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from file</div>\n      </mat-tab>\n    </mat-tab-group>\n  </gn-ui-expandable-panel-button>\n</div>\n\n<ng-template #addLayerTitle>\n  <mat-icon class=\"material-symbols-outlined mr-4\">add_circle</mat-icon>\n  <span translate>map.add.layer</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ExpandablePanelButtonComponent, selector: "gn-ui-expandable-panel-button", inputs: ["titleTemplate", "collapsed"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: AddLayerFromCatalogComponent, selector: "gn-ui-add-layer-from-catalog" }, { kind: "component", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { 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: LayersPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-layers-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden\"\n>\n  <div class=\"p-3 border-b border-gray-300 flex items-center\">\n    <mat-icon class=\"material-symbols-outlined mr-2\">layers</mat-icon>\n    <span translate>map.layers.list</span>\n  </div>\n  <div class=\"flex flex-col px-4 divide-y divide-y-gray-50\">\n    <div\n      *ngFor=\"let layer of layers$ | async; let index = index\"\n      class=\"flex flex-row py-3\"\n    >\n      <mat-icon class=\"material-symbols-outlined -ml-2 mr-2 shrink-0\"\n        >chevron_right</mat-icon\n      >\n      <span class=\"mr-2 grow\">{{ layer.title }}</span>\n      <a\n        href\n        class=\"underline text-sm text-red-700 hover:text-red-900\"\n        (click)=\"deleteLayer(index)\"\n      >\n        delete\n      </a>\n    </div>\n  </div>\n  <gn-ui-expandable-panel-button [titleTemplate]=\"addLayerTitle\">\n    <mat-tab-group animationDuration=\"200ms\" class=\"h-full\">\n      <mat-tab [label]=\"'map.add.layer.catalog' | translate\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-catalog></gn-ui-add-layer-from-catalog>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wms' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from WMS</div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wfs' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from WFS</div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from file</div>\n      </mat-tab>\n    </mat-tab-group>\n  </gn-ui-expandable-panel-button>\n</div>\n\n<ng-template #addLayerTitle>\n  <mat-icon class=\"material-symbols-outlined mr-4\">add_circle</mat-icon>\n  <span translate>map.add.layer</span>\n</ng-template>\n" }]
+            args: [{ selector: 'gn-ui-layers-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden\"\n>\n  <div class=\"p-3 border-b border-gray-300 flex items-center\">\n    <mat-icon class=\"material-symbols-outlined mr-2\">layers</mat-icon>\n    <span translate>map.layers.list</span>\n  </div>\n  <div class=\"flex flex-col px-4 divide-y divide-y-gray-50\">\n    <div\n      *ngFor=\"let layer of layers$ | async; let index = index\"\n      class=\"flex flex-row py-3\"\n    >\n      <mat-icon class=\"material-symbols-outlined -ml-2 mr-2 shrink-0\"\n        >chevron_right</mat-icon\n      >\n      <span class=\"mr-2 grow\">{{ layer.title }}</span>\n      <a\n        href\n        class=\"underline text-sm text-red-700 hover:text-red-900\"\n        (click)=\"deleteLayer(index)\"\n      >\n        delete\n      </a>\n    </div>\n  </div>\n  <gn-ui-expandable-panel-button [titleTemplate]=\"addLayerTitle\">\n    <mat-tab-group animationDuration=\"200ms\" class=\"h-full\">\n      <mat-tab [label]=\"'map.add.layer.catalog' | translate\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-catalog></gn-ui-add-layer-from-catalog>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wms' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wms></gn-ui-add-layer-from-wms>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wfs' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from WFS</div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from file</div>\n      </mat-tab>\n    </mat-tab-group>\n  </gn-ui-expandable-panel-button>\n</div>\n\n<ng-template #addLayerTitle>\n  <mat-icon class=\"material-symbols-outlined mr-4\">add_circle</mat-icon>\n  <span translate>map.add.layer</span>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: MapFacade }]; } });
 
 class MapEffects {
@@ -28191,7 +28325,8 @@ class FeatureMapModule {
             LayersPanelComponent,
             AddLayerFromCatalogComponent,
             MapContainerComponent,
-            AddLayerRecordPreviewComponent], imports: [CommonModule,
+            AddLayerRecordPreviewComponent,
+            AddLayerFromWmsComponent], imports: [CommonModule,
             UiMapModule,
             UiLayoutModule,
             MatIconModule,
@@ -28231,6 +28366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         AddLayerFromCatalogComponent,
                         MapContainerComponent,
                         AddLayerRecordPreviewComponent,
+                        AddLayerFromWmsComponent,
                     ],
                     exports: [
                         MapContextComponent,
@@ -30441,20 +30577,8 @@ class OrganisationsComponent {
     filterOrganisations(organisations, filterBy) {
         if (!filterBy)
             return organisations;
-        const filterRegex = new RegExp(this.normalizeString(filterBy) //ignore accents and case
-            .replace(/[^a-z0-9\s]/g, ' ') //ignore special characters (also without spaces like l')
-            .replace(/\s(?=.)/g, '.*') //replace whitespaces by "AND" separator
-            .replace(/\s/g, ''), //remove potential whitespaces left
-        'i');
-        return [...organisations].filter((org) => {
-            return this.normalizeString(org.name).match(filterRegex);
-        });
-    }
-    normalizeString(str) {
-        return str
-            .normalize('NFD')
-            .replace(/[\u0300-\u036f]/g, '')
-            .toLowerCase();
+        const filter = createFuzzyFilter(filterBy);
+        return organisations.filter((org) => filter(org.name));
     }
     sortOrganisations(organisations, sortBy) {
         let order;
@@ -31682,5 +31806,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, AutocompleteComponent, AvatarComponent, 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_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, EMPTY_BLOCK_MODEL_FIXTURE, ES_RESOURCES_VALUES, EditorService, 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, 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, Gn4MetadataMapper, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, LANGUAGES_LIST, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LANG_3_TO_2_MAPPER, 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, MapUtilsWMSService, MapViewComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, 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_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordTableComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, 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, 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, TranslateTestingModule, 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, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, currentPage, defaultMapOptions, dragPanCondition, extensionToFormat, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, 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, getThemeConfig, initSearch, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapLogo, mapOrganization, mapReducer, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, parse, placeholder, propagateToDocumentOnly, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$1 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, selectFallback, selectFallbackFields, selectField, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, toModel, toXml, totalPages, updateLayer };
+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, EMPTY_BLOCK_MODEL_FIXTURE, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, 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, Gn4MetadataMapper, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, LANGUAGES_LIST, 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, MapUtilsWMSService, MapViewComponent, MarkdownParserComponent, 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_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordTableComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, 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, TranslateTestingModule, 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, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, dragPanCondition, dropEmptyTranslations, extensionToFormat, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, 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, getThemeConfig, initSearch, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapLogo, mapOrganization, mapReducer, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, parse, placeholder, propagateToDocumentOnly, provideGn4, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$1 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, selectFallback, selectFallbackFields, selectField, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, toModel, toXml, totalPages, updateLayer };
 //# sourceMappingURL=geonetwork-ui.mjs.map