@geogirafe/lib-geoportal 1.0.2154016552 → 1.0.2163361385

package/LICENSE

@@ -231,4 +231,34 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 -------------------------------------------------------------------------------
 
+From:
+- https://www.svgrepo.com/svg/309942/select-all
+- https://www.svgrepo.com/svg/310299/arrow-download
+- https://www.svgrepo.com/svg/309942/select-all
+- https://www.svgrepo.com/svg/309943/select-all-off
+
+
+The MIT License (MIT)
+
+Copyright (c) 2025 Microsoft
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-------------------------------------------------------------------------------
+
 ===============================================================================

package/assets/i18n/de.json

@@ -41,6 +41,7 @@
     "Circle": "Kreis",
     "Classes": "Klassen",
     "Classification": "Klassifikation",
+    "Clear Results and close Panel": "Ergebnisse löschen und Panel schliessen",
     "Close message": "Nachricht schliessen",
     "color_option_classification": "Klassifizierung",
     "color_option_intensity": "Intensität",
@@ -349,6 +350,7 @@
     "selectFillColor": "Auswahl Füllfarbe",
     "selectHighlightFillColor": "Auswahl Highlight Füllfarbe",
     "selectHighlightStrokeColor": "Auswahl Highlight Strichfarbe",
+    "Selection": "Auswahl",
     "selectionComponent": "Komponente für Kartenauswahl",
     "selectStrokeColor": "Auswahl Strichfarbe",
     "Send": "Senden",

package/assets/i18n/en.json

@@ -41,6 +41,7 @@
     "Circle": "Circle",
     "Classes": "Classes",
     "Classification": "Classification",
+    "Clear Results and close Panel": "Clear Results and close Panel",
     "Close message": "Close message",
     "color_option_classification": "Classification",
     "color_option_intensity": "Intensity",
@@ -350,6 +351,7 @@
     "selectFillColor": "Selection fill color",
     "selectHighlightFillColor": "Selection highlight fill color",
     "selectHighlightStrokeColor": "Selection highlight stroke color",
+    "Selection": "Selection",
     "selectionComponent": "Selection component",
     "selectStrokeColor": "Selection stroke color",
     "Send": "Send",
@@ -374,6 +376,7 @@
     "Snap": "Snap",
     "Snap to layer features": "Enable snapping on this layer",
     "Some layer could not be added to the layer-tree. This is either because you do not have the rights for it, or because this layer does not exist anymore.": "Some layer could not be added to the layer-tree. This is either because you do not have the rights for it, or because this layer does not exist anymore.",
+    "Sort default": "Sort default",
     "Source": "Source",
     "Source Type": "Source Type",
     "Square": "Square",

package/assets/i18n/fr.json

@@ -41,6 +41,7 @@
     "Circle": "Cercle",
     "Classes": "Classes",
     "Classification": "Classification",
+    "Clear Results and close Panel": "Résultats clairs et fermer le panneau",
     "Close message": "Fermer le message",
     "color_option_classification": "Classification",
     "color_option_intensity": "Intensité",
@@ -349,6 +350,7 @@
     "selectFillColor": "Couleur de remplissage des sélections",
     "selectHighlightFillColor": "Couleur de remplissage de surbrillance",
     "selectHighlightStrokeColor": "Couleur du trait de surbrillance",
+    "Selection": "Sélection",
     "selectionComponent": "Composant pour la sélection des cartes",
     "selectStrokeColor": "Couleur du trait de sélection",
     "Send": "Envoyer",

package/assets/i18n/it.json

@@ -41,6 +41,7 @@
     "Circle": "Cerchio",
     "Classes": "Classi",
     "Classification": "Classificazione",
+    "Clear Results and close Panel": "Risultati chiari e chiudi pannello",
     "Close message": "Chiudi messaggio",
     "color_option_classification": "Classificazione",
     "color_option_intensity": "Intensità",
@@ -349,6 +350,7 @@
     "selectFillColor": "Colore di riempimento per le selezioni",
     "selectHighlightFillColor": "Colore di riempimento dell'evidenziazione",
     "selectHighlightStrokeColor": "Colore del tratto di evidenziazione della selezione",
+    "Selection": "Selezione",
     "selectionComponent": "Componente per la selezione della carta",
     "selectStrokeColor": "Colore del tratto di selezione",
     "Send": "Invia",

package/assets/icons/arrow-download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 48 48"><title>ic_fluent_arrow_download_48_regular</title><path fill="#212121" fill-rule="nonzero" d="M12.25 39.5h23.5a1.25 1.25 0 0 1 .128 2.494L35.75 42h-23.5a1.25 1.25 0 0 1-.128-2.494zh23.5zM23.622 6.006 23.75 6c.647 0 1.18.492 1.244 1.122L25 7.25v24.29l5.647-5.646a1.25 1.25 0 0 1 1.767 1.768l-7.778 7.778a1.25 1.25 0 0 1-1.767 0l-7.779-7.778a1.25 1.25 0 1 1 1.768-1.768l5.642 5.642V7.25c0-.647.492-1.18 1.122-1.244L23.75 6z"/></svg>

package/assets/icons/select-all-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 24 24"><title>ic_fluent_select_all_off_24_regular</title><path fill="#212121" fill-rule="nonzero" d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051zM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2zm0 1.5H4.25a.75.75 0 0 0-.75.75v12.997c0 .414.336.75.75.75h12.997a.75.75 0 0 0 .75-.75V4.25a.75.75 0 0 0-.75-.75"/></svg>

package/assets/icons/select-all-on.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 24 24"><title>ic_fluent_select_all_24_regular</title><path fill="#212121" fill-rule="nonzero" d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051zM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2zm0 1.5H4.25a.75.75 0 0 0-.75.75v12.997c0 .414.336.75.75.75h12.997a.75.75 0 0 0 .75-.75V4.25a.75.75 0 0 0-.75-.75m-7.665 7.858L13.47 7.47a.75.75 0 0 1 1.133.976l-.073.084-4.5 4.5a.75.75 0 0 1-1.056.004L8.9 12.95l-1.5-2a.75.75 0 0 1 1.127-.984l.073.084zL13.47 7.47z"/></svg>

