@geogirafe/lib-geoportal 1.1.0-dev.2468094514 → 1.1.0-dev.2507911619

package/README.md

@@ -243,6 +243,15 @@ For major changes, please open an issue first to discuss what you would like to
 Contribution guidelines are available here: [CONTRIBUTING.md](CONTRIBUTING.md).  
 **Please read them before contributing.**
 
+# Supporting
+
+There are many ways to support GeoGirafe.
+
+- You can use the following tag on your project to help promote GeoGirafe:   
+[![GeoGirafe](https://geogirafe.org/wp-content/uploads/geogirafe-badge.svg)](https://geogirafe.org)
+- If you are interested in providing financial assistance, please reach out to us at contact@geogirafe.org.
+- If you have another idea how to support the project, we invite you to join us on the dedicaced discord server: https://discord.gg/kdrXjaqBbH.
+
 # License
 
 Apache License, Version 2.0

package/assets/i18n/de.json

@@ -55,6 +55,7 @@
     "Copy ShortUrl": "Kurz-URL kopieren",
     "Copy to Clipboard": "In die Zwischenablage kopieren",
     "Copy value": "Wert kopieren",
+    "copy-cell-content": "Zelleninhalt kopieren",
     "Create custom theme": "Thema erstellen",
     "cross-section-settings": "Querschnitt",
     "CSV export": "CSV-Export",
@@ -155,6 +156,7 @@
     "fr": "Französisch",
     "Freehand line": "Freihandlinie",
     "Freehand polygon": "Freihandpolygon",
+    "freeze-column": "Spalte fixieren",
     "Generate and copy code": "Code generieren und kopieren",
     "Generate and copy link": "Link generieren und kopieren",
     "Generate CSV": "CSV generieren",
@@ -440,6 +442,7 @@
     "Toggle all legends": "Alle Legenden umschalten",
     "Toggle legend": "Legende umschalten",
     "Tools": "Werkzeuge",
+    "unfreeze-column": "Spaltenfixierung aufheben",
     "Unselect all filtered layers": "Alle Layers im Filter abwählen",
     "Unsupported file format": "Nicht unterstütztes Dateiformat",
     "URL (auto_WMTS)": "URL",

package/assets/i18n/en.json

@@ -55,6 +55,7 @@
     "Copy ShortUrl": "Copy ShortUrl",
     "Copy to Clipboard": "Copy to Clipboard",
     "Copy value": "Copier value",
+    "copy-cell-content": "Copy cell content",
     "Create custom theme": "Create custom theme",
     "cross-section-settings": "Cross-section",
     "CSV export": "CSV export",
@@ -156,6 +157,7 @@
     "fr": "French",
     "Freehand line": "Freehand line",
     "Freehand polygon": "Freehand polygon",
+    "freeze-column": "Freeze column",
     "Generate and copy code": "Generate and copy code",
     "Generate and copy link": "Generate and copy link",
     "Generate CSV": "Generate CSV",
@@ -442,6 +444,7 @@
     "Toggle all legends": "Toggle all legends",
     "Toggle legend": "Toggle legend",
     "Tools": "Tools",
+    "unfreeze-column": "Unfreeze column",
     "Unselect all filtered layers": "Unselect all filtered layers",
     "Unsupported file format": "Unsupported file format",
     "URL (auto_WMTS)": "URL",

package/assets/i18n/fr.json

@@ -55,6 +55,7 @@
     "Copy ShortUrl": "Copier le lien court",
     "Copy to Clipboard": "Copier dans le presse-papiers",
     "Copy value": "Copier la valeur",
+    "copy-cell-content": "Copier le contenu de la cellule",
     "Create custom theme": "Créer un thème personnalisé",
     "cross-section-settings": "Coupe transversale",
     "CSV export": "Export CSV",
@@ -155,6 +156,7 @@
     "fr": "Français",
     "Freehand line": "Ligne à main levée",
     "Freehand polygon": "Polygone à main levée",
+    "freeze-column": "Figer la colonne",
     "Generate and copy code": "Générer et copier le code",
     "Generate and copy link": "Générer et copier le lien",
     "Generate CSV": "Générer CSV",
@@ -440,6 +442,7 @@
     "Toggle all legends": "Afficher / Masquer toutes les légendes",
     "Toggle legend": "Afficher / Masquer la légende",
     "Tools": "Outis",
+    "unfreeze-column": "Libérer la colonne",
     "Unselect all filtered layers": "Déselectionner toutes les couches filtrées",
     "Unsupported file format": "Format de fichier non supporté",
     "URL (auto_WMTS)": "URL",

package/assets/i18n/it.json

@@ -55,6 +55,7 @@
     "Copy ShortUrl": "Copia ShortUrl",
     "Copy to Clipboard": "Copia negli appunti",
     "Copy value": "Copia il valore",
+    "copy-cell-content": "Copia contenuto cella",
     "Create custom theme": "Crea un tema personalizzato",
     "cross-section-settings": "Sezione trasversale",
     "CSV export": "Esporta CSV",
@@ -155,6 +156,7 @@
     "fr": "Francese",
     "Freehand line": "Linea a mano libera",
     "Freehand polygon": "Poligono a mano libera",
+    "freeze-column": "Blocca colonna",
     "Generate and copy code": "Genera e copia il codice",
     "Generate and copy link": "Genera e copia il link",
     "Generate CSV": "Genera CSV",
@@ -440,6 +442,7 @@
     "Toggle all legends": "Attiva / Disattiva tutte le legende",
     "Toggle legend": "Attiva / Disattiva legenda",
     "Tools": "Strumenti",
+    "unfreeze-column": "Sblocca colonna",
     "Unselect all filtered layers": "Deselezionare tutti i layers filtrati",
     "Unsupported file format": "Formato di file non supportato",
     "URL (auto_WMTS)": "URL",

package/components/selectiongrid/component.js

@@ -20,7 +20,7 @@ class SelectionGridComponent extends GirafeResizableElement {
 </style><style>
 .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{padding-top:1em;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}}
+: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{font-size:inherit!important}.tabulator-cell{text-wrap:pretty!important;height:fit-content!important}.tabulator-cell a{width:inherit;height:inherit}.tabulator-cell img{width:inherit;height:inherit;object-fit:scale-down;float:left;max-height:3rem;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>
 <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><girafe-get-directions></girafe-get-directions><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/close.svg"></button></div></div><div id="tabulator"></div></div><div id="gutter"></div></div>`;
     };

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

@@ -1,6 +1,6 @@
 import type OlFeature from 'ol/Feature.js';
 import { GridDataById } from '../../../tools/featuretogriddatabyid.js';
-import { ColumnDefinition, RowComponent } from 'tabulator-tables';
+import { ColumnComponent, ColumnDefinition, RowComponent } from 'tabulator-tables';
 import IGirafeContext from '../../../tools/context/icontext.js';
 /**
  * Represents the header text and state of a tab.
@@ -34,6 +34,11 @@ export default class SelectionTabulatorManager {
     private data;
     private readonly context;
     private readonly columnAliasHelper;
+    private readonly minimalColumnWidth;
+    private readonly columnPositionsBeforeFreezing;
+    private popupLastImageSrc;
+    private popupLastInstance;
+    private get tableColumns();
     constructor(context: IGirafeContext);
     /**
      * Set the HTML element to be used by the grid.
@@ -62,6 +67,7 @@ export default class SelectionTabulatorManager {
      */
     private gridDataToGridTab;
     columnsToGridColumns(idTable: string, columns: string[]): ColumnDefinition[];
+    getLookupColumnForFreezing(): [ColumnComponent, boolean];
     filterEmptyColumnsOnData(data: GridDataById): GridDataById;
     /**
      * @returns A newly created grid column object.

package/components/selectiongrid/tools/selectiontabulatormanager.js

@@ -3,6 +3,8 @@ import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { getUid } from 'ol/util.js';
 import ColumnAliasHelper from '../../../tools/utils/aliases.js';
 import { linkify } from '../../../tools/utils/utils.js';
+import { noop } from '../../../tools/utils/async.js';
+import tippy from 'tippy.js';
 const geometryColumns = new Set(['geom', 'the_geom', 'geometry']);
 export default class SelectionTabulatorManager {
     featureToGridData;
@@ -13,10 +15,17 @@ export default class SelectionTabulatorManager {
     data = {};
     context;
     columnAliasHelper;
+    minimalColumnWidth = 64;
+    columnPositionsBeforeFreezing = {};
+    popupLastImageSrc;
+    popupLastInstance;
+    get tableColumns() {
+        return this.table?.getColumns(false) ?? [];
+    }
     constructor(context) {
         this.context = context;
         this.columnAliasHelper = new ColumnAliasHelper(context.stateManager);
-        this.featureToGridData = new FeatureToGridDataById({ keepGeomProperty: true });
+        this.featureToGridData = new FeatureToGridDataById(this.context, { keepGeomProperty: true });
     }
     /**
      * Set the HTML element to be used by the grid.
@@ -56,9 +65,11 @@ export default class SelectionTabulatorManager {
             data: this.data[id].notOlProperties,
             columns: this.columnsToGridColumns(id, this.data[id].columns),
             selectableRows: true,
-            layout: 'fitColumns',
+            layout: 'fitDataStretch',
+            movableColumns: true,
             locale: true,
             maxHeight: '750',
+            resizableRows: true,
             headerSortElement: function (_, dir) {
                 switch (dir) {
                     case 'asc':
@@ -68,7 +79,8 @@ export default class SelectionTabulatorManager {
                     default:
                         return '<img alt="sort-icon" src="icons/sort.svg" class="sort-icon default" />';
                 }
-            }
+            },
+            popupContainer: this.element
         });
         this.table?.on('rowSelectionChanged', (selection) => {
             // True if at least one row is selected.
@@ -137,11 +149,74 @@ export default class SelectionTabulatorManager {
             columnDefinition.push({
                 title: this.context.i18nManager.getTranslation(columnAlias),
                 field: column,
-                formatter: 'html'
+                formatter: 'html',
+                headerTooltip: true,
+                minWidth: this.minimalColumnWidth,
+                headerMenu: (_e, _c) => [
+                    {
+                        label: (column) => this.context.i18nManager.getTranslation(column.getDefinition().frozen ? 'unfreeze-column' : 'freeze-column'),
+                        action: (_e, column) => {
+                            const columnDefinition = column.getDefinition();
+                            const freezeOrNot = !columnDefinition.frozen;
+                            const [toColumn, after] = this.getLookupColumnForFreezing();
+                            if (freezeOrNot) {
+                                this.columnPositionsBeforeFreezing[column.getField()] = this.tableColumns.findIndex((colComp) => colComp.getField() === column.getField());
+                                this.table?.moveColumn(column, toColumn, after);
+                            }
+                            else {
+                                const colPos = this.columnPositionsBeforeFreezing[column.getField()];
+                                if (colPos) {
+                                    const previousColumn = this.tableColumns.at(colPos);
+                                    if (previousColumn) {
+                                        this.table?.moveColumn(column, previousColumn, true);
+                                    }
+                                }
+                            }
+                            column
+                                .updateDefinition({
+                                ...columnDefinition,
+                                frozen: !columnDefinition.frozen
+                            })
+                                .then(noop);
+                        }
+                    }
+                ],
+                contextMenu: [
+                    {
+                        label: this.context.i18nManager.getTranslation('copy-cell-content'),
+                        action: (_e, cell) => {
+                            navigator.clipboard?.writeText(cell.getElement().textContent);
+                        }
+                    }
+                ],
+                cellMouseEnter: (_e, cell) => {
+                    const imageElement = cell.getElement().querySelector('img');
+                    if (imageElement && this.popupLastImageSrc !== imageElement.src) {
+                        if (this.popupLastInstance) {
+                            this.popupLastInstance.destroy();
+                        }
+                        this.popupLastImageSrc = imageElement.src;
+                        this.popupLastInstance = tippy(imageElement, {
+                            arrow: true,
+                            theme: 'image-popup',
+                            content: (_ref) => {
+                                const popupImageElement = document.createElement('img');
+                                popupImageElement.src = imageElement.src;
+                                return popupImageElement;
+                            }
+                        });
+                        this.popupLastInstance.show();
+                    }
+                }
             });
         }
         return columnDefinition;
     }
+    getLookupColumnForFreezing() {
+        const firstFrozenColumnDefinition = this.tableColumns.find((colComp) => colComp.getDefinition().frozen);
+        const firstColumnDefinition = this.tableColumns[0];
+        return firstFrozenColumnDefinition ? [firstFrozenColumnDefinition, true] : [firstColumnDefinition, false];
+    }
     filterEmptyColumnsOnData(data) {
         for (const [_, entry] of Object.entries(data)) {
             const columns = entry.columns;

package/components/selectionwindow/component.d.ts

@@ -26,7 +26,7 @@ declare class SelectionWindowComponent extends GirafeDraggableElement {
     private isVisibleComponentSetup;
     private readonly debounceOnFeaturesSelected;
     private resizeWindow;
-    private readonly featureToGridData;
+    private featureToGridData;
     private windowFeatures;
     private windowLayers;
     visible: boolean;

package/components/selectionwindow/component.js

@@ -33,7 +33,7 @@ table{border-collapse:collapse;table-layout:auto;width:100%}td.feature-id{text-a
     isVisibleComponentSetup = false;
     debounceOnFeaturesSelected = debounce(this.onFeaturesSelected.bind(this), 200);
     resizeWindow = null;
-    featureToGridData = new FeatureToGridDataById({ removeEmptyColumns: false });
+    featureToGridData;
     windowFeatures = [];
     windowLayers = [];
     visible = false;
@@ -52,6 +52,7 @@ table{border-collapse:collapse;table-layout:auto;width:100%}td.feature-id{text-a
         super.connectedCallback();
         this.csvManager = new CsvManager(this.context);
         this.columnAliasHelper = new ColumnAliasHelper(this.context.stateManager);
+        this.featureToGridData = new FeatureToGridDataById(this.context, { removeEmptyColumns: false });
         this.render();
         this.registerVisibilityEvents();
     }

package/components/treeview/treeviewitem/component.js

@@ -96,6 +96,8 @@ header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.to
     }
     createOpacityTooltip() {
         const el = this.shadow.getElementById('opacity');
+        if (!el)
+            return;
         tippy(el, {
             trigger: 'click',
             arrow: true,
@@ -116,6 +118,8 @@ header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.to
     }
     createFilterTooltip() {
         const el = this.shadow.getElementById('filter');
+        if (!el)
+            return;
         tippy(el, {
             trigger: 'click',
             arrow: true,

package/decs.d.ts

@@ -1,3 +1,3 @@
 // SPDX-License-Identifier: Apache-2.0
-declare module 'tippy.js';
+// declare module 'tippy.js';
 declare module 'olcs';

package/package.json

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

package/styles/index.css

@@ -223,3 +223,18 @@ girafe-prototype-banner {
   font-size: 1.2rem;
   font-weight: bold;
 }
+
+/* For showing a Popup of an Image found in Selection */
+div.tippy-box[data-theme=image-popup] {
+  border: var(--app-standard-border) !important;
+  div.tippy-content {
+    background-color: var(--bkg-color) !important;
+    img {
+      max-height: 20rem;
+      max-width: 20rem;
+    }
+  }
+  div.tippy-arrow {
+    color: var(--bkg-color) !important;
+  }
+}

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2468094514", "build":"2468094514", "date":"21/04/2026"}
+{"version":"1.1.0-dev.2507911619", "build":"2507911619", "date":"07/05/2026"}

package/templates/vite.config.js

@@ -58,7 +58,15 @@ export default defineConfig(({ command, mode }) => {
               key: readFileSync(`${certsDirectory}/app.localhost.key.pem`),
               cert: readFileSync(`${certsDirectory}/app.localhost.cert.pem`)
             }
-          : false
+          : false,
+      // To be able to see Images locally and resolve clickable Links correctly
+      proxy: {
+        '^/file_proxy/.*': {
+          target: "https://map.geo.bs.ch/file_proxy/",
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/file_proxy/, '')
+        }
+      }
     },
     build: {
       outDir: 'dist/app',
@@ -127,7 +135,7 @@ export default defineConfig(({ command, mode }) => {
           { src: 'node_modules/ol/ol.css', dest: 'lib/ol/' },
           { src: 'node_modules/tabulator-tables/dist/css/tabulator.min.css', dest: 'lib/tabulator-tables/' },
           { src: 'node_modules/tippy.js/dist/*.css', dest: 'lib/tippy.js/' },
-          { src: 'node_modules/vanilla-picker/dist/*.css', dest: 'lib/vanilla-picker/' }
+          { src: 'node_modules/vanilla-picker/dist/*.css', dest: 'lib/vanilla-picker/' },
         ]
       }),
       InlineTemplatesPlugin(),

package/tools/configuration/girafeconfig.d.ts

@@ -1,6 +1,7 @@
 declare class GirafeConfig {
     general: {
         locale: string;
+        defaultUrlPrefix: string;
         logLevel: 'debug' | 'info' | 'warn' | 'error';
     };
     languages: {
@@ -163,9 +164,6 @@ declare class GirafeConfig {
         quote: string;
         separator: string;
     };
-    metadata: {
-        metadataUrlPrefix: string;
-    };
     infoWindow: {
         defaultWindowWidth: string;
         defaultWindowHeight: string;
@@ -263,7 +261,6 @@ declare class GirafeConfig {
     private initConfigLidar;
     private initConfigNews;
     private initConfigCsv;
-    private initConfigMetadata;
     private initConfigInfoWindow;
     private initConfigContact;
     private initConfigOffline;

package/tools/configuration/girafeconfig.js

@@ -20,7 +20,6 @@ class GirafeConfig {
     contextmenu;
     crs;
     csv;
-    metadata;
     infoWindow;
     offline;
     query;
@@ -56,7 +55,6 @@ class GirafeConfig {
         this.news = this.initConfigNews(config);
         this.lidar = this.initConfigLidar(config);
         this.csv = this.initConfigCsv(config);
-        this.metadata = this.initConfigMetadata(config);
         this.infoWindow = this.initConfigInfoWindow(config);
         this.offline = this.initConfigOffline(config);
         this.query = this.initConfigQuery(config);
@@ -255,15 +253,6 @@ class GirafeConfig {
             ...config.csv
         };
     }
-    initConfigMetadata(config) {
-        const defaultConfig = {
-            metadataUrlPrefix: ''
-        };
-        return {
-            ...defaultConfig,
-            ...config.metadata
-        };
-    }
     initConfigInfoWindow(config) {
         const defaultConfig = {
             defaultWindowWidth: '960px',
@@ -315,6 +304,7 @@ class GirafeConfig {
     initConfigGeneral(config) {
         return {
             locale: config.general.locale ?? GirafeConfig.DEFAULT_LOCALE,
+            defaultUrlPrefix: config.general.defaultUrlPrefix ?? '',
             // NOTE REG: Small hack specific to Vite: When running in debug mode, we force the logLevel to debug.
             // Otherwise we will always have to manually activate it.
             logLevel: import.meta?.env?.DEV ? 'debug' : (config.general.logLevel ?? 'warn')

package/tools/error/errormanager.js

@@ -42,8 +42,13 @@ ${stack}
     }
     listenToAllErrors() {
         // Listen to all uncatched errors
-        window.onerror = async (_message, file, line, col, error) => {
-            const title = error?.message ?? `Unknown error in ${file} at line ${line} and column ${col}.`;
+        window.onerror = async (message, file, line, col, error) => {
+            if (message === 'ResizeObserver loop completed with undelivered notifications.') {
+                // Seems to be an Issue on Tabulator Tables: https://github.com/olifolkerd/tabulator/issues?q=ResizeObserver%20loop%20completed%20with%20undelivered%20notifications
+                console.debug(`Ignored Error: ${message}`);
+                return false;
+            }
+            const title = error?.message ?? message ?? `Unknown error in ${file} at line ${line} and column ${col}.`;
             const stack = await this.getStackTrace(error);
             this.pushErrorMessageWithStack(title, stack);
             return false;

package/tools/featuretogriddatabyid.d.ts

@@ -1,4 +1,5 @@
 import type OlFeature from 'ol/Feature.js';
+import IGirafeContext from './context/icontext.js';
 /**
  * Represents a grid data organized by unique ids.
  */
@@ -30,8 +31,9 @@ export interface FeatureToGridDataOptions {
  * A feature-to-grid data converter, to show feature's properties in grid-like system.
  */
 export default class FeatureToGridDataById {
+    private readonly context;
     options: FeatureToGridDataOptions;
-    constructor(options: FeatureToGridDataOptions);
+    constructor(context: IGirafeContext, options: FeatureToGridDataOptions);
     /**
      * Takes an array of OpenLayers features and converts them into a grid data object, where each feature
      * is mapped by its ID as the key.
@@ -43,6 +45,8 @@ export default class FeatureToGridDataById {
      * @private
      */
     private addFeatureToGridDataById;
+    private ensureAbsolutePath;
+    private isLikelyHtml;
     /**
      * @returns {GridData} A new empty grid data object with columns from given properties.
      * @static

package/tools/featuretogriddatabyid.js

@@ -4,8 +4,10 @@ import WfsManager from './wfs/wfsmanager.js';
  * A feature-to-grid data converter, to show feature's properties in grid-like system.
  */
 export default class FeatureToGridDataById {
+    context;
     options;
-    constructor(options) {
+    constructor(context, options) {
+        this.context = context;
         this.options = {
             ...{
                 keepGeomProperty: false,
@@ -32,11 +34,13 @@ export default class FeatureToGridDataById {
      */
     addFeatureToGridDataById(gridDataById, feature) {
         const featureType = FeatureToGridDataById.getUserFeatureType(feature);
-        const notOlProperties = removeUnwantedOlParams(feature, this.options.keepGeomProperty);
+        let notOlProperties = removeUnwantedOlParams(feature, this.options.keepGeomProperty);
         if (!Object.keys(notOlProperties).length) {
             // Don't keep feature without properties.
             return gridDataById;
         }
+        // Apply default prefix to links and images if necessary
+        notOlProperties = Object.fromEntries(Object.entries(notOlProperties).map(([key, value]) => [key, this.ensureAbsolutePath(value)]));
         if (!Object.keys(gridDataById).includes(featureType)) {
             gridDataById[featureType] = FeatureToGridDataById.createGridDataWithColumns(notOlProperties);
         }
@@ -49,6 +53,19 @@ export default class FeatureToGridDataById {
         gridData.data.push(data);
         return gridDataById;
     }
+    ensureAbsolutePath(attributeContent) {
+        if (this.context.configManager.Config.general.defaultUrlPrefix && this.isLikelyHtml(attributeContent)) {
+            const regex = /(href|src)="\/([^"]*)"/g;
+            return attributeContent.replaceAll(regex, (_match, attr, path) => {
+                return `${attr}="${this.context.configManager.Config.general.defaultUrlPrefix}/${path}"`;
+            });
+        }
+        // Not an HTML string
+        return attributeContent;
+    }
+    isLikelyHtml(str) {
+        return /<[a-z][\s\S]*>/i.test(str);
+    }
     /**
      * @returns {GridData} A new empty grid data object with columns from given properties.
      * @static

package/tools/main.d.ts

@@ -111,7 +111,7 @@ export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle,
 export { getPropertyByPath, setPropertyByPath, createObjectFromPath, deletePropertyByPath, mergeObjects } from './utils/pathUtils.js';
 export { generateQrCode } from './utils/qrcode.js';
 export { default as ServiceWorkerHelper } from './utils/swhelper.js';
-export { systemIsInDarkMode, isSafari, isFirefox, getValidIndex, minMax, hexToRgbaArray, rgbStrToRgbaArray, colorToRgbaArray, isValidEmail, applyOpacityToLayers, applyFeaturesToSelection, linkify } from './utils/utils.js';
+export { systemIsInDarkMode, isSafari, isFirefox, getValidIndex, minMax, hexToRgbaArray, rgbStrToRgbaArray, colorToRgbaArray, isValidEmail, applyOpacityToLayers, applyFeaturesToSelection, linkify, applyDefaultPrefixToUrl } from './utils/utils.js';
 export { default as VendorSpecificOgcServerManager } from './vendorspecificogcservermanager.js';
 export type { WfsClientOptions, WfsClientOptionalOptions, QueryableLayerWms, GetFeatureOptionsPartial } from './wfs/wfsclient.js';
 export { default as WfsClient, WfsClientMapServer, WfsClientQgis, WfsClientGeorama, WfsClientDefault, WfsClientGeoServer } from './wfs/wfsclient.js';

package/tools/main.js

@@ -86,7 +86,7 @@ export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle,
 export { getPropertyByPath, setPropertyByPath, createObjectFromPath, deletePropertyByPath, mergeObjects } from './utils/pathUtils.js';
 export { generateQrCode } from './utils/qrcode.js';
 export { default as ServiceWorkerHelper } from './utils/swhelper.js';
-export { systemIsInDarkMode, isSafari, isFirefox, getValidIndex, minMax, hexToRgbaArray, rgbStrToRgbaArray, colorToRgbaArray, isValidEmail, applyOpacityToLayers, applyFeaturesToSelection, linkify } from './utils/utils.js';
+export { systemIsInDarkMode, isSafari, isFirefox, getValidIndex, minMax, hexToRgbaArray, rgbStrToRgbaArray, colorToRgbaArray, isValidEmail, applyOpacityToLayers, applyFeaturesToSelection, linkify, applyDefaultPrefixToUrl } from './utils/utils.js';
 export { default as VendorSpecificOgcServerManager } from './vendorspecificogcservermanager.js';
 export { default as WfsClient, WfsClientMapServer, WfsClientQgis, WfsClientGeorama, WfsClientDefault, WfsClientGeoServer } from './wfs/wfsclient.js';
 export { default as WfsFilter, wfsOperatorsStrList, isWfsOperator, mapAttributeTypeToFilterOperators } from './wfs/wfsfilter.js';

package/tools/tests/mockconfig.d.ts

@@ -2,6 +2,7 @@ export declare const MockConfig: {
     general: {
         locale: string;
         logLevel: string;
+        defaultUrlPrefix: string;
     };
     languages: {
         translations: {

package/tools/tests/mockconfig.js

@@ -2,7 +2,8 @@
 export const MockConfig = {
     general: {
         locale: 'en-US',
-        logLevel: 'debug'
+        logLevel: 'debug',
+        defaultUrlPrefix: 'https://map.geo.bs.ch'
     },
     languages: {
         translations: {

package/tools/themes/themesmanager.d.ts

@@ -26,7 +26,6 @@ declare class ThemesManager extends GirafeSingleton {
     private applyOpacityToBasemaps;
     private applyOpacityToBasemap;
     private prepareThemes;
-    private calculateMetadataUrl;
     /**
      * Will create layer and child layers if elem passed is a group of layers
      * @param elem either a layer or a group of layers

package/tools/themes/themesmanager.js

@@ -16,6 +16,7 @@ import BasemapSwisstopoVectorTiles from '../../models/basemaps/basemapswisstopov
 import BasemapOsm from '../../models/basemaps/basemaposm.js';
 import { DEFAULT_OPACITY, OPACITY_FOR_DEFAULT_BASEMAP } from './themes-config.js';
 import Layer from '../../models/layers/layer.js';
+import { applyDefaultPrefixToUrl } from '../utils/utils.js';
 class ThemesManager extends GirafeSingleton {
     anonymousUserInfo = { u: 'anonymous' };
     get state() {
@@ -246,15 +247,6 @@ class ThemesManager extends GirafeSingleton {
         });
         return { themes, themesFunctionalities };
     }
-    calculateMetadataUrl(metadataUrl) {
-        if (!metadataUrl) {
-            return undefined;
-        }
-        if (!metadataUrl.startsWith('http') && this.context.configManager.Config.metadata.metadataUrlPrefix) {
-            return this.context.configManager.Config.metadata.metadataUrlPrefix + metadataUrl;
-        }
-        return metadataUrl;
-    }
     /**
      * Will create layer and child layers if elem passed is a group of layers
      * @param elem either a layer or a group of layers
@@ -312,7 +304,7 @@ class ThemesManager extends GirafeSingleton {
             time: elem.time
         };
         if (options.metadataUrl) {
-            options.metadataUrl = this.calculateMetadataUrl(options.metadataUrl);
+            options.metadataUrl = applyDefaultPrefixToUrl(this.context, options.metadataUrl);
         }
         const group = new GroupLayer(elem.id, elem.name, order.value, options);
         // Append children
@@ -336,7 +328,7 @@ class ThemesManager extends GirafeSingleton {
             const ogcServer = this.state.ogcServers[ogcServerName];
             const options = elem;
             if (options.metadata?.metadataUrl) {
-                options.metadata.metadataUrl = this.calculateMetadataUrl(options.metadata.metadataUrl);
+                options.metadata.metadataUrl = applyDefaultPrefixToUrl(this.context, options.metadata.metadataUrl);
             }
             const wmsLayer = new LayerWms(elem.id, elem.name, order.value, ogcServer, elem);
             // For WMFS queries, the layers attribute will be used. It can be different from the name.
@@ -356,7 +348,7 @@ class ThemesManager extends GirafeSingleton {
         const ogcServer = elem.metadata?.ogcServer ? this.state.ogcServers[elem.metadata?.ogcServer] : undefined;
         const options = elem;
         if (options.metadata?.metadataUrl) {
-            options.metadata.metadataUrl = this.calculateMetadataUrl(options.metadata.metadataUrl);
+            options.metadata.metadataUrl = applyDefaultPrefixToUrl(this.context, options.metadata.metadataUrl);
         }
         return new LayerWmts(elem.id, elem.name, order.value, elem.url, elem.layer, options, ogcServer);
     }
@@ -376,7 +368,7 @@ class ThemesManager extends GirafeSingleton {
                 layerName: elem.metadata.layerName
             };
             if (options.metadata?.metadataUrl) {
-                options.metadata.metadataUrl = this.calculateMetadataUrl(options.metadata.metadataUrl);
+                options.metadata.metadataUrl = applyDefaultPrefixToUrl(this.context, options.metadata.metadataUrl);
             }
             return new LayerVectorTiles(elem.id, elem.name, order.value, elem.style, options);
         }

package/tools/utils/olutils.js

@@ -161,18 +161,26 @@ export const getRadiusDataForCircle = (circle, defaultStyle, stroke) => {
     };
 };
 export const getLengthAsMetricText = (length) => {
-    if (length) {
-        const formatedLength = length > 100 ? (length / 1000).toFixed(2) + ' km' : length.toFixed(2) + ' m';
-        return formatedLength;
+    if (length === undefined) {
+        return '';
     }
-    return '';
+    if (length <= 500) {
+        return `${length.toFixed(2)} m`;
+    }
+    const lengthInKilometers = length / 1000;
+    if (length <= 2000) {
+        return `${lengthInKilometers.toFixed(3)} km`;
+    }
+    return `${lengthInKilometers.toFixed(2)} km`;
 };
 export const getAreaAsMetricText = (area) => {
-    if (area) {
-        const formatedArea = area > 10000 ? (area / 1000000).toFixed(2) + ' km²' : area.toFixed(2) + ' m²';
-        return formatedArea;
+    if (area === undefined) {
+        return '';
     }
-    return '';
+    if (area <= 10000) {
+        return `${area.toFixed(2)} m²`;
+    }
+    return `${(area / 1000000).toFixed(2)} km²`;
 };
 export const getAzimuthAsText = (azimuth) => {
     if (azimuth) {

package/tools/utils/utils.d.ts

@@ -2,6 +2,7 @@ import BaseLayer from '../../models/layers/baselayer.js';
 import Feature from 'ol/Feature.js';
 import { Geometry } from 'ol/geom.js';
 import State from '../state/state.js';
+import IGirafeContext from '../context/icontext.js';
 /**
  * Checks if the system prefers dark mode.
  * Falls back safely if matchMedia is not supported.
@@ -68,3 +69,11 @@ export declare const applyOpacityToLayers: (opacity: number, layers: BaseLayer[]
  */
 export declare const applyFeaturesToSelection: (features: Feature<Geometry>[], state: State) => void;
 export declare const linkify: (str: string) => string;
+/**
+ * Apply default prefix to a relative URL
+ * Is usefull on the demo website for metadata or some images urls
+ * @param context
+ * @param metadataUrl
+ * @returns
+ */
+export declare function applyDefaultPrefixToUrl(context: IGirafeContext, metadataUrl?: string): string | undefined;

package/tools/utils/utils.js

@@ -183,3 +183,19 @@ export const linkify = (str) => {
     }
     return str;
 };
+/**
+ * Apply default prefix to a relative URL
+ * Is usefull on the demo website for metadata or some images urls
+ * @param context
+ * @param metadataUrl
+ * @returns
+ */
+export function applyDefaultPrefixToUrl(context, metadataUrl) {
+    if (!metadataUrl) {
+        return undefined;
+    }
+    if (!metadataUrl.startsWith('http') && context.configManager.Config.general.defaultUrlPrefix) {
+        return `${context.configManager.Config.general.defaultUrlPrefix}${metadataUrl}`;
+    }
+    return metadataUrl;
+}