@geogirafe/lib-geoportal 1.2.0-dev.2872463389 → 1.2.0-dev.2889263072

package/components/extlayers/component.js

@@ -18,7 +18,7 @@ class ExternalLayersComponent extends GirafeHTMLElement {
 #panel{background:var(--bkg-color);height:100%;color:var(--text-color);flex-direction:column;padding:0 1rem;display:flex}#content{flex-direction:column;flex-grow:1;margin:0;display:flex}header{background-color:var(--bkg-color);margin:0;position:sticky;top:-5px}h4{margin-bottom:.5rem}ul{margin-top:0;margin-left:0;padding-left:2rem;line-height:1.3rem;list-style-type:disc}.clearable-input{background-color:var(--bkg-color);border:1px solid #cfd6dd;border-radius:4px;flex-direction:row;margin-bottom:.1rem;display:flex}.scan-button{float:right}.layers{border-top:1px solid #ccc;flex-direction:column;flex-grow:1;margin-top:1rem;padding-top:.5rem;display:flex;overflow:hidden}ul.results{border:none;margin-bottom:.5rem;padding:0;list-style:none;overflow-y:auto}.result{height:1.6rem;display:flex}.result>button>span{text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#panel>div{padding:1rem}#layers li{margin-top:.3rem;margin-bottom:.3rem}#layers li button{text-align:left;overflow-wrap:anywhere;text-wrap-style:balance}#loading-icon{flex-grow:1;align-self:center;width:3rem}.title{margin-top:0}.filter-buttons{flex-direction:row;margin:2px;display:flex}.filter-buttons span{flex-grow:1;align-self:center}.clearable-input-field{width:90%;color:var(--text-color);background:0 0;border:0;outline:none;flex:auto;padding:0;font-size:1rem}.filter-icon,.delete-icon{width:16px;color:var(--text-color);padding:0 .5rem}.delete-button{cursor:pointer;background-color:#0000;border:none;padding:0}#file-selector{flex-direction:column;display:flex;position:relative}#file{color:var(--text-color);cursor:pointer}#file::file-selector-button{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);min-height:calc(var(--app-standard-height) / 1.5);font:inherit;cursor:pointer;border-radius:.25em;outline:0;margin:0 .5rem 0 0;padding:0 .5rem}#file::file-selector-button:hover{background-color:var(--bkg-color-grad1)}.file-loaded-message{box-sizing:border-box;background-color:var(--success-color);border-radius:.25em;width:100%;margin:.5rem 0 0;padding:.5em;position:absolute;top:100%;left:0}
 </style>
 <style>${this.customStyle}</style>
-<div id="panel"><header class="gg-tabs"><button class="${this.selectedTab === 'wms_wmts' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.setSelectedTab('wms_wmts')}" i18n="wms_wmts"></button> <button class="${this.selectedTab === 'file' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.setSelectedTab('file')}" i18n="local file"></button></header><section class="${(this.selectedTab === 'wms_wmts') ? 'group' : 'hidden'}"><h4 class="title" i18n="Suggestions" ?hidden="${!this.hasPredefinedWmsWmtsSources}">Suggestions</h4><ul class="suggestions" ?hidden="${!this.hasPredefinedWmsWmtsSources}">${this.predefinedWmsWmtsSources.map(source => uHtmlFor(source, source.label) `<li><a href="javascript:void(0)" onclick="${() => this.scanSource(source.url, source.type)}">${source.label}</a></li>`)}</ul><h4 class="title" i18n="Custom service URL">Custom service URL</h4><div class="clearable-input"><input id="url" class="gg-input clearable-input-field" oninput="${() => this.typeUrl()}"><br><button id="clear-url" class="delete-button hidden" onclick="${() => this.clearUrl()}"><img class="delete-icon" alt="delete-button-icon" tip="Reset filter" i18n="Reset filter" src="icons/trash.svg"></button></div><button i18n="Scan Source" class="gg-button scan-button" onclick="${() => this.scanSource()}">Scan Source</button></section><section class="${(this.selectedTab === 'file') ? 'group' : 'hidden'}"><div id="file-selector"><label for="file" class="gg-label" i18n="Choose local file">Choose local file</label> <input type="file" accept=".gpx,.kml,.geojson,.json" id="file" onchange="${() => this.loadFile()}"><p class="${this.fileLoaded ? 'file-loaded-message' : 'hidden'}" i18n="File loaded in the layer tree">File loaded in the layer tree</div></section><section class="${(this.selectedTab === 'wms_wmts' && this.externalLayers.length > 0) || this.loading ? 'layers' : 'hidden'}"><h4 class="title" i18n="Layers (from Capabilities)">Layers (from Capabilities)</h4><div class="clearable-input"><img class="filter-icon" alt="filter-button-icon" src="icons/filter.svg"> <input id="layer-search-field" class="gg-input clearable-input-field" placeholder="${this.context.i18nManager.getTranslation('Filter external layers...')}" i18n="Filter external layers..." autocomplete="off" autocorrect="off" oninput="${(e) => this.filterLayers(e.target.value)}"> <button class="${this.isFiltered ? 'delete-button' : 'hidden'}" onclick="${() => this.clearFilter()}"><img class="delete-icon" alt="delete-button-icon" tip="Reset filter" i18n="Reset filter" src="icons/trash.svg"></button></div><div class="filter-buttons"><span>${Object.values(this.externalLayers).filter(layer => layer.isSelected).length.toString()} ${this.context.i18nManager.getTranslation('layers selected')} </span><button class="gg-button" tip="Select all filtered layers" onclick="${() => this.selectVisible()}">+</button> <button class="gg-button" tip="Unselect all filtered layers" onclick="${() => this.deselectVisible()}">-</button> <button class="gg-button" tip="Select none" onclick="${() => this.deselectAll()}">--</button></div><img id="loading-icon" alt="loading-icon" src="icons/loading.svg" class="${this.loading ? 'gg-spin' : 'hidden'}"><ul class="results">${this.filteredLayers.map(layer => uHtmlFor(layer, layer.treeItemId) `<li class="result"><button class="${layer.isSelected ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" tip="Activate / Deactivate" onclick="${() => this.selectLayer(layer)}"><img class="${layer.isSelected ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-full.svg"> <img class="${!layer.isSelected ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-no.svg"></button> <button class="${layer.isSelected ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" onclick="${() => this.selectLayer(layer)}"><span i18n="${layer.name}" class="gg-tree-label">${layer.name}</span></button></li>`)}</ul><button id="add" tip="Add selected" i18n="Add selected" class="gg-button" onclick="${() => this.addSelectedLayers()}">Add selected</button></section></div>
+<div id="panel"><header class="gg-tabs"><button class="${this.selectedTab === 'wms_wmts' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.setSelectedTab('wms_wmts')}" i18n="wms_wmts"></button> <button class="${this.selectedTab === 'file' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.setSelectedTab('file')}" i18n="local file"></button></header><section class="${(this.selectedTab === 'wms_wmts') ? 'group' : 'hidden'}"><h4 class="title" i18n="Suggestions" ?hidden="${!this.hasPredefinedWmsWmtsSources}">Suggestions</h4><ul class="suggestions" ?hidden="${!this.hasPredefinedWmsWmtsSources}">${this.predefinedWmsWmtsSources.map(source => uHtmlFor(source, source.label) `<li><a href="javascript:void(0)" onclick="${() => this.scanSource(source.url, source.type)}">${source.label}</a></li>`)}</ul><h4 class="title" i18n="Custom service URL">Custom service URL</h4><div class="clearable-input"><input id="url" aria-label="Custom service URL" class="gg-input clearable-input-field" oninput="${() => this.typeUrl()}"><br><button id="clear-url" class="delete-button hidden" onclick="${() => this.clearUrl()}"><img class="delete-icon" alt="delete-button-icon" tip="Reset filter" i18n="Reset filter" src="icons/trash.svg"></button></div><button i18n="Scan Source" class="gg-button scan-button" onclick="${() => this.scanSource()}">Scan Source</button></section><section class="${(this.selectedTab === 'file') ? 'group' : 'hidden'}"><div id="file-selector"><label for="file" class="gg-label" i18n="Choose local file">Choose local file</label> <input type="file" accept=".gpx,.kml,.geojson,.json" id="file" onchange="${() => this.loadFile()}"><p class="${this.fileLoaded ? 'file-loaded-message' : 'hidden'}" i18n="File loaded in the layer tree">File loaded in the layer tree</div></section><section class="${(this.selectedTab === 'wms_wmts' && this.externalLayers.length > 0) || this.loading ? 'layers' : 'hidden'}"><h4 class="title" i18n="Layers (from Capabilities)">Layers (from Capabilities)</h4><div class="clearable-input"><img class="filter-icon" alt="filter-button-icon" src="icons/filter.svg"> <input id="layer-search-field" class="gg-input clearable-input-field" aria-label="Filter external layers" placeholder="${this.context.i18nManager.getTranslation('Filter external layers...')}" i18n="Filter external layers..." autocomplete="off" autocorrect="off" oninput="${(e) => this.filterLayers(e.target.value)}"> <button class="${this.isFiltered ? 'delete-button' : 'hidden'}" onclick="${() => this.clearFilter()}"><img class="delete-icon" alt="delete-button-icon" tip="Reset filter" i18n="Reset filter" src="icons/trash.svg"></button></div><div class="filter-buttons"><span>${Object.values(this.externalLayers).filter(layer => layer.isSelected).length.toString()} ${this.context.i18nManager.getTranslation('layers selected')} </span><button class="gg-button" tip="Select all filtered layers" onclick="${() => this.selectVisible()}">+</button> <button class="gg-button" tip="Unselect all filtered layers" onclick="${() => this.deselectVisible()}">-</button> <button class="gg-button" tip="Select none" onclick="${() => this.deselectAll()}">--</button></div><img id="loading-icon" alt="loading-icon" src="icons/loading.svg" class="${this.loading ? 'gg-spin' : 'hidden'}"><ul class="results">${this.filteredLayers.map(layer => uHtmlFor(layer, layer.treeItemId) `<li class="result"><button class="${layer.isSelected ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" tip="Activate / Deactivate" onclick="${() => this.selectLayer(layer)}"><img class="${layer.isSelected ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-full.svg"> <img class="${!layer.isSelected ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-no.svg"></button> <button class="${layer.isSelected ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small gg-opacity'}" onclick="${() => this.selectLayer(layer)}"><span i18n="${layer.name}" class="gg-tree-label">${layer.name}</span></button></li>`)}</ul><button id="add" tip="Add selected" i18n="Add selected" class="gg-button" onclick="${() => this.addSelectedLayers()}">Add selected</button></section></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isPanelVisible = false;

package/components/map-2d/component.js

@@ -51,7 +51,7 @@ export default class Map2dComponent extends GirafeHTMLElement {
 #container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.mobile-map .ol-zoom{display:none!important}.ol-rotate{top:11.6rem!important}.ol-fullscreen{top:7rem!important}.ol-location{top:9.3rem!important}.img-location,.img-disable-location,.img-fullscreen{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.btn-fullscreen,.btn-exit-fullscreen,.ol-rotate-reset{cursor:pointer;background-color:var(--bkg-color)!important;width:2rem!important;height:2rem!important;color:var(--text-color)!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1 * var(--button-size) / 2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location,.ol-fullscreen{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
 </style>
 <style>${this.customStyle}</style>
-<div id="container"><div id="ol-map" class="${this.onMobile ? 'mobile-map' : ''}"></div><div class="${this.onMobile ? 'hidden' : 'ol-fullscreen ol-unselectable ol-control'}"><button id="fullscreen-enter-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-on" class="btn-fullscreen"><img class="img-fullscreen" alt="fullscreen-icon" src="icons/fullscreen.svg"></button> <button id="fullscreen-exit-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-off" class="btn-exit-fullscreen hidden"><img class="img-fullscreen" alt="fullscreen-exit-icon" src="icons/fullscreen-exit.svg"></button></div><div class="${this.onMobile ? 'hidden' : 'ol-location ol-unselectable ol-control'}"><button onclick="${() => this.locateUser()}" class="btn-location" tip="Locate user"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" tip="Disable locate user" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>
+<div id="container"><div id="ol-map" class="${this.onMobile ? 'mobile-map' : ''}"></div><div class="${this.onMobile ? 'hidden' : 'ol-fullscreen ol-unselectable ol-control'}"><button id="fullscreen-enter-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-on" class="btn-fullscreen"><img class="img-fullscreen" alt="fullscreen-icon" src="icons/fullscreen.svg"></button> <button id="fullscreen-exit-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-off" class="btn-exit-fullscreen hidden"><img class="img-fullscreen" alt="fullscreen-exit-icon" src="icons/fullscreen-exit.svg"></button></div><div class="${this.onMobile ? 'hidden' : 'ol-location ol-unselectable ol-control'}"><button onclick="${() => this.locateUser()}" class="btn-location" tip="Locate user"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" tip="Disable locate user" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><input id="swiper" type="range" aria-label="Map swiper" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     olMap;

package/components/map-2d/tools/swipemanager.js

@@ -18,7 +18,7 @@ class SwipeManager {
         if (!maxVal) {
             throw new Error('The Attribute <max> on the swiper is not defined !');
         }
-        this.swiperMaxVal = parseInt(maxVal);
+        this.swiperMaxVal = Number.parseInt(maxVal);
         this.wmtsManager = wmtsManager;
         this.wmsManager = wmsManager;
         this.localFileManager = localFileManager;
@@ -139,7 +139,7 @@ class SwipeManager {
             throw new Error('The size of the map is null !');
         }
         const mapSize = size;
-        const width = mapSize[0] * (parseInt(this.swiper.value) / this.swiperMaxVal);
+        const width = mapSize[0] * (Number.parseInt(this.swiper.value) / this.swiperMaxVal);
         let tl;
         let tr;
         let bl;

package/components/modals/component.js

@@ -11,7 +11,7 @@ class ModalsComponent extends GirafeHTMLElement {
 #content{z-index:10000;background-color:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bkg-color);border:var(--app-standard-border);border-radius:10px;width:300px;min-height:400px;box-shadow:5px 5px 10px #0003}.wide{width:auto;max-width:480px}header{background:var(--app-color-grey);border-top-left-radius:10px;border-top-right-radius:10px;justify-content:center;height:100px;padding:2rem;display:flex}section{text-align:center;flex-direction:column;padding:30px;display:flex}span{margin-bottom:1rem;font-size:1.2rem;display:inline-block}.confirm-buttons{flex-direction:row;justify-content:center;gap:1rem;margin-top:2rem;display:flex}.confirm-buttons button{width:7rem}h2,span{color:var(--text-color)}.choices{grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;display:grid}.choice{height:4rem}
 </style>
 <style>${this.customStyle}</style>
-<div id="content" class="${this.visible ? '' : 'hidden'}"><div class="${this.boxType == 'info' ? 'modal wide' : 'modal'}"><header><img alt="question-icon" src="icons/help.svg" class="${(this.boxType === 'alert' || this.boxType === 'info') ? 'hidden' : ''}"> <img alt="error-icon" src="icons/error.svg" class="${this.boxType === 'alert' ? '' : 'hidden'}"> <img alt="info-icon" src="icons/info.svg" class="${this.boxType === 'info' ? '' : 'hidden'}"></header><section><h2>${this.boxTitle}</h2><span>${this.htmlUnsafe(this.boxMessage)}</span> <input id="input-text" class="${this.boxType === 'prompt' ? 'gg-input' : 'hidden'}" placeholder="${this.boxPlaceholder}"><div class="${this.boxType === 'choice' ? 'choices' : 'hidden'}">${this.boxChoices.map(option => uHtml ` <button class="gg-button choice" onclick="${() => this.choiceOk(option)}">${option}</button> `)}</div><div class="${(this.boxType === 'alert' || this.boxType === 'info') ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.ok()}" i18n="Ok">Ok</button></div><div class="${this.boxType === 'confirm' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.ok()}" i18n="Yes">Yes</button> <button class="gg-button" onclick="${() => this.nok()}" i18n="No">No</button></div><div class="${this.boxType === 'prompt' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.promptOk()}" i18n="Ok">Ok</button> <button class="gg-button" onclick="${() => this.promptNok()}" i18n="Cancel">Cancel</button></div><div class="${this.boxType === 'choice' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.promptNok()}" i18n="Cancel">Cancel</button></div></section></div></div>
+<div id="content" class="${this.visible ? '' : 'hidden'}"><div class="${this.boxType == 'info' ? 'modal wide' : 'modal'}"><header><img alt="question-icon" src="icons/help.svg" class="${(this.boxType === 'alert' || this.boxType === 'info') ? 'hidden' : ''}"> <img alt="error-icon" src="icons/error.svg" class="${this.boxType === 'alert' ? '' : 'hidden'}"> <img alt="info-icon" src="icons/info.svg" class="${this.boxType === 'info' ? '' : 'hidden'}"></header><section><h2>${this.boxTitle}</h2><span>${this.htmlUnsafe(this.boxMessage)}</span> <input id="input-text" aria-label="Input" class="${this.boxType === 'prompt' ? 'gg-input' : 'hidden'}" placeholder="${this.boxPlaceholder}"><div class="${this.boxType === 'choice' ? 'choices' : 'hidden'}">${this.boxChoices.map(option => uHtml ` <button class="gg-button choice" onclick="${() => this.choiceOk(option)}">${option}</button> `)}</div><div class="${(this.boxType === 'alert' || this.boxType === 'info') ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.ok()}" i18n="Ok">Ok</button></div><div class="${this.boxType === 'confirm' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.ok()}" i18n="Yes">Yes</button> <button class="gg-button" onclick="${() => this.nok()}" i18n="No">No</button></div><div class="${this.boxType === 'prompt' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.promptOk()}" i18n="Ok">Ok</button> <button class="gg-button" onclick="${() => this.promptNok()}" i18n="Cancel">Cancel</button></div><div class="${this.boxType === 'choice' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.promptNok()}" i18n="Cancel">Cancel</button></div></section></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     visible = false;

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/print/component.js

@@ -29,13 +29,13 @@ class PrintComponent extends GirafeHTMLElement {
 #panel{min-width:20rem;height:100%;overflow:auto}#content{background:var(--bkg-color);color:var(--text-color);margin:0;padding:1.5rem}#content .message{text-align:center;width:100%}#content .message *{margin:.25rem}.option{margin-top:.5rem;display:flex}.option label{width:40%}.option label:after{content:" :"}.option input,.option select,.option textarea{flex-grow:1}.option input.gg-checkbox{flex-grow:0}.rotation{flex-grow:1;gap:.5rem;display:flex}#rotationSlider{width:0}#rotationNumber{flex-grow:0;width:4rem}#content #export-pdf{float:right;margin-top:1rem}#content button{background-color:var(--bkg-color);color:var(--text-color);border:solid 1px var(--text-color);cursor:pointer;border-radius:3px;outline:0}#content button:hover{background-color:var(--bkg-color-grad2)}#content #print-list{margin-top:5rem}#print-list .print-item{border:solid 1px var(--text-color);color:var(--text-color);margin-top:.5rem;padding:.5rem;position:relative}#print-list .print-item .container{text-align:unset;border:none;width:100%;display:inline}#print-list .print-item .cancel{cursor:pointer;color:var(--text-color-grad1);background-color:#0000;border:none;position:absolute;top:.5rem;right:.5rem}.print-item .cancel i:before{content:"uf00d"}.print-item .cancel:hover{border-color:var(--text-color);color:var(--text-color)}.print-item i.status{float:left;text-align:center;width:3rem;margin-right:1rem}.print-item:has(.success):hover{background-color:var(--bkg-color-grad2);cursor:pointer}.print-item i.status:before{line-height:3rem;display:block}.print-item p{line-height:1.3rem}.print-item p.time{margin-right:.5rem;position:absolute;bottom:0;right:0}#custom-scale{color:var(--text-color);flex-flow:wrap;justify-content:flex-start;align-items:center;display:flex}#custom-scale .svg-info{margin-left:.5rem}#custom-scale>div{align-items:center;width:100%;display:flex}.gg-custom-scale{justify-content:flex-end}.warning{border-top:1px solid #333;border-bottom:1px solid #333;margin-top:1rem;margin-bottom:1rem;padding:.5rem}.warning h3{margin:0 0 1rem;font-size:1rem}.warning span{display:block}
 </style>
 <style>${this.customStyle}</style>
-<div id="panel"><div id="content"><div class="${this.getRenderState() === 'loading' ? '' : 'hidden'}"><div class="message"><div i18n="Connecting to the print server, please wait."></div><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"></div></div><div class="${this.getRenderState() === 'error' ? '' : 'hidden'}"><div class="message" i18n="The print server is unavailable. Please, try later."></div></div><div class="${this.getRenderState() === 'setup' ? '' : 'hidden'}"><div class="option"><label for="layout" i18n="Layout" class="gg-label">Layout</label> <select id="layout" class="gg-select" onchange="${(evt) => this.onLayoutChanged(evt)}">${this.layouts.map((layout) => uHtml `<option i18n="${layout.name}" ?selected="${this.selectedLayout?.name === layout.name}" value="${layout.name}">${layout.name}</option>`)}</select></div><div class="option gg-custom-scale"><label for="scale" i18n="Scale" class="gg-label">Scale</label> <select id="scale" class="gg-select" onchange="${(evt) => this.onScaleChanged(evt)}">${this.scales.map((scale) => uHtml `<option ?selected="${this.getSelectedScale() === scale}" value="${scale}"><span>1&nbsp;:&nbsp;</span><span i18n="${scale}" i18nfn="formatNumber">${scale}</span></option>`)}<option i18n="Manual entry" class="${this.context.configManager.Config.print?.customScale === true ? '' : 'hidden'}" value="custom">Manual entry</select></div><div class="${this.showCustomScale === true ? 'option' : 'hidden'}"><div id="custom-scale"><label for="scale" i18n="Custom scale" class="gg-label">Custom scale</label><div><span>1&nbsp;:&nbsp;</span><input class="gg-input" type="number" min="10" oninput="${(evt) => this.onCustomScaleTyped(evt)}"></div></div></div><div class="option"><label for="format" i18n="Format" class="gg-label">Format</label> <select id="format" class="gg-select" onchange="${(evt) => this.onFormatChanged(evt)}">${this.printFormats.map((format) => uHtml `<option ?selected="${this.getSelectedFormat() === format}" value="${format}">${format.toUpperCase()}</option>`)}</select></div>${uHtml `<div class="option"><label for="dpi" class="gg-label">DPI</label> <select id="dpi" class="gg-select" onchange="${(evt) => this.onDpiChanged(evt)}">${this.dpis.map((dpi) => uHtml `<option ?selected="${this.getSelectedDpi() === dpi}" value="${dpi}">${dpi}</option>`)}</select></div>`}<div class="option"><label for="rotationSlider" i18n="Rotation" class="gg-label">Rotation</label><div class="rotation"><input id="rotationSlider" class="gg-range" type="range" min="-180" max="180" step="1" value="${this.getRotation()}" oninput="${(evt) => this.onInputRotationChanged(evt)}"> <input id="rotationNumber" class="gg-input" type="number" min="-180" max="180" step="1" value="${this.getRotation()}" oninput="${(evt) => this.onInputRotationChanged(evt)}"></div></div>${this.attributeNames.map((attrName) => { if (this.getAttributeInputType(attrName) === 'number') {
+<div id="panel"><div id="content"><div class="${this.getRenderState() === 'loading' ? '' : 'hidden'}"><div class="message"><div i18n="Connecting to the print server, please wait."></div><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"></div></div><div class="${this.getRenderState() === 'error' ? '' : 'hidden'}"><div class="message" i18n="The print server is unavailable. Please, try later."></div></div><div class="${this.getRenderState() === 'setup' ? '' : 'hidden'}"><div class="option"><label for="layout" i18n="Layout" class="gg-label">Layout</label> <select id="layout" class="gg-select" onchange="${(evt) => this.onLayoutChanged(evt)}">${this.layouts.map((layout) => uHtml `<option i18n="${layout.name}" ?selected="${this.selectedLayout?.name === layout.name}" value="${layout.name}">${layout.name}</option>`)}</select></div><div class="option gg-custom-scale"><label for="scale" i18n="Scale" class="gg-label">Scale</label> <select id="scale" class="gg-select" onchange="${(evt) => this.onScaleChanged(evt)}">${this.scales.map((scale) => uHtml `<option ?selected="${this.getSelectedScale() === scale}" value="${scale}"><span>1&nbsp;:&nbsp;</span><span i18n="${scale}" i18nfn="formatNumber">${scale}</span></option>`)}<option i18n="Manual entry" class="${this.context.configManager.Config.print?.customScale === true ? '' : 'hidden'}" value="custom">Manual entry</select></div><div class="${this.showCustomScale === true ? 'option' : 'hidden'}"><div id="custom-scale"><label for="scale" i18n="Custom scale" class="gg-label">Custom scale</label><div><span>1&nbsp;:&nbsp;</span><input class="gg-input" type="number" aria-label="Custom scale value" min="10" oninput="${(evt) => this.onCustomScaleTyped(evt)}"></div></div></div><div class="option"><label for="format" i18n="Format" class="gg-label">Format</label> <select id="format" class="gg-select" onchange="${(evt) => this.onFormatChanged(evt)}">${this.printFormats.map((format) => uHtml `<option ?selected="${this.getSelectedFormat() === format}" value="${format}">${format.toUpperCase()}</option>`)}</select></div>${uHtml `<div class="option"><label for="dpi" class="gg-label">DPI</label> <select id="dpi" class="gg-select" onchange="${(evt) => this.onDpiChanged(evt)}">${this.dpis.map((dpi) => uHtml `<option ?selected="${this.getSelectedDpi() === dpi}" value="${dpi}">${dpi}</option>`)}</select></div>`}<div class="option"><label for="rotationSlider" i18n="Rotation" class="gg-label">Rotation</label><div class="rotation"><input id="rotationSlider" class="gg-range" type="range" min="-180" max="180" step="1" value="${this.getRotation()}" oninput="${(evt) => this.onInputRotationChanged(evt)}"> <input id="rotationNumber" class="gg-input" type="number" aria-label="Rotation" min="-180" max="180" step="1" value="${this.getRotation()}" oninput="${(evt) => this.onInputRotationChanged(evt)}"></div></div>${this.attributeNames.map((attrName) => { if (this.getAttributeInputType(attrName) === 'number') {
             return uHtml `<div class="option"><label for="${attrName}" i18n="${this.attrNameForI18n(attrName)}" class="gg-label">${attrName}</label> <input id="${attrName}" type="number" class="gg-input" value="${this.getCapabilitiesAttribute(attrName)?.default}"></div>`;
         } if (this.getAttributeInputType(attrName) === 'checkbox') {
             return uHtml `<div class="option"><label for="${attrName}" i18n="${this.attrNameForI18n(attrName)}" class="gg-label">${attrName}</label> <input id="${attrName}" type="checkbox" class="gg-checkbox" ?checked="${this.getCapabilitiesAttribute(attrName)?.default}"></div>`;
         } if (this.getAttributeInputType(attrName) === 'textarea') {
-            return uHtml `<div class="option"><textarea id="${attrName}" class="gg-textarea" i18n="${this.attrNameForI18n(attrName)}" placeholder="${attrName}">${this.getCapabilitiesAttribute(attrName)?.default}</textarea></div>`;
-        } return uHtml `<div class="option"><input id="${this.attrNameForI18n(attrName)}" class="gg-input" i18n="${attrName}" placeholder="${attrName}" value="${this.getCapabilitiesAttribute(attrName)?.default}"></div>`; })}<div class="${this.hasRestrictedLayers ? 'warning' : 'hidden'}"><h3 i18n="Warning: Private Layers are active">Warning: Private Layers are active</h3><span i18n="Private layers are enabled and will be printed."></span> <span i18n="The generated document may contain sensitive data."></span> <span i18n="Please review or disable them before printing."></span></div><button id="export-pdf" class="gg-button" onclick="${() => this.print()}" i18n="Print">Print</button><div id="print-list">${this.printList.map((printItem) => uHtml `<div id="${printItem.id}" class="print-item" title="${printItem.elementTitle}"><button class="cancel" tabindex="0" onclick="${() => this.onCancelPrintElementClicked(printItem.id)}"><img alt="close-icon" src="icons/close.svg"></button> <button class="container" tabindex="0" onclick="${() => this.onPrintElementClicked(printItem.id)}"><img alt="loading-icon" src="icons/loading.svg" class="${printItem.status === PrintStatus.Started ? 'gg-spin' : 'hidden'}"> <img alt="loading-icon" src="icons/download.svg" class="${printItem.status === PrintStatus.Success ? '' : 'hidden'}"> <img alt="loading-icon" src="icons/error.svg" class="${printItem.status === PrintStatus.Errored ? '' : 'hidden'}"><p><span i18n="${printItem.selectedLayoutName}">${printItem.selectedLayoutName}</span> <span>(</span><span>${printItem.selectedFormat.toUpperCase()}</span><span>)</span><p class="time">${printItem.time}</button></div>`)}</div></div></div></div>
+            return uHtml `<div class="option"><textarea id="${attrName}" class="gg-textarea" i18n="${this.attrNameForI18n(attrName)}" aria-label="${attrName}" placeholder="${attrName}">${this.getCapabilitiesAttribute(attrName)?.default}</textarea></div>`;
+        } return uHtml `<div class="option"><input id="${this.attrNameForI18n(attrName)}" class="gg-input" i18n="${attrName}" aria-label="${attrName}" placeholder="${attrName}" value="${this.getCapabilitiesAttribute(attrName)?.default}"></div>`; })}<div class="${this.hasRestrictedLayers ? 'warning' : 'hidden'}"><h3 i18n="Warning: Private Layers are active">Warning: Private Layers are active</h3><span i18n="Private layers are enabled and will be printed."></span> <span i18n="The generated document may contain sensitive data."></span> <span i18n="Please review or disable them before printing."></span></div><button id="export-pdf" class="gg-button" onclick="${() => this.print()}" i18n="Print">Print</button><div id="print-list">${this.printList.map((printItem) => uHtml `<div id="${printItem.id}" class="print-item" title="${printItem.elementTitle}"><button class="cancel" tabindex="0" onclick="${() => this.onCancelPrintElementClicked(printItem.id)}"><img alt="close-icon" src="icons/close.svg"></button> <button class="container" tabindex="0" onclick="${() => this.onPrintElementClicked(printItem.id)}"><img alt="loading-icon" src="icons/loading.svg" class="${printItem.status === PrintStatus.Started ? 'gg-spin' : 'hidden'}"> <img alt="loading-icon" src="icons/download.svg" class="${printItem.status === PrintStatus.Success ? '' : 'hidden'}"> <img alt="loading-icon" src="icons/error.svg" class="${printItem.status === PrintStatus.Errored ? '' : 'hidden'}"><p><span i18n="${printItem.selectedLayoutName}">${printItem.selectedLayoutName}</span> <span>(</span><span>${printItem.selectedFormat.toUpperCase()}</span><span>)</span><p class="time">${printItem.time}</button></div>`)}</div></div></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isPanelVisible = false;
@@ -125,7 +125,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             this.showCustomScale = false;
             this.render();
         }
