@geogirafe/lib-geoportal 1.1.0-dev.2454789578 → 1.1.0-dev.2456794124

package/LICENSE

@@ -290,6 +290,17 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+-------------------------------------------------------------------------------
+
+Thanks to the Invisible Artists
+
+Some images in this project come from the public domain.  
+Their names may have faded with time, but their impact has not.  
+Thanks a lot to them:
+
+- https://openclipart.org/artist/nadsud
+
+
 -------------------------------------------------------------------------------
 
 ===============================================================================

package/api/apigeogirafeapp.d.ts

@@ -1,8 +1,9 @@
 import GirafeHTMLElement from '../base/GirafeHTMLElement.js';
 import IGirafeContext from '../tools/context/icontext.js';
 export default class GeoGirafeApi extends GirafeHTMLElement {
-    protected templateUrl: string;
-    protected styleUrls: string[];
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
     private isInitialized;
     constructor();
     private get config();

package/api/apigeogirafeapp.js

@@ -1,3 +1,4 @@
+import { html as uHtml } from 'uhtml';
 // SPDX-License-Identifier: Apache-2.0
 import proj4 from 'proj4';
 import GirafeHTMLElement from '../base/GirafeHTMLElement.js';
@@ -10,8 +11,16 @@ import MapCustomContextMenuComponent from '../components/context-menu/custom-con
 import SearchComponent from '../components/search/component.js';
 import SelectionWindowComponent from '../components/selectionwindow/component.js';
 export default class GeoGirafeApi extends GirafeHTMLElement {
-    templateUrl = './template.html';
-    styleUrls = ['../styles/common.css', './style.css'];
+    templateUrl = null;
+    styleUrls = null;
+    template = () => {
+        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>
+:host{position:relative}girafe-map{width:100%;height:100%;position:relative}girafe-basemap{display:block;position:absolute;bottom:.5rem;left:.5rem}girafe-search{width:50%;height:2.25rem;display:block;position:absolute;top:.5rem;left:.5rem;box-shadow:0 1px 4px #0000004d}girafe-selection-window{z-index:100;width:400px;height:240px;position:absolute;bottom:1rem;right:1rem}
+</style>
+<girafe-map></girafe-map>`;
+    };
     isInitialized = false;
     constructor() {
         super('geogirafe-api');
@@ -277,7 +286,10 @@ export default class GeoGirafeApi extends GirafeHTMLElement {
     }
     injectConfigMetaTags() {
         const location = new URL(import.meta.url);
+        // The 2 following lines are a small hack to make the api interface work in both context
+        // (debugging in vite + production app)
         location.pathname = location.pathname.replace('/src/api', '');
+        location.pathname = location.pathname.replace('/node_modules/.vite/deps', '');
         const origin = `${location.origin}${location.pathname.substring(0, location.pathname.lastIndexOf('/'))}`;
         const baseConfigUrl = `${origin}/config.json`;
         const apiConfigUrl = `${origin}/config.api.json`;

package/assets/i18n/de.json

@@ -181,6 +181,8 @@
     "help": "Hilfe",
     "help-basemap": "Wählen Sie aus den verfügbaren Hintergrundkarten, um Ihre Ansicht anzupassen.",
     "help-menu": "Greifen Sie auf erweiterte Werkzeuge zu, wie Drucken, Zeichnen, 3D-Ansicht und mehr.",
+    "help-onboarding": "Starten Sie die Onboarding Tour erneut.",
+    "help-onboarding-link": "Klicken Sie hier zum starten.",
     "help-search": "Suchen Sie nach einem Ort, einer Adresse, einer Karte oder Geodaten.",
     "help-themes": "Entdecken Sie die verfügbaren Themen. Nach der Auswahl werden die zugehörigen Karten automatisch geladen.",
     "help-user-preferences": "Verwalten Sie Ihre Benutzereinstellungen, einschließlich Sprache, Anzeigemodus und Kartenoptionen.",

package/assets/i18n/en.json

@@ -182,6 +182,8 @@
     "help": "Help",
     "help-basemap": "Choose from available background layers to customize your view.",
     "help-menu": "Access advanced tools such as printing, drawing, 3D view, and more.",
+    "help-onboarding": "Restart the onboarding tour.",
+    "help-onboarding-link": "Click here to start.",
     "help-search": "Search for a place, address, map, or geographic data.",
     "help-themes": "Explore available topics. Once selected, the associated maps load automatically.",
     "help-user-preferences": "Manage your user preferences, like language, display mode and map options.",

package/assets/i18n/fr.json

@@ -181,6 +181,8 @@
     "help": "Aide",
     "help-basemap": "Choisissez les fonds de carte disponibles pour personnaliser votre affichage.",
     "help-menu": "Accédez à des outils avancés comme l'impression, le dessin, la vue 3D, et plus encore.",
+    "help-onboarding": "Relancer le tour d'onboarding.",
+    "help-onboarding-link": "Cliquez ici pour commencer.",
     "help-search": "Recherchez un lieu, une adresse, une carte ou une donnée géographique.",
     "help-themes": "Explorez les thèmes disponibles. Une fois un thème sélectionné, les cartes associées s'affichent automatiquement.",
     "help-user-preferences": "Gérez vos préférences utilisateur, notamment la langue, le mode d'affichage et les options de la carte.",

package/assets/i18n/it.json

@@ -181,6 +181,8 @@
     "help": "Aiuto",
     "help-basemap": "Scegli tra gli sfondi cartografici disponibili per personalizzare la visualizzazione.",
     "help-menu": "Accedi a strumenti avanzati come stampa, disegno, vista 3D e altro ancora.",
+    "help-onboarding": "Riavvia il tour di onboarding.",
+    "help-onboarding-link": "Clicca qui per iniziare.",
     "help-search": "Cerca un luogo, un indirizzo, una mappa o un dato geografico.",
     "help-themes": "Scopri i temi disponibili. Selezionando un tema, le mappe correlate vengono caricate automaticamente.",
     "help-user-preferences": "Gestisci le preferenze utente, inclusa la lingua, la modalità di visualizzazione e le opzioni mappa.",

package/buildtools/lib-inline.js

@@ -4,7 +4,19 @@ import path from 'path';
 import { findFilesRecursive, inlineTemplate } from './tools.js';
 
 async function main() {
-  const fileList = findFilesRecursive(path.resolve('src', 'components'), ['.ts', '.js']);
+  // Inline template for components
+  let fileList = findFilesRecursive(path.resolve('src', 'components'), ['.ts', '.js']);
+  for (const filepath of fileList) {
+    console.info(`Integrating inline HTML for file ${filepath}`);
+    const newCodeMapObject = await inlineTemplate(filepath);
+    const newFilePath = filepath.replace('src', path.join('dist', 'lib-src-inline'));
+
+    fs.mkdirSync(path.dirname(newFilePath), { recursive: true });
+    fs.writeFileSync(newFilePath, newCodeMapObject.code, 'utf-8');
+  }
+
+  // Inline template for the API
+  fileList = findFilesRecursive(path.resolve('src', 'api'), ['.ts', '.js']);
   for (const filepath of fileList) {
     console.info(`Integrating inline HTML for file ${filepath}`);
     const newCodeMapObject = await inlineTemplate(filepath);

package/buildtools/tools.js

@@ -57,9 +57,12 @@ export function deleteFiles(patterns) {
   }
 }
 
-export function copy(filename, sourceDir, targetDir) {
+export function copy(filename, sourceDir, targetDir, targetFilename = null) {
+  if (targetFilename === null) {
+    targetFilename = filename;
+  }
   const source = path.join(sourceDir, filename);
-  const target = path.join(targetDir, filename);
+  const target = path.join(targetDir, targetFilename);
 
   if (fs.existsSync(source)) {
     // First create destination directory
@@ -111,8 +114,8 @@ async function getHtmlCode(currentFilename, relativeHtmlPath, styleCode) {
       }
     });
     htmlCode = `
-  templateUrl = null;
-  styleUrls = null;
+  protected override templateUrl: string | null = null;
+  protected override styleUrls: string[] | null = null;
   template = () => { return uHtml\`${styleCode}\n${htmlCode}\`; }`;
     return htmlCode;
   } catch (error) {
@@ -167,9 +170,9 @@ function isStringCommented(line) {
 }
 
 // Regex definitions
-export const styleRegex = /(?:override\s+)?styleUrl *= *['"](.*)['"] *;?/g;
-export const stylesRegex = /(?:override\s+)?styleUrls *= *\[([\s\S]*?)\] *;?/gs;
-export const htmlRegex = /(?:override\s+)?templateUrl *= *['"](.*)['"] *;?/g;
+export const styleRegex = /(?:(?:public|private|protected)\s+)?(?:override\s+)?styleUrl *= *['"](.*)['"] *;?/g;
+export const stylesRegex = /(?:(?:public|private|protected)\s+)?(?:override\s+)?styleUrls *= *\[([\s\S]*?)\] *;?/gs;
+export const htmlRegex = /(?:(?:public|private|protected)\s+)?(?:override\s+)?templateUrl *= *['"](.*)['"] *;?/g;
 
 export async function inlineTemplate(filename) {
   // Read the file

package/components/about/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
 declare class AboutComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     isPanelVisible: boolean;
     panelTitle: string;

package/components/alignnorthbutton-mobile/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 export default class AlignNorthButtonMobile extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     protected connectedCallback(): void;

package/components/auth/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 export default class OauthComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     userIconUrl?: string;
     constructor(name?: string);

package/components/auth-mobile/component.d.ts

@@ -1,7 +1,7 @@
 import OauthComponent from '../auth/component.js';
 export default class MobileOauthComponent extends OauthComponent {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
 }

package/components/basemap/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import Basemap from '../../models/basemaps/basemap.js';
 declare class BasemapComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     changeBasemap(basemap: Basemap): void;

package/components/contact/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
 declare class ContactComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     isPanelVisible: boolean;
     panelTitle: string;

package/components/context-menu/custom-context-menu/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
 declare class MapCustomContextMenuComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     private get map();
     private static contextMenuOverlay;

package/components/context-menu/default-context-menu/component.d.ts

@@ -3,8 +3,8 @@ import { printCoordinate } from '../../../tools/geometrytools.js';
 import { MapContextMenuState } from './contextmenustate.js';
 import MapContextMenuManager from './contextmenumanager.js';
 declare class MapDefaultContextMenuComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     private get map();
     private readonly eventsCallbacks;

package/components/coordinate/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 declare class CoordinateComponent extends GirafeHTMLElement {
     #private;
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     east: string | null;
     north: string | null;

package/components/cross-section/cross-section-settings/component.d.ts

@@ -11,8 +11,8 @@ import { Draw, Modify } from 'ol/interaction.js';
 import OL3Parser from 'jsts/org/locationtech/jts/io/OL3Parser.js';
 import IGirafePanel from '../../../tools/state/igirafepanel.js';
 declare class CrossSectionSettingsComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     crossSectionState: CrossSectionState;
     private readonly eventsCallbacks;

package/components/cross-section/cross-section-viewer/component.d.ts

@@ -4,8 +4,8 @@ import { CrossSectionState } from './../crosssectionstate.js';
 import { Scatterplot } from '../scatterplot.js';
 import { PytreeManager } from '../pytreemanager.js';
 declare class CrossSectionViewComponent extends GirafeResizableElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     crossSectionState: CrossSectionState;
     private readonly eventsCallbacks;

package/components/displaymenubutton-mobile/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 export default class DisplayMenuButtonMobile extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     protected connectedCallback(): void;

package/components/displayselectorbutton-mobile/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 export default class DisplaySelectorButtonMobile extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     protected connectedCallback(): void;

package/components/drawing/component-mobile.d.ts

@@ -1,7 +1,7 @@
 import DrawingComponent from './component.js';
 export default class DrawingComponentMobile extends DrawingComponent {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     protected connectedCallback(): void;

package/components/drawing/component.d.ts

@@ -7,8 +7,8 @@ import GirafeColorPicker from '../../tools/utils/girafecolorpicker.js';
 import LayerDrawing from '../../models/layers/layerdrawing.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
 export default class DrawingComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     isPanelVisible: boolean;
     panelTitle: string;

package/components/drawing/fixed-dimension/component.d.ts

@@ -10,8 +10,8 @@ export type DimensionUnit = {
 };
 declare class FixedDimensionComponent extends GirafeHTMLElement {
     static readonly observedAttributes: string[];
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     checkedIcon: string;
     notCheckedIcon: string;

package/components/drawing-container-mobile/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 export default class DrawingContainerMobile extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     constructor();
     protected connectedCallback(): void;

package/components/edit/component.d.ts

@@ -3,8 +3,8 @@ import EditFromComponent from './editform/component.js';
 import { OapifLayer } from '../../models/serverogcapifeatures.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
 export default class EditComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     isPanelVisible: boolean;
     panelTitle: string;

package/components/edit/editform/component.d.ts

@@ -2,8 +2,8 @@ import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
 import Feature from 'ol/Feature.js';
 import OgcApiFeaturesSchema from '../../../tools/ogcapi/ogcapifeaturesschema.js';
 export default class EditFromComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     featureSchema?: OgcApiFeaturesSchema;
     feature?: Feature;

package/components/extlayers/component.d.ts

@@ -10,8 +10,8 @@ type PredefinedSource = {
     url: string;
 };
 declare class ExternalLayersComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     isPanelVisible: boolean;
     panelTitle: string;

package/components/geolocation-mobile/component.d.ts

@@ -2,8 +2,8 @@ import Geolocation from 'ol/Geolocation.js';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 type GeolocationStatus = 'off' | 'error' | 'searching' | 'tracking' | 'headlock';
 export default class GeolocationMobile extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     geolocation: Geolocation | null;
     status: GeolocationStatus;

package/components/getdirections/component.d.ts

@@ -3,8 +3,8 @@ import { Feature } from 'ol';
 import { Callback } from '../../tools/state/statemanager.js';
 declare class GetDirectionsArtifact extends GirafeHTMLElement {
     static readonly observedAttributes: string[];
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     feature?: Feature;
     directionsAvailable: boolean;

package/components/help/component.d.ts

@@ -1,24 +1,25 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 declare class HelpComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     content: HTMLElement;
     themes: HTMLElement;
     search: HTMLElement;
     menu: HTMLElement;
+    onboarding: HTMLElement;
     basemap: HTMLElement;
     userPreferences: HTMLElement;
     darkFrontendMode: boolean;
-    arrowBlack: string;
-    arrowWhite: string;
     currentArrow?: string;
+    currentCircle?: string;
     constructor();
     render(): void;
     private hideHelpFor;
     registerEvents(): void;
     changeArrowColor(): void;
     toggleHelp(visible: boolean): void;
+    startOnboardingTour(): void;
     protected connectedCallback(): void;
 }
 export default HelpComponent;

package/components/help/component.js

@@ -3,7 +3,10 @@ import { html as uHtml } from 'uhtml';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import ArrowBlack from './images/arrow_black.webp';
 import ArrowWhite from './images/arrow_white.webp';
+import CircledBlack from './images/circled_black.webp';
+import CircledWhite from './images/circled_white.webp';
 import { systemIsInDarkMode } from '../../tools/utils/utils.js';
+import { noop } from '../../tools/utils/async.js';
 class HelpComponent extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -11,20 +14,20 @@ class HelpComponent 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>
-#content{z-index:10000;display:none;position:fixed;inset:0}.box{background-repeat:no-repeat;position:absolute}.description{color:var(--bkg-color);width:15rem;font-size:1.2rem;position:absolute}#themes{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;left:0;transform:rotateY(0)rotateX(0)rotate(90deg)}#themes-description{top:10.5rem;left:10rem}#search{background-position:-60px -30px;width:180px;height:70px;top:8rem;left:45%;transform:rotateY(0)rotateX(0)rotate(90deg)}#search-description{text-align:center;top:16rem;left:45%}#menu{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;right:3rem;transform:rotateY(0)rotateX(0)rotate(180deg)}#menu-description{text-align:right;top:14rem;right:10rem}#basemap{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:11rem;left:26rem;transform:rotateY(0)rotateX(180deg)rotate(90deg)}#basemap-description{bottom:17rem;left:36rem}#user-preferences{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:.5rem;right:3rem;transform:rotateY(180deg)rotateX(0)rotate(0)}#user-preferences-description{text-align:right;bottom:10rem;right:10rem}
+#content{z-index:10000;display:none;position:fixed;inset:0}.box{background-repeat:no-repeat;position:absolute}.description{color:var(--bkg-color);width:15rem;font-size:1.2rem;position:absolute}#themes{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;left:0;transform:rotateY(0)rotateX(0)rotate(90deg)}#themes-description{top:10.5rem;left:10rem}#search{background-position:-60px -30px;width:180px;height:70px;top:8rem;left:45%;transform:rotateY(0)rotateX(0)rotate(90deg)}#search-description{text-align:center;top:16rem;left:45%}#menu{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;right:3rem;transform:rotateY(0)rotateX(0)rotate(180deg)}#menu-description{text-align:right;top:14rem;right:10rem}#onboarding,#onboarding-description{--onboarding-help-width:320px;--onboarding-help-height:160px}#onboarding{top:calc(50% - var(--onboarding-help-height) * .5);right:calc(50% - var(--onboarding-help-width) * .5);width:var(--onboarding-help-width);height:var(--onboarding-help-height);background-size:var(--onboarding-help-width) var(--onboarding-help-height)}#onboarding-description{top:calc(50% - var(--onboarding-help-height) * .5);right:calc(50% - var(--onboarding-help-width) * .5);width:var(--onboarding-help-width);height:var(--onboarding-help-height);text-align:center;flex-direction:column;align-items:center;display:flex;& span{flex-grow:1;align-content:center;align-items:end;margin:0 4rem;display:inline-flex}& button{cursor:pointer;font:inherit;color:currentColor;-webkit-appearance:none;background:0 0;border:0;flex-grow:1;align-items:baseline;margin:0 4rem;padding:0;text-decoration:underline;display:inline-flex}}#basemap{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:11rem;left:26rem;transform:rotateY(0)rotateX(180deg)rotate(90deg)}#basemap-description{bottom:17rem;left:36rem}#user-preferences{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:.5rem;right:3rem;transform:rotateY(180deg)rotateX(0)rotate(0)}#user-preferences-description{text-align:right;bottom:10rem;right:10rem}
 </style>
-<div id="content"><div id="themes" class="box"></div><div id="themes-description" class="description" i18n="help-themes">Explore available topics. Once selected, the associated maps load automatically.</div><div id="search" class="box"></div><div id="search-description" class="description" i18n="help-search">Search for a place, address, map, or geographic data.</div><div id="menu" class="box"></div><div id="menu-description" class="description" i18n="help-menu">Access advanced tools such as printing, drawing, 3D view, and more.</div><div id="basemap" class="box"></div><div id="basemap-description" class="description" i18n="help-basemap">Choose from available background layers to customize your view.</div><div id="user-preferences" class="box"></div><div id="user-preferences-description" class="description" i18n="help-user-preferences">Manage your user preferences, like language, display mode and map options.</div></div>`;
+<div id="content"><div id="themes" class="box"></div><div id="themes-description" class="description" i18n="help-themes">Explore available topics. Once selected, the associated maps load automatically.</div><div id="search" class="box"></div><div id="search-description" class="description" i18n="help-search">Search for a place, address, map, or geographic data.</div><div id="menu" class="box"></div><div id="menu-description" class="description" i18n="help-menu">Access advanced tools such as printing, drawing, 3D view, and more.</div><div id="onboarding" class="box"></div><div id="onboarding-description" class="description"><span i18n="help-onboarding"></span> <button i18n="help-onboarding-link" onclick="${() => this.startOnboardingTour()}"></button></div><div id="basemap" class="box"></div><div id="basemap-description" class="description" i18n="help-basemap">Choose from available background layers to customize your view.</div><div id="user-preferences" class="box"></div><div id="user-preferences-description" class="description" i18n="help-user-preferences">Manage your user preferences, like language, display mode and map options.</div></div>`;
     };
     content;
     themes;
     search;
     menu;
+    onboarding;
     basemap;
     userPreferences;
     darkFrontendMode = false;
-    arrowBlack = ArrowBlack;
-    arrowWhite = ArrowWhite;
     currentArrow;
+    currentCircle;
     constructor() {
         super('help');
     }
@@ -35,6 +38,7 @@ class HelpComponent extends GirafeHTMLElement {
         this.themes = this.shadow.querySelector('#themes');
         this.search = this.shadow.querySelector('#search');
         this.menu = this.shadow.querySelector('#menu');
+        this.onboarding = this.shadow.querySelector('#onboarding');
         this.basemap = this.shadow.querySelector('#basemap');
         this.userPreferences = this.shadow.querySelector('#user-preferences');
         // hide help for hideable Parts of the UI
@@ -61,10 +65,12 @@ class HelpComponent extends GirafeHTMLElement {
     changeArrowColor() {
         // change the arrow color depending on the darkFrontendMode state
         this.darkFrontendMode = this.context.stateManager.state.interface.darkFrontendMode ?? systemIsInDarkMode();
-        this.currentArrow = this.darkFrontendMode ? this.arrowBlack : this.arrowWhite;
+        this.currentArrow = this.darkFrontendMode ? ArrowBlack : ArrowWhite;
+        this.currentCircle = this.darkFrontendMode ? CircledBlack : CircledWhite;
         this.themes.style.backgroundImage = `url(${this.currentArrow})`;
         this.search.style.backgroundImage = `url(${this.currentArrow})`;
         this.menu.style.backgroundImage = `url(${this.currentArrow})`;
+        this.onboarding.style.backgroundImage = `url(${this.currentCircle})`;
         this.basemap.style.backgroundImage = `url(${this.currentArrow})`;
         this.userPreferences.style.backgroundImage = `url(${this.currentArrow})`;
         this.content.style.backgroundColor = this.darkFrontendMode ? 'rgba(255, 255, 255, 0.65)' : 'rgba(0, 0, 0, 0.65)';
@@ -78,6 +84,10 @@ class HelpComponent extends GirafeHTMLElement {
             this.content.style.display = 'none';
         }
     }
+    startOnboardingTour() {
+        this.toggleHelp(false);
+        this.context.onBoardingManager.restart().then(noop);
+    }
     connectedCallback() {
         super.connectedCallback();
         this.render();

package/components/infobox/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import { InfoBoxContent } from '../../tools/state/state.js';
 declare class InfoboxComponent extends GirafeHTMLElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     infos: InfoBoxContent[];
     urlRegExp: RegExp;

package/components/infowindow/component.d.ts

@@ -1,7 +1,7 @@
 import GirafeDraggableElement from '../../base/GirafeDraggableElement.js';
 declare class InfoWindowComponent extends GirafeDraggableElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     visible: boolean;
     private resizeWindow;

package/components/layout/component.d.ts

@@ -1,8 +1,8 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
 declare class LayoutComponent extends GirafeHTMLElement implements IGirafePanel {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     isPanelVisible: boolean;
     panelTitle: string;

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

@@ -15,8 +15,8 @@ import IGirafePanel from '../../tools/state/igirafepanel.js';
  * </girafe-lr-panel>
  */
 declare class LRPanelComponent extends GirafeResizableElement {
-    templateUrl: null;
-    styleUrls: null;
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
     template: () => import("uhtml").Hole;
     private stateToggleManager?;
     panelTitle: string;