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

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

@@ -26,12 +26,16 @@ class SearchComponent extends GirafeHTMLElement {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
+.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{z-index:-1;opacity:0;position:absolute}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{flex-flow:wrap;justify-content:space-between;align-items:stretch;width:25em;padding:.5em;font-size:10px;display:flex}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper:before{content:"";order:1;width:100%;height:0;display:block}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:auto}.layout_default .picker_sl:before{content:"";padding-bottom:100%;display:block}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{flex:auto;order:1}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;cursor:default;color:#444;pointer-events:auto;background:#f2f2f2;font-family:sans-serif;box-shadow:0 0 0 1px silver}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;outline:none;box-shadow:0 0 0 1px silver}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(#0000,#dcdcdc);padding:.4em .6em}.picker_wrapper button:active{background-image:linear-gradient(#dcdcdc,#0000)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{z-index:1;cursor:pointer;background:currentColor;border:2px solid #fff;border-radius:100%;display:block;position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);box-shadow:0 0 3px 1px #67b9ff}.picker_slider .picker_selector{border-radius:2px}.picker_hue{background-image:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);position:relative;box-shadow:0 0 0 1px silver}.picker_sl{background-image:linear-gradient(#fff,#fff0 50%),linear-gradient(#0000 50%,#000),linear-gradient(90deg,gray,#80808000);position:relative;box-shadow:0 0 0 1px silver}.picker_alpha,.picker_sample{background:linear-gradient(45deg,#d3d3d3 25%,#0000 25% 75%,#d3d3d3 75%) 0 0/2em 2em,linear-gradient(45deg,#d3d3d3 25%,#fff 25% 75%,#d3d3d3 75%) 1em 1em/2em 2em;position:relative;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:0 0}.picker_editor input{padding:.2em .4em;font-family:monospace}.picker_sample:before{content:"";background:currentColor;width:100%;height:100%;display:block;position:absolute}.picker_arrow{z-index:-1;position:absolute}.picker_wrapper.popup{z-index:2;margin:1.5em;position:absolute}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow:before,.picker_wrapper.popup .picker_arrow:after{background:#f2f2f2;box-shadow:0 0 10px 1px #0006}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow:before,.picker_wrapper.popup .picker_arrow:after{content:"";z-index:-99;display:block;position:absolute;top:0;left:0}.picker_wrapper.popup .picker_arrow:before{-webkit-transform-origin:0 100%;transform-origin:0 100%;width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg)}.picker_wrapper.popup .picker_arrow:after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg)scaleY(-1);transform:rotate(90deg)scaleY(-1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}
+</style><style>
+.picker_wrapper,.picker_arrow:after,.picker_arrow:before{background-color:var(--bkg-color)!important}.picker_wrapper,.picker_arrow:before{box-shadow:0 0 10px 1px var(--text-color-grad1)!important}.picker_wrapper.fixedPosition{transform:translate(-260px)}.picker_arrow.fixedPosition{transform:translate(200px)rotate(90deg)scaleX(-1)!important}
+</style><style>
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);cursor:pointer;width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style><style>
 .hidden{display:none}#searchbox{background-color:var(--bkg-color);border:1px solid #cfd6dd;border-radius:4px;flex-direction:row;align-items:center;width:100%;min-width:0;height:2.25rem;display:flex;& slot[name=search-tooltip]{display:none}}#search-filter{flex:none;min-width:0}#search{-webkit-appearance:none;width:auto;height:2.25rem;color:var(--text-color);background:0 0;border:0;outline:none;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:0 0 0 .25rem;padding-left:.25rem;font-size:1rem}.search-icon,.close-icon,.theme-icon,.select-color-icon{width:14px;color:var(--text-color);padding:0 .75rem}.close-button,.select-color-button{cursor:pointer;background-color:#0000;border:none;padding:0}#results{z-index:1000;background-color:var(--bkg-color);scrollbar-width:thin;border:var(--app-standard-border);border-radius:4px;width:min(36rem,50vw);max-height:31rem;margin-top:.1rem;margin-bottom:.5rem;position:absolute;top:3.5rem;overflow-x:hidden}.entry{width:34rem;color:var(--text-color);padding:.3rem 1rem;line-height:1.3rem;display:inline-block}.entry img{width:.8em;margin-right:1rem}.entry span{text-transform:uppercase}.provider,.group{font-size:1.2rem;font-weight:600;line-height:3rem}.provider{background-color:color-mix(in srgb, var(--bkg-color-grad1) 75%, transparent);margin-top:1rem;font-size:1.5rem}#results>.provider:first-child{margin-top:0}.result{background:0 0;border-top:1px solid #ccc;align-items:stretch;width:100%;padding:0;display:flex}.result button{cursor:pointer;text-align:left;width:100%;color:var(--text-color);background:0 0;border:none;padding:.3rem 1rem}.result.selected,.result button:hover{color:var(--text-color);background-color:var(--bkg-color-grad2)!important}.result .tools{width:1.3rem;margin:0}.result .tools button{height:-webkit-fill-available;margin:0;padding:0 .3rem}.result .tools button img{margin:0;padding:0}#no-result{background:var(--warning-color);opacity:.75;visibility:hidden;pointer-events:none;border-radius:6px;width:fit-content;margin:auto;padding:.5rem 0;font-size:1rem;position:absolute;top:3.5rem;left:0;right:0}#no-result>span{padding:1.3rem}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.shown-then-fadeout{animation:2s ease-in-out forwards fadeOut;visibility:visible!important}
 </style>
 <style>${this.customStyle}</style>