package/assets/icons/select-invert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 24 24"><title>ic_fluent_select_all_24_regular</title><path fill="#212121" fill-rule="nonzero" d="M20.496 5.627A2.25 2.25 0 0 1 22 7.75v10A4.25 4.25 0 0 1 17.75 22h-10a2.25 2.25 0 0 1-2.123-1.504l2.097.004H17.75a2.75 2.75 0 0 0 2.75-2.75v-10l-.004-.051ZM17.246 2a2.25 2.25 0 0 1 2.25 2.25v12.997a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 17.247V4.25A2.25 2.25 0 0 1 4.25 2Zm0 1.5H4.25a.75.75 0 0 0-.75.75v12.997c0 .414.336.75.75.75h12.997a.75.75 0 0 0 .75-.75V4.25a.75.75 0 0 0-.75-.75m-7.665 7.858L13.47 7.47a.75.75 0 0 1 1.133.976l-.073.084-4.5 4.5a.75.75 0 0 1-1.056.004L8.9 12.95l-1.5-2a.75.75 0 0 1 1.127-.984l.073.084zL13.47 7.47Z"/><path d="M12 2.023v1.5h5.277a.75.75 0 0 1 .75.75V17.27a.75.75 0 0 1-.75.75H12v1.5h5.277a2.25 2.25 0 0 0 2.25-2.25V4.273a2.25 2.25 0 0 0-2.25-2.25zm8.527 3.627v2.072l.004.051v10a2.75 2.75 0 0 1-2.75 2.75H12v1.5h5.78a4.25 4.25 0 0 0 4.25-4.25v-10a2.25 2.25 0 0 0-1.503-2.123M14.03 7.273a.75.75 0 0 0-.53.22L12 8.993v2.122l2.56-2.561.073-.084a.75.75 0 0 0-.602-1.197" style="fill:#fff;fill-opacity:1"/><path d="M11.982 2.04v20h10v-3.622a4.25 4.25 0 0 1-4.201 3.605H12v-1.5h5.78a2.75 2.75 0 0 0 2.75-2.75v-10l-.003-.05V5.65a2.25 2.25 0 0 1 1.455 1.656V2.041h-4.424a2.25 2.25 0 0 1 1.97 2.232V17.27a2.25 2.25 0 0 1-2.25 2.25H12v-1.5h5.277a.75.75 0 0 0 .75-.75V4.273a.75.75 0 0 0-.75-.75H12V2.041Zm2.049 5.233a.75.75 0 0 1 .603 1.196l-.073.085L12 11.114v-2.12l1.5-1.501a.75.75 0 0 1 .53-.22" style="fill:#212121;fill-opacity:1;stroke-width:.0298872"/></svg>

package/assets/icons/zoom-to-selection.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 20 20"><title>ic_fluent_resize_20_regular</title><path fill="#212121" fill-rule="nonzero" d="M2.5 11a.5.5 0 0 1 .5.5V15a2 2 0 0 0 2 2h3.5a.5.5 0 0 1 0 1H5a3 3 0 0 1-3-3v-3.5a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .492.41l.008.09V15a3 3 0 0 1-2.824 2.995L15 18h-3.5a.5.5 0 0 1-.09-.992L11.5 17H15a2 2 0 0 0 1.995-1.85L17 15v-3.5a.5.5 0 0 1 .5-.5m-9-9a.5.5 0 0 1 .09.992L8.5 3H5a2 2 0 0 0-1.995 1.85L3 5v3.5a.5.5 0 0 1-.992.09L2 8.5V5a3 3 0 0 1 2.824-2.995L5 2zM15 2a3 3 0 0 1 2.995 2.824L18 5v3.5a.5.5 0 0 1-.992.09L17 8.5V5a2 2 0 0 0-1.85-1.995L15 3h-3.5a.5.5 0 0 1-.09-.992L11.5 2z"/></svg>

package/base/GirafeHTMLElement.js

@@ -263,6 +263,9 @@ class GirafeHTMLElement extends HTMLElement {
             }
             parent = parent?.parentNode ?? null;
         } while (parent && parent !== document);
+        if (parent === document) {
+            return parent.geogirafe.context;
+        }
         throw new Error('No context was found !');
     }
 }

package/base/GirafeResizableElement.js