-        this.state.print.scale = parseInt(event.target?.value);
+        this.state.print.scale = Number.parseInt(event.target?.value);
         this.printMaskManager?.zoomToScale(this.state.print.scale);
     }
     /**
@@ -133,7 +133,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
      * in the state and update the mask.
      */
     onCustomScaleTyped(evt) {
-        const value = parseInt(evt.target?.value);
+        const value = Number.parseInt(evt.target?.value);
         if (!value) {
             return;
         }
@@ -170,7 +170,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
      */
     onDpiChanged(event) {
         const value = event.target?.value;
-        this.state.print.dpi = value ? parseInt(value) : this.default_dpi;
+        this.state.print.dpi = value ? Number.parseInt(value) : this.default_dpi;
     }
     /**
      * @returns {number} The rotation angle in degrees, from the map.
@@ -399,7 +399,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     setRotation(rotationInputElement, mapRotationValue = null) {
         const slider = rotationInputElement.parentElement?.querySelector('#rotationSlider');
         const number = rotationInputElement.parentElement?.querySelector('#rotationNumber');
-        const rotation = mapRotationValue ?? parseInt(rotationInputElement.value);
+        const rotation = mapRotationValue ?? Number.parseInt(rotationInputElement.value);
         slider.value = `${rotation}`;
         number.value = `${rotation}`;
         if (!mapRotationValue) {

package/components/print/tools/MFPLegendEncoder.js

@@ -191,7 +191,7 @@ export class MFPLegendEncoder {
         }
         if (hiDPILegendImages) {
             for (const str_dpi in hiDPILegendImages) {
-                const new_dpi = parseFloat(str_dpi);
+                const new_dpi = Number.parseFloat(str_dpi);
                 const new_dist = Math.abs(Math.log(new_dpi / dpi));
                 if (new_dist < dist) {
                     dist = new_dist;

package/components/querybuilder/component.js

@@ -17,7 +17,7 @@ class QueryBuilderComponent extends GirafeHTMLElement {
 .container{background-color:var(--bkg-color)}.content{display:flex}.loading i,.deactivated i{margin:.8rem}
 </style>
 <style>${this.customStyle}</style>
-<div class="container"><div class="${this.loading ? 'loading' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading server configuration...">Loading server configuration...</span></div><div class="${this.deactivated ? 'deactivated' : 'deactivated hidden'}"><img alt="info-icon" src="icons/info.svg"> <span i18n="Filtering deactivated: layers in layergroup don't have identical attributes.">Filtering deactivated: layers in layergroup don't have identical attributes.</span></div><div class="${this.loading || this.deactivated ? 'content hidden' : 'content'}"><select id="attribute" name="attribute" class="gg-select gg-medium" onchange="${() => this.attributeChanged()}"><option value="" disabled="disabled" ?selected="${!this.currentLayerAttribute}" i18n="Select attribute...">Select attribute...</option>${this.layerAttributes.map(attr => uHtmlFor(attr, attr.name) `<option i18n="${this.layerAttributesTranslations[attr.name]}" value="${attr.name}" ?selected="${this.currentLayerAttribute?.name == attr.name}">${attr.name}</option>`)}</select> <select id="operator" name="operator" class="gg-select gg-medium" onchange="${() => this.operatorChanged()}"><option value="" disabled="disabled" selected="selected" i18n="Select operator...">Select operator...</option>${this.operatorOptions.map(option => uHtmlFor(option, option.operator) `<option i18n="${option.displayName}" value="${option.operator}">${option.displayName}</option>`)}</select> <input id="val" type="${this.inputTypeForFilterValue}" class="${this.showVal ? 'gg-input gg-medium' : 'hidden'}" placeholder="${this.showVal2 ? 'Enter lower boundary...' : 'Enter value...'}" onkeydown="${(e) => this.onValueKeyPress(e)}"> <input id="val2" type="${this.inputTypeForFilterValue}" class="${this.showVal2 ? 'gg-input gg-medium' : 'hidden'}" placeholder="Enter upper boundary..." onkeydown="${(e) => this.onValueKeyPress(e)}"> <button class="gg-icon-button gg-medium" tip="Apply filter" onclick="${() => this.filter()}"><img alt="filter-icon" src="icons/filter.svg"></button> <button class="gg-icon-button gg-medium" tip="Remove filter" onclick="${() => this.removeFilter()}"><img alt="delete-icon" src="icons/trash.svg"></button></div></div>
+<div class="container"><div class="${this.loading ? 'loading' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading server configuration...">Loading server configuration...</span></div><div class="${this.deactivated ? 'deactivated' : 'deactivated hidden'}"><img alt="info-icon" src="icons/info.svg"> <span i18n="Filtering deactivated: layers in layergroup don't have identical attributes.">Filtering deactivated: layers in layergroup don't have identical attributes.</span></div><div class="${this.loading || this.deactivated ? 'content hidden' : 'content'}"><select id="attribute" name="attribute" class="gg-select gg-medium" aria-label="Attribute" onchange="${() => this.attributeChanged()}"><option value="" disabled="disabled" ?selected="${!this.currentLayerAttribute}" i18n="Select attribute...">Select attribute...</option>${this.layerAttributes.map(attr => uHtmlFor(attr, attr.name) `<option i18n="${this.layerAttributesTranslations[attr.name]}" value="${attr.name}" ?selected="${this.currentLayerAttribute?.name == attr.name}">${attr.name}</option>`)}</select> <select id="operator" name="operator" class="gg-select gg-medium" aria-label="Operator" onchange="${() => this.operatorChanged()}"><option value="" disabled="disabled" selected="selected" i18n="Select operator...">Select operator...</option>${this.operatorOptions.map(option => uHtmlFor(option, option.operator) `<option i18n="${option.displayName}" value="${option.operator}">${option.displayName}</option>`)}</select> <input id="val" type="${this.inputTypeForFilterValue}" aria-label="Filter value" class="${this.showVal ? 'gg-input gg-medium' : 'hidden'}" placeholder="${this.showVal2 ? 'Enter lower boundary...' : 'Enter value...'}" onkeydown="${(e) => this.onValueKeyPress(e)}"> <input id="val2" type="${this.inputTypeForFilterValue}" aria-label="Upper boundary" class="${this.showVal2 ? 'gg-input gg-medium' : 'hidden'}" placeholder="Enter upper boundary..." onkeydown="${(e) => this.onValueKeyPress(e)}"> <button class="gg-icon-button gg-medium" tip="Apply filter" onclick="${() => this.filter()}"><img alt="filter-icon" src="icons/filter.svg"></button> <button class="gg-icon-button gg-medium" tip="Remove filter" onclick="${() => this.removeFilter()}"><img alt="delete-icon" src="icons/trash.svg"></button></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     loading = true;
@@ -120,7 +120,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     validateInput(val) {
         if (val && isDate(this.currentLayerAttribute?.type || '')) {
             const date = new Date(val);
-            if (isNaN(date.getTime())) {
+            if (Number.isNaN(date.getTime())) {
                 throw new Error('Invalid date value entered !');
             }
         }

package/components/scale/component.js

@@ -9,7 +9,7 @@ class ScaleComponent extends GirafeHTMLElement {
 .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>${this.customStyle}</style>
-<select class="gg-select" onchange="${(e) => { this.state.position.scale = parseInt(e.target.value); }}">${this.context.configManager.Config.map.scales.map((scale) => uHtml `<option ?selected="${this.getFormatedScale() === this.getFormatedScale(scale)}" value="${scale}">${this.getFormatedScale(scale)}</option>`)}</select>
+<select class="gg-select" aria-label="Map scale" onchange="${(e) => { this.state.position.scale = Number.parseInt(e.target.value); }}">${this.context.configManager.Config.map.scales.map((scale) => uHtml `<option ?selected="${this.getFormatedScale() === this.getFormatedScale(scale)}" value="${scale}">${this.getFormatedScale(scale)}</option>`)}</select>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     constructor() {

package/components/selectionwindow/component.js

@@ -28,7 +28,7 @@ class SelectionWindowComponent extends GirafeDraggableElement {
 table{border-collapse:collapse;table-layout:auto;width:100%}td.feature-id{text-align:left;color:var(--text-color);font-weight:600;line-height:2rem}td.label{text-align:left;color:var(--text-color);padding-left:.25rem;padding-right:.5rem;font-weight:600}tr.key-value{line-height:2rem}tr.key-value:nth-child(odd){background-color:var(--bkg-color-grad1)}tr.key-value:nth-child(2n){background-color:var(--bkg-color)}button{background-color:unset;color:var(--text-color-grad1);cursor:pointer;border:none;flex-grow:.25;padding:.5rem}button.showing-dropdown{background-color:var(--bkg-color-grad1)}button:disabled:hover{background-color:var(--bkg-color);cursor:default}button>img{max-height:calc(var(--selection-window-header-height) / 2)}#previous i{float:left}#next i{float:right}#tools{justify-content:space-around;display:flex}#counter{line-height:var(--selection-window-footer-height);height:var(--selection-window-footer-height);text-align:center;flex-grow:1;margin-top:0}#layers-dropdown{background-color:var(--bkg-color);border:solid 1px var(--bkg-color-grad2);top:var(--selection-window-header-height);flex-direction:column;padding:.5rem 0;display:flex;position:absolute}option.layers-dropdown-item{cursor:pointer;flex-grow:1;padding:.1rem .5rem;display:flex}option.layers-dropdown-item:hover{background-color:var(--bkg-color-grad1)}
 </style>
 <style>${this.customStyle}</style>
-<div id="draggable" class="${this.visible ? 'girafe-draggable-window' : 'hidden'}"><button tabindex="-1" class="girafe-resizer tl corner"></button> <button tabindex="-1" class="girafe-resizer t top-bottom"></button> <button tabindex="-1" class="girafe-resizer tr corner"></button> <button tabindex="-1" class="girafe-resizer r left-right"></button> <button tabindex="-1" class="girafe-resizer br corner"></button> <button tabindex="-1" class="girafe-resizer b top-bottom"></button> <button tabindex="-1" class="girafe-resizer bl corner"></button> <button tabindex="-1" class="girafe-resizer l left-right"></button><div id="header"><span i18n="Results" class="title"></span><div id="layers-download-wrapper"><button class="${this.showDropdown ? 'gg-icon-button gg-medium showing-dropdown' : 'gg-icon-button gg-medium'}" onclick="${() => this.openDropdown()}" tip="Generate CSV"><img alt="download csv icon" src="icons/arrow-download.svg"></button><div ?hidden="${!this.showDropdown}"><div id="layers-dropdown">${this.getLayersList().map((layer) => uHtml `<option class="layers-dropdown-item" value="${layer.id}" onclick="${() => this.generateCSV(layer.id)}" onkeydown="${() => this.generateCSV(layer.id)}" tabindex="0" i18n="${layer.label}"></option>`)}</div></div></div><girafe-get-directions></girafe-get-directions><button class="gg-icon-button gg-medium" onclick="${() => this.recenter()}" tip="Zoom to"><img alt="zoom to selection icon" src="icons/zoom-to-selection.svg"></button> <button class="gg-icon-button gg-medium" onclick="${() => this.closeWindow()}" tip="Clear results and close Panel"><img alt="close-icon" src="icons/close.svg"></button></div><div class="hr"></div><div id="content"><div><table><tr class="hidden"><th i18n="Label">Label<th i18n="Value">Value<tr><td class="feature-id" colspan="2" i18n="${this.getWindowFeature()?.id}"></tr>${this.displayedProperties.map((keyValue) => uHtml `<tr class="key-value"><td class="label" i18n="${keyValue[0]}"><td class="value">${this.htmlUnsafe(keyValue[1])}</tr>`)}</table></div></div><div class="hr"></div><div id="footer"><button id="beginning" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == 0}" onclick="${() => this.onFocusWindowFeature(0)}"><img alt="beginning-icon" src="icons/skip-to-beginning.svg"></button> <button id="previous" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == 0}" onclick="${() => this.onFocusWindowFeature(this.focusedIndex - 1)}"><img alt="previous-icon" src="icons/to-previous.svg"></button><div id="counter" class="${this.maxIndex > 0 ? '' : 'hidden'}"><span class="${this.maxIndex > 0 ? '' : 'hidden'}"><input class="gg-input" type="number" min="1" max="${this.maxIndex + 1}" value="${this.focusedIndex + 1}" onchange="${(e) => this.onFocusWindowFeatureChecked(e)}"> <span>/</span> <span>${this.maxIndex + 1}</span></span></div><button id="next" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == this.maxIndex}" onclick="${() => this.onFocusWindowFeature(this.focusedIndex + 1)}"><img alt="next-icon" src="icons/to-next.svg"></button> <button id="end" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == this.maxIndex}" onclick="${() => this.onFocusWindowFeature(this.maxIndex)}"><img alt="end-icon" src="icons/skip-to-end.svg"></button></div></div>
+<div id="draggable" class="${this.visible ? 'girafe-draggable-window' : 'hidden'}"><button tabindex="-1" class="girafe-resizer tl corner"></button> <button tabindex="-1" class="girafe-resizer t top-bottom"></button> <button tabindex="-1" class="girafe-resizer tr corner"></button> <button tabindex="-1" class="girafe-resizer r left-right"></button> <button tabindex="-1" class="girafe-resizer br corner"></button> <button tabindex="-1" class="girafe-resizer b top-bottom"></button> <button tabindex="-1" class="girafe-resizer bl corner"></button> <button tabindex="-1" class="girafe-resizer l left-right"></button><div id="header"><span i18n="Results" class="title"></span><div id="layers-download-wrapper"><button class="${this.showDropdown ? 'gg-icon-button gg-medium showing-dropdown' : 'gg-icon-button gg-medium'}" onclick="${() => this.openDropdown()}" tip="Generate CSV"><img alt="download csv icon" src="icons/arrow-download.svg"></button><div ?hidden="${!this.showDropdown}"><div id="layers-dropdown">${this.getLayersList().map((layer) => uHtml `<option class="layers-dropdown-item" value="${layer.id}" onclick="${() => this.generateCSV(layer.id)}" onkeydown="${() => this.generateCSV(layer.id)}" tabindex="0" i18n="${layer.label}"></option>`)}</div></div></div><girafe-get-directions></girafe-get-directions><button class="gg-icon-button gg-medium" onclick="${() => this.recenter()}" tip="Zoom to"><img alt="zoom to selection icon" src="icons/zoom-to-selection.svg"></button> <button class="gg-icon-button gg-medium" onclick="${() => this.closeWindow()}" tip="Clear results and close Panel"><img alt="close-icon" src="icons/close.svg"></button></div><div class="hr"></div><div id="content"><div><table><tr class="hidden"><th i18n="Label">Label<th i18n="Value">Value<tr><td class="feature-id" colspan="2" i18n="${this.getWindowFeature()?.id}"></tr>${this.displayedProperties.map((keyValue) => uHtml `<tr class="key-value"><td class="label" i18n="${keyValue[0]}"><td class="value">${this.htmlUnsafe(keyValue[1])}</tr>`)}</table></div></div><div class="hr"></div><div id="footer"><button id="beginning" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == 0}" onclick="${() => this.onFocusWindowFeature(0)}"><img alt="beginning-icon" src="icons/skip-to-beginning.svg"></button> <button id="previous" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == 0}" onclick="${() => this.onFocusWindowFeature(this.focusedIndex - 1)}"><img alt="previous-icon" src="icons/to-previous.svg"></button><div id="counter" class="${this.maxIndex > 0 ? '' : 'hidden'}"><span class="${this.maxIndex > 0 ? '' : 'hidden'}"><input class="gg-input" type="number" aria-label="Feature index" min="1" max="${this.maxIndex + 1}" value="${this.focusedIndex + 1}" onchange="${(e) => this.onFocusWindowFeatureChecked(e)}"> <span>/</span> <span>${this.maxIndex + 1}</span></span></div><button id="next" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == this.maxIndex}" onclick="${() => this.onFocusWindowFeature(this.focusedIndex + 1)}"><img alt="next-icon" src="icons/to-next.svg"></button> <button id="end" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == this.maxIndex}" onclick="${() => this.onFocusWindowFeature(this.maxIndex)}"><img alt="end-icon" src="icons/skip-to-end.svg"></button></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     eventsCallbacks = [];

package/components/share/component.js

@@ -16,7 +16,7 @@ class ShareComponent extends GirafeHTMLElement {
 #content{background:var(--bkg-color);color:var(--text-color);margin:0;padding:1rem}.group{padding-bottom:4em}.title{margin-top:0}.link{flex-direction:column;gap:.2rem;margin-top:.5rem;display:flex;& button{padding-top:.25rem;padding-bottom:.25rem}}.qrcode{opacity:.7;width:10rem;margin:2rem auto auto;display:block}.qrcode-placeholder{content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);width:10rem;height:10rem;margin:2rem auto auto;display:block}.social{display:flex}.social button{cursor:pointer;background-color:#0000;border:none;margin:2rem auto auto}.social img{opacity:.7;width:3rem;filter:var(--svg-filter)}.social img:hover{opacity:1}input{flex-grow:1;font-size:.9rem}.error{color:var(--error-color);text-align:center;order:3;width:90%}.textarea-for-code{font-family:monospace,Arial,sans-serif;font-size:.75rem;line-height:1.1rem}.copy-success,.copy-success:hover{background-color:var(--success-color)}.checkbox-wrapper{flex-direction:row;justify-content:space-between;align-items:center;height:2rem;display:flex;& input[type=checkbox]{flex-grow:unset}}.disabled{opacity:.25;pointer-events:none}.enabled{opacity:1;pointer-events:unset}.icon-loading{content:url(icons/3-dots-fade.svg)}.icon-copy{content:url(icons/content_copy.svg);margin:1px}
 </style>
 <style>${this.customStyle}</style>
-<div id="panel"><div id="content"><div class="${!this.urlShortener ? '' : 'hidden'}"><div class="message" i18n="Error, the shortener service is not defined.">Error, the shortener service is not defined.</div></div><div id="share-map" class="${this.urlShortener ? 'group' : 'hidden'}"><h3 class="title" i18n="Share this map">Share this map</h3><div class="${this.awaitingShareLink ? 'disabled' : 'enabled'}"><div class="link"><input value="${this.shareLink}" class="gg-input" disabled="disabled"> <button id="btn-copy-short" class="gg-button" onclick="${() => this.generateAndCopyLink()}"><img alt="loading/copy" src="" class="${this.awaitingShareLink ? 'icon-loading' : 'icon-copy'}" width="20" height="20"> <span i18n="${this.awaitingShareLink ? 'Generating link' : (!this.shareLink ? 'Generate and copy link' : 'Copy to Clipboard')}"></span></button></div><img alt="share-qrcode" class="${(this.qrCode ? 'qrcode' : 'qrcode-placeholder')}" src="${this.qrCode}"><div class="${(this.success ? 'hidden' : 'qrcode error')}"><img alt="error-icon" src="icons/error.svg"> <span i18n="Error, can not fetch the shortener service. Please try again later.">Error, can not fetch the shortener service. Please try again later.</span></div><div class="social"><button onclick="${() => this.shareFacebook()}"><img alt="share-facebook" src="${this.facebookLogo}"></button> <button onclick="${() => this.shareTwitter()}"><img alt="share-twitter" src="${this.twitterLogo}"></button> <button onclick="${() => this.shareLinkedIn()}"><img alt="share-linkedin" src="${this.linkedInLogo}"></button> <button onclick="${() => this.shareMail()}"><img alt="share-mail" src="${this.mailLogo}"></button></div></div></div><div id="embed-map" class="${this.urlShortener ? 'group' : 'hidden'}"><h3 class="title" i18n="Embed this map">Embed this map</h3><div class="link"><select class="gg-select" id="logLevel" onchange="${(evt) => this.onSizeChanged(evt)}"><option ?selected="${this.iframeSize === ''}" i18n="Select map size..." value="">Select map size...<option ?selected="${this.iframeSize === 'small'}" i18n="Small" value="small">Small<option ?selected="${this.iframeSize === 'medium'}" i18n="Medium" value="medium">Medium<option ?selected="${this.iframeSize === 'large'}" i18n="Large" value="large">Large</select><div class="checkbox-wrapper"><label for="iframe-search-visible" i18n="Search visible">Search visible</label> <input type="checkbox" class="gg-checkbox" id="iframe-search-visible" value="${this.shareState.searchComponentVisible}" onchange="${(e) => this.shareState.searchComponentVisible = e.target.checked}"></div><div class="checkbox-wrapper"><label for="iframe-basemap-visible" i18n="Basemap visible">Basemap visible</label> <input type="checkbox" class="gg-checkbox" id="iframe-basemap-visible" value="${this.shareState.basemapComponentVisible}" onchange="${(e) => this.shareState.basemapComponentVisible = e.target.checked}"></div><textarea value="${this.iframeCode}" class="gg-input gg-textarea textarea-for-code" disabled="disabled"></textarea> <button id="btn-copy-iframe" class="gg-button" ?disabled="${this.iframeSize === ''}" onclick="${() => this.generateAndCopyIframeCode()}"><img alt="loading/copy" src="" class="${this.awaitingIframeUrl ? 'icon-loading' : 'icon-copy'}" width="20" height="20"> <span i18n="${this.awaitingIframeUrl ? 'Generating code' : 'Generate and copy code'}"></span></button></div></div></div></div>
+<div id="panel"><div id="content"><div class="${!this.urlShortener ? '' : 'hidden'}"><div class="message" i18n="Error, the shortener service is not defined.">Error, the shortener service is not defined.</div></div><div id="share-map" class="${this.urlShortener ? 'group' : 'hidden'}"><h3 class="title" i18n="Share this map">Share this map</h3><div class="${this.awaitingShareLink ? 'disabled' : 'enabled'}"><div class="link"><input aria-label="Share link" value="${this.shareLink}" class="gg-input" disabled="disabled"> <button id="btn-copy-short" class="gg-button" onclick="${() => this.generateAndCopyLink()}"><img alt="loading/copy" src="" class="${this.awaitingShareLink ? 'icon-loading' : 'icon-copy'}" width="20" height="20"> <span i18n="${this.awaitingShareLink ? 'Generating link' : (!this.shareLink ? 'Generate and copy link' : 'Copy to Clipboard')}"></span></button></div><img alt="share-qrcode" class="${(this.qrCode ? 'qrcode' : 'qrcode-placeholder')}" src="${this.qrCode}"><div class="${(this.success ? 'hidden' : 'qrcode error')}"><img alt="error-icon" src="icons/error.svg"> <span i18n="Error, can not fetch the shortener service. Please try again later.">Error, can not fetch the shortener service. Please try again later.</span></div><div class="social"><button onclick="${() => this.shareFacebook()}"><img alt="share-facebook" src="${this.facebookLogo}"></button> <button onclick="${() => this.shareTwitter()}"><img alt="share-twitter" src="${this.twitterLogo}"></button> <button onclick="${() => this.shareLinkedIn()}"><img alt="share-linkedin" src="${this.linkedInLogo}"></button> <button onclick="${() => this.shareMail()}"><img alt="share-mail" src="${this.mailLogo}"></button></div></div></div><div id="embed-map" class="${this.urlShortener ? 'group' : 'hidden'}"><h3 class="title" i18n="Embed this map">Embed this map</h3><div class="link"><select class="gg-select" id="logLevel" aria-label="Map size" onchange="${(evt) => this.onSizeChanged(evt)}"><option ?selected="${this.iframeSize === ''}" i18n="Select map size..." value="">Select map size...<option ?selected="${this.iframeSize === 'small'}" i18n="Small" value="small">Small<option ?selected="${this.iframeSize === 'medium'}" i18n="Medium" value="medium">Medium<option ?selected="${this.iframeSize === 'large'}" i18n="Large" value="large">Large</select><div class="checkbox-wrapper"><label for="iframe-search-visible" i18n="Search visible">Search visible</label> <input type="checkbox" class="gg-checkbox" id="iframe-search-visible" value="${this.shareState.searchComponentVisible}" onchange="${(e) => this.shareState.searchComponentVisible = e.target.checked}"></div><div class="checkbox-wrapper"><label for="iframe-basemap-visible" i18n="Basemap visible">Basemap visible</label> <input type="checkbox" class="gg-checkbox" id="iframe-basemap-visible" value="${this.shareState.basemapComponentVisible}" onchange="${(e) => this.shareState.basemapComponentVisible = e.target.checked}"></div><textarea value="${this.iframeCode}" class="gg-input gg-textarea textarea-for-code" aria-label="Embed code" disabled="disabled"></textarea> <button id="btn-copy-iframe" class="gg-button" ?disabled="${this.iframeSize === ''}" onclick="${() => this.generateAndCopyIframeCode()}"><img alt="loading/copy" src="" class="${this.awaitingIframeUrl ? 'icon-loading' : 'icon-copy'}" width="20" height="20"> <span i18n="${this.awaitingIframeUrl ? 'Generating code' : 'Generate and copy code'}"></span></button></div></div></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     isPanelVisible = false;

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/themes-mobile/layer-selected/component.js

@@ -13,7 +13,7 @@ class MobileSelectedLayerElementComponent extends MobileLayerElementComponent {
 .container{border-bottom:1px solid #ddd;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;display:flex}header{align-items:center;display:flex}section.options{align-items:center;gap:1rem;width:100%;margin-bottom:.5rem;display:flex}.slider{flex-grow:1}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}
 </style>
 <style>${this.customStyle}</style>
-<div class="container"><header><button class="${this.layer?.active ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small'}" tip="Activate / Deactivate" onclick="${() => this.toggle()}"><img class="${this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-full.svg"> <img class="${!this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-no.svg"></button><div class="label-container"><button class="${this.layer?.active ? 'gg-button gg-small gg-selected' : 'gg-button gg-small'}" onclick="${() => this.toggle()}"><span i18n="${this.layer?.name}" class="gg-tree-label">${this.layer?.name}</span></button></div><img class="${this.layer?.active && this.iconUrl ? 'legend-icon' : 'hidden'}" alt="${'Icon for ' + this.layer?.name}" src="${this.iconUrl}" crossorigin="${this.getCrossOrigin(this.iconUrl)}"></header><section class="options"><input type="range" class="gg-range" min="0" max="20" value="${((this.layer?.opacity ?? 1) * 20).toString()}" oninput="${(event) => this.layer.opacity = parseInt(event.target.value) / 20}"> <a href="${this.layer?.metadataUrl}" target="_blank" class="${this.layer?.hasMetadata ? 'tool' : 'hidden'}"><img alt="Metadata" src="icons/info.svg"> </a><a href="javascript:void(0)" onclick="${() => this.layer.swiped = (this.layer?.swiped === 'left') ? 'no' : 'left'}"><img alt="Swipe layer to the left" src="icons/swipe-left.svg"> </a><a href="javascript:void(0)" onclick="${() => this.layer.swiped = (this.layer?.swiped === 'right') ? 'no' : 'right'}"><img alt="Swipe layer to the right" src="icons/swipe-right.svg"> </a><a href="${this.firstLegendUrl ?? '#'}" target="_blank" class="${this.firstLegendUrl ? 'tool' : 'hidden'}"><img alt="Metadata" src="icons/legend.svg"></a></section></div>
+<div class="container"><header><button class="${this.layer?.active ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small'}" tip="Activate / Deactivate" onclick="${() => this.toggle()}"><img class="${this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-full.svg"> <img class="${!this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-no.svg"></button><div class="label-container"><button class="${this.layer?.active ? 'gg-button gg-small gg-selected' : 'gg-button gg-small'}" onclick="${() => this.toggle()}"><span i18n="${this.layer?.name}" class="gg-tree-label">${this.layer?.name}</span></button></div><img class="${this.layer?.active && this.iconUrl ? 'legend-icon' : 'hidden'}" alt="${'Icon for ' + this.layer?.name}" src="${this.iconUrl}" crossorigin="${this.getCrossOrigin(this.iconUrl)}"></header><section class="options"><input type="range" aria-label="Opacity" class="gg-range" min="0" max="20" value="${((this.layer?.opacity ?? 1) * 20).toString()}" oninput="${(event) => this.layer.opacity = Number.parseInt(event.target.value) / 20}"> <a href="${this.layer?.metadataUrl}" target="_blank" class="${this.layer?.hasMetadata ? 'tool' : 'hidden'}"><img alt="Metadata" src="icons/info.svg"> </a><a href="javascript:void(0)" onclick="${() => this.layer.swiped = (this.layer?.swiped === 'left') ? 'no' : 'left'}"><img alt="Swipe layer to the left" src="icons/swipe-left.svg"> </a><a href="javascript:void(0)" onclick="${() => this.layer.swiped = (this.layer?.swiped === 'right') ? 'no' : 'right'}"><img alt="Swipe layer to the right" src="icons/swipe-right.svg"> </a><a href="${this.firstLegendUrl ?? '#'}" target="_blank" class="${this.firstLegendUrl ? 'tool' : 'hidden'}"><img alt="Metadata" src="icons/legend.svg"></a></section></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     iconUrl = null;

package/components/timerestriction/timepicker/component.js

@@ -17,7 +17,7 @@ class TimePickerComponent extends TimeWidget {
 #container{margin-right:.5rem;display:flex}
 </style>
 <style>${this.customStyle}</style>
-<div id="container"><input id="input-lower" class="gg-select gg-medium"> <input id="input-upper" class="gg-select gg-medium"></div>
+<div id="container"><input id="input-lower" aria-label="Start time" class="gg-select gg-medium"> <input id="input-upper" aria-label="End time" class="gg-select gg-medium"></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     constructor() {

package/components/timerestriction/timeslider/component.js

@@ -20,7 +20,7 @@ class TimeSliderComponent extends TimeWidget {
 #container{--slider-color:var(--text-color);--slider-disabled-color:var(--text-color-grad2);--slider-highlight-color:var(--bkg-color-grad2);--slider-width:170px;--track-width:calc(var(--slider-width) - var(--thumb-width));--thumb-width:19px;--margin-left:calc(var(--thumb-width) / 2);--slider-track-height:9px;--thumb-margin-top:calc(-.5 * var(--thumb-width) + .5 * var(--slider-track-height));--slider-track-border-color:var(--text-color-grad2);--slider-track-outside-color:var(--bkg-color-grad2);--slider-track-inside-color:var(--text-color);color:var(--text-color);flex-direction:column;margin:.5rem 0 0 .5rem;display:flex}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:var(--thumb-width);height:var(--thumb-width);margin-top:var(--thumb-margin-top);background:var(--slider-color);border:1px solid var(--slider-highlight-color);cursor:pointer;border-radius:50%;box-shadow:1px 1px 2px #9c9c9c}input[type=range]::-webkit-slider-thumb:hover{box-shadow:inset 0 0 2px 0 var(--slider-highlight-color), 0 0 4px var(--slider-highlight-color);border-color:var(--bkg-color)}input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 2px 0 var(--slider-highlight-color), 0 0 4px var(--slider-highlight-color);-webkit-box-shadow:inset 0 0 2px 0 var(--slider-highlight-color), 0 0 4px var(--slider-highlight-color);border-color:var(--bkg-color)}input[type=range]::-webkit-slider-runnable-track{height:var(--slider-track-height)}input[type=range]::-moz-range-thumb{-webkit-appearance:none;pointer-events:all;width:var(--thumb-width);height:var(--thumb-width);margin-top:var(--thumb-margin-top);background:var(--slider-color);border:1px solid var(--slider-highlight-color);cursor:pointer;border-radius:50%}input[type=range]::-moz-range-thumb:hover{box-shadow:inset 0 0 2px 0 var(--slider-highlight-color), 0 0 4px var(--slider-highlight-color);border-color:var(--bkg-color)}input[type=range]::-moz-range-thumb:active{box-shadow:inset 0 0 2px 0 var(--slider-highlight-color), 0 0 4px var(--slider-highlight-color);-webkit-box-shadow:inset 0 0 2px 0 var(--slider-highlight-color), 0 0 4px var(--slider-highlight-color);border-color:var(--bkg-color)}input[type=range]::-moz-range-track{height:var(--slider-track-height)}input[type=range]{-webkit-appearance:none;appearance:none;height:var(--slider-track-height);width:var(--slider-width);pointer-events:none;z-index:2;background-color:#0000;margin:0}#input-upper{position:absolute}#slider-track{width:var(--track-width);margin-left:var(--margin-left);height:var(--slider-track-height);cursor:pointer;pointer-events:all;z-index:0;border:1px solid var(--slider-track-border-color);border-radius:3px;position:absolute}.slider-label{width:var(--track-width);margin:calc(.25 * var(--thumb-width)) 0 0 var(--margin-left);border:1px solid #0000;justify-content:space-around;align-items:center;line-height:1em;display:flex}.slider-label.editable{margin-top:calc(.5 * var(--thumb-width));margin-bottom:.3rem}.slider-label>input{text-align:center;max-width:80px;padding:0;line-height:1em}.slider-label>input::-webkit-outer-spin-button,.slider-label>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.slider-label>input[type=number]{-moz-appearance:textfield}.slider-label>input:disabled{border-color:#0000}.slider-label>input:disabled:hover{background-color:initial;cursor:default}.slider-label>div{margin:0 2px}
 </style>
 <style>${this.customStyle}</style>
-<div id="container"><input id="input-lower" type="range" min="0" max="1" step="1"> <input id="input-upper" type="range" min="0" max="1" step="1"><div id="slider-track"></div><div class="${this.resolution === 'year' ? 'slider-label editable' : 'slider-label'}"><input id="output-label-lower" disabled="disabled" class="gg-input gg-small"><div class="${this.mode === 'range' ? '' : 'hidden'}">/</div><input id="output-label-upper" disabled="disabled" class="${this.mode === 'range' ? 'gg-input gg-small' : 'hidden'}"></div></div>
+<div id="container"><input id="input-lower" type="range" aria-label="Start time" min="0" max="1" step="1"> <input id="input-upper" type="range" aria-label="End time" min="0" max="1" step="1"><div id="slider-track"></div><div class="${this.resolution === 'year' ? 'slider-label editable' : 'slider-label'}"><input id="output-label-lower" disabled="disabled" aria-label="Start time value" class="gg-input gg-small"><div class="${this.mode === 'range' ? '' : 'hidden'}">/</div><input id="output-label-upper" disabled="disabled" aria-label="End time value" class="${this.mode === 'range' ? 'gg-input gg-small' : 'hidden'}"></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     discreteTimeSteps;
@@ -208,8 +208,8 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         const maxPosition = this.countSliderStepsInRange();
         if (this.mode !== 'range' || maxPosition === 0)
             return;
-        const lowVal = (100 * parseInt(this.lowerInputElem.value)) / maxPosition;
-        const highVal = (100 * (this.mode === 'range' ? parseInt(this.upperInputElem.value) : maxPosition)) / maxPosition;
+        const lowVal = (100 * Number.parseInt(this.lowerInputElem.value)) / maxPosition;
+        const highVal = (100 * (this.mode === 'range' ? Number.parseInt(this.upperInputElem.value) : maxPosition)) / maxPosition;
         const sliderTrackElem = this.getById('slider-track');
         const outCol = 'var(--slider-track-outside-color)';
         const inCol = 'var(--slider-track-inside-color)';
@@ -317,7 +317,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
      * @throws {Error} If the resolution is invalid.
      */
     sliderPositionToDateString(position) {
-        if (position === '' || isNaN(Number(position)))
+        if (position === '' || Number.isNaN(Number(position)))
             return '';
         const increment = Number(position);
         const oneDayInMillis = 1000 * 60 * 60 * 24;

package/components/treeview/treeviewroot/component.js

@@ -25,7 +25,7 @@ class TreeViewRootComponent extends GirafeHTMLElement {
 .panel{background:var(--bkg-color);flex-direction:column-reverse;display:flex;position:absolute;inset:0}.menu{z-index:1;border-top:1px solid #bbb;display:flex}.treeview-list,.treeview-no-data{flex-grow:1;overflow:hidden auto}.treeview-search{background-color:var(--bkg-color);border:1px solid #cfd6dd;border-radius:4px;flex-direction:row;flex-grow:1;align-self:center;width:auto;margin-right:2px;display:flex}#treeview-search-field{width:90%;color:var(--text-color);background:0 0;border:0;outline:none;flex:auto;padding:0;font-size:1rem}.filter-icon,.delete-icon{width:16px;color:var(--text-color);padding:0 .5rem}.delete-button{cursor:pointer;background-color:#0000;border:none;padding:0}.treeview-no-data{justify-content:center;align-items:center;display:flex}.treeview-loading{flex-direction:column;justify-content:center;align-items:center;display:flex}img:-moz-loading{visibility:hidden}.no-data{color:#999;text-align:center;align-items:anchor-center;font-variant:small-caps;flex-direction:column;gap:.3rem;font-size:1rem;display:flex}.no-data span{flex-grow:1;display:block}
 </style>
 <style>${this.customStyle}</style>
-<div id="panel" class="panel"><div class="menu"><button class="gg-icon-button gg-medium" tip="Expand / Collapse all" onclick="${() => this.expandAll()}"><img class="${this.isAllExpanded ? '' : 'hidden'}" alt="Collapse all icon" src="icons/collapse-all.svg"> <img class="${this.isAllExpanded ? 'hidden' : ''}" alt="Expand all icon" src="icons/expand-all.svg"></button> <button class="gg-icon-button gg-medium" tip="Toggle all legends" onclick="${() => this.toggleAllLegends()}"><img alt="Toggle all legends icon" src="icons/legend.svg"></button> <button class="gg-icon-button gg-medium" tip="Remove all layers" onclick="${() => this.removeAll()}"><img alt="Remove all layers icon" src="icons/trash.svg"></button><div class="treeview-search" data-tour="treeview-filter"><img class="filter-icon" alt="filter-button-icon" src="icons/filter.svg"> <input id="treeview-search-field" class="gg-input" placeholder="Filter layer tree..." i18n="Filter layer tree..." autocomplete="off" autocorrect="off" oninput="${(e) => this.onFilterTree(e.target.value)}"> <button class="${this.isTreeFiltered ? 'delete-button' : 'hidden'}" onclick="${() => this.clearFilter()}"><img class="delete-icon" alt="delete-button-icon" tip="Reset filter" i18n="Reset filter" src="icons/trash.svg"></button></div></div><div class="${this.state.layers.layersList.length > 0 ? 'treeview-list' : 'hidden'}">${this.sortedLayers().map(layer => (layer instanceof ThemeLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-theme themeid="${layer.treeItemId}"></girafe-tree-view-theme>` : (layer instanceof GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-group groupid="${layer.treeItemId}"></girafe-tree-view-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-item layerid="${layer.treeItemId}"></girafe-tree-view-item>`)}</div><div class="${this.state.layers.layersList.length > 0 ? 'hidden' : 'treeview-no-data'}"><div class="${this.state.themes.isLoaded ? 'hidden' : 'treeview-loading'}"><img loading="eager" src="icons/progress.svg" class="gg-spin gg-big" alt="${this.context.i18nManager.getTranslation('Loading')}"><div><span i18n="Loading">Loading...</span></div></div><div class="${this.state.themes.isLoaded ? 'no-data' : 'hidden'}"><span i18n="Nothing here yet!">Nothing here yet!</span> <span>-</span> <span i18n="Add your first items">Add your first items</span> <span i18n="by selecting a theme">by selecting a theme</span> <span i18n="or">or</span> <span i18n="using the search bar">using the search bar</span></div></div></div>
+<div id="panel" class="panel"><div class="menu"><button class="gg-icon-button gg-medium" tip="Expand / Collapse all" onclick="${() => this.expandAll()}"><img class="${this.isAllExpanded ? '' : 'hidden'}" alt="Collapse all icon" src="icons/collapse-all.svg"> <img class="${this.isAllExpanded ? 'hidden' : ''}" alt="Expand all icon" src="icons/expand-all.svg"></button> <button class="gg-icon-button gg-medium" tip="Toggle all legends" onclick="${() => this.toggleAllLegends()}"><img alt="Toggle all legends icon" src="icons/legend.svg"></button> <button class="gg-icon-button gg-medium" tip="Remove all layers" onclick="${() => this.removeAll()}"><img alt="Remove all layers icon" src="icons/trash.svg"></button><div class="treeview-search" data-tour="treeview-filter"><img class="filter-icon" alt="filter-button-icon" src="icons/filter.svg"> <input id="treeview-search-field" class="gg-input" aria-label="Filter layer tree" placeholder="Filter layer tree..." i18n="Filter layer tree..." autocomplete="off" autocorrect="off" oninput="${(e) => this.onFilterTree(e.target.value)}"> <button class="${this.isTreeFiltered ? 'delete-button' : 'hidden'}" onclick="${() => this.clearFilter()}"><img class="delete-icon" alt="delete-button-icon" tip="Reset filter" i18n="Reset filter" src="icons/trash.svg"></button></div></div><div class="${this.state.layers.layersList.length > 0 ? 'treeview-list' : 'hidden'}">${this.sortedLayers().map(layer => (layer instanceof ThemeLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-theme themeid="${layer.treeItemId}"></girafe-tree-view-theme>` : (layer instanceof GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-group groupid="${layer.treeItemId}"></girafe-tree-view-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-tree-view-item layerid="${layer.treeItemId}"></girafe-tree-view-item>`)}</div><div class="${this.state.layers.layersList.length > 0 ? 'hidden' : 'treeview-no-data'}"><div class="${this.state.themes.isLoaded ? 'hidden' : 'treeview-loading'}"><img loading="eager" src="icons/progress.svg" class="gg-spin gg-big" alt="${this.context.i18nManager.getTranslation('Loading')}"><div><span i18n="Loading">Loading...</span></div></div><div class="${this.state.themes.isLoaded ? 'no-data' : 'hidden'}"><span i18n="Nothing here yet!">Nothing here yet!</span> <span>-</span> <span i18n="Add your first items">Add your first items</span> <span i18n="by selecting a theme">by selecting a theme</span> <span i18n="or">or</span> <span i18n="using the search bar">using the search bar</span></div></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     filterHelper;

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
      */