-<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><link rel="stylesheet" href="styles/girafecolorpicker.css"><div id="searchbox"><slot name="search-tooltip"></slot><girafe-search-filter id="search-filter"></girafe-search-filter><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search..." placeholder="Search..." aria-label="Search" oninput="${(e) => this.doSearchDebounced(e)}" onfocusin="${() => this.onFocusIn()}" onfocusout="${() => this.onFocusOut()}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button> <button tip="change_search_result_color" id="colorPickerBtn" class="${this.paintSearchResults ? 'select-color-button' : 'hidden'}"><img class="select-color-icon" alt="select-color-icon" src="${this.paintbrushIcon}"></button><div id="results" class="${!this.allResults.length || this.forceHide ? 'hidden' : ''}" onmousemove="${() => this.onMouseMove()}">${(Object.keys(this.groupedResults) ?? []).map(provider => uHtml `<div class="${this.getProviderClass(provider)}"><img alt="provider icon" src="${this.searchIcon}"> <span i18n="${provider}">${provider}</span></div>${(Object.keys(this.groupedResults[provider]) ?? []).map(group => uHtml `<div class="${this.getGroupClass(group)}"><img alt="result icon" src="${this.getGroupIcon(group)}"> <span i18n="${group}">${group}</span></div>${(this.groupedResults[provider][group] ?? []).map(result => uHtml `<div class="${result.get('selected') ? 'result entry selected' : 'result entry'}"><button onmouseover="${() => this.onMouseOver(result)}" onmouseleave="${() => this.onMouseLeave()}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}">${this.getLabel(result)}</button><div class="${this.isFeatureActionThemeRelated(result) ? 'tools' : 'hidden'}"><button class="addFullTree" onclick="${() => this.addFullThemeIfNotPresent(result)}"><img class="theme-icon" alt="theme-icon" src="icons/theme-checked.svg" tip="Complete the theme"></button></div></div>`)} `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div></div>
+<div id="searchbox"><slot name="search-tooltip"></slot><girafe-search-filter id="search-filter"></girafe-search-filter><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search..." placeholder="Search..." aria-label="Search" oninput="${(e) => this.doSearchDebounced(e)}" onfocusin="${() => this.onFocusIn()}" onfocusout="${() => this.onFocusOut()}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button> <button tip="change_search_result_color" id="colorPickerBtn" class="${this.paintSearchResults ? 'select-color-button' : 'hidden'}"><img class="select-color-icon" alt="select-color-icon" src="${this.paintbrushIcon}"></button><div id="results" class="${!this.allResults.length || this.forceHide ? 'hidden' : ''}" onmousemove="${() => this.onMouseMove()}">${(Object.keys(this.groupedResults) ?? []).map(provider => uHtml `<div class="${this.getProviderClass(provider)}"><img alt="provider icon" src="${this.searchIcon}"> <span i18n="${provider}">${provider}</span></div>${(Object.keys(this.groupedResults[provider]) ?? []).map(group => uHtml `<div class="${this.getGroupClass(group)}"><img alt="result icon" src="${this.getGroupIcon(group)}"> <span i18n="${group}">${group}</span></div>${(this.groupedResults[provider][group] ?? []).map(result => uHtml `<div class="${result.get('selected') ? 'result entry selected' : 'result entry'}"><button onmouseover="${() => this.onMouseOver(result)}" onmouseleave="${() => this.onMouseLeave()}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}">${this.getLabel(result)}</button><div class="${this.isFeatureActionThemeRelated(result) ? 'tools' : 'hidden'}"><button class="addFullTree" onclick="${() => this.addFullThemeIfNotPresent(result)}"><img class="theme-icon" alt="theme-icon" src="icons/theme-checked.svg" tip="Complete the theme"></button></div></div>`)} `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     searchIcon = SearchIcon;

package/components/search-mobile/component.js

@@ -6,12 +6,16 @@ class MobileSearchComponent extends SearchComponent {
     styleUrls = null;
     template = () => {
         return uHtml `<style>
+.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{z-index:-1;opacity:0;position:absolute}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{flex-flow:wrap;justify-content:space-between;align-items:stretch;width:25em;padding:.5em;font-size:10px;display:flex}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper:before{content:"";order:1;width:100%;height:0;display:block}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:auto}.layout_default .picker_sl:before{content:"";padding-bottom:100%;display:block}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{flex:auto;order:1}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;cursor:default;color:#444;pointer-events:auto;background:#f2f2f2;font-family:sans-serif;box-shadow:0 0 0 1px silver}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;outline:none;box-shadow:0 0 0 1px silver}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(#0000,#dcdcdc);padding:.4em .6em}.picker_wrapper button:active{background-image:linear-gradient(#dcdcdc,#0000)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{z-index:1;cursor:pointer;background:currentColor;border:2px solid #fff;border-radius:100%;display:block;position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);box-shadow:0 0 3px 1px #67b9ff}.picker_slider .picker_selector{border-radius:2px}.picker_hue{background-image:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);position:relative;box-shadow:0 0 0 1px silver}.picker_sl{background-image:linear-gradient(#fff,#fff0 50%),linear-gradient(#0000 50%,#000),linear-gradient(90deg,gray,#80808000);position:relative;box-shadow:0 0 0 1px silver}.picker_alpha,.picker_sample{background:linear-gradient(45deg,#d3d3d3 25%,#0000 25% 75%,#d3d3d3 75%) 0 0/2em 2em,linear-gradient(45deg,#d3d3d3 25%,#fff 25% 75%,#d3d3d3 75%) 1em 1em/2em 2em;position:relative;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:0 0}.picker_editor input{padding:.2em .4em;font-family:monospace}.picker_sample:before{content:"";background:currentColor;width:100%;height:100%;display:block;position:absolute}.picker_arrow{z-index:-1;position:absolute}.picker_wrapper.popup{z-index:2;margin:1.5em;position:absolute}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow:before,.picker_wrapper.popup .picker_arrow:after{background:#f2f2f2;box-shadow:0 0 10px 1px #0006}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow:before,.picker_wrapper.popup .picker_arrow:after{content:"";z-index:-99;display:block;position:absolute;top:0;left:0}.picker_wrapper.popup .picker_arrow:before{-webkit-transform-origin:0 100%;transform-origin:0 100%;width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg)}.picker_wrapper.popup .picker_arrow:after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg)scaleY(-1);transform:rotate(90deg)scaleY(-1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}
+</style><style>
+.picker_wrapper,.picker_arrow:after,.picker_arrow:before{background-color:var(--bkg-color)!important}.picker_wrapper,.picker_arrow:before{box-shadow:0 0 10px 1px var(--text-color-grad1)!important}.picker_wrapper.fixedPosition{transform:translate(-260px)}.picker_arrow.fixedPosition{transform:translate(200px)rotate(90deg)scaleX(-1)!important}
+</style><style>
 .hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}button,input,select,textarea{font:inherit}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
 .hidden{display:none}#searchbox{background-color:var(--bkg-color);z-index:101;border:none;border-radius:4px;flex-direction:row;width:100%;height:3rem;display:flex;position:absolute;box-shadow:0 0 10px 1px #0003}#search{z-index:2;-webkit-appearance:none;width:100%;color:var(--text-color);background:0 0;border:0;outline:none;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:0 0 0 .5rem;padding-left:.8rem;font-size:1.8em;line-height:1.8em}#search::placeholder{color:inherit;opacity:.4}#search:focus::placeholder{opacity:0;color:#0000;transition:opacity .3s}.search-icon,.close-icon,.select-color-icon{width:17px;color:var(--text-color);opacity:.7;padding:0 1rem}.close-button,.select-color-button{cursor:pointer;background-color:#0000;border:none;padding:0}#results{z-index:100;background-color:var(--bkg-color);scrollbar-width:thin;padding-top:calc(max(2.5em, calc(env(safe-area-inset-top) + .5rem)) + 3rem + 1rem);position:fixed;inset:0;overflow-x:hidden}.entry{width:34rem;color:var(--text-color);padding:.3rem 1rem;line-height:1.3rem;display:inline-block}.provider,.group{font-size:1.3rem;font-weight:600;line-height:3rem}.provider{background-color:color-mix(in srgb, var(--bkg-color-grad1) 75%, transparent);border:0 solid var(--bkg-color-grad2);border-width:1px 0;margin-top:1rem;font-size:1.5rem}#results>.provider:first-child{margin-top:0}.result{cursor:pointer;text-align:left;background:0 0;border:none;border-top:1px solid #ccc;width:100%}.entry img{width:.8em;margin-right:1rem}.entry span{text-transform:uppercase}.result.selected{color:var(--text-color);background-color:var(--bkg-color-grad2)!important}#no-result{background:var(--warning-color);opacity:.75;visibility:hidden;pointer-events:none;border-radius:6px;width:fit-content;margin:auto;padding:.5rem 0;font-size:1rem;position:absolute;top:3rem;left:0;right:0}#no-result>span{padding:1.3rem}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.shown-then-fadeout{animation:2s ease-in-out forwards fadeOut;visibility:visible!important}
 </style>
 <style>${this.customStyle}</style>
-<link rel="stylesheet" href="lib/vanilla-picker/vanilla-picker.csp.css"><div id="searchbox"><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search" placeholder="Search..." aria-label="Search" oninput="${(e) => this.doSearchDebounced(e)}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button></div><div id="results" class="${!this.allResults.length || this.forceHide ? 'hidden' : ''}">${(Object.keys(this.groupedResults) ?? []).map(provider => uHtml `<div class="${this.getProviderClass(provider)}"><img alt="provider icon" src="${this.searchIcon}"> <span i18n="${provider}">${provider}</span></div>${(Object.keys(this.groupedResults[provider]) ?? []).map(group => uHtml `<div class="${this.getGroupClass(group)}"><img alt="result icon" src="${this.getGroupIcon(group)}"> <span i18n="${group}">${group}</span></div>${(this.groupedResults[provider][group] ?? []).map(result => uHtml ` <button class="${result.get('selected') ? 'result entry selected' : 'result entry'}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}">${this.getLabel(result)}</button> `)} `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div>
+<div id="searchbox"><input id="search" class="gg-input" length="20" maxlength="1000" autocomplete="off" autocorrect="off" i18n="Search" placeholder="Search..." aria-label="Search" oninput="${(e) => this.doSearchDebounced(e)}" onkeydown="${(e) => this.onKeyDown(e)}"> <img class="${this.allResults.length > 0 ? 'hidden' : 'search-icon'}" alt="search-icon" src="${this.searchIcon}"> <button class="${this.allResults.length > 0 ? 'close-button' : 'hidden'}" onclick="${() => this.clearSearch(true)}"><img class="close-icon" alt="close-icon" src="icons/close.svg"></button></div><div id="results" class="${!this.allResults.length || this.forceHide ? 'hidden' : ''}">${(Object.keys(this.groupedResults) ?? []).map(provider => uHtml `<div class="${this.getProviderClass(provider)}"><img alt="provider icon" src="${this.searchIcon}"> <span i18n="${provider}">${provider}</span></div>${(Object.keys(this.groupedResults[provider]) ?? []).map(group => uHtml `<div class="${this.getGroupClass(group)}"><img alt="result icon" src="${this.getGroupIcon(group)}"> <span i18n="${group}">${group}</span></div>${(this.groupedResults[provider][group] ?? []).map(result => uHtml ` <button class="${result.get('selected') ? 'result entry selected' : 'result entry'}" onmousedown="${() => this.onMouseDown()}" onclick="${() => this.onSelect(result)}">${this.getLabel(result)}</button> `)} `)} `)}</div><div id="no-result" class="${this.showNoResultWarning ? 'shown-then-fadeout' : ''}"><span i18n="${'No match found'}"></span></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
 }

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.js

@@ -38,6 +38,11 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         ];
     }
     get activeThemes() {
+        // If the menu is not open, return an empty list
+        // Otherwise they will be rendered everytime because of the subscription to "loading"
+        if (!this.menuOpen) {
+            return [];
+        }
         switch (this.activeThemeType) {
             case 'all':
                 return this.allThemes;
@@ -84,6 +89,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             this.state.themes.lastSelectedTheme = null;
         }
         this.state.themes.lastSelectedTheme = theme;
+        this.onBlur();
         if (theme instanceof CustomTheme)
             return;
         if (theme.disclaimer) {
@@ -93,7 +99,6 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
                 type: 'info'
             });
         }
-        this.onBlur();
         if (theme.location != null || theme.zoom != null) {
             const view = this.context.mapManager.getMap().getView();
             view.animate({

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/tools/treeviewelement.d.ts

@@ -10,10 +10,9 @@ export default abstract class TreeViewElement extends GirafeHTMLElement {
     constructor(layer: BaseLayer, name: string);
     protected connectedCallback(): void;
     render(): void;
-    protected isSameLayerObject(layer: BaseLayer): boolean;
     private highlight;
     refreshRender(): void;
-    refreshRender(layer?: BaseLayer): void;
+    refreshRender(layer: BaseLayer): void;
     protected showMetadata(): void;
     protected initializeDrag(): void;
     private dragStart;

package/components/treeview/tools/treeviewelement.js

@@ -6,7 +6,7 @@ import tippy from 'tippy.js';
 import TimeRestrictionComponent from '../../timerestriction/component.js';
 import LayerWms from '../../../models/layers/layerwms.js';
 import Layer from '../../../models/layers/layer.js';
-import Grouplayer from '../../../models/layers/grouplayer.js';
+import GroupLayer from '../../../models/layers/grouplayer.js';
 import LayerGroup from 'ol/layer/Group.js';
 export default class TreeViewElement extends GirafeHTMLElement {
     dragManager;
@@ -33,16 +33,11 @@ export default class TreeViewElement extends GirafeHTMLElement {
             this.createTimeRestrictionTooltip(this.layer);
         }
         this.subscribe(/layers\.layersList\..*\.isHighlighted/, (_oldValue, newValue, layer) => {
-            if (!this.isSameLayerObject(layer))
-                return;
-            if (newValue) {
+            if (newValue && layer === this.layer) {
                 this.highlight();
             }
         });
     }
-    isSameLayerObject(layer) {
-        return layer === this.layer;
-    }
     highlight() {
         this.header.scrollIntoView({
             behavior: 'smooth',
@@ -55,9 +50,14 @@ export default class TreeViewElement extends GirafeHTMLElement {
         }, 3000);
     }
     refreshRender(layer) {
-        if (this.state.treeview.renderEnabled && (!layer || layer === this.layer)) {
-            // Is called without param, call refresh
-            // Else, call refresh only if the layer in param is the current one
+        if (!layer) {
+            // For performance reason, we allow a call to refreshRender()
+            // only with the concerned layer as parameter.
+            // Otherwise, this method could be called too many times
+            // and will refresh every layer many times.
+            throw new Error('When refreshing the treeview, the parameter layer MUST BE set.');
+        }
+        if (this.state.treeview.renderEnabled && layer === this.layer) {
             super.refreshRender();
             super.girafeTranslate();
             if (this.layer.isHighlighted) {
@@ -131,7 +131,7 @@ export default class TreeViewElement extends GirafeHTMLElement {
                     return this.layer.opacity < 1 ? activeButtonClasses : buttonClasses;
                 }
                 // Allow opacity on group-layer of the 1st level only.
-                if (this.layer instanceof Grouplayer && this.layer.isFirstLevelGroup()) {
+                if (this.layer instanceof GroupLayer && this.layer.isFirstLevelGroup()) {
                     return this.layer.opacity < 1 ? activeButtonClasses : buttonClasses;
                 }
                 return 'hidden';
@@ -196,7 +196,7 @@ export default class TreeViewElement extends GirafeHTMLElement {
         });
     }
     createOpacityTooltip() {
-        if (!(this.layer instanceof Layer || (this.layer instanceof Grouplayer && this.layer.isFirstLevelGroup()))) {
+        if (!(this.layer instanceof Layer || (this.layer instanceof GroupLayer && this.layer.isFirstLevelGroup()))) {
             console.warn('Opacity tooltip can only be created for Layer or 1st level LayerGroup');
             return;
         }

package/components/treeview/tools/treeviewfilter.js

@@ -20,7 +20,7 @@ export default class TreeViewFilterHelper {
         // Filter the prepared tree items based on the query but keep the drawings layer
         const filteredTree = preparedLayers.filter((l) => l.name.includes(query) || l.name == translatedNameOfDrawingLayer);
         // Remove duplicate ids in filter result
-        const matchingLayerIds = Array.from(new Set(filteredTree.map((l) => l.idList).flat()));
+        const matchingLayerIds = Array.from(new Set(filteredTree.flatMap((l) => l.idList)));
         // Update visibility of layers based on matching IDs
         this.toggleLayerVisibility(layerTree, matchingLayerIds);
     }
@@ -32,12 +32,12 @@ export default class TreeViewFilterHelper {
      */
     toggleLayerVisibility(layerTree, matchingIds) {
         const allLayers = this.context.layerManager.getFlattenedLayerTree(layerTree);
-        allLayers.forEach((layer) => {
+        for (const layer of allLayers) {
             const newVisibility = matchingIds.includes(layer.treeItemId);
             if (layer.isVisible !== newVisibility) {
                 layer.isVisible = newVisibility;
             }
-        });
+        }
     }
     /**
      * Prepares a list of layer tree items for search by processing them hierarchically.

package/components/treeview/tools/treeviewgroupelement.d.ts

@@ -5,7 +5,8 @@ import TreeViewElement from './treeviewelement.js';
 export default abstract class TreeViewGroupElement extends TreeViewElement {
     layer: GroupLayer | ThemeLayer;
     constructor(layer: GroupLayer | ThemeLayer, name: string);
-    sortedChildren(): BaseLayer[];
+    shouldRenderChildren(): boolean;
+    sortedVisibleChildren(): BaseLayer[];
     protected deactivateThemeOrGroup(layer: BaseLayer): void;
     toggle(): void;
     private toggleLayers;

package/components/treeview/tools/treeviewgroupelement.js

@@ -7,8 +7,17 @@ export default class TreeViewGroupElement extends TreeViewElement {
         super(layer, name);
         this.layer = layer;
     }
-    sortedChildren() {
-        return this.context.layerManager.getSortedLayers(this.layer.children);
+    shouldRenderChildren() {
+        return this.layer.isExpanded && this.layer.isVisible;
+    }
+    sortedVisibleChildren() {
+        // Return the list of sorted children only if the parent is expanded
+        // Otherwise, children are rendered everytime, even if the parent is collapsed.
+        // And this create performance issues if there are too many groups/layers in the treeview
+        if (!this.shouldRenderChildren()) {
+            return [];
+        }
+        return this.context.layerManager.getSortedLayers(this.layer.children).filter((child) => child.isVisible);
     }
     deactivateThemeOrGroup(layer) {
         layer.activeState = 'off';