@geogirafe/lib-geoportal 1.1.0-dev.2610902439 → 1.1.0-dev.2623495582

package/api/apicontext.d.ts

@@ -31,6 +31,7 @@ import IGirafeContext from '../tools/context/icontext.js';
 import ApiSessionManager from './apisessionmanager.js';
 import OnBoardingManager from '../tools/onboarding/onboardingmanager.js';
 import ThemeFavoritesManager from '../tools/themes/themefavoritesmanager.js';
+import SearchManager from '../tools/search/searchmanager.js';
 import FeedbackManager from '../tools/feedback/feedbackmanager.js';
 export default class GirafeApiContext implements IGirafeContext {
     readonly userDataManager: UserDataManager;
@@ -65,6 +66,7 @@ export default class GirafeApiContext implements IGirafeContext {
     readonly localFileManager: LocalFileManager;
     readonly onBoardingManager: OnBoardingManager;
     readonly themeFavoritesManager: ThemeFavoritesManager;
+    readonly searchManager: SearchManager;
     readonly feedbackManager: FeedbackManager;
     constructor();
     initialize(): Promise<void>;

package/api/apicontext.js

@@ -31,6 +31,7 @@ import WmsManager from '../tools/wms/wmsmanager.js';
 import ApiSessionManager from './apisessionmanager.js';
 import OnBoardingManager from '../tools/onboarding/onboardingmanager.js';
 import ThemeFavoritesManager from '../tools/themes/themefavoritesmanager.js';
+import SearchManager from '../tools/search/searchmanager.js';
 import FeedbackManager from '../tools/feedback/feedbackmanager.js';
 export default class GirafeApiContext {
     userDataManager;
@@ -65,6 +66,7 @@ export default class GirafeApiContext {
     localFileManager;
     onBoardingManager;
     themeFavoritesManager;
+    searchManager;
     feedbackManager;
     constructor() {
         this.componentManager = new ComponentManager(this);
@@ -99,6 +101,7 @@ export default class GirafeApiContext {
         this.ogcApiFeaturesManager = new OgcApiFeaturesManager(this);
         this.onBoardingManager = new OnBoardingManager(this);
         this.themeFavoritesManager = new ThemeFavoritesManager(this);
+        this.searchManager = new SearchManager(this);
         this.feedbackManager = new FeedbackManager(this);
     }
     async initialize() {
@@ -137,6 +140,7 @@ export default class GirafeApiContext {
         this.ogcApiFeaturesManager.initializeSingleton();
         this.onBoardingManager.initializeSingleton();
         this.themeFavoritesManager.initializeSingleton();
+        this.searchManager.initializeSingleton();
         this.feedbackManager.initializeSingleton();
     }
 }

package/assets/i18n/de.json

@@ -220,6 +220,14 @@
     "Generate CSV": "CSV generieren",
     "Generating code": "Code wird generiert",
     "Generating link": "Link wird generiert",
+    "geoadminch_address": "Adressen",
+    "geoadminch_district": "Bezirke",
+    "geoadminch_gazetteer": "Orts- und Flurnamen",
+    "geoadminch_gg25": "Administrative Grenzen",
+    "geoadminch_haltestellen": "Haltestellen",
+    "geoadminch_kantone": "Kantone",
+    "geoadminch_parcel": "Parzellen",
+    "geoadminch_zipcode": "PLZ",
     "GeoJSON": "GeoJSON",
     "Geolocation browser error": "Ihr Browser unterstützt keine Geolokalisierung",
     "Geolocation error": "Geolocation-Fehler",

package/assets/i18n/en.json

@@ -222,6 +222,14 @@
     "Generate CSV": "Generate CSV",
     "Generating code": "Generating code",
     "Generating link": "Generating link",
+    "geoadminch_address": "Addresses",
+    "geoadminch_district": "Districts",
+    "geoadminch_gazetteer": "Location Names",
+    "geoadminch_gg25": "Administrative Boundaries",
+    "geoadminch_haltestellen": "Public transport stops",
+    "geoadminch_kantone": "Cantons",
+    "geoadminch_parcel": "Parcels",
+    "geoadminch_zipcode": "ZIP codes",
     "GeoJSON": "GeoJSON",
     "Geolocation browser error": "Your browser does not support geolocation",
     "Geolocation error": "Geolocation error",

package/assets/i18n/fr.json

@@ -220,6 +220,14 @@
     "Generate CSV": "Générer CSV",
     "Generating code": "Génération du code",
     "Generating link": "Génération du lien",
+    "geoadminch_address": "Adresse",
+    "geoadminch_district": "District",
+    "geoadminch_gazetteer": "Noms de lieux et noms de champs",
+    "geoadminch_gg25": "Frontières administratives",
+    "geoadminch_haltestellen": "Arrêts de transport public",
+    "geoadminch_kantone": "Canton",
+    "geoadminch_parcel": "Parcelles",
+    "geoadminch_zipcode": "Codes postaux",
     "GeoJSON": "GeoJSON",
     "Geolocation browser error": "Votre navigateur ne supporte pas la géolocalisation",
     "Geolocation error": "Erreur de géolocalisation",

package/assets/i18n/it.json

@@ -220,6 +220,14 @@
     "Generate CSV": "Genera CSV",
     "Generating code": "Generazione del codice",
     "Generating link": "Generazione del link",
+    "geoadminch_address": "Indirizzi",
+    "geoadminch_district": "Distretti",
+    "geoadminch_gazetteer": "Nomi di luoghi e nomi di campi",
+    "geoadminch_gg25": "Frontiere amministrative",
+    "geoadminch_haltestellen": "Stazioni di trasporto pubblico",
+    "geoadminch_kantone": "Cantoni",
+    "geoadminch_parcel": "Parcelle",
+    "geoadminch_zipcode": "Codici postali",
     "GeoJSON": "GeoJSON",
     "Geolocation browser error": "Il tuo browser non supporta la geolocalizzazione",
     "Geolocation error": "Errore di geolocalizzazione",

package/components/search/component.d.ts

@@ -10,15 +10,10 @@ declare class SearchComponent extends GirafeHTMLElement {
     private readonly previewFeaturesCollection;
     private previewLayers?;
     private previewGeoLayer;
-    private maxExtent?;
-    private readonly geoJsonFormatter;
     private ignoreBlur;
-    groupedResults: Record<string, Feature[]>;
+    groupedResults: Record<string, Record<string, Feature[]>>;
     protected allResults: Feature[];
     protected forceHide: boolean;
-    private readonly searchTermPlaceholder;
-    private readonly searchLangPlaceholder;
-    private readonly COORD_REGEX;
     private focusedResultIndex;
     private focusedResult;
     private selectedResult;
@@ -29,7 +24,6 @@ declare class SearchComponent extends GirafeHTMLElement {
     defaultSearchFillColor: string;
     searchStrokeColor: string;
     searchFillColor: string | number[];
-    private abortController;
     showNoResultWarning: boolean;
     private ongoingSearchTimeoutId;
     constructor();
@@ -42,21 +36,18 @@ declare class SearchComponent extends GirafeHTMLElement {
     render(): void;
     registerEvents(): void;
     protected connectedCallback(): void;
+    private flattenResultList;
     protected clearSearch(purge?: boolean): void;
     doSearch(e: Event): Promise<void>;
-    protected fetchSearch(term: string): Promise<Feature[]>;
     /**
      * Debounce the fetch call to API to prevent sending request at every stroke.
      * @param e
      */
     doSearchDebounced(e: Event): Promise<void>;
-    /**
-     * Will render the result of the search with coordinates
-     * @param term typed string
-     */
-    private displayCoordinates;
-    private displayResults;
-    getIcon(searchGroup: string): any;
+    getGroupIcon(searchGroup: string): any;
+    getProviderClass(provider: string): "hidden" | "provider entry";
+    getGroupClass(group: string): "hidden" | "group entry";
+    getLabel(result: Feature): unknown;
     onMouseOver(result: Feature): void;
     onMouseLeave(): void;
     private focusResultFromIndex;

package/components/search/component.js

@@ -1,14 +1,17 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import Collection from 'ol/Collection.js';
-import Feature from 'ol/Feature.js';
-import GeoJSON from 'ol/format/GeoJSON.js';
 import tippy from 'tippy.js';
 import VectorSource from 'ol/source/Vector.js';
 import VectorLayer from 'ol/layer/Vector.js';
-import { Point } from 'ol/geom.js';
 import { Fill, Icon, Stroke, Style } from 'ol/style.js';
-import { buffer, containsExtent, getCenter, getHeight, getWidth } from 'ol/extent.js';
+import { containsExtent, getCenter } from 'ol/extent.js';
 import GirafeColorPicker from '../../tools/utils/girafecolorpicker.js';
 import PinIcon from './images/pin.svg';
 import LayerIcon from './images/layer.svg';
@@ -16,7 +19,8 @@ import LayerGroupIcon from './images/layergroup.svg';
 import SearchIcon from './images/search.svg';
 import PaintbrushIcon from './images/paintbrush.svg';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
-import { parseCoordinates } from '../../tools/geometrytools.js';
+import { UsedInTemplateOnly } from '../../decorators.js';
+import { SEARCH_GROUP_DEFAULT, SEARCH_PROVIDER_DEFAULT } from '../../tools/search/abstractsearchclient.js';
 class SearchComponent extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -24,10 +28,10 @@ class SearchComponent extends GirafeHTMLElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style><style>
-.hidden{display:none}#searchbox{background-color:var(--bkg-color);border:1px solid #cfd6dd;border-radius:4px;flex-direction:row;width:100%;height:2.25rem;display:flex;& slot[name=search-tooltip]{display:none}}#search{-webkit-appearance:none;width:auto;height:2.25rem;color:var(--text-color);background:0 0;border:0;outline:none;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:0 0 0 .5rem;padding-left:.8rem;font-size:1rem}.search-icon,.close-icon,.select-color-icon{width:14px;color:var(--text-color);padding:0 1rem}.close-button,.select-color-button{cursor:pointer;background-color:#0000;border:none;padding:0}#results{z-index:1000;background-color:var(--bkg-color);scrollbar-width:thin;width:36rem;max-height:31rem;margin-top:.1rem;margin-bottom:.5rem;position:absolute;top:3.5rem;overflow-x:hidden}.result,.title{width:34rem;padding:.3rem 1rem;line-height:1.3rem;display:inline-block}.title{color:var(--text-color);padding-top:1.5rem;font-size:1.3rem;font-weight:600;line-height:2.5rem}.result{cursor:pointer;text-align:left;width:100%;color:var(--text-color);background:0 0;border:none;border-top:1px solid #ccc}.title img{width:14px;margin-right:1rem}.title span{text-transform:uppercase}.result.selected{color:var(--text-color);background-color:#aaa!important}#no-result{background:var(--warning-color);opacity:.75;visibility:hidden;pointer-events:none;border-radius:6px;width:fit-content;margin:auto;padding:.5rem 0;font-size:1rem;position:absolute;top:3.5rem;left:0;right:0}#no-result>span{padding:1.3rem}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.shown-then-fadeout{animation:2s ease-in-out forwards fadeOut;visibility:visible!important}
+.hidden{display:none}#searchbox{background-color:var(--bkg-color);border:1px solid #cfd6dd;border-radius:4px;flex-direction:row;width:100%;height:2.25rem;display:flex;& slot[name=search-tooltip]{display:none}}#search{-webkit-appearance:none;width:auto;height:2.25rem;color:var(--text-color);background:0 0;border:0;outline:none;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:0 0 0 .5rem;padding-left:.8rem;font-size:1rem}.search-icon,.close-icon,.select-color-icon{width:14px;color:var(--text-color);padding:0 1rem}.close-button,.select-color-button{cursor:pointer;background-color:#0000;border:none;padding:0}#results{z-index:1000;background-color:var(--bkg-color);scrollbar-width:thin;width:36rem;max-height:31rem;margin-top:.1rem;margin-bottom:.5rem;position:absolute;top:3.5rem;overflow-x:hidden}.entry{width:34rem;color:var(--text-color);padding:.3rem 1rem;line-height:1.3rem;display:inline-block}.provider,.group{font-size:1.2rem;font-weight:600;line-height:3rem}.provider{background-color:color-mix(in srgb, var(--bkg-color-grad1) 75%, transparent);margin-top:1rem;font-size:1.5rem}#results>.provider:first-child{margin-top:0}.result{cursor:pointer;text-align:left;background:0 0;border:none;border-top:1px solid #ccc;width:100%}.entry img{width:.8em;margin-right:1rem}.entry span{text-transform:uppercase}.result.selected{color:var(--text-color);background-color:var(--bkg-color-grad2)!important}#no-result{background:var(--warning-color);opacity:.75;visibility:hidden;pointer-events:none;border-radius:6px;width:fit-content;margin:auto;padding:.5rem 0;font-size:1rem;position:absolute;top:3.5rem;left:0;right:0}#no-result>span{padding:1.3rem}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.shown-then-fadeout{animation:2s ease-in-out forwards fadeOut;visibility:visible!important}
 </style>
 <style>${this.customStyle}</style>
-<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="searchbox"><slot name="search-tooltip"></slot><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search..." placeholder="Search..." oninput="${(e) => this.doSearchDebounced(e)}" onfocusin="${() => this.onFocusIn()}" onfocusout="${() => this.onFocusOut()}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button> <button tip="change_search_result_color" id="colorPickerBtn" class="${this.paintSearchResults ? 'select-color-button' : 'hidden'}"><img class="select-color-icon" alt="select-color-icon" src="${this.paintbrushIcon}"></button><div id="results" class="${Object.keys(this.groupedResults).length === 0 || this.forceHide ? 'hidden' : ''}" onmousemove="${() => this.onMouseMove()}">${Object.keys(this.groupedResults).map(group => uHtml `<div class="title"><img alt="result icon" src="${this.getIcon(group)}"> <span i18n="${group}"></span></div>${this.groupedResults[group].map(result => uHtml ` <button class="${result.get('selected') ? 'result selected' : 'result'}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}" onmouseover="${() => this.onMouseOver(result)}" onmouseleave="${() => this.onMouseLeave()}">${result.get('label')}</button> `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div></div>
+<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="searchbox"><slot name="search-tooltip"></slot><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search..." placeholder="Search..." aria-label="Search" oninput="${(e) => this.doSearchDebounced(e)}" onfocusin="${() => this.onFocusIn()}" onfocusout="${() => this.onFocusOut()}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button> <button tip="change_search_result_color" id="colorPickerBtn" class="${this.paintSearchResults ? 'select-color-button' : 'hidden'}"><img class="select-color-icon" alt="select-color-icon" src="${this.paintbrushIcon}"></button><div id="results" class="${!this.allResults.length || this.forceHide ? 'hidden' : ''}" onmousemove="${() => this.onMouseMove()}">${(Object.keys(this.groupedResults) ?? []).map(provider => uHtml `<div class="${this.getProviderClass(provider)}"><img alt="provider icon" src="${this.searchIcon}"> <span i18n="${provider}">${provider}</span></div>${(Object.keys(this.groupedResults[provider]) ?? []).map(group => uHtml `<div class="${this.getGroupClass(group)}"><img alt="result icon" src="${this.getGroupIcon(group)}"> <span i18n="${group}">${group}</span></div>${(this.groupedResults[provider][group] ?? []).map(result => uHtml ` <button class="${result.get('selected') ? 'result entry selected' : 'result entry'}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}" onmouseover="${() => this.onMouseOver(result)}" onmouseleave="${() => this.onMouseLeave()}">${this.getLabel(result)}</button> `)} `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     searchIcon = SearchIcon;
@@ -38,15 +42,10 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     previewFeaturesCollection = new Collection();
     previewLayers;
     previewGeoLayer = null;
-    maxExtent;
-    geoJsonFormatter = new GeoJSON();
     ignoreBlur = false;
     groupedResults = {};
     allResults = [];
     forceHide = true;
-    searchTermPlaceholder = '###SEARCHTERM###';
-    searchLangPlaceholder = '###SEARCHLANG###';
-    COORD_REGEX = /^(\d+[.,]?\d*)\s*[,;/\s]\s*(\d+[.,]?\d*)$/;
     focusedResultIndex = -1;
     focusedResult = null;
     selectedResult = null;
@@ -57,7 +56,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     defaultSearchFillColor;
     searchStrokeColor;
     searchFillColor;
-    abortController = new AbortController();
     showNoResultWarning = false;
     // Keeping track of the last input timeout
     ongoingSearchTimeoutId = 0;
@@ -66,17 +64,18 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     }
     async initialSearch() {
         const searchTerm = this.context.permalinkManager.getSearchTerm();
-        const results = await this.fetchSearch(searchTerm);
-        if (results.length > 0) {
+        const results = await this.context.searchManager.doSearch(searchTerm);
+        if (results !== null) {
             // Apply the first search result in the list
-            const firstResult = results[0];
-            this.preview(firstResult);
-            this.onSelect(firstResult);
+            const firstResults = this.flattenResultList(results);
+            if (firstResults.length) {
+                this.preview(firstResults[0]);
+                this.onSelect(firstResults[0]);
+            }
         }
     }
     createPreviewLayer() {
         this.paintSearchResults = this.context.configManager.Config.search.paintSearchResults;
-        this.maxExtent = this.context.configManager.Config.map.maxExtent?.split(',').map(Number);
         this.previewGeoLayer = new VectorLayer({
             properties: {
                 addToPrintedLayers: true
@@ -133,11 +132,15 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         if (this.context.permalinkManager.hasSearch()) {
             this.subscribe('application.isReady', () => {
                 if (this.state.application.isReady) {
-                    this.initialSearch();
+                    void this.initialSearch();
                 }
             });
         }
     }
+    flattenResultList(results) {
+        results ??= this.groupedResults;
+        return Object.values(results).flatMap((providerResults) => Object.values(providerResults).flat());
+    }
     clearSearch(purge = false) {
         if (purge) {
             if (this.searchInput) {
@@ -154,26 +157,26 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     }
     async doSearch(e) {
         this.showNoResultWarning = false;
-        // Cancel any previous search
-        this.abortController.abort();
-        // Create a new controller for the new request
-        this.abortController = new AbortController();
+        this.context.searchManager.abortSearch();
+        this.clearSearch();
         const target = e.target;
         const term = target.value.trim();
-        this.clearSearch();
-        if (this.COORD_REGEX.test(term)) {
-            this.displayCoordinates(term);
-            return;
-        }
         if (term.length > 0) {
             try {
-                const features = await this.fetchSearch(term);
-                // If the search term is at least two charecter but yieds no result, a warning
-                // box is displayed for 2 seconds and then fades out (CSS)
-                if (features.length === 0 && term.length >= 2) {
-                    this.showNoResultWarning = true;
+                const features = await this.context.searchManager.doSearch(term);
+                // Check if a search was performed at all (min term length!)
+                if (features !== null) {
+                    this.groupedResults = features;
+                    this.allResults = this.flattenResultList();
+                    if (!this.allResults.length) {
+                        // If the search did not yield any results, a warning
+                        // box is displayed for 2 seconds and then fades out (CSS)
+                        this.showNoResultWarning = true;
+                    }
                 }
-                this.displayResults(features);
+                // And then rerender the results
+                super.render();
+                super.girafeTranslate();
             }
             catch (error) {
                 if (error instanceof DOMException && error.name === 'AbortError') {
@@ -184,17 +187,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             }
         }
     }
-    async fetchSearch(term) {
-        const url = this.context.configManager.Config.search.url
-            .replace(this.searchTermPlaceholder, term)
-            .replace(this.searchLangPlaceholder, this.state.language);
-        const response = await fetch(url, { signal: this.abortController.signal });
-        const data = await response.json();
-        return this.geoJsonFormatter.readFeatures(data, {
-            dataProjection: this.context.configManager.getDefaultConfigValue('search.resultsSrid'),
-            featureProjection: this.map.getView().getProjection()
-        });
-    }
     /**
      * Debounce the fetch call to API to prevent sending request at every stroke.
      * @param e
@@ -213,64 +205,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             this.doSearch(syntheticEvent);
         }, 300);
     }
-    /**
-     * Will render the result of the search with coordinates
-     * @param term typed string
-     */
-    displayCoordinates(term) {
-        const matches = this.COORD_REGEX.exec(term);
-        const coord1 = Number.parseFloat(matches[1].replace(',', '.'));
-        const coord2 = Number.parseFloat(matches[2].replace(',', '.'));
-        const current_srid = this.map.getView().getProjection().getCode();
-        const [east_coord, north_coord] = parseCoordinates([coord1, coord2], this.maxExtent, current_srid);
-        // Don't show result if no corresponding coordinates were parsed
-        if (!east_coord || !north_coord) {
-            return;
-        }
-        const feature = new Feature({
-            geometry: new Point([east_coord, north_coord]),
-            label: `${coord1} ${coord2}`,
-            layer_name: 'recenter_map'
-        });
-        this.allResults = [feature];
-        this.groupedResults.recenter_map = [feature];
-        super.render();
-        super.girafeTranslate();
-    }
-    displayResults(features) {
-        // First, group the results
-        for (const result of features) {
-            // results.features.forEach((result) => {
-            let type = 'Unknown layer type';
-            if (result.get('layer_name')) {
-                type = result.get('layer_name');
-            }
-            else if (result.get('actions')[0].action.startsWith('add_theme')) {
-                type = 'add_theme';
-            }
-            else if (result.get('actions')[0].action.startsWith('add_group')) {
-                type = 'add_group';
-            }
-            else if (result.get('actions')[0].action.startsWith('add_layer')) {
-                type = 'add_layer';
-            }
-            let resultList;
-            if (type in this.groupedResults) {
-                resultList = this.groupedResults[type];
-            }
-            else {
-                resultList = [];
-                this.groupedResults[type] = resultList;
-            }
-            resultList.push(result);
-        }
-        // Manage a flat list with all results
-        this.allResults = Object.values(this.groupedResults).flat();
-        // And then rerender the results
-        super.render();
-        super.girafeTranslate();
-    }
-    getIcon(searchGroup) {
+    getGroupIcon(searchGroup) {
         switch (searchGroup) {
             case 'Group':
                 return LayerGroupIcon;
@@ -280,6 +215,21 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
                 return PinIcon;
         }
     }
+    getProviderClass(provider) {
+        if (Object.keys(this.groupedResults).length === 1 || provider === SEARCH_PROVIDER_DEFAULT) {
+            return 'hidden';
+        }
+        return 'provider entry';
+    }
+    getGroupClass(group) {
+        if (group === SEARCH_GROUP_DEFAULT) {
+            return 'hidden';
+        }
+        return 'group entry';
+    }
+    getLabel(result) {
+        return result.get('label_html') ? this.htmlUnsafe(result.get('label_html')) : result.get('label');
+    }
     onMouseOver(result) {
         this.focusResult(result);
     }
@@ -349,10 +299,10 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.forceHide = true;
         this.previewLayers = undefined;
         super.render();
-        const geom = feature.getGeometry();
-        if (geom) {
-            // Result with geometry
-            this.zoomTo(geom.getExtent());
+        // If the result has a specific zoom-to extent defined or contains a geometry, zoom to it
+        const zoomBbox = this.context.searchManager.getZoomToBbox(feature);
+        if (zoomBbox) {
+            this.zoomTo(zoomBbox);
         }
         else {
             this.addResultToTreeView(feature);
@@ -398,9 +348,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         }
     }
     zoomTo(extent) {
-        // We create a buffer around the extent from 50% of the width/height
-        const bufferValue = Math.max((getWidth(extent) * 50) / 100, (getHeight(extent) * 50) / 100);
-        const bufferedExtent = buffer(extent, bufferValue);
         const minResolution = this.context.configManager.Config.search.minResolution;
         const currentResolution = this.map.getView().getResolution();
         const currentExtent = this.map.getView().calculateExtent();
@@ -408,7 +355,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             if (currentResolution > minResolution) {
                 // If we are in a bigger resolution as the minimal one,
                 // Zoom to object with minResolution
-                this.context.mapManager.zoomToExtent(bufferedExtent, minResolution);
+                this.context.mapManager.zoomToExtent(extent, minResolution);
             }
             else if (!containsExtent(currentExtent, extent)) {
                 // Else, if the extent is NOT already within the current extent of the map
@@ -570,4 +517,16 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         return `data:image/svg+xml;utf8,${encodeURIComponent(pin)}`;
     }
 }
+__decorate([
+    UsedInTemplateOnly()
+], SearchComponent.prototype, "getGroupIcon", null);
+__decorate([
+    UsedInTemplateOnly()
+], SearchComponent.prototype, "getProviderClass", null);
+__decorate([
+    UsedInTemplateOnly()
+], SearchComponent.prototype, "getGroupClass", null);
+__decorate([
+    UsedInTemplateOnly()
+], SearchComponent.prototype, "getLabel", null);
 export default SearchComponent;

package/components/search/style.css

@@ -62,20 +62,29 @@
   scrollbar-width: thin;
 }
 
-.result,
-.title {
+.entry {
   display: inline-block;
   padding: 0.3rem 1rem;
-  width: Calc(36rem - 2rem);
+  width: calc(36rem - 2rem);
   line-height: 1.3rem;
+  color: var(--text-color);
 }
 
-.title {
-  color: var(--text-color);
+.provider,
+.group {
   font-weight: 600;
-  line-height: 2.5rem;
-  font-size: 1.3rem;
-  padding-top: 1.5rem;
+  line-height: 3rem;
+  font-size: 1.2rem;
+}
+
+.provider {
+  font-size: 1.5rem;
+  margin-top: 1rem;
+  background-color: color-mix(in srgb, var(--bkg-color-grad1) 75%, transparent);
+}
+
+#results > .provider:first-child {
+  margin-top: 0;
 }
 
 .result {
@@ -85,20 +94,19 @@
   background: transparent;
   text-align: left;
   width: 100%;
-  color: var(--text-color);
 }
 
-.title img {
+.entry img {
   margin-right: 1rem;
-  width: 14px;
+  width: 0.8em;
 }
 
-.title span {
+.entry span {
   text-transform: uppercase;
 }
 
 .result.selected {
-  background-color: #aaa !important;
+  background-color: var(--bkg-color-grad2) !important;
   color: var(--text-color);
 }
 

package/components/search-mobile/component.js

@@ -8,10 +8,10 @@ class MobileSearchComponent extends SearchComponent {
         return uHtml `<style>
 .hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
-.hidden{display:none}#searchbox{background-color:var(--bkg-color);z-index:101;border:none;border-radius:4px;flex-direction:row;width:100%;display:flex;position:absolute;box-shadow:0 0 10px 1px #0003}#search{z-index:2;-webkit-appearance:none;width:100%;color:var(--text-color);background:0 0;border:0;outline:none;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:0 0 0 .5rem;padding-left:.8rem;font-size:1.8em;line-height:1.8em}#search::placeholder{color:inherit;opacity:.4}#search:focus::placeholder{opacity:0;color:#0000;transition:opacity .3s}.search-icon,.close-icon,.select-color-icon{width:17px;color:var(--text-color);opacity:.7;padding:0 1rem}.close-button,.select-color-button{cursor:pointer;background-color:#0000;border:none;padding:0}#results{z-index:100;background-color:var(--bkg-color);scrollbar-width:thin;padding-top:7vh;position:fixed;inset:0;overflow-x:hidden}.result,.title{width:34rem;padding:.3rem 1rem;line-height:1.3rem;display:inline-block}.title{color:var(--text-color);padding-top:1.5rem;font-size:1.3rem;font-weight:600;line-height:2.5rem}.result{cursor:pointer;text-align:left;width:100%;color:var(--text-color);background:0 0;border:none;border-top:1px solid #ccc}.title img{width:14px;margin-right:1rem}.title span{text-transform:uppercase}.result.selected{color:var(--text-color);background-color:#aaa!important}#no-result{background:var(--warning-color);opacity:.75;visibility:hidden;pointer-events:none;border-radius:6px;width:fit-content;margin:auto;padding:.5rem 0;font-size:1rem;position:absolute;top:3rem;left:0;right:0}#no-result>span{padding:1.3rem}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.shown-then-fadeout{animation:2s ease-in-out forwards fadeOut;visibility:visible!important}
+.hidden{display:none}#searchbox{background-color:var(--bkg-color);z-index:101;border:none;border-radius:4px;flex-direction:row;width:100%;height:3rem;display:flex;position:absolute;box-shadow:0 0 10px 1px #0003}#search{z-index:2;-webkit-appearance:none;width:100%;color:var(--text-color);background:0 0;border:0;outline:none;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:0 0 0 .5rem;padding-left:.8rem;font-size:1.8em;line-height:1.8em}#search::placeholder{color:inherit;opacity:.4}#search:focus::placeholder{opacity:0;color:#0000;transition:opacity .3s}.search-icon,.close-icon,.select-color-icon{width:17px;color:var(--text-color);opacity:.7;padding:0 1rem}.close-button,.select-color-button{cursor:pointer;background-color:#0000;border:none;padding:0}#results{z-index:100;background-color:var(--bkg-color);scrollbar-width:thin;padding-top:calc(max(2.5em, calc(env(safe-area-inset-top) + .5rem)) + 3rem + 1rem);position:fixed;inset:0;overflow-x:hidden}.entry{width:34rem;color:var(--text-color);padding:.3rem 1rem;line-height:1.3rem;display:inline-block}.provider,.group{font-size:1.3rem;font-weight:600;line-height:3rem}.provider{background-color:color-mix(in srgb, var(--bkg-color-grad1) 75%, transparent);border:0 solid var(--bkg-color-grad2);border-width:1px 0;margin-top:1rem;font-size:1.5rem}#results>.provider:first-child{margin-top:0}.result{cursor:pointer;text-align:left;background:0 0;border:none;border-top:1px solid #ccc;width:100%}.entry img{width:.8em;margin-right:1rem}.entry span{text-transform:uppercase}.result.selected{color:var(--text-color);background-color:var(--bkg-color-grad2)!important}#no-result{background:var(--warning-color);opacity:.75;visibility:hidden;pointer-events:none;border-radius:6px;width:fit-content;margin:auto;padding:.5rem 0;font-size:1rem;position:absolute;top:3rem;left:0;right:0}#no-result>span{padding:1.3rem}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.shown-then-fadeout{animation:2s ease-in-out forwards fadeOut;visibility:visible!important}
 </style>
 <style>${this.customStyle}</style>
-<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><div id="searchbox"><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search" placeholder="Search..." oninput="${(e) => this.doSearchDebounced(e)}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button></div><div id="results" class="${Object.keys(this.groupedResults).length === 0 || this.forceHide ? 'hidden' : ''}">${Object.keys(this.groupedResults).map(group => uHtml `<div class="title"><img alt="result icon" src="${this.getIcon(group)}"> <span i18n="${group}"></span></div>${this.groupedResults[group].map(result => uHtml ` <button class="${result.get('selected') ? 'result selected' : 'result'}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}">${result.get('label')}</button> `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div>
+<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><div id="searchbox"><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search" placeholder="Search..." aria-label="Search" oninput="${(e) => this.doSearchDebounced(e)}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button></div><div id="results" class="${!this.allResults.length || this.forceHide ? 'hidden' : ''}">${(Object.keys(this.groupedResults) ?? []).map(provider => uHtml `<div class="${this.getProviderClass(provider)}"><img alt="provider icon" src="${this.searchIcon}"> <span i18n="${provider}">${provider}</span></div>${(Object.keys(this.groupedResults[provider]) ?? []).map(group => uHtml `<div class="${this.getGroupClass(group)}"><img alt="result icon" src="${this.getGroupIcon(group)}"> <span i18n="${group}">${group}</span></div>${(this.groupedResults[provider][group] ?? []).map(result => uHtml ` <button class="${result.get('selected') ? 'result entry selected' : 'result entry'}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}">${this.getLabel(result)}</button> `)} `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
 }