@geogirafe/lib-geoportal 1.2.0-dev.2873796427 → 1.2.0-dev.2889467567

package/api/apicontext.d.ts

@@ -46,8 +46,8 @@ export default class GirafeApiContext implements IGirafeContext {
     readonly themesManager: ThemesManager;
     readonly themesHelper: ThemesHelper;
     readonly permalinkManager: PermalinkManager;
-    readonly urlManager: UrlManager;
     readonly dragManager: DragManager;
+    readonly urlManager: UrlManager;
     readonly layerManager: LayerManager;
     readonly sessionManager: ApiSessionManager;
     readonly stateSerializer: StateSerializer;
@@ -72,6 +72,17 @@ export default class GirafeApiContext implements IGirafeContext {
     readonly themeFavoritesManager: ThemeFavoritesManager;
     readonly searchManager: SearchManager;
     readonly feedbackManager: FeedbackManager;
+    private readonly contextHelper;
     constructor();
     initialize(): Promise<void>;
+    /** The context can contains hook methods that will be called after each manager initialization.
+     * The hook method must be named with the property name + the "Hook" suffix.
+     * The hook method must be async and will be awaited
+     * For example, the methods themesManagerHook() will be called immediately after
+     * the call of themesManager.initializeSingleton().
+     * This allows specific initialization methods when defining custom contexts
+     * (for example for the apiContext, the mockContext, or any customContext)
+     */
+    protected configManagerHook(): Promise<void>;
+    protected stateManagerHook(): Promise<void>;
 }

package/api/apicontext.js

@@ -1,41 +1,6 @@
-// SPDX-License-Identifier: Apache-2.0
-import ApplicationLifeCycleManager from '../tools/app/lifecyclemanager.js';
-import AuthManager from '../tools/auth/authmanager.js';
-import DragManager from '../components/treeview/tools/dragmanager.js';
-import PluginManager from '../tools/auth/pluginmanager.js';
-import ConfigManager from '../tools/configuration/configmanager.js';
-import ErrorManager from '../tools/error/errormanager.js';
-import I18nManager from '../tools/i18n/i18nmanager.js';
-import LayerManager from '../tools/layers/layermanager.js';
-import SnapManager from '../tools/layers/snapmanager.js';
-import LocalFileManager from '../tools/localfile/localfilemanager.js';
-import LogManager from '../tools/logging/logmanager.js';
-import OfflineManager from '../tools/offline/offlinemanager.js';
-import OgcApiFeaturesManager from '../tools/ogcapi/ogcapifeaturesmanager.js';
-import OrderingManager from '../tools/ordering/orderingmanager.js';
-import ShareManager from '../tools/share/sharemanager.js';
-import StateSerializer from '../tools/share/stateserializer.js';
-import ComponentManager from '../tools/state/componentManager.js';
-import MapManager from '../tools/state/mapManager.js';
-import StateManager from '../tools/state/statemanager.js';
-import UserInteractionManager from '../tools/state/userInteractionManager.js';
-import CustomThemesManager from '../tools/themes/customthemesmanager.js';
-import ThemesHelper from '../tools/themes/themeshelper.js';
-import ThemesManager from '../tools/themes/themesmanager.js';
-import UserLayerManager from '../tools/themes/userlayermanager.js';
-import PermalinkManager from '../tools/url/permalinkmanager.js';
-import UrlManager from '../tools/url/urlmanager.js';
-import UserDataManager from '../tools/userdata/userdatamanager.js';
-import WfsManager from '../tools/wfs/wfsmanager.js';
-import WmsManager from '../tools/wms/wmsmanager.js';
-import WmtsManager from '../tools/wmts/wmtsmanager.js';
-import SelectionManager from '../tools/selection/selectionmanager.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';
 import { updateConfigPaths } from './apiutils.js';
+import ContextInitializationHelper from '../tools/context/contexthelper.js';
 export default class GirafeApiContext {
     userDataManager;
     configManager;
@@ -47,8 +12,8 @@ export default class GirafeApiContext {
     themesManager;
     themesHelper;
     permalinkManager;
-    urlManager;
     dragManager;
+    urlManager;
     layerManager;
     sessionManager;
     stateSerializer;
@@ -73,87 +38,30 @@ export default class GirafeApiContext {
     themeFavoritesManager;
     searchManager;
     feedbackManager;
+    contextHelper = new ContextInitializationHelper();
     constructor() {
-        this.componentManager = new ComponentManager(this);
-        this.userDataManager = new UserDataManager(this);
-        this.configManager = new ConfigManager(this);
-        this.logManager = new LogManager(this);
-        this.stateManager = new StateManager(this);
-        this.orderingManager = new OrderingManager(this);
-        this.applicationLifeCycleManager = new ApplicationLifeCycleManager(this);
-        this.mapManager = new MapManager(this);
-        this.offlineManager = new OfflineManager(this);
-        this.snapManager = new SnapManager(this);
-        this.authManager = new AuthManager(this);
-        this.pluginManager = new PluginManager(this);
-        this.i18nManager = new I18nManager(this);
-        this.userInteractionManager = new UserInteractionManager(this);
-        this.dragManager = new DragManager(this);
-        this.urlManager = new UrlManager(this);
-        this.permalinkManager = new PermalinkManager(this);
-        this.layerManager = new LayerManager(this);
-        this.userLayerManager = new UserLayerManager(this);
-        this.themesHelper = new ThemesHelper(this);
-        this.stateSerializer = new StateSerializer(this);
+        this.contextHelper.constructContext(this, ['sessionManager']);
         this.sessionManager = new ApiSessionManager(this);
-        this.shareManager = new ShareManager(this);
-        this.wfsManager = new WfsManager(this);
-        this.errorManager = new ErrorManager(this);
-        this.customThemesManager = new CustomThemesManager(this);
-        this.themesManager = new ThemesManager(this);
-        this.wmsManager = new WmsManager(this);
-        this.wmtsManager = new WmtsManager(this);
-        this.selectionManager = new SelectionManager(this);
-        this.localFileManager = new LocalFileManager(this);
-        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() {
-        // NOTE : This initialization order is important, because some singleton will need other ones !
-        this.componentManager.initializeSingleton();
-        this.userDataManager.initializeSingleton();
-        this.configManager.initializeSingleton();
-        await this.configManager.loadConfig();
+        await this.contextHelper.initializeContext(this);
+    }
+    /** The context can contains hook methods that will be called after each manager initialization.
+     * The hook method must be named with the property name + the "Hook" suffix.
+     * The hook method must be async and will be awaited
+     * For example, the methods themesManagerHook() will be called immediately after
+     * the call of themesManager.initializeSingleton().
+     * This allows specific initialization methods when defining custom contexts
+     * (for example for the apiContext, the mockContext, or any customContext)
+     */
+    async configManagerHook() {
+        await this.configManager.initializeSingleton();
         // For the API context, some configuraton options in the config file can be relative.
         // We have to convert them to absolute paths.
         updateConfigPaths(this.configManager.Config);
-        this.logManager.initializeSingleton();
-        this.logManager.initLogging();
-        this.stateManager.initializeSingleton();
+    }
+    async stateManagerHook() {
+        await this.stateManager.initializeSingleton();
         this.stateManager.state.interface.isApi = true;
-        this.orderingManager.initializeSingleton();
-        this.applicationLifeCycleManager.initializeSingleton();
-        this.mapManager.initializeSingleton();
-        this.offlineManager.initializeSingleton();
-        this.snapManager.initializeSingleton();
-        this.authManager.initializeSingleton();
-        this.pluginManager.initializeSingleton();
-        this.i18nManager.initializeSingleton();
-        this.userInteractionManager.initializeSingleton();
-        this.dragManager.initializeSingleton();
-        this.urlManager.initializeSingleton();
-        this.permalinkManager.initializeSingleton();
-        this.layerManager.initializeSingleton();
-        this.userLayerManager.initializeSingleton();
-        this.themesHelper.initializeSingleton();
-        this.stateSerializer.initializeSingleton();
-        this.sessionManager.initializeSingleton();
-        this.shareManager.initializeSingleton();
-        this.wfsManager.initializeSingleton();
-        this.errorManager.initializeSingleton();
-        this.customThemesManager.initializeSingleton();
-        this.themesManager.initializeSingleton();
-        this.wmsManager.initializeSingleton();
-        this.wmtsManager.initializeSingleton();
-        this.localFileManager.initializeSingleton();
-        this.selectionManager.initializeSingleton();
-        this.ogcApiFeaturesManager.initializeSingleton();
-        this.onBoardingManager.initializeSingleton();
-        this.themeFavoritesManager.initializeSingleton();
-        this.searchManager.initializeSingleton();
-        this.feedbackManager.initializeSingleton();
     }
 }

package/api/apisessionmanager.d.ts

@@ -1,7 +1,7 @@
 import GirafeSingleton from '../base/GirafeSingleton.js';
 import ISessionManager from '../tools/share/isessionmanager.js';
 declare class ApiSessionManager extends GirafeSingleton implements ISessionManager {
-    initializeSingleton(): void;
+    initializeSingleton(): Promise<void>;
     beginSession(): void;
     saveStateToSession(): void;
     hasState(): boolean;

package/api/apisessionmanager.js

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import GirafeSingleton from '../base/GirafeSingleton.js';
 class ApiSessionManager extends GirafeSingleton {
-    initializeSingleton() {
+    async initializeSingleton() {
         /* For the API: Do Nothing */
     }
     beginSession() {

package/base/GirafeSingleton.d.ts

@@ -2,7 +2,7 @@ import IGirafeContext from '../tools/context/icontext.js';
 declare class GirafeSingleton {
     protected readonly context: IGirafeContext;
     constructor(context: IGirafeContext);
-    initializeSingleton(): void;
+    initializeSingleton(): Promise<void>;
     protected isNullOrUndefinedOrBlank(val: unknown): val is "" | null | undefined;
 }
 export default GirafeSingleton;

package/base/GirafeSingleton.js

@@ -4,7 +4,7 @@ class GirafeSingleton {
     constructor(context) {
         this.context = context;
     }
-    initializeSingleton() {
+    async initializeSingleton() {
         /*
          * This method does nothing by default, but will be called by the context when creating the singleton
          * (This prevent overriding the constructor in every songleton and creating a strong dependency to the context object)

package/components/navigation/component.d.ts

@@ -15,8 +15,8 @@ declare class NavigationComponent extends GirafeHTMLElement {
     render(): void;
     addBookmark(): Promise<void>;
     removeBookmark(bookmark: Bookmark): Promise<void>;
-    saveBookmarks(): void;
-    loadBookmarks(): void;
+    private saveBookmarks;
+    private loadBookmarks;
     registerEvents(): void;
     onPositionChanged(position: MapPosition): void;
     navigateBack(): void;

package/components/navigation/component.js

@@ -36,7 +36,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         if (name) {
             const bookmark = new Bookmark(name, this.state.position);
             this.bookmarks.push(bookmark);
-            this.saveBookmarks();
+            await this.saveBookmarks();
             super.render();
             super.girafeTranslate();
         }
@@ -48,17 +48,17 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             if (index >= 0) {
                 this.bookmarks.splice(index, 1);
             }
-            this.saveBookmarks();
+            await this.saveBookmarks();
             super.render();
             super.girafeTranslate();
         }
     }
-    saveBookmarks() {
-        this.context.userDataManager.saveUserData(this.storagePath, this.bookmarks);
+    async saveBookmarks() {
+        await this.context.userDataManager.saveUserData(this.storagePath, this.bookmarks);
     }
-    loadBookmarks() {
+    async loadBookmarks() {
         this.bookmarks = [];
-        const storedBookmarks = this.context.userDataManager.getUserData(this.storagePath);
+        const storedBookmarks = (await this.context.userDataManager.getUserData(this.storagePath));
         if (storedBookmarks) {
             for (const bookmark of storedBookmarks) {
                 try {

package/components/news/news-button/component.d.ts

@@ -7,7 +7,6 @@ declare class NewsButtonComponent extends GirafeHTMLElement {
     warn: boolean;
     constructor();
     setWarn(): void;
-    loadLastViewDate(): void;
     getIcon(): "icons/bell-warn.svg" | "icons/bell.svg";
     connectedCallback(): void;
 }

package/components/news/news-button/component.js

@@ -26,12 +26,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         }
         super.render();
     }
-    loadLastViewDate() {
-        const lastViewDate = this.context.userDataManager.getUserData('lastViewDate');
-        if (lastViewDate) {
-            this.context.stateManager.state.news.lastViewDate = lastViewDate;
-        }
-    }
     getIcon() {
         const icon = this.warn ? 'icons/bell-warn.svg' : 'icons/bell.svg';
         return icon;

package/components/news/news-panel/component.d.ts

@@ -10,8 +10,8 @@ declare class NewsPanelComponent extends GirafeHTMLElement implements IGirafePan
     panelTogglePath: string;
     entries: FeedEntry[];
     constructor();
-    saveLastViewDate(): void;
-    loadLastViewDate(): void;
+    saveLastViewDate(): Promise<void>;
+    private loadLastViewDate;
     togglePanel(visible: boolean): void;
     render(): void;
     private initializeNewsState;

package/components/news/news-panel/component.js

@@ -22,13 +22,13 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     constructor() {
         super('news-panel');
     }
-    saveLastViewDate() {
+    async saveLastViewDate() {
         const currentTimestamp = Date.now();
-        this.context.userDataManager.saveUserData('lastViewDate', currentTimestamp);
+        await this.context.userDataManager.saveUserData('lastViewDate', currentTimestamp);
         this.context.stateManager.state.news.lastViewDate = currentTimestamp;
     }
-    loadLastViewDate() {
-        const raw = this.context.userDataManager.getUserData('lastViewDate');
+    async loadLastViewDate() {
+        const raw = await this.context.userDataManager.getUserData('lastViewDate');
         const lastViewDate = Number(raw);
         this.context.stateManager.state.news.lastViewDate = Number.isFinite(lastViewDate) ? lastViewDate : 0;
     }
@@ -52,7 +52,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         if (!this.context.configManager.Config.news) {
             return;
         }
-        this.loadLastViewDate();
+        await this.loadLastViewDate();
         const urls = this.context.configManager.Config.news.urls;
         this.entries = await loadFeeds(urls);
         // Update state manager

package/components/search-filter/component.d.ts

@@ -8,6 +8,7 @@ interface CategoryEntry {
     provider: string;
     category: string;
     label: string;
+    example?: string;
 }
 declare class SearchFilterComponent extends GirafeHTMLElement {
     protected templateUrl: string | null;
@@ -19,6 +20,7 @@ declare class SearchFilterComponent extends GirafeHTMLElement {
     private categories;
     private availableShortcuts;
     private selectedCategories;
+    private filterExamples;
     private fsmState;
     private focusedShortcutIndex;
     private readonly numberOfChipsToShow;

package/components/search-filter/component.js

@@ -15,10 +15,10 @@ class SearchFilterComponent extends GirafeHTMLElement {
         return uHtml `<style>
 .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}button,input,select,textarea{font:inherit}.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);cursor:pointer;width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.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:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){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}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style><style>
-#search-filter-root{--active-color:#2563eb;--chip-text-color:#102e91;--chip-bg-color:#dbeafe;--chip-width:7rem;width:max-content;max-width:100%;color:var(--text-color);align-items:center;gap:.4rem;display:inline-flex;position:relative}#search-filter-button{background:var(--bkg-color);cursor:pointer;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;min-width:2.25rem;height:2.25rem;display:inline-flex;position:relative}#search-filter-button.active{border-color:var(--active-color);background:var(--bkg-color);box-shadow:inset 0 0 0 2px #2563eb33}#search-filter-button.active .filter-icon{filter:invert(35%)sepia()saturate(400%)hue-rotate(190deg)}.filter-icon{width:20px;height:20px}.badge{background:var(--active-color);color:#fff;text-align:center;border-radius:5rem;min-width:1rem;height:1rem;padding:0 .15rem;font-size:.7rem;line-height:1rem;position:absolute;top:-.25rem;right:-.5rem}#search-filter-chips{align-items:center;gap:.35rem;min-width:0;display:flex}.chip{background:var(--chip-bg-color);color:var(--chip-text-color);border:1px solid var(--chip-text-color);max-width:var(--chip-width);cursor:pointer;border-radius:5rem;flex:none;align-items:center;height:1.1rem;padding:.1rem .5rem;font-size:.8rem;display:inline-flex}.chip-label{color:inherit;cursor:pointer;background:0 0;border:none;outline:none;width:100%;min-width:0;padding:0}.chip-remove{color:var(--chip-text-color);cursor:pointer;background:0 0;border:none;width:1rem;height:1rem;padding:0;font-size:1rem;line-height:1}#search-filter-menu{width:100%;min-width:28rem;max-width:min(36rem,50vw);color:var(--text-color);background:var(--bkg-color);border:var(--app-standard-border);z-index:1001;border-radius:4px;flex-direction:column;min-height:0;max-height:min(31rem,60vh);display:flex;position:absolute;top:3.15rem;left:0;overflow:hidden}.menu-header{background:var(--bkg-color);border-bottom:var(--app-standard-border);z-index:1002;padding:1rem 1rem .5rem;position:sticky;top:0}.category-title{padding-bottom:.75rem;font-size:1rem;font-weight:700}.menu-actions{gap:.35rem;display:flex}.menu-action{border:var(--app-standard-border);background:var(--bkg-color);cursor:pointer;border-radius:4px;padding:.15rem .5rem}.shortcut-title{align-self:center;margin:0 .5rem 0 auto;font-size:.85rem}.menu-list{scrollbar-width:thin;flex-direction:column;padding:.5rem;display:flex;overflow:auto}.category-row{cursor:pointer;border-radius:4px;align-items:center;gap:.4rem;padding:.25rem;display:flex}.category-row:hover{background-color:var(--bkg-color-grad1)}.category-label{min-width:0;margin-right:auto}.shortcut{color:var(--text-color-grad1);font-family:monospace;font-size:.85rem}.shortcut-header{padding:.5rem;font-style:italic}.shortcut-row{background:var(--bkg-color);color:var(--text-color);cursor:pointer;text-align:left;border:0 solid #0000;border-radius:4px;align-items:center;padding:.5rem;display:flex}.shortcut-row:hover,.shortcut-row:focus,.shortcut-row.active{background-color:var(--bkg-color-grad1);outline:none}.shortcut-row>.shortcut{min-width:4rem}.text-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
+#search-filter-root{--active-color:#2563eb;--chip-text-color:#102e91;--chip-bg-color:#dbeafe;--chip-width:7rem;width:max-content;max-width:100%;color:var(--text-color);align-items:center;gap:.4rem;display:inline-flex;position:relative}#search-filter-button{background:var(--bkg-color);cursor:pointer;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;min-width:2.25rem;height:2.25rem;display:inline-flex;position:relative}#search-filter-button.active{border-color:var(--active-color);background:var(--bkg-color);box-shadow:inset 0 0 0 2px #2563eb33}#search-filter-button.active .filter-icon{filter:invert(35%)sepia()saturate(400%)hue-rotate(190deg)}.filter-icon{width:20px;height:20px}.badge{background:var(--active-color);color:#fff;text-align:center;border-radius:5rem;min-width:1rem;height:1rem;padding:0 .15rem;font-size:.7rem;line-height:1rem;position:absolute;top:-.25rem;right:-.5rem}#search-filter-chips{align-items:center;gap:.35rem;min-width:0;display:flex}.chip{background:var(--chip-bg-color);color:var(--chip-text-color);border:1px solid var(--chip-text-color);max-width:var(--chip-width);cursor:pointer;border-radius:5rem;flex:none;align-items:center;height:1.1rem;padding:.1rem .5rem;font-size:.8rem;display:inline-flex}.chip-label{color:inherit;cursor:pointer;background:0 0;border:none;outline:none;width:100%;min-width:0;padding:0}.chip-remove{color:var(--chip-text-color);cursor:pointer;background:0 0;border:none;width:1rem;height:1rem;padding:0;font-size:1rem;line-height:1}#search-filter-menu{width:100%;min-width:28rem;max-width:min(36rem,50vw);color:var(--text-color);background:var(--bkg-color);border:var(--app-standard-border);z-index:1001;border-radius:4px;flex-direction:column;min-height:0;max-height:min(31rem,60vh);display:flex;position:absolute;top:3.15rem;left:0;overflow:hidden}.menu-header{background:var(--bkg-color);border-bottom:var(--app-standard-border);z-index:1002;padding:1rem 1rem .5rem;position:sticky;top:0}.category-title{padding-bottom:.75rem;font-size:1rem;font-weight:700}.menu-actions{gap:.35rem;display:flex}.menu-action{border:var(--app-standard-border);background:var(--bkg-color);cursor:pointer;border-radius:4px;padding:.15rem .5rem}.shortcut-title{align-self:center;margin:0 .5rem 0 auto;font-size:.85rem}.menu-list{scrollbar-width:thin;flex-direction:column;padding:.5rem;display:flex;overflow:auto}.category-row{cursor:pointer;border-radius:4px;align-items:center;gap:.4rem;padding:.25rem;display:flex}.category-row:hover{background-color:var(--bkg-color-grad1)}.category-label{min-width:0;margin-right:auto}.category-example{font-size:.8em}.shortcut{color:var(--text-color-grad1);font-family:monospace;font-size:.85rem}.shortcut-header{padding:.5rem;font-style:italic}.shortcut-row{background:var(--bkg-color);color:var(--text-color);cursor:pointer;text-align:left;border:0 solid #0000;border-radius:4px;align-items:center;padding:.5rem;display:flex}.shortcut-row:hover,.shortcut-row:focus,.shortcut-row.active{background-color:var(--bkg-color-grad1);outline:none}.shortcut-row>.shortcut{min-width:4rem}.text-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
 </style>
 <style>${this.customStyle}</style>
-<div id="search-filter-root" class="${this.enabled ? '' : 'hidden'}"><button id="search-filter-button" class="${this.isFilterActive() ? 'active' : ''}" type="button" title="Filter categories" aria-label="Filter categories" aria-expanded="${this.isMenuOpen()}" aria-haspopup="dialog" onclick="${(e) => this.onFilterButtonClick(e)}"><img class="filter-icon" alt="filter icon" src="icons/filter.svg"> <span class="${this.getSelectionCount() > 0 ? 'badge' : 'hidden'}">${this.getSelectionCount()}</span></button><div id="search-filter-chips" class="${this.getSelectedCategoryEntries().length > 0 ? '' : 'hidden'}">${this.getSelectedCategoryEntries(true).map((entry) => uHtml `<div class="chip"><button class="chip-label text-ellipsis" i18n="${entry.label}" onclick="${(e) => this.onChipClick(e)}">${entry.label}</button> <button class="chip-remove" type="button" title="Remove category" aria-label="Remove category" onclick="${(e) => this.onRemoveChip(entry, e)}">×</button></div>`)} ${this.getNumberOfOverflowChips() ? uHtml `<div class="chip"><button class="chip-label text-ellipsis" onclick="${(e) => this.onChipClick(e)}">${this.getNumberOfOverflowChipsAsLabel()}</button></div>` : ''}</div>${this.isMenuOpen() ? uHtml `<div id="search-filter-menu">${this.isCategoriesOpen() ? uHtml `<div class="menu-header"><div i18n="Filter categories" class="category-title">Search categories</div><div class="menu-actions"><button class="gg-button gg-medium menu-action" type="button" i18n="Select all" onclick="${(e) => this.onSelectAll(e)}">Select all</button> <button class="gg-button gg-medium menu-action" type="button" i18n="Reset" onclick="${(e) => this.onClearSelection(e)}">Reset</button><div class="${this.hasShortcutsConfigured() ? 'shortcut-title' : 'hidden'}"><span i18n="Shortcut">Shortcut</span></div></div></div><div class="menu-list">${this.getAllCategoriesFlattened().map((entry) => uHtml ` <label class="category-row"><input type="checkbox" value="${entry.key}" class="gg-checkbox" .checked="${this.isCategorySelected(entry)}" onchange="${(e) => this.onCategoryToggle(entry, e)}"> <span class="category-label text-ellipsis" i18n="${entry.label}">${entry.label}</span> <span class="shortcut">${this.getShortcutForCategory(entry)}</span></label> `)}</div>` : ''} ${this.isShortcutsOpen() ? uHtml `<div class="menu-header shortcut-header" i18n="Type or select a shortcut from the list to quickly filter search results.">Type or select a shortcut from the list to quickly filter search results.</div><div id="shortcut-list" class="menu-list">${this.getShortcutEntries().map((shEntry) => uHtml ` <button type="button" class="shortcut-row" data-shortcut="${shEntry.shortcut}" onkeydown="${(e) => this.onShortcutListDown(e)}" onclick="${() => this.onShortcutClick(shEntry.shortcut)}"><span class="shortcut">${this.currentPrefixSymbol}${shEntry.shortcut}</span> <span class="text-ellipsis">${shEntry.categoriesList}</span></button> `)} ` : ''}</div></div>` : ''}</div>
+<div id="search-filter-root" class="${this.enabled ? '' : 'hidden'}"><button id="search-filter-button" class="${this.isFilterActive() ? 'active' : ''}" type="button" title="Filter categories" aria-label="Filter categories" aria-expanded="${this.isMenuOpen()}" aria-haspopup="dialog" onclick="${(e) => this.onFilterButtonClick(e)}"><img class="filter-icon" alt="filter icon" src="icons/filter.svg"> <span class="${this.getSelectionCount() > 0 ? 'badge' : 'hidden'}">${this.getSelectionCount()}</span></button><div id="search-filter-chips" class="${this.getSelectedCategoryEntries().length > 0 ? '' : 'hidden'}">${this.getSelectedCategoryEntries(true).map((entry) => uHtml `<div class="chip"><button class="chip-label text-ellipsis" i18n="${entry.label}" onclick="${(e) => this.onChipClick(e)}">${entry.label}</button> <button class="chip-remove" type="button" title="Remove category" aria-label="Remove category" onclick="${(e) => this.onRemoveChip(entry, e)}">×</button></div>`)} ${this.getNumberOfOverflowChips() ? uHtml `<div class="chip"><button class="chip-label text-ellipsis" onclick="${(e) => this.onChipClick(e)}">${this.getNumberOfOverflowChipsAsLabel()}</button></div>` : ''}</div>${this.isMenuOpen() ? uHtml `<div id="search-filter-menu">${this.isCategoriesOpen() ? uHtml `<div class="menu-header"><div i18n="Filter categories" class="category-title">Search categories</div><div class="menu-actions"><button class="gg-button gg-medium menu-action" type="button" i18n="Select all" onclick="${(e) => this.onSelectAll(e)}">Select all</button> <button class="gg-button gg-medium menu-action" type="button" i18n="Reset" onclick="${(e) => this.onClearSelection(e)}">Reset</button><div class="${this.hasShortcutsConfigured() ? 'shortcut-title' : 'hidden'}"><span i18n="Shortcut">Shortcut</span></div></div></div><div class="menu-list">${this.getAllCategoriesFlattened().map((entry) => uHtml ` <label class="category-row"><input type="checkbox" value="${entry.key}" class="gg-checkbox" .checked="${this.isCategorySelected(entry)}" onchange="${(e) => this.onCategoryToggle(entry, e)}"> <span class="category-label text-ellipsis" title="${entry.example ? `${entry.label} (${entry.example})` : entry.label}"><span i18n="${entry.label}">${entry.label}</span> ${entry.example ? uHtml ` <span class="category-example">(<span i18n="${entry.example}">${entry.example}</span>)</span> ` : ''} </span><span class="shortcut">${this.getShortcutForCategory(entry)}</span></label> `)}</div>` : ''} ${this.isShortcutsOpen() ? uHtml `<div class="menu-header shortcut-header" i18n="Type or select a shortcut from the list to quickly filter search results.">Type or select a shortcut from the list to quickly filter search results.</div><div id="shortcut-list" class="menu-list">${this.getShortcutEntries().map((shEntry) => uHtml ` <button type="button" class="shortcut-row" data-shortcut="${shEntry.shortcut}" onkeydown="${(e) => this.onShortcutListDown(e)}" onclick="${() => this.onShortcutClick(shEntry.shortcut)}"><span class="shortcut">${this.currentPrefixSymbol}${shEntry.shortcut}</span> <span class="text-ellipsis">${shEntry.categoriesList}</span></button> `)} ` : ''}</div></div>` : ''}</div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     enabled = false;
@@ -27,6 +27,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     categories = {};
     availableShortcuts = {};
     selectedCategories = new Map();
+    filterExamples = {};
     fsmState = 'Idle';
     focusedShortcutIndex = -1;
     numberOfChipsToShow = 1;
@@ -54,6 +55,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.prefixSymbols = searchConfig?.filterShortcutPrefix ?? ['#'];
         this.currentPrefixSymbol = this.prefixSymbols[0];
         this.availableShortcuts = searchConfig?.filterShortcuts ?? {};
+        this.filterExamples = searchConfig?.filterExamples ?? {};
         this.sanitizeShortcuts();
         this.refreshRender();
     }
@@ -192,7 +194,8 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             key: `${provider}-${category}`,
             provider,
             category: category,
-            label: this.context.searchManager.getI18nKeyForCategory(provider, category)
+            label: this.context.searchManager.getI18nKeyForCategory(provider, category),
+            example: this.filterExamples[category]
         };
     }
     categoryEntriesToSearchCategories() {

package/components/search-filter/style.css

@@ -183,6 +183,10 @@
   margin-right: auto;
 }
 
+.category-example {
+  font-size: 0.8em;
+}
+
 .shortcut {
   font-size: 0.85rem;
   font-family: monospace;

package/components/themes/component.d.ts

@@ -25,7 +25,7 @@ declare class ThemeComponent extends GirafeHTMLElement {
     onThemeChanged(theme: ThemeLayer | CustomTheme): void;
     isThemeActive(theme: ThemeLayer | CustomTheme): boolean;
     isThemeFavorite(theme: ThemeLayer | CustomTheme): boolean;
-    onThemeFavoriteChanged(theme: ThemeLayer | CustomTheme, e: Event): void;
+    onThemeFavoriteChanged(theme: ThemeLayer | CustomTheme, e: Event): Promise<void>;
     isThemeTypeActive(themeType: ThemeType): boolean;
     isCustomTheme(theme: ThemeLayer | CustomTheme): theme is CustomTheme;
     onCustomThemeChanged(customTheme: CustomTheme): void;

package/components/themes/component.js

@@ -117,10 +117,10 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     isThemeFavorite(theme) {
         return this.context.themeFavoritesManager.isThemeInFavorites(theme);
     }
-    onThemeFavoriteChanged(theme, e) {
+    async onThemeFavoriteChanged(theme, e) {
         e.preventDefault();
         e.stopPropagation();
-        this.context.themeFavoritesManager.addOrRemoveThemeFromFavorites(theme);
+        await this.context.themeFavoritesManager.addOrRemoveThemeFromFavorites(theme);
         this.render();
     }
     isThemeTypeActive(themeType) {
@@ -136,7 +136,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     async onAddCustomTheme() {
         const themeName = await window.gPrompt('Enter a name for your custom theme', 'Create custom theme', 'Enter a name...');
         if (themeName !== false && themeName.trim().length > 0) {
-            this.context.customThemesManager.addTheme(themeName, this.state.layers.layersList);
+            await this.context.customThemesManager.addTheme(themeName, this.state.layers.layersList);
             this.render();
         }
     }
@@ -144,7 +144,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         e.stopPropagation();
         const confirm = await window.gConfirm('Do you want to delete this theme?', 'Delete Theme');
         if (confirm) {
-            this.context.customThemesManager.deleteTheme(customTheme);
+            await this.context.customThemesManager.deleteTheme(customTheme);
             this.render();
         }
     }

package/components/userpreferences/component.d.ts

@@ -59,7 +59,7 @@ export default class UserPreferencesComponent extends GirafeHTMLElement implemen
     /**
      Update state and local storage with new value
      */
-    changePreference(preferenceKey: string, newValue: unknown): void;
+    changePreference(preferenceKey: string, newValue: unknown): Promise<void>;
     /**
      Update the config object with the new value
      */

package/components/userpreferences/component.js

@@ -272,12 +272,12 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     /**
      Update state and local storage with new value
      */
-    changePreference(preferenceKey, newValue) {
+    async changePreference(preferenceKey, newValue) {
         if (this.preferences[preferenceKey]) {
             this.preferences[preferenceKey].currentValue = newValue;
             this.updatePreferenceInConfig(preferenceKey);
             this.updatePreferenceInState(preferenceKey);
-            this.updatePreferenceInStorage(preferenceKey);
+            await this.updatePreferenceInStorage(preferenceKey);
             this.refreshRender();
         }
     }
@@ -300,10 +300,10 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     /**
      Save the user preference as a config override in user data storage
      */
-    updatePreferenceInStorage(preferenceKey) {
+    async updatePreferenceInStorage(preferenceKey) {
         const preference = this.preferences[preferenceKey];
         // Values are saved under 'configOverrides' in the same structure as in the config
-        this.context.userDataManager.saveUserData(`${this.storagePath}.${preference.configPath}`, preference.currentValue);
+        await this.context.userDataManager.saveUserData(`${this.storagePath}.${preference.configPath}`, preference.currentValue);
     }
     /**
      * Reset user preferences back to defaults. This will delete the configOverrides object in storage and set the
@@ -312,11 +312,11 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     async onResetAll() {
         const confirm = await window.gConfirm('Reset user preferences back to default values?', 'Reset preferences');
         if (confirm) {
-            this.resetAll();
+            await this.resetAll();
         }
     }
-    resetAll() {
-        this.context.userDataManager.deleteUserData(this.storagePath);
+    async resetAll() {
+        await this.context.userDataManager.deleteUserData(this.storagePath);
         for (const preferenceKey in this.preferences) {
             this.preferences[preferenceKey].currentValue = this.context.configManager.getDefaultConfigValue(this.preferences[preferenceKey].configPath);
             this.updatePreferenceInState(preferenceKey);

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2873796427",
+  "version": "1.2.0-dev.2889467567",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2873796427", "build":"2873796427", "date":"23/09/2026"}
+{"version":"1.2.0-dev.2889467567", "build":"2889467567", "date":"28/09/2026"}

package/tools/app/lifecyclemanager.d.ts

@@ -1,7 +1,7 @@
 import GirafeSingleton from '../../base/GirafeSingleton.js';
 export default class ApplicationLifeCycleManager extends GirafeSingleton {
     private get state();
-    initializeSingleton(): void;
+    initializeSingleton(): Promise<void>;
     private log;
     /**
      * For the application to be ready to load the themes and to deserialize the shared state or the session,

package/tools/app/lifecyclemanager.js

@@ -4,7 +4,7 @@ export default class ApplicationLifeCycleManager extends GirafeSingleton {
     get state() {
         return this.context.stateManager.state;
     }
-    initializeSingleton() {
+    async initializeSingleton() {
         this.context.stateManager.subscribe('themes.isLoaded', (_, isThemesLoaded) => {
             this.log(isThemesLoaded, 'Themes are loaded');
             this.checkApplicationReady();

package/tools/auth/abstractconnectmanager.js

@@ -60,10 +60,10 @@ export default class AbstractConnectManager {
         return url.toString();
     }
     loadFromLocalStorage(path) {
-        return this.context.userDataManager.getUserData(`${this.storagePath}.${path}`, true) ?? '';
+        return this.context.userDataManager.getFromLocalStorage(`${this.storagePath}.${path}`) ?? '';
     }
     saveToLocalStorage(path, value) {
-        return this.context.userDataManager.saveUserData(`${this.storagePath}.${path}`, value, true);
+        this.context.userDataManager.saveToLocalStorage(`${this.storagePath}.${path}`, value);
     }
     resetUrl() {
         const url = new URL(this.context.urlManager.getBaseUrlPath());

package/tools/auth/authmanager.d.ts

@@ -6,7 +6,7 @@ export default class AuthManager extends GirafeSingleton {
     private readonly gmfManager;
     private get state();
     constructor(context: IGirafeContext);
-    initializeSingleton(): void;
+    initializeSingleton(): Promise<void>;
     initialize(sw: ServiceWorker | null): Promise<void>;
     private initializeOAuth;
     private initializeGmfAuth;

package/tools/auth/authmanager.js

@@ -15,7 +15,7 @@ export default class AuthManager extends GirafeSingleton {
         super(context);
         this.gmfManager = new GMFManager(this.context);
     }
-    initializeSingleton() {
+    async initializeSingleton() {
         this.context.stateManager.subscribe('oauth.status', () => this.loginStateChanged());
         this.context.stateManager.subscribe('oauth.tokens', () => this.tokensChanged());
     }

package/tools/auth/pluginmanager.d.ts

@@ -1,6 +1,6 @@
 import GirafeSingleton from '../../base/GirafeSingleton.js';
 declare class PluginManager extends GirafeSingleton {
-    initializeSingleton(): void;
+    initializeSingleton(): Promise<void>;
     filterPlugins(dom: DocumentFragment | Document): void;
     private filterPluginFromConfig;
     private filterPlugin;

package/tools/auth/pluginmanager.js

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import GirafeSingleton from '../../base/GirafeSingleton.js';
 class PluginManager extends GirafeSingleton {
-    initializeSingleton() {
+    async initializeSingleton() {
         this.context.stateManager.subscribe('oauth.userInfo', () => this.filterPlugins(document));
         this.filterPlugins(document);
     }