@@ -64,13 +64,13 @@ class GirafeResizableElement extends GirafeHTMLElement {
     initSizeLimits() {
         // If there is a configured minWidth or maxWidth, we have to take care of it
         const css = getComputedStyle(this);
-        const minWidth = parseFloat(css.minWidth);
+        const minWidth = Number.parseFloat(css.minWidth);
         this.minWidth = isNaN(minWidth) ? undefined : minWidth;
-        const maxWidth = parseFloat(css.maxWidth);
+        const maxWidth = Number.parseFloat(css.maxWidth);
         this.maxWidth = isNaN(maxWidth) ? undefined : maxWidth;
-        const minHeight = parseFloat(css.minHeight);
+        const minHeight = Number.parseFloat(css.minHeight);
         this.minHeight = isNaN(minHeight) ? undefined : minHeight;
-        const maxHeight = parseFloat(css.maxHeight);
+        const maxHeight = Number.parseFloat(css.maxHeight);
         this.maxHeight = isNaN(maxHeight) ? undefined : maxHeight;
     }
     mousedown(e) {
@@ -80,8 +80,8 @@ class GirafeResizableElement extends GirafeHTMLElement {
         document.onmouseup = () => this.mouseup();
         this.prevX = e.x;
         this.prevY = e.y;
-        this.lastWidth = parseFloat(getComputedStyle(this).width);
-        this.lastHeight = parseFloat(getComputedStyle(this).height);
+        this.lastWidth = Number.parseFloat(getComputedStyle(this).width);
+        this.lastHeight = Number.parseFloat(getComputedStyle(this).height);
     }
     mousemove(e) {
         e.preventDefault();
@@ -101,6 +101,8 @@ class GirafeResizableElement extends GirafeHTMLElement {
         // stop moving when mouse button is released
         document.onmouseup = null;
         document.onmousemove = null;
+        this.lastWidth = Number.parseFloat(getComputedStyle(this).width);
+        this.lastHeight = Number.parseFloat(getComputedStyle(this).height);
         this.dispatchEvent(new CustomEvent('resize-end'));
     }
     closePanel() {

package/buildtools/tools.js

@@ -66,50 +66,116 @@ async function getStyleCode(currentFilename, relativeCssPath) {
     return styleCode;
   } catch (error) {
     console.error(`Error reading style file for ${currentFilename}: ${error}`);
+    throw error;
   }
 }
 
-async function getHtmlCode(htmlFilePath, styleCode) {
-  let htmlCode = fs.readFileSync(htmlFilePath, 'utf8');
-  htmlCode = await minify.html(htmlCode, {
-    html: { minifyCSS: false, collapseBooleanAttributes: false, removeAttributeQuotes: false }
-  });
-  htmlCode = `template = () => { return uHtml\`${styleCode}\n${htmlCode}\`; }`;
-  return htmlCode;
+async function getHtmlCode(currentFilename, relativeHtmlPath, styleCode) {
+  const htmlFilePath = path.join(path.dirname(currentFilename), relativeHtmlPath.trim());
+  try {
+    let htmlCode = fs.readFileSync(htmlFilePath, 'utf8');
+    htmlCode = await minify.html(htmlCode, {
+      html: {
+        minifyCSS: false,
+        collapseBooleanAttributes: false,
+        removeAttributeQuotes: false
+      }
+    });
+    htmlCode = `template = () => { return uHtml\`${styleCode}\n${htmlCode}\`; }`;
+    return htmlCode;
+  } catch (error) {
+    console.error(`Error reading html file for ${currentFilename}: ${error}`);
+    throw error;
+  }
+}
+
+export function isLineCommented(regExpMatch, code) {
+  if (!regExpMatch) {
+    return false;
+  }
+
+  const lineStart = code.substring(0, regExpMatch.index);
+  const lastNewlineIndex = lineStart.lastIndexOf('\n');
+  const lineBeforeMatch = lineStart.substring(lastNewlineIndex + 1);
+
+  // The line is commented
+  if (lineBeforeMatch.trim().startsWith('//')) {
+    return true;
+  }
+
+  // Test if we are in a commented block
+  let commentedBlock = 0;
+  for (let i = 0; i < regExpMatch.index; i++) {
+    if (code[i] === '/' && code[i + 1] === '*') {
+      commentedBlock++;
+      i++;
+    } else if (code[i] === '*' && code[i + 1] === '/') {
+      commentedBlock--;
+      i++;
+    }
+  }
+  if (commentedBlock > 0) {
+    return true;
+  }
+
+  return false;
 }
 
+function isStringCommented(line) {
+  if (!line) {
+    return false;
+  }
+  if (line.trim().startsWith('//')) {
+    return true;
+  }
+  if (line.trim().startsWith('/*')) {
+    return true;
+  }
+  return false;
+}
+
+// Regex definitions
+export const styleRegex = /styleUrl *= *['"](.*)['"] *;?/g;
+export const stylesRegex = /styleUrls *= *\[([\s\S]*?)\] *;?/gs;
+export const htmlRegex = /templateUrl *= *['"](.*)['"] *;?/g;
+
 export async function inlineTemplate(filename) {
   // Read the file
   const code = fs.readFileSync(filename, 'utf8');
   const magicString = new MagicString(code);
 
-  // Find the HTML template
-  const htmlRegex = /templateUrl *= *['"](.*)['"] *;?/;
-  if (htmlRegex.test(code)) {
-    // Verify if there is a CSS file
-    let styleCode = '';
-    const styleRegex = /styleUrl *= *['"](.*)['"] *;?/;
-    if (styleRegex.test(code)) {
-      // Read the CSS file
-      const styleFound = code.match(styleRegex);
-      styleCode += await getStyleCode(filename, styleFound[1]);
-      magicString.overwrite(styleFound.index, styleFound.index + styleFound[0].length, '');
-    }
-    // Verify if there are many CSS files
-    const stylesRegex = /styleUrls *= *\[(['"].*['"],? ?)+\] *;?/;
-    if (stylesRegex.test(code)) {
-      const stylesFound = code.match(stylesRegex);
-      for (const styleFound of stylesFound[1].replaceAll("'", '').split(',')) {
-        styleCode += await getStyleCode(filename, styleFound);
+  // We integrate HTML and CSS only if there is an HTML Template
+  const htmlFounds = code.matchAll(htmlRegex);
+  for (const htmlFound of htmlFounds) {
+    if (htmlFound && !isLineCommented(htmlFound, code) && htmlFound[1]) {
+      let styleCode = '';
+
+      // Unique style Url
+      const styleFounds = code.matchAll(styleRegex);
+      for (const styleFound of styleFounds) {
+        if (styleFound && !isLineCommented(styleFound, code) && styleFound[1]) {
+          styleCode += await getStyleCode(filename, styleFound[1]);
+          magicString.overwrite(styleFound.index, styleFound.index + styleFound[0].length, '');
+        }
+      }
+
+      // Multiple style Urls
+      const stylesFounds = code.matchAll(stylesRegex);
+      for (const stylesFound of stylesFounds) {
+        if (stylesFound && !isLineCommented(stylesFound, code) && stylesFound[1]) {
+          const stylePaths = stylesFound[1]
+            .split(',')
+            .map((p) => p.trim().replace(/['"]/g, ''))
+            .filter((p) => p.length > 0 && !isStringCommented(p));
+          for (const stylePath of stylePaths) {
+            styleCode += await getStyleCode(filename, stylePath);
+          }
+          magicString.overwrite(stylesFound.index, stylesFound.index + stylesFound[0].length, '');
+        }
       }
-      magicString.overwrite(stylesFound.index, stylesFound.index + stylesFound[0].length, '');
-    }
 
-    // Read HTML template
-    const htmlFound = code.match(htmlRegex);
-    const htmlFilePath = path.join(path.dirname(filename), htmlFound[1]);
-    try {
-      const htmlCode = await getHtmlCode(htmlFilePath, styleCode);
+      // HTML template
+      const htmlCode = await getHtmlCode(filename, htmlFound[1], styleCode);
       magicString.overwrite(htmlFound.index, htmlFound.index + htmlFound[0].length, htmlCode);
 
       // Add missing import (uHtml)
@@ -118,8 +184,6 @@ export async function inlineTemplate(filename) {
         // Include uHtmlFor if it is used in the template
         magicString.prepend(`import { htmlFor as uHtmlFor } from 'uhtml/keyed';\n`);
       }
-    } catch (error) {
-      console.error(`Error reading HTML file for ${filename}: ${error}`);
     }
   }
 

package/components/selectiongrid/component.d.ts

@@ -15,7 +15,7 @@ declare class SelectionGridComponent extends GirafeResizableElement {
     private readonly debounceOnFeaturesSelected;
     visible: boolean;
     currentTabId: string;
-    showCsvButton: boolean;
+    resultsSelected: boolean;
     constructor();
     connectedCallback(): void;
     /**

package/components/selectiongrid/component.js

@@ -15,9 +15,11 @@ class SelectionGridComponent extends GirafeResizableElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}
 </style><style>
-:host,#panel{background:var(--bkg-color);height:16rem;min-height:10rem}#panel{inset:0;overflow:hidden}#gutter{background:var(--bkg-color);cursor:row-resize;border:none;width:100%;height:6px;position:absolute;top:0;left:0}#close{color:#777;background-color:var(--bkg-color);cursor:pointer;border:none;width:1rem;height:1rem;margin:.5rem;padding:0;line-height:1rem;position:absolute;top:0;right:0}#close i:before{content:"uf00d"}#close:hover{color:#000;border-color:#000}#content{background:var(--bkg-color);flex-direction:column;margin:.5rem;padding:0;display:flex;position:absolute;inset:0;overflow:hidden}#header{flex:0;justify-content:space-between;display:flex}.selection-panel{margin-right:2rem}.tab{cursor:pointer;background-color:var(--bkg-color-grad2);border:1px solid #ccc;height:2rem;margin-bottom:.2rem;margin-right:.2rem;padding:0 1rem;line-height:2rem;display:inline-block}.tab.active{color:var(--text-color);background-color:var(--bkg-color)}#grid{flex:1;overflow:hidden}.geo-type{margin-right:.5rem}button{margin-left:.5rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#999}.tiny-margin{margin:.1rem}.tabulator-col[aria-sort=none] .tabulator-col-sorter i{color:#999}.tabulator-col[aria-sort=asc] .tabulator-col-sorter i{color:red}.tabulator-col[aria-sort=desc] .tabulator-col-sorter i{color:red;transform:scaleY(-1)}#tabulator{background-color:var(--bkg-color)}#tabulator .tabulator-header .tabulator-col-content{background-color:var(--bkg-color);color:var(--text-color)}#tabulator .tabulator-header .tabulator-col,#tabulator .tabulator-header .tabulator-col-row-handle{white-space:normal}#tabulator .tabulator-tableholder .tabulator-table .tabulator-row{background-color:var(--bkg-color);color:var(--text-color)}#tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(2n){background-color:var(--bkg-color-grad1)}#tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected{background-color:#9abcea}.tabulator-cell img{float:left;height:1.5rem;margin-right:.5rem}.tabulator-cell span{align-items:center;line-height:1.5rem;display:inline-flex;position:relative}.tabulator-cell span sup{position:absolute;top:-.3rem;right:-.5rem}@media (hover:hover) and (pointer:fine){#tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover{cursor:pointer;background-color:var(--bkg-color-grad2)}}
+.tabulator{text-align:left;background-color:#888;border:1px solid #999;font-size:14px;position:relative;overflow:hidden;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator[tabulator-layout=fitDataFill] .tabulator-tableholder .tabulator-table{min-width:100%}.tabulator[tabulator-layout=fitDataTable]{display:inline-block}.tabulator.tabulator-block-select,.tabulator.tabulator-ranges .tabulator-cell:not(.tabulator-editing){user-select:none}.tabulator .tabulator-header{box-sizing:border-box;color:#555;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-o-user-select:none;white-space:nowrap;background-color:#e6e6e6;border-bottom:1px solid #999;outline:none;width:100%;font-weight:700;position:relative;overflow:hidden}.tabulator .tabulator-header.tabulator-header-hidden{display:none}.tabulator .tabulator-header .tabulator-header-contents{position:relative;overflow:hidden}.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers{display:inline-block}.tabulator .tabulator-header .tabulator-col{box-sizing:border-box;text-align:left;vertical-align:bottom;background:#e6e6e6;border-right:1px solid #aaa;flex-direction:column;justify-content:flex-start;display:inline-flex;position:relative;overflow:hidden}.tabulator .tabulator-header .tabulator-col.tabulator-moving{pointer-events:none;background:#cdcdcd;border:1px solid #999;position:absolute}.tabulator .tabulator-header .tabulator-col.tabulator-range-highlight{color:#000;background-color:#d6d6d6}.tabulator .tabulator-header .tabulator-col.tabulator-range-selected{color:#fff;background-color:#3876ca}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{box-sizing:border-box;padding:4px;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button{padding:0 8px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover{cursor:pointer;opacity:.6}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder{position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{box-sizing:border-box;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap;width:100%;overflow:hidden}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap{text-overflow:clip;white-space:normal}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{box-sizing:border-box;background:#fff;border:1px solid #999;width:100%;padding:1px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button+.tabulator-title-editor{width:calc(100% - 22px)}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{align-items:center;display:flex;position:absolute;top:0;bottom:0;right:4px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #bbb;border-left:6px solid #0000;border-right:6px solid #0000;width:0;height:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #aaa;margin-right:-1px;display:flex;position:relative;overflow:hidden}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{box-sizing:border-box;text-align:center;width:100%;margin-top:2px;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea{height:auto!important}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg{margin-top:3px}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear{width:0;height:0}.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:25px}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{cursor:pointer;background-color:#cdcdcd}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter{color:#bbb}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{cursor:pointer;border-bottom:6px solid #555}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-top:none;border-bottom:6px solid #bbb}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{cursor:pointer;border-bottom:6px solid #555}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-top:none;border-bottom:6px solid #666}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter{color:#666}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{cursor:pointer;border-top:6px solid #555}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{color:#666;border-top:6px solid #666;border-bottom:none}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title{text-orientation:mixed;writing-mode:vertical-rl;justify-content:center;align-items:center;display:flex}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title{transform:rotate(180deg)}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title{padding-top:20px;padding-right:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title{padding-bottom:20px;padding-right:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-sorter{justify-content:center;inset:4px 0 auto}.tabulator .tabulator-header .tabulator-frozen{z-index:11;position:sticky;left:0}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator .tabulator-header .tabulator-calcs-holder{box-sizing:border-box;border-top:1px solid #aaa;border-bottom:1px solid #aaa;display:inline-block;background:#f3f3f3!important}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row{background:#f3f3f3!important}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-header .tabulator-frozen-rows-holder{display:inline-block}.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty{display:none}.tabulator .tabulator-tableholder{-webkit-overflow-scrolling:touch;white-space:nowrap;width:100%;position:relative;overflow:auto}.tabulator .tabulator-tableholder:focus{outline:none}.tabulator .tabulator-tableholder .tabulator-placeholder{box-sizing:border-box;justify-content:center;align-items:center;width:100%;min-width:100%;display:flex}.tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual]{min-height:100%}.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents{color:#ccc;text-align:center;white-space:normal;padding:10px;font-size:20px;font-weight:700;display:inline-block}.tabulator .tabulator-tableholder .tabulator-table{color:#333;white-space:nowrap;background-color:#fff;display:inline-block;position:relative;overflow:visible}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{font-weight:700;background:#e2e2e2!important}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #aaa}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #aaa}.tabulator .tabulator-tableholder .tabulator-range-overlay{pointer-events:none;z-index:10;position:absolute;inset:0}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range{box-sizing:border-box;border:1px solid #2975dd;position:absolute}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{content:"";background-color:#2975dd;border-radius:999px;width:6px;height:6px;position:absolute;bottom:-3px;right:-3px}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active{box-sizing:border-box;border:2px solid #2975dd;position:absolute}.tabulator .tabulator-footer{color:#555;-webkit-user-select:none;-moz-user-select:none;user-select:none;-khtml-user-select:none;-o-user-select:none;white-space:nowrap;background-color:#e6e6e6;border-top:1px solid #999;font-weight:700}.tabulator .tabulator-footer .tabulator-footer-contents{flex-direction:row;justify-content:space-between;align-items:center;padding:5px 10px;display:flex}.tabulator .tabulator-footer .tabulator-footer-contents:empty{display:none}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs{margin-top:-5px;overflow-x:auto}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border:1px solid #999;border-top:none;border-bottom-right-radius:5px;border-bottom-left-radius:5px;padding:5px;font-size:.9em;display:inline-block}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab:hover{cursor:pointer;opacity:.7}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{background:#fff}.tabulator .tabulator-footer .tabulator-calcs-holder{box-sizing:border-box;text-align:left;border-top:1px solid #aaa;border-bottom:1px solid #aaa;width:100%;overflow:hidden;background:#f3f3f3!important}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{display:inline-block;background:#f3f3f3!important}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{border-bottom:none;margin-bottom:-5px}.tabulator .tabulator-footer>*+.tabulator-page-counter{margin-left:10px}.tabulator .tabulator-footer .tabulator-page-counter{font-weight:400}.tabulator .tabulator-footer .tabulator-paginator{color:#555;font-family:inherit;font-size:inherit;font-weight:inherit;text-align:right;flex:1}.tabulator .tabulator-footer .tabulator-page-size{border:1px solid #aaa;border-radius:3px;margin:0 5px;padding:2px 5px;display:inline-block}.tabulator .tabulator-footer .tabulator-pages{margin:0 7px}.tabulator .tabulator-footer .tabulator-page{background:#fff3;border:1px solid #aaa;border-radius:3px;margin:0 2px;padding:2px 5px;display:inline-block}.tabulator .tabulator-footer .tabulator-page.active{color:#d00}.tabulator .tabulator-footer .tabulator-page:disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-footer .tabulator-page:not(disabled):hover{color:#fff;cursor:pointer;background:#0003}}.tabulator .tabulator-col-resize-handle{vertical-align:middle;z-index:11;width:6px;margin-left:-3px;margin-right:-3px;display:inline-block;position:relative}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-col-resize-handle:hover{cursor:ew-resize}}.tabulator .tabulator-col-resize-handle:last-of-type{width:3px;margin-right:0}.tabulator .tabulator-col-resize-guide{opacity:.5;background-color:#999;width:4px;height:100%;margin-left:-.5px;position:absolute;top:0}.tabulator .tabulator-row-resize-guide{opacity:.5;background-color:#999;width:100%;height:4px;margin-top:-.5px;position:absolute;left:0}.tabulator .tabulator-alert{text-align:center;z-index:100;background:#0006;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.tabulator .tabulator-alert .tabulator-alert-msg{background:#fff;border-radius:10px;margin:0 auto;padding:10px 20px;font-size:16px;font-weight:700;display:inline-block}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg{color:#000;border:4px solid #333}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error{color:#590000;border:4px solid #d00}.tabulator-row{box-sizing:border-box;background-color:#fff;min-height:22px;position:relative}.tabulator-row.tabulator-row-even{background-color:#efefef}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{cursor:pointer;background-color:#bbb}}.tabulator-row.tabulator-selected{background-color:#9abcea}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selected:hover{cursor:pointer;background-color:#769bcc}}.tabulator-row.tabulator-row-moving{background:#fff;border:1px solid #000}.tabulator-row.tabulator-moving{pointer-events:none;z-index:15;border-top:1px solid #aaa;border-bottom:1px solid #aaa;position:absolute}.tabulator-row.tabulator-range-highlight .tabulator-cell.tabulator-range-row-header{color:#000;background-color:#d6d6d6}.tabulator-row.tabulator-range-highlight.tabulator-range-selected .tabulator-cell.tabulator-range-row-header,.tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header{color:#fff;background-color:#3876ca}.tabulator-row .tabulator-row-resize-handle{height:5px;position:absolute;bottom:0;left:0;right:0}.tabulator-row .tabulator-row-resize-handle.prev{top:0;bottom:auto}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-row-resize-handle:hover{cursor:ns-resize}}.tabulator-row .tabulator-responsive-collapse{box-sizing:border-box;border-top:1px solid #aaa;border-bottom:1px solid #aaa;padding:5px}.tabulator-row .tabulator-responsive-collapse:empty{display:none}.tabulator-row .tabulator-responsive-collapse table{font-size:14px}.tabulator-row .tabulator-responsive-collapse table tr td{position:relative}.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type{padding-right:10px}.tabulator-row .tabulator-cell{box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;border-right:1px solid #aaa;outline:none;padding:4px;display:inline-block;position:relative;overflow:hidden}.tabulator-row .tabulator-cell.tabulator-row-header{background:#e6e6e6;border-bottom:1px solid #aaa;border-right:1px solid #999}.tabulator-row .tabulator-cell.tabulator-frozen{background-color:inherit;z-index:11;display:inline-block;position:sticky;left:0}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #aaa}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #aaa}.tabulator-row .tabulator-cell.tabulator-editing{border:1px solid #1d68cd;outline:none;padding:0}.tabulator-row .tabulator-cell.tabulator-editing input,.tabulator-row .tabulator-cell.tabulator-editing select{background:0 0;border:1px;outline:none}.tabulator-row .tabulator-cell.tabulator-validation-fail{border:1px solid #d00}.tabulator-row .tabulator-cell.tabulator-validation-fail input,.tabulator-row .tabulator-cell.tabulator-validation-fail select{color:#d00;background:0 0;border:1px}.tabulator-row .tabulator-cell.tabulator-row-handle{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-o-user-select:none;justify-content:center;align-items:center;display:inline-flex}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box{width:80%}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar{background:#666;width:100%;height:3px;margin-top:2px}.tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){background-color:#9abcea}.tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty{width:7px;display:inline-block}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{vertical-align:middle;border-bottom:2px solid #aaa;border-left:2px solid #aaa;border-bottom-left-radius:1px;width:7px;height:9px;margin-top:-9px;margin-right:5px;display:inline-block}.tabulator-row .tabulator-cell .tabulator-data-tree-control{vertical-align:middle;background:#0000001a;border:1px solid #333;border-radius:2px;justify-content:center;align-items:center;width:11px;height:11px;margin-right:5px;display:inline-flex;overflow:hidden}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-data-tree-control:hover{cursor:pointer;background:#0003}}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:0 0;width:1px;height:7px;display:inline-block;position:relative}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{content:"";background:#333;width:7px;height:1px;position:absolute;top:3px;left:-3px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;width:1px;height:7px;display:inline-block;position:relative}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{content:"";background:#333;width:7px;height:1px;position:absolute;top:3px;left:-3px}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{color:#fff;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-o-user-select:none;background:#666;border-radius:20px;justify-content:center;align-items:center;width:15px;height:15px;font-size:1.1em;font-weight:700;display:inline-flex}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover{cursor:pointer;opacity:.7}}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close{display:initial}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open{display:none}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg{stroke:#fff}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close{display:none}.tabulator-row .tabulator-cell .tabulator-traffic-light{border-radius:14px;width:14px;height:14px;display:inline-block}.tabulator-row.tabulator-group{box-sizing:border-box;background:#ccc;border-top:1px solid #999;border-bottom:1px solid #999;border-right:1px solid #aaa;min-width:100%;padding:5px 5px 5px 10px;font-weight:700}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-group:hover{cursor:pointer;background-color:#0000001a}}.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow{border:6px solid #0000;border-top-color:#666;border-bottom:0;margin-right:10px}.tabulator-row.tabulator-group.tabulator-group-level-1{padding-left:30px}.tabulator-row.tabulator-group.tabulator-group-level-2{padding-left:50px}.tabulator-row.tabulator-group.tabulator-group-level-3{padding-left:70px}.tabulator-row.tabulator-group.tabulator-group-level-4{padding-left:90px}.tabulator-row.tabulator-group.tabulator-group-level-5{padding-left:110px}.tabulator-row.tabulator-group .tabulator-group-toggle{display:inline-block}.tabulator-row.tabulator-group .tabulator-arrow{vertical-align:middle;border:6px solid #0000;border-left-color:#666;border-right:0;width:0;height:0;margin-right:16px;display:inline-block}.tabulator-row.tabulator-group span{color:#d00;margin-left:10px}.tabulator-toggle{box-sizing:border-box;background:#dcdcdc;border:1px solid #ccc;flex-direction:row;display:flex}.tabulator-toggle.tabulator-toggle-on{background:#1c6cc2}.tabulator-toggle .tabulator-toggle-switch{box-sizing:border-box;background:#fff;border:1px solid #ccc}.tabulator-popup-container{-webkit-overflow-scrolling:touch;box-sizing:border-box;z-index:10000;background:#fff;border:1px solid #aaa;font-size:14px;display:inline-block;position:absolute;overflow-y:auto;box-shadow:0 0 5px #0003}.tabulator-popup{border-radius:3px;padding:5px}.tabulator-tooltip{box-shadow:none;pointer-events:none;border-radius:2px;max-width:min(500px,100%);padding:3px 5px;font-size:12px}.tabulator-menu .tabulator-menu-item{box-sizing:border-box;user-select:none;padding:5px 10px;position:relative}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{cursor:pointer;background:#efefef}}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu{padding-right:25px}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{content:"";vertical-align:top;border:1px solid #aaa;border-width:1px 1px 0 0;width:7px;height:7px;display:inline-block;position:absolute;top:calc(5px + .4em);right:10px;transform:rotate(45deg)}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #aaa}.tabulator-edit-list{-webkit-overflow-scrolling:touch;max-height:200px;font-size:14px;overflow-y:auto}.tabulator-edit-list .tabulator-edit-list-item{color:#333;outline:none;padding:4px}.tabulator-edit-list .tabulator-edit-list-item.active{color:#fff;background:#1d68cd}.tabulator-edit-list .tabulator-edit-list-item.active.focused{outline:1px solid #ffffff80}.tabulator-edit-list .tabulator-edit-list-item.focused{outline:1px solid #1d68cd}@media (hover:hover) and (pointer:fine){.tabulator-edit-list .tabulator-edit-list-item:hover{color:#fff;cursor:pointer;background:#1d68cd}}.tabulator-edit-list .tabulator-edit-list-placeholder{color:#333;text-align:center;padding:4px}.tabulator-edit-list .tabulator-edit-list-group{color:#333;border-bottom:1px solid #aaa;padding:6px 4px 4px;font-weight:700}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2{padding-left:12px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3{padding-left:20px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4{padding-left:28px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5{padding-left:36px}.tabulator.tabulator-ltr{direction:ltr}.tabulator.tabulator-rtl{text-align:initial;direction:rtl}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #aaa;border-right:initial;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{margin-left:-1px;margin-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-left:25px;padding-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{left:8px;right:auto}.tabulator.tabulator-rtl .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{content:"";background-color:#2975dd;border-radius:999px;width:6px;height:6px;position:absolute;bottom:-3px;left:-3px;right:auto}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #aaa;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-left:initial;border-right:2px solid #aaa;border-bottom-right-radius:1px;border-bottom-left-radius:0;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control{margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #aaa}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #aaa}.tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type{width:3px;margin-left:0;margin-right:-3px}.tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder{text-align:initial}.tabulator-print-fullscreen{z-index:10000;position:absolute;inset:0}body.tabulator-print-fullscreen-hide>:not(.tabulator-print-fullscreen){display:none!important}.tabulator-print-table{border-collapse:collapse}.tabulator-print-table .tabulator-data-tree-branch{vertical-align:middle;border-bottom:2px solid #aaa;border-left:2px solid #aaa;border-bottom-left-radius:1px;width:7px;height:9px;margin-top:-9px;margin-right:5px;display:inline-block}.tabulator-print-table .tabulator-print-table-group{box-sizing:border-box;background:#ccc;border-top:1px solid #999;border-bottom:1px solid #999;border-right:1px solid #aaa;min-width:100%;padding:5px 5px 5px 10px;font-weight:700}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-print-table-group:hover{cursor:pointer;background-color:#0000001a}}.tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow{border:6px solid #0000;border-top-color:#666;border-bottom:0;margin-right:10px}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td{padding-left:30px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td{padding-left:50px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td{padding-left:70px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td{padding-left:90px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td{padding-left:110px!important}.tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle{display:inline-block}.tabulator-print-table .tabulator-print-table-group .tabulator-arrow{vertical-align:middle;border:6px solid #0000;border-left-color:#666;border-right:0;width:0;height:0;margin-right:16px;display:inline-block}.tabulator-print-table .tabulator-print-table-group span{color:#d00;margin-left:10px}.tabulator-print-table .tabulator-data-tree-control{vertical-align:middle;background:#0000001a;border:1px solid #333;border-radius:2px;justify-content:center;align-items:center;width:11px;height:11px;margin-right:5px;display:inline-flex;overflow:hidden}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-data-tree-control:hover{cursor:pointer;background:#0003}}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:0 0;width:1px;height:7px;display:inline-block;position:relative}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{content:"";background:#333;width:7px;height:1px;position:absolute;top:3px;left:-3px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;width:1px;height:7px;display:inline-block;position:relative}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{content:"";background:#333;width:7px;height:1px;position:absolute;top:3px;left:-3px}
+</style><style>
+:host,#panel{background:var(--bkg-color);height:16rem;min-height:10rem}#panel{inset:0;overflow:hidden}#gutter{background:var(--bkg-color);cursor:row-resize;width:100%;height:.4rem;position:absolute;top:0;left:0}#gutter:hover{background:var(--bkg-color-grad1)}#gutter:after{content:" ";background:var(--bkg-color-grad1);border-radius:1rem;width:4rem;height:.4rem;display:block;position:relative;left:calc(50% - 2rem)}#close{color:#777;background-color:var(--bkg-color);cursor:pointer;border:none;width:1rem;height:1rem;margin:.5rem;padding:0;line-height:1rem;position:absolute;top:6px;right:0}#close i:before{content:"uf00d"}#close:hover{color:#000;border-color:#000}#content{background:var(--bkg-color);flex-direction:column;margin:0 .5rem .5rem;padding:0;display:flex;position:absolute;inset:.5rem 0 0;overflow:hidden}#header{flex:0;justify-content:space-between;display:flex}.selection-panel{margin-right:.5rem;display:flex;& .gg-icon-button[disabled]{pointer-events:none;opacity:.5}& .gg-icon-button[disabled]:hover{background-color:#0000}& .label{align-self:center;padding-left:1rem}}.gg-tabs{margin:0}#grid{flex:1;overflow:hidden}.geo-type{margin-right:.5rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#999}.tiny-margin{margin:.1rem}.tabulator-col[aria-sort=none] .tabulator-col-sorter i{color:#999}.tabulator-col[aria-sort=asc] .tabulator-col-sorter i{color:red}.tabulator-col[aria-sort=desc] .tabulator-col-sorter i{color:red;transform:scaleY(-1)}#tabulator{background-color:var(--bkg-color)}#tabulator .tabulator-header .tabulator-col-content{background-color:var(--bkg-color);color:var(--text-color)}#tabulator .tabulator-header .tabulator-col,#tabulator .tabulator-header .tabulator-col-row-handle{white-space:normal}#tabulator .tabulator-tableholder .tabulator-table .tabulator-row{background-color:var(--bkg-color);color:var(--text-color)}#tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(2n){background-color:var(--bkg-color-grad1)}#tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected{background-color:#9abcea}.tabulator-cell img{float:left;height:1.5rem;margin-right:.5rem}.tabulator-cell span{align-items:center;line-height:1.5rem;display:inline-flex;position:relative}.tabulator-cell span sup{position:absolute;top:-.3rem;right:-.5rem}@media (hover:hover) and (pointer:fine){#tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover{cursor:pointer;background-color:var(--bkg-color-grad2)}}img.sort-icon{width:1rem;height:1rem;&.default{opacity:.5}&:hover{opacity:1}}
 </style>
-<link rel="stylesheet" href="styles/common.css"><link rel="stylesheet" href="lib/tabulator-tables/tabulator.min.css"><link rel="stylesheet" href="../../../node_modules/tabulator-tables/dist/css/tabulator.css"><div id="panel"><div id="content"><div id="header"><div class="tab-panel">${this.getTabHeaders().map((th) => uHtml ` <button id="${th.id}" i18n="${th.text}" class="${th.active ? 'tab active' : 'tab'}" .active="${th.active}" onclick="${() => this.displayGrid(th.id, true)}"></button> `)}</div><div class="selection-panel"><button class="${this.showCsvButton ? 'gg-button' : 'hidden'}" onclick="${() => this.zoomToSelection()}" i18n="Zoom to"></button> <button class="gg-button" onclick="${() => this.selectAll()}" i18n="Select all"></button> <button class="gg-button" onclick="${() => this.selectNone()}" i18n="Select none"></button> <button class="gg-button" onclick="${() => this.invertSelection()}" i18n="Invert selection"></button> <button class="${this.showCsvButton ? 'gg-button' : 'hidden'}" onclick="${() => this.generateCSV()}" i18n="Generate CSV"></button></div></div><div id="tabulator"></div></div><div id="gutter"></div><button id="close" onclick="this.closePanel()"><img id="close" alt="close-icon" src="icons/close.svg"></button></div>`;
+<div id="panel"><div id="content"><div id="header"><div class="gg-tabs">${this.getTabHeaders().map((th) => uHtml ` <button id="${th.id}" i18n="${th.text}" class="${th.active ? 'gg-tab active' : 'gg-tab'}" .active="${th.active}" onclick="${() => this.displayGrid(th.id, true)}"></button> `)}</div><div class="selection-panel"><span class="label" i18n="Selection"></span> <button class="gg-icon-button gg-medium" onclick="${() => this.selectAll()}" tip="Select all"><img alt="select all icon" src="icons/select-all-on.svg"></button> <button class="gg-icon-button gg-medium" onclick="${() => this.selectNone()}" tip="Select none"><img alt="select none icon" src="icons/select-all-off.svg"></button> <button class="gg-icon-button gg-medium" onclick="${() => this.invertSelection()}" tip="Invert selection"><img alt="invert selection icon" src="icons/select-invert.svg"></button> <button class="${this.resultsSelected ? 'gg-icon-button gg-medium' : 'gg-icon-button gg-medium disabled'}" ?disabled="${!this.resultsSelected}" onclick="${() => this.zoomToSelection()}" tip="Zoom to"><img alt="zoom to selection icon" src="icons/zoom-to-selection.svg"></button> <button class="${this.resultsSelected ? 'gg-icon-button gg-medium' : 'gg-icon-button gg-medium disabled'}" ?disabled="${!this.resultsSelected}" onclick="${() => this.generateCSV()}" tip="Generate CSV"><img alt="download csv icon" src="icons/arrow-download.svg"></button> <button class="gg-icon-button gg-medium" onclick="${() => this.closePanel()}" tip="Clear Results and close Panel"><img alt="close-icon" src="icons/trash.svg"></button></div></div><div id="tabulator"></div></div><div id="gutter"></div></div>`;
     };
     eventsCallbacks = [];
     selectionTabulatorManager;
@@ -26,7 +28,7 @@ class SelectionGridComponent extends GirafeResizableElement {
     debounceOnFeaturesSelected = debounce(this.onFeaturesSelected.bind(this), 200);
     visible = false;
     currentTabId = '';
-    showCsvButton = false;
+    resultsSelected = false;
     constructor() {
         super('selectiongrid');
     }
@@ -35,7 +37,7 @@ class SelectionGridComponent extends GirafeResizableElement {
         this.csvManager = new CsvManager(this.context);
         this.selectionTabulatorManager = new SelectionTabulatorManager(this.context);
         this.subscribe('selection.gridSelected', (_oldValue, newValue) => {
-            this.showCsvButton = newValue;
+            this.resultsSelected = newValue;
             this.render();
         });
         this.addEventListener('resize-start', () => {
@@ -62,7 +64,7 @@ class SelectionGridComponent extends GirafeResizableElement {
      * @returns The current array of TabHeader objects.
      */
     getTabHeaders() {
-        return this.selectionTabulatorManager.tabHeaders;
+        return this.selectionTabulatorManager.getTabHeaders();
     }
     /**
      * Activates the specified tab, renders the grid, and displays the grid for the specified id.
@@ -82,7 +84,8 @@ class SelectionGridComponent extends GirafeResizableElement {
     closePanel() {
         this.state.interface.selectionComponentVisible = false;
         this.state.selection.selectedFeatures = [];
-        this.showCsvButton = false;
+        this.state.selection.highlightedFeatures = [];
+        this.resultsSelected = false;
         this.state.selection.gridSelected = false;
         super.clean();
     }
@@ -90,46 +93,40 @@ class SelectionGridComponent extends GirafeResizableElement {
      * Selects all rows in the grid.
      */
     selectAll() {
-        this.selectionTabulatorManager.table?.selectRow();
+        this.selectionTabulatorManager.selectAll();
     }
     /**
      * Deselects all rows in the grid.
      */
     selectNone() {
-        this.selectionTabulatorManager.table?.deselectRow();
+        this.selectionTabulatorManager.selectNone();
     }
     /**
      * Inverts the selection of all rows in the grid.
      */
     invertSelection() {
-        this.selectionTabulatorManager.table?.getRows().forEach((row) => {
-            row.toggleSelect();
-        });
+        this.selectionTabulatorManager.invertSelection();
     }
     /**
      * Zooms to the extent of the selected rows in the grid.
      */
     zoomToSelection() {
         const extent = olExtent.createEmpty();
-        this.selectionTabulatorManager.table?.getRows().forEach((row) => {
-            if (row.isSelected()) {
-                const data = row.getData();
-                const geometry = data.geom ?? data.the_geom ?? data.geometry;
-                olExtent.extend(extent, geometry.getExtent());
-            }
-        });
+        for (const row of this.selectionTabulatorManager.getSelectedRows()) {
+            const data = row.getData();
+            const geometry = data.geom ?? data.the_geom ?? data.geometry;
+            olExtent.extend(extent, geometry.getExtent());
+        }
         this.context.mapManager.getMap().getView().fit(extent, { duration: 300 });
     }
     /**
      * Generates a CSV file from the selected rows in the grid.
      */
     generateCSV() {
-        const columns = this.selectionTabulatorManager.data[this.currentTabId].columns.map((column) => {
+        const columnDefs = this.selectionTabulatorManager.getNonGeometryColumnFields().map((column) => {
             return { name: column };
         });
-        const excludedColumns = ['geom', 'the_geom', 'geometry'];
-        const filteredColumns = columns.filter((column) => !excludedColumns.includes(column.name));
-        this.csvManager.startDownload(this.selectionTabulatorManager.table?.getSelectedData() ?? [], filteredColumns, 'query-results.csv');
+        this.csvManager.startDownload(this.selectionTabulatorManager.getSelectedData(), columnDefs, 'query-results.csv');
     }
     /**
      * Renders the component by calling the necessary methods.
@@ -148,7 +145,7 @@ class SelectionGridComponent extends GirafeResizableElement {
      * @private
      */
     setupVisibleComponent() {
-        this.showCsvButton = false;
+        this.resultsSelected = false;
         this.state.selection.gridSelected = false;
         this.isVisibleComponentSetup = true;
         this.registerEvents();
@@ -187,14 +184,14 @@ class SelectionGridComponent extends GirafeResizableElement {
      * @private
      */
     onFeaturesSelected(features) {
-        this.selectionTabulatorManager.tabHeaders = [];
+        this.selectionTabulatorManager.clearTabHeaders();
         // No feature ? Close.
         if (this.isNullOrUndefined(features) || features.length <= 0) {
             this.closePanel();
             return;
         }
         this.selectionTabulatorManager.featuresToGridData(features);
-        const tabIds = Object.keys(this.selectionTabulatorManager.idTab);
+        const tabIds = this.selectionTabulatorManager.getTabIds();
         //define table element
         this.selectionTabulatorManager.setElement(this.shadow.querySelector('#tabulator'));
         // No tab ? Close the panel.

package/components/selectiongrid/tools/selectiontabulatormanager.d.ts

@@ -1,6 +1,6 @@
 import type OlFeature from 'ol/Feature';
 import { GridDataById } from '../../../tools/featuretogriddatabyid';
-import { ColumnDefinition, TabulatorFull as Tabulator } from 'tabulator-tables';
+import { ColumnDefinition, RowComponent } from 'tabulator-tables';
 import IGirafeContext from '../../../tools/context/icontext';
 /**
  * Represents the header text and state of a tab.
@@ -28,11 +28,11 @@ export interface TabContent {
 export default class SelectionTabulatorManager {
     private readonly formatGridGeomValue;
     private readonly featureToGridData;
-    idTab: Record<string, TabContent>;
-    tabHeaders: TabHeader[];
-    table: Tabulator | null;
-    element: string | HTMLElement;
-    data: GridDataById;
+    private idTab;
+    private tabHeaders;
+    private table;
+    private element;
+    private data;
     private readonly context;
     private readonly columnAliasHelper;
     constructor(context: IGirafeContext);
@@ -77,4 +77,13 @@ export default class SelectionTabulatorManager {
     private createGridData;
     blockRedraw(): void;
     restoreRedraw(): void;
+    selectAll(): void;
+    selectNone(): void;
+    invertSelection(): void;
+    getSelectedRows(): RowComponent[];
+    getSelectedData(): any[];
+    getNonGeometryColumnFields(): string[];
+    getTabHeaders(): TabHeader[];
+    clearTabHeaders(): void;
+    getTabIds(): string[];
 }

package/components/selectiongrid/tools/selectiontabulatormanager.js

@@ -4,6 +4,7 @@ import FormatGridGeomValue from './formatgridgeomvalue';
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { getUid } from 'ol/util';
 import ColumnAliasHelper from '../../../tools/utils/aliases';
+const geometryColumns = new Set(['geom', 'the_geom', 'geometry']);
 export default class SelectionTabulatorManager {
     formatGridGeomValue;
     featureToGridData;
@@ -38,7 +39,9 @@ export default class SelectionTabulatorManager {
      * Activates a tab matching the given id.
      */
     activateTab(id) {
-        this.tabHeaders?.forEach((tabHeader) => (tabHeader.active = false));
+        for (const tabHeader of this.tabHeaders) {
+            tabHeader.active = false;
+        }
         const visibleTabHeader = this.tabHeaders?.find((tabHeader) => tabHeader.id === id);
         if (!visibleTabHeader) {
             return;
@@ -62,11 +65,11 @@ export default class SelectionTabulatorManager {
             headerSortElement: function (_, dir) {
                 switch (dir) {
                     case 'asc':
-                        return '<img alt="sort-up-icon" src="icons/sort-up.svg" />';
+                        return '<img alt="sort-up-icon" src="icons/sort-up.svg" class="sort-icon" />';
                     case 'desc':
-                        return '<img alt="sort-down-icon" src="icons/sort-down.svg" />';
+                        return '<img alt="sort-down-icon" src="icons/sort-down.svg" class="sort-icon" />';
                     default:
-                        return '<img alt="sort-icon" src="icons/sort.svg" />';
+                        return '<img alt="sort-icon" src="icons/sort.svg" class="sort-icon default" />';
                 }
             }
         });
@@ -75,15 +78,13 @@ export default class SelectionTabulatorManager {
             this.context.stateManager.state.selection.gridSelected = selection.length > 0;
             // Create a Map of features by their UIDs
             const featureMap = new Map();
-            this.data[id].features.forEach((feature) => {
-                const uid = getUid(feature.getGeometry());
-                featureMap.set(uid, feature);
-            });
+            for (const feature of this.data[id].features) {
+                featureMap.set(getUid(feature.getGeometry()), feature);
+            }
             // Highlight selected features on the map.
-            const highlightedGeometries = selection
+            this.context.stateManager.state.selection.highlightedFeatures = selection
                 .map((row) => featureMap.get(getUid(row.geom ?? row.the_geom ?? row.geometry)))
                 .filter((feature) => feature !== undefined);
-            this.context.stateManager.state.selection.highlightedFeatures = highlightedGeometries;
         });
     }
     /**
@@ -94,7 +95,9 @@ export default class SelectionTabulatorManager {
         this.idTab = {};
         const gridDataById = this.featureToGridData.toGridDataById(features);
         // Create tabs and collect data.
-        Object.keys(gridDataById).forEach((id) => this.gridDataToGridTab(id, gridDataById[id]));
+        for (const id of Object.keys(gridDataById)) {
+            this.gridDataToGridTab(id, gridDataById[id]);
+        }
         // Create tabs headers
         this.tabHeaders = Object.keys(this.idTab).map((key) => {
             return {
@@ -122,21 +125,22 @@ export default class SelectionTabulatorManager {
     }
     columnsToGridColumns(idTable, columns) {
         const columnDefinition = [];
-        columns.forEach((column) => {
+        for (const column of columns) {
             const columnAlias = this.columnAliasHelper.getColumnAlias(idTable, column);
             columnDefinition.push({
                 title: this.context.i18nManager.getTranslation(columnAlias),
                 field: column,
-                formatter: 'html'
+                formatter: 'html',
+                sorter: 'string'
             });
-        });
-        columnDefinition.forEach((column) => {
-            if (column.field === 'the_geom' || column.field === 'geom' || column.field === 'geometry') {
+        }
+        for (const column of columnDefinition) {
+            if (column.field && geometryColumns.has(column.field)) {
                 column.formatter = (cell) => {
                     return this.formatGridGeomValue.getGeometryIcons(cell.getValue()) ?? cell.getValue();
                 };
             }
-        });
+        }
         return columnDefinition;
     }
     filterEmptyColumnsOnData(data) {
@@ -145,7 +149,7 @@ export default class SelectionTabulatorManager {
             const notOlProperties = entry.notOlProperties;
             for (const [_, row] of Object.entries(notOlProperties)) {
                 for (const [key, _] of Object.entries(row)) {
-                    if (!columns.some((column) => column === key)) {
+                    if (!columns.includes(key)) {
                         delete row[key];
                     }
                 }
@@ -178,4 +182,36 @@ export default class SelectionTabulatorManager {
     restoreRedraw() {
         this.table?.restoreRedraw();
     }
+    selectAll() {
+        this.table?.selectRow();
+    }
+    selectNone() {
+        this.table?.deselectRow();
+    }
+    invertSelection() {
+        for (const row of this.table.getRows()) {
+            row.toggleSelect();
+        }
+    }
+    getSelectedRows() {
+        return this.table?.getRows('selected') ?? [];
+    }
+    getSelectedData() {
+        return this.table?.getSelectedData() ?? [];
+    }
+    getNonGeometryColumnFields() {
+        return (this.table
+            ?.getColumns(false)
+            .map((columnComponent) => columnComponent.getField())
+            .filter((column) => !geometryColumns.has(column)) ?? []);
+    }
+    getTabHeaders() {
+        return this.tabHeaders;
+    }
+    clearTabHeaders() {
+        this.tabHeaders = [];
+    }
+    getTabIds() {
+        return Object.keys(this.idTab);
+    }
 }

package/components/timerestriction/component.js

@@ -28,9 +28,7 @@ class TimeRestrictionComponent extends GirafeHTMLElement {
     renderComponent() {
         this.render();
         super.girafeTranslate();
-        if (!this.timeWidget) {
-            this.initTimeWidget();
-        }
+        this.initTimeWidget();
         // Wait for the time widget to be rendered, then set the time
         setTimeout(() => {
             this.onOutsideTimeChange(this.layer.timeRestriction);
@@ -41,7 +39,7 @@ class TimeRestrictionComponent extends GirafeHTMLElement {
             // The type of time widget component in the template is dependent on the timeOptions > widget value
             this.timeWidget = this.getById('time-widget');
             this.timeWidget.initialize(this.timeOptions);
-            this.render();
+            this.timeWidget.render();
             // Connect change event of widget
             this.timeWidget.addEventListener(TimeChangeEvent, ((evt) => this.onTimeChange(evt.detail)));
         }

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.0.2154016552",
+  "version": "1.0.2163361385",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.0.2154016552", "build":"2154016552", "date":"12/11/2025"}
+{"version":"1.0.2163361385", "build":"2163361385", "date":"17/11/2025"}