@geogirafe/lib-geoportal 1.0.2136269476 → 1.0.2138549281

package/assets/i18n/de.json

@@ -217,6 +217,7 @@
     "meters": "Meter",
     "Move": "Verschieben",
     "My Drawing": "Meine Zeichnung",
+    "My selection": "Meine Auswahl",
     "Name": "Name",
     "No": "Nein",
     "No bookmark": "Kein Lesezeichen",

package/assets/i18n/en.json

@@ -218,6 +218,7 @@
     "meters": "meters",
     "Move": "Move",
     "My Drawing": "My Drawing",
+    "My selection": "My selection",
     "Name": "Name",
     "No": "No",
     "No bookmark": "No bookmark",

package/assets/i18n/fr.json

@@ -217,6 +217,7 @@
     "meters": "mètres",
     "Move": "Déplacer",
     "My Drawing": "Mon dessin",
+    "My selection": "Ma sélection",
     "Name": "Nom",
     "No": "Non",
     "No bookmark": "Aucun favori",

package/assets/i18n/it.json

@@ -217,6 +217,7 @@
     "meters": "metri",
     "Move": "Muovi",
     "My Drawing": "Il mio disegno",
+    "My selection": "La mia selezione",
     "Name": "Nome",
     "No": "No",
     "No bookmark": "Nessun segnalibro",

package/components/auth-mobile/component.js

@@ -3,7 +3,7 @@ import OauthComponent from '../auth/component';
 export default class MobileOauthComponent extends OauthComponent {
     template = () => {
         return uHtml `<style>
-.hidden{display:none}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
+.hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
 .container{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.container:active{background-color:#c6ceda}.container>button{background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.container>button>img{opacity:.7;width:25%;padding-bottom:1em}.container>button>span{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
 </style>

package/components/basemap/component.js

@@ -8,7 +8,7 @@ class BasemapComponent extends GirafeHTMLElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-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;border-bottom:1px solid gray;justify-content:left;align-items:end;gap:1rem;height:2rem;margin:.5rem auto 1rem;display:flex}.gg-tab{cursor:pointer;color:var(--text-color);background:0 0;border:none;padding:.5rem}.gg-tab.active{border-bottom:solid 2px var(--text-color-grad2);font-weight:600}.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>
-.basemap-button{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;box-shadow:var(--bx-shdw);border-width:2px;border-radius:4px;outline:0;margin:0;padding:5px;display:inline-flex}#container{flex-direction:column;width:max-content;display:inline-flex}.basemap-icon{background:var(--svg-legend-bkg);filter:var(--svg-map-filter)}.active-basemap{background-color:var(--bkg-color-grad2)!important}.opacity-slider{flex-direction:row;height:20px;padding:0 5px;display:flex;& img{height:16px;position:relative;top:2px}& input[type=range]{flex-grow:1}}.basemap-container{flex-direction:column;display:flex;& button{color:var(--text-color);background-color:#0000;border:none;flex-direction:row;flex-grow:1;display:flex;& img{height:2rem;margin:.3rem}& span{height:2rem;margin:.3rem;line-height:2rem}}}.basemap-container:hover{background-color:var(--bkg-color-grad1)}.basemaps-with-opacity-separator{border-top:1px solid var(--bkg-color-grad2);height:1px;margin:6px 8px}
+.basemap-button{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;box-shadow:var(--bx-shdw);border-width:2px;border-radius:4px;outline:0;margin:0;padding:5px;display:inline-flex}#container{flex-direction:column;width:max-content;display:inline-flex}.basemap-icon{background:var(--svg-legend-bkg);filter:var(--svg-map-filter)}.active-basemap{background-color:var(--bkg-color-grad2)!important}.opacity-slider{flex-direction:row;height:20px;padding:0 5px;display:flex}.opacity-slider img{height:16px;position:relative;top:2px}.opacity-slider input[type=range]{flex-grow:1}.basemap-container{flex-direction:column;display:flex}.basemap-container button{color:var(--text-color);background-color:#0000;border:none;flex-direction:row;flex-grow:1;display:flex}.basemap-container button img{height:2rem;margin:.3rem}.basemap-container button span{height:2rem;margin:.3rem;line-height:2rem}.basemap-container:hover{background-color:var(--bkg-color-grad1)}.basemaps-with-opacity-separator{border-top:1px solid var(--bkg-color-grad2);height:1px;margin:6px 8px}
 </style>
 <girafe-menu-button direction="up-right" id="basemap-menu-button"><button slot="menu-button" class="basemap-button" tip="Select basemap"><img class="basemap-icon" alt="menu-icon" src="images/button_basemaps.webp"></button><div slot="menu-content" id="container">${Object.values(this.state.basemaps).filter(basemap => basemap.opacity == -1).map(basemap => uHtmlFor(basemap, basemap.id) `<div class="${this.determineClassnames(basemap)}"><button onclick="${() => this.changeBasemap(basemap)}"><img class="basemap-icon" alt="basemap-icon" src="${basemap.thumbnail}"> <span i18n="${basemap.name}">${basemap.name}</span></button></div>`)}<div class="basemaps-with-opacity-separator"></div>${Object.values(this.state.basemaps).filter(basemap => basemap.opacity != -1).map(basemap => uHtmlFor(basemap, basemap.id) `<div class="${this.determineClassnames(basemap)}"><button onclick="${() => this.changeBasemap(basemap)}"><img class="basemap-icon" alt="basemap-icon" src="${basemap.thumbnail}"> <span i18n="${basemap.name}">${basemap.name}</span></button><div class="opacity-slider"><img alt="Control opacity" src="icons/opacity.svg"> <input type="range" min="0" max="1" step="0.01" class="slider" value="${basemap.opacity}" onkeydown="${(e) => { e.preventDefault(); e.stopPropagation(); }}" onclick="${(e) => { e.preventDefault(); e.stopPropagation(); }}" onchange="${(e) => this.changeBasemapOpacity(basemap, e)}"></div></div>`)}</div></girafe-menu-button>`;
     };

package/components/displayselectorbutton-mobile/component.js

@@ -29,6 +29,6 @@ export default class DisplaySelectorButtonMobile extends GirafeHTMLElement {
             return;
         }
         this.state.interface.swipeupPanelContent = 'selector';
-        this.state.interface.swipeupPanelMode = 'full';
+        this.state.interface.swipeupPanelMode = 'half';
     }
 }

package/components/drawing-container-mobile/component.js

@@ -5,7 +5,7 @@ export default class DrawingContainerMobile extends GirafeHTMLElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-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;border-bottom:1px solid gray;justify-content:left;align-items:end;gap:1rem;height:2rem;margin:.5rem auto 1rem;display:flex}.gg-tab{cursor:pointer;color:var(--text-color);background:0 0;border:none;padding:.5rem}.gg-tab.active{border-bottom:solid 2px var(--text-color-grad2);font-weight:600}.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>
-.hidden{display:none}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
+.hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
 .drawing-title{color:#3f68a7;text-transform:uppercase;text-align:center;margin:.5em 0;font-size:1.8em;font-weight:600}
 </style>

package/components/main.d.ts

@@ -3,9 +3,6 @@ export { default as AlignNorthButtonMobile } from './alignnorthbutton-mobile/com
 export { default as OauthComponent } from './auth/component';
 export { default as MobileOauthComponent } from './auth-mobile/component';
 export { default as BasemapComponent } from './basemap/component';
-export { default as BasemapListMobile } from './basemaplist-mobile/basemaplist/component';
-export { default as BasemapListItemMobile } from './basemaplist-mobile/basemaplistitem/component';
-export { default as BasemapThemeLayerSelectorMobile } from './basemapthemelayerselector-mobile/component';
 export { default as ContactComponent } from './contact/component';
 export { default as MapCustomContextMenuComponent } from './context-menu/custom-context-menu/component';
 export { default as MapDefaultContextMenuComponent } from './context-menu/default-context-menu/component';
@@ -23,8 +20,6 @@ export { default as GeolocationMobile } from './geolocation-mobile/component';
 export { default as HelpComponent } from './help/component';
 export { default as InfoboxComponent } from './infobox/component';
 export { default as InfoWindowComponent } from './infowindow/component';
-export { default as LayerListMobile } from './layerlist-mobile/layerlist/component';
-export { default as LayerListItemMobile } from './layerlist-mobile/layerlistitem/component';
 export { default as LayoutComponent } from './layout/component';
 export { default as LRPanelComponent } from './lr-panel/component';
 export { default as MapComponent } from './map/component';
@@ -44,9 +39,12 @@ export { default as SelectionPanelMobile } from './selectionpanel-mobile/compone
 export { default as SelectionWindowComponent } from './selectionwindow/component';
 export { default as ShareComponent } from './share/component';
 export { default as SwipeUpPanelMobile } from './swipe-up-panel-mobile/component';
-export { default as ThemeListMobile } from './themelist-mobile/themelist/component';
-export { default as ThemeListItemMobile } from './themelist-mobile/themelistitem/component';
 export { default as ThemeComponent } from './themes/component';
+export { default as MobileGroupElementComponent } from './themes-mobile/group/component';
+export { default as MobileLayerElementComponent } from './themes-mobile/layer/component';
+export { default as MobileSelectedLayerElementComponent } from './themes-mobile/layer-selected/component';
+export { default as MobileThemeElementComponent } from './themes-mobile/theme/component';
+export { default as MobileThemeComponent } from './themes-mobile/themes-select/component';
 export { default as TimeRestrictionComponent } from './timerestriction/component';
 export { default as TimePickerComponent } from './timerestriction/timepicker/component';
 export { default as TimeSliderComponent } from './timerestriction/timeslider/component';

package/components/main.js

@@ -3,9 +3,6 @@ export { default as AlignNorthButtonMobile } from './alignnorthbutton-mobile/com
 export { default as OauthComponent } from './auth/component';
 export { default as MobileOauthComponent } from './auth-mobile/component';
 export { default as BasemapComponent } from './basemap/component';
-export { default as BasemapListMobile } from './basemaplist-mobile/basemaplist/component';
-export { default as BasemapListItemMobile } from './basemaplist-mobile/basemaplistitem/component';
-export { default as BasemapThemeLayerSelectorMobile } from './basemapthemelayerselector-mobile/component';
 export { default as ContactComponent } from './contact/component';
 export { default as MapCustomContextMenuComponent } from './context-menu/custom-context-menu/component';
 export { default as MapDefaultContextMenuComponent } from './context-menu/default-context-menu/component';
@@ -23,8 +20,6 @@ export { default as GeolocationMobile } from './geolocation-mobile/component';
 export { default as HelpComponent } from './help/component';
 export { default as InfoboxComponent } from './infobox/component';
 export { default as InfoWindowComponent } from './infowindow/component';
-export { default as LayerListMobile } from './layerlist-mobile/layerlist/component';
-export { default as LayerListItemMobile } from './layerlist-mobile/layerlistitem/component';
 export { default as LayoutComponent } from './layout/component';
 export { default as LRPanelComponent } from './lr-panel/component';
 export { default as MapComponent } from './map/component';
@@ -44,9 +39,12 @@ export { default as SelectionPanelMobile } from './selectionpanel-mobile/compone
 export { default as SelectionWindowComponent } from './selectionwindow/component';
 export { default as ShareComponent } from './share/component';
 export { default as SwipeUpPanelMobile } from './swipe-up-panel-mobile/component';
-export { default as ThemeListMobile } from './themelist-mobile/themelist/component';
-export { default as ThemeListItemMobile } from './themelist-mobile/themelistitem/component';
 export { default as ThemeComponent } from './themes/component';
+export { default as MobileGroupElementComponent } from './themes-mobile/group/component';
+export { default as MobileLayerElementComponent } from './themes-mobile/layer/component';
+export { default as MobileSelectedLayerElementComponent } from './themes-mobile/layer-selected/component';
+export { default as MobileThemeElementComponent } from './themes-mobile/theme/component';
+export { default as MobileThemeComponent } from './themes-mobile/themes-select/component';
 export { default as TimeRestrictionComponent } from './timerestriction/component';
 export { default as TimePickerComponent } from './timerestriction/timepicker/component';
 export { default as TimeSliderComponent } from './timerestriction/timeslider/component';

package/components/menu-mobile/component.js

@@ -5,7 +5,7 @@ export default class MenuMobile extends GirafeHTMLElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-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;border-bottom:1px solid gray;justify-content:left;align-items:end;gap:1rem;height:2rem;margin:.5rem auto 1rem;display:flex}.gg-tab{cursor:pointer;color:var(--text-color);background:0 0;border:none;padding:.5rem}.gg-tab.active{border-bottom:solid 2px var(--text-color-grad2);font-weight:600}.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>
-.hidden{display:none}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
+.hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
 .menu-title{color:#3f68a7;text-transform:uppercase;text-align:center;margin:.5em 0;font-size:1.8em;font-weight:600}.menu-item-container{box-sizing:border-box;user-select:none;margin-bottom:max(env(safe-area-inset-bottom),20px);grid-template-columns:repeat(2,1fr);gap:20px;padding:0 25px;display:grid}.menu-item{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.menu-item:active{background-color:#c6ceda}.menu-item-image-container{flex:1;justify-content:center;align-items:center;padding-bottom:1em;display:flex}.menu-item-image-container>img{opacity:.7;width:25%}.menu-item-title-container{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
 </style>

package/components/print/tools/MFPEncoder.spec.js

@@ -62,10 +62,12 @@ describe('MFPEncoder', () => {
             const baseMap = createTestLayerWmts();
             baseMap._olayer = createOlWmtsLayer();
             baseMap.name = 'basemap-below';
-            const activeBasemaps = (context.stateManager.state.activeBasemaps = [new Basemap({
+            const activeBasemaps = (context.stateManager.state.activeBasemaps = [
+                new Basemap({
                     id: 1,
                     name: 'test'
-                })]);
+                })
+            ]);
             activeBasemaps[0].layersList = [baseMap];
             const vectorLayer = createOlVectorLayer();
             vectorLayer.set('addToPrintedLayers', true);

package/components/search-mobile/component.js

@@ -3,7 +3,7 @@ import SearchComponent from '../search/component';
 class MobileSearchComponent extends SearchComponent {
     template = () => {
         return uHtml `<style>
-*{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-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;border-bottom:1px solid gray;justify-content:left;align-items:end;gap:1rem;height:2rem;margin:.5rem auto 1rem;display:flex}.gg-tab{cursor:pointer;color:var(--text-color);background:0 0;border:none;padding:.5rem}.gg-tab.active{border-bottom:solid 2px var(--text-color-grad2);font-weight:600}.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}
+.hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
 .hidden{display:none}#searchbox{background-color:var(--bkg-color);z-index:101;border:none;border-radius:4px;flex-direction:row;width:100%;display:flex;position:absolute;box-shadow:0 0 10px 1px #0003}#search{z-index:2;-webkit-appearance:none;width:100%;color:var(--text-color);background:0 0;border:0;outline:none;-webkit-flex:auto;-ms-flex:auto;flex:auto;margin:0 0 0 .5rem;padding-left:.8rem;font-size:1.8em;line-height:1.8em}#search::placeholder{color:inherit;opacity:.4}#search:focus::placeholder{opacity:0;color:#0000;transition:opacity .3s}.search-icon,.close-icon,.select-color-icon{width:17px;color:var(--text-color);opacity:.7;padding:0 1rem}.close-button,.select-color-button{cursor:pointer;background-color:#0000;border:none;padding:0}#results{z-index:100;background-color:var(--bkg-color);scrollbar-width:thin;padding-top:7vh;position:fixed;inset:0;overflow-x:hidden}.result,.title{width:34rem;padding:.3rem 1rem;line-height:1.3rem;display:inline-block}.title{color:var(--text-color);padding-top:1.5rem;font-size:1.3rem;font-weight:600;line-height:2.5rem}.result{cursor:pointer;text-align:left;width:100%;color:var(--text-color);background:0 0;border:none;border-top:1px solid #ccc}.title img{width:14px;margin-right:1rem}.title span{text-transform:uppercase}.result.selected{color:var(--text-color);background-color:#aaa!important}#no-result{background:var(--warning-color);opacity:.75;visibility:hidden;pointer-events:none;border-radius:6px;width:fit-content;margin:auto;padding:.5rem 0;font-size:1rem;position:absolute;top:3rem;left:0;right:0}#no-result>span{padding:1.3rem}@keyframes fadeOut{0%{opacity:1}80%{opacity:1}to{opacity:0}}.shown-then-fadeout{animation:2s ease-in-out forwards fadeOut;visibility:visible!important}
 </style>

package/components/swipe-up-panel-mobile/component.js

@@ -13,9 +13,9 @@ export default class SwipeUpPanelMobile extends GirafeHTMLElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-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;border-bottom:1px solid gray;justify-content:left;align-items:end;gap:1rem;height:2rem;margin:.5rem auto 1rem;display:flex}.gg-tab{cursor:pointer;color:var(--text-color);background:0 0;border:none;padding:.5rem}.gg-tab.active{border-bottom:solid 2px var(--text-color-grad2);font-weight:600}.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>
-#swipe-up-panel{z-index:20;backdrop-filter:blur(5px);border-top-left-radius:35px;border-top-right-radius:35px;height:100dvh;position:absolute;overflow:hidden;box-shadow:0 0 38px -14px #010341b5}@media (orientation:portrait){#swipe-up-panel{width:100vw}}@media (orientation:landscape){#swipe-up-panel{width:max(min(calc(50vw - env(safe-area-inset-left) - 1.5rem),550px),440px);left:calc(env(safe-area-inset-left) + 1rem)}}.top-container{z-index:2;background:inherit;backdrop-filter:blur(5px);width:100%;height:35px;position:relative}.middle-container{width:100%;margin-top:-35px;padding-top:35px;overflow:scroll}.handle-container{touch-action:none;width:100%;height:100%;position:relative}.handle{background-color:#7779;border-radius:10px;width:20%;height:5px;margin:auto;position:absolute;inset:0}.close-button{opacity:.4;width:40px;margin:auto 1.5em auto auto;position:absolute;top:3px;bottom:0;right:0}.easeTransition{transition:all .3s}.upsideDown{transform:rotate(180deg)}.hidden{visibility:none}.dark-mode{background-color:#000b}.dark-mode .close-button{filter:invert();opacity:.4}.light-mode{background-color:#fffb}
+#swipe-up-panel{z-index:20;backdrop-filter:blur(5px);background:var(--bkg-color);border-top-left-radius:1rem;border-top-right-radius:1rem;height:100dvh;position:absolute;overflow:hidden}@media (orientation:portrait){#swipe-up-panel{width:100vw}}@media (orientation:landscape){#swipe-up-panel{width:max(min(calc(50vw - env(safe-area-inset-left) - 1.5rem),550px),440px);left:calc(env(safe-area-inset-left) + 1rem)}}.top-container{z-index:2;background:inherit;backdrop-filter:blur(5px);width:100%;height:35px;position:relative}.middle-container{width:calc(100% - 2rem);margin-top:-35px;padding-top:35px;padding-left:1rem;padding-right:1rem;overflow:scroll}.handle-container{touch-action:none;width:100%;height:100%;position:relative}.handle{background-color:#7779;border-radius:10px;width:3rem;height:4px;margin:auto;position:absolute;inset:0}.close-button{opacity:.6;position:absolute;top:.3rem;right:1rem}.easeTransition{transition:all .3s}.upsideDown{transform:rotate(180deg)}.hidden{visibility:none}.dark-mode{background-color:#000b}.dark-mode .close-button{filter:invert();opacity:.4}.light-mode{background-color:#fffb}
 </style>
-<div id="swipe-up-panel" class="hidden"><div class="top-container"><div class="handle-container" onpointerdown="${(e) => this.swipeHandleOnPointerDown(e)}" onpointerup="${() => this.swipeHandleOnPointerUp()}" onpointermove="${(e) => this.swipeHandleOnPointerMove(e)}"><div class="handle"></div></div><img class="close-button" alt="close swipe up panel" src="icons/sort-down-black.svg" onpointerdown="${() => this.closeButtonOnPointerDown()}"></div><div class="middle-container"><slot name="main"></slot></div></div>`;
+<div id="swipe-up-panel" class="hidden"><div class="top-container"><div class="handle-container" onpointerdown="${(e) => this.swipeHandleOnPointerDown(e)}" onpointerup="${() => this.swipeHandleOnPointerUp()}" onpointermove="${(e) => this.swipeHandleOnPointerMove(e)}"><div class="handle"></div></div><img class="close-button" alt="close swipe up panel" src="icons/close.svg" onpointerdown="${() => this.closeButtonOnPointerDown()}"></div><div class="middle-container"><slot name="main"></slot></div></div>`;
     };
     container;
     middleContainer;

package/components/themes-mobile/group/component.d.ts

@@ -0,0 +1,18 @@
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
+import BaseLayer from '../../../models/layers/baselayer';
+import GroupLayer from '../../../models/layers/grouplayer';
+declare class MobileGroupElementComponent extends GirafeHTMLElement {
+    template: () => import("uhtml").Hole;
+    group?: GroupLayer;
+    /**
+     * Contains all childs recursively flattend for a better view in mobile
+     */
+    childLayers: BaseLayer[];
+    static readonly observedAttributes: string[];
+    constructor();
+    render(): void;
+    private refreshGroup;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+export default MobileGroupElementComponent;

package/components/themes-mobile/group/component.js

@@ -0,0 +1,51 @@
+import { htmlFor as uHtmlFor } from 'uhtml/keyed';
+import { html as uHtml } from 'uhtml';
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
+import GroupLayer from '../../../models/layers/grouplayer';
+import ThemeLayer from '../../../models/layers/themelayer';
+class MobileGroupElementComponent extends GirafeHTMLElement {
+    template = () => {
+        return uHtml `<style>
+.hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
+</style><style>
+h3{text-align:center;font-variant:small-caps;background-color:var(--text-color);color:var(--bkg-color);padding:1rem;font-size:1rem}
+</style>
+<h3 i18n="${this.group?.name}">${this.group?.name}</h3><div class="children">${(this.childLayers ?? []).map(layer => uHtmlFor(layer, layer.treeItemId) `<girafe-layer layerid="${layer.treeItemId}"></girafe-layer>`)}</div>`;
+    };
+    group;
+    /**
+     * Contains all childs recursively flattend for a better view in mobile
+     */
+    childLayers = [];
+    static observedAttributes = [];
+    constructor() {
+        super('group-mobile');
+    }
+    render() {
+        super.render();
+        this.refreshGroup();
+    }
+    refreshGroup() {
+        const groupId = this.getAttribute('groupid');
+        if (groupId) {
+            this.group = this.context.layerManager.getTreeItem(groupId);
+            if (this.group) {
+                this.childLayers = this.context.layerManager.getFlattenedLayerTree(this.group.children).filter((l) => {
+                    return !(l instanceof ThemeLayer || l instanceof GroupLayer);
+                });
+            }
+        }
+        super.refreshRender();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        MobileGroupElementComponent.observedAttributes.push('groupid');
+        this.render();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'groupid') {
+            this.refreshGroup();
+        }
+    }
+}
+export default MobileGroupElementComponent;

package/components/themes-mobile/layer/component.d.ts

@@ -0,0 +1,15 @@
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
+import Layer from '../../../models/layers/layer';
+declare class MobileLayerElementComponent extends GirafeHTMLElement {
+    template: () => import("uhtml").Hole;
+    protected layer?: Layer;
+    static readonly observedAttributes: string[];
+    constructor(name?: string);
+    registerEvents(): void;
+    render(): void;
+    toggle(): void;
+    private refreshGroup;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+export default MobileLayerElementComponent;

package/components/themes-mobile/layer/component.js

@@ -0,0 +1,52 @@
+import { html as uHtml } from 'uhtml';
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
+class MobileLayerElementComponent extends GirafeHTMLElement {
+    template = () => {
+        return uHtml `<style>
+.hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
+</style><style>
+.container{border-bottom:1px solid #ddd;align-items:center;height:3rem;display:flex}
+</style>
+<div class="container"><button class="${this.layer?.active ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small'}" tip="Activate / Deactivate" onclick="${() => this.toggle()}"><img class="${this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-full.svg"> <img class="${!this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-no.svg"></button><div class="label-container"><button class="${this.layer?.active ? 'gg-button gg-small gg-selected' : 'gg-button gg-small'}" onclick="${() => this.toggle()}"><span i18n="${this.layer?.name}" class="gg-tree-label">${this.layer?.name}</span></button></div></div>`;
+    };
+    layer;
+    static observedAttributes = [];
+    constructor(name) {
+        super(name ?? 'layer-mobile');
+    }
+    registerEvents() {
+        this.subscribe(/layers\.layersList\..*\.activeState/, (_oldValue, _newValue, layer) => {
+            if (this.layer === layer) {
+                super.refreshRender();
+            }
+        });
+    }
+    render() {
+        super.render();
+        this.refreshGroup();
+    }
+    toggle() {
+        if (this.layer) {
+            this.context.layerManager.toggleLayer(this.layer);
+        }
+    }
+    refreshGroup() {
+        const layerid = this.getAttribute('layerid');
+        if (layerid) {
+            this.layer = this.context.layerManager.getTreeItem(layerid);
+        }
+        super.refreshRender();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        MobileLayerElementComponent.observedAttributes.push('layerid');
+        this.registerEvents();
+        this.render();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'layerid') {
+            this.refreshGroup();
+        }
+    }
+}
+export default MobileLayerElementComponent;

package/components/themes-mobile/layer-selected/component.d.ts

@@ -0,0 +1,18 @@
+import WmsLegendHelper from '../../../tools/wms/wmslegendhelper';
+import MobileLayerElementComponent from '../layer/component';
+declare class MobileSelectedLayerElementComponent extends MobileLayerElementComponent {
+    template: () => import("uhtml").Hole;
+    iconUrl: string | null;
+    legendUrls: Record<string, string>;
+    /**
+     * At the moment only 1 legend URL is supported on mobile
+     * TODO REG : Manage multiple legend URLs for the same layer
+     */
+    get firstLegendUrl(): string | undefined;
+    wmsLegendHelper: WmsLegendHelper;
+    constructor();
+    protected getCrossOrigin(url: string | null): "anonymous" | "use-credentials";
+    render(): void;
+    connectedCallback(): void;
+}
+export default MobileSelectedLayerElementComponent;

package/components/themes-mobile/layer-selected/component.js

@@ -0,0 +1,51 @@
+import { html as uHtml } from 'uhtml';
+import LayerWms from '../../../models/layers/layerwms';
+import WmsLegendHelper from '../../../tools/wms/wmslegendhelper';
+import MobileLayerElementComponent from '../layer/component';
+class MobileSelectedLayerElementComponent extends MobileLayerElementComponent {
+    template = () => {
+        return uHtml `<style>
+.hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
+</style><style>
+.container{border-bottom:1px solid #ddd;flex-direction:column;padding-top:.5rem;padding-bottom:.5rem;display:flex}header{align-items:center;display:flex}section.options{align-items:center;gap:1rem;width:100%;margin-bottom:.5rem;display:flex}.slider{flex-grow:1}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}
+</style>
+<div class="container"><header><button class="${this.layer?.active ? 'gg-icon-button gg-small gg-selected' : 'gg-icon-button gg-small'}" tip="Activate / Deactivate" onclick="${() => this.toggle()}"><img class="${this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-full.svg"> <img class="${!this.layer?.active ? 'gg-checkbox' : 'hidden'}" alt="Expand/Collapse button" src="icons/checked-no.svg"></button><div class="label-container"><button class="${this.layer?.active ? 'gg-button gg-small gg-selected' : 'gg-button gg-small'}" onclick="${() => this.toggle()}"><span i18n="${this.layer?.name}" class="gg-tree-label">${this.layer?.name}</span></button></div><img class="${this.layer?.active && this.iconUrl ? 'legend-icon' : 'hidden'}" alt="${'Icon for ' + this.layer?.name}" src="${this.iconUrl}" crossorigin="${this.getCrossOrigin(this.iconUrl)}"></header><section class="options"><input type="range" class="slider" min="0" max="20" value="${((this.layer?.opacity ?? 1) * 20).toString()}" oninput="${(event) => this.layer.opacity = parseInt(event.target.value) / 20}"> <a href="${this.layer?.metadataUrl}" target="_blank" class="${this.layer?.hasMetadata ? 'tool' : 'hidden'}"><img alt="Metadata" src="icons/info.svg"> </a><a href="#" onclick="${() => this.layer.swiped = (this.layer?.swiped === 'left') ? 'no' : 'left'}"><img alt="Swipe layer to the left" src="icons/swipe-left.svg"> </a><a href="#" onclick="${() => this.layer.swiped = (this.layer?.swiped === 'right') ? 'no' : 'right'}"><img alt="Swipe layer to the right" src="icons/swipe-right.svg"> </a><a href="${this.firstLegendUrl ?? '#'}" target="_blank" class="${this.firstLegendUrl ? 'tool' : 'hidden'}"><img alt="Metadata" src="icons/legend.svg"></a></section></div>`;
+    };
+    iconUrl = null;
+    legendUrls = {};
+    /**
+     * At the moment only 1 legend URL is supported on mobile
+     * TODO REG : Manage multiple legend URLs for the same layer
+     */
+    get firstLegendUrl() {
+        if (Object.keys(this.legendUrls).length > 0) {
+            return Object.values(this.legendUrls)[0];
+        }
+        return undefined;
+    }
+    wmsLegendHelper;
+    constructor() {
+        super('layer-selected-mobile');
+    }
+    getCrossOrigin(url) {
+        if (!url) {
+            return 'anonymous';
+        }
+        const hostname = new URL(url).hostname;
+        return this.state.oauth.audience.includes(hostname) ? 'use-credentials' : 'anonymous';
+    }
+    render() {
+        if (this.layer instanceof LayerWms) {
+            // Manage Legend icons for WMS
+            this.iconUrl = this.wmsLegendHelper.getIconUrl(this.layer);
+            this.legendUrls = this.wmsLegendHelper.getLegendUrls(this.layer);
+        }
+        super.render();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.wmsLegendHelper = new WmsLegendHelper(this.context);
+        this.render();
+    }
+}
+export default MobileSelectedLayerElementComponent;

package/components/themes-mobile/theme/component.d.ts

@@ -0,0 +1,13 @@
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
+import ThemeLayer from '../../../models/layers/themelayer';
+declare class MobileThemeElementComponent extends GirafeHTMLElement {
+    template: () => import("uhtml").Hole;
+    theme?: ThemeLayer;
+    static get observedAttributes(): string[];
+    constructor();
+    render(): void;
+    private refreshTheme;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+export default MobileThemeElementComponent;

package/components/themes-mobile/theme/component.js

@@ -0,0 +1,46 @@
+import { htmlFor as uHtmlFor } from 'uhtml/keyed';
+import { html as uHtml } from 'uhtml';
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore This import is not used in the typescript file but needed in the HTML Template
+// Cannot use <ts-expect-error> here because after the build-lib, the error disappear
+import GroupLayer from '../../../models/layers/grouplayer'; // NOSONAR
+class MobileThemeElementComponent extends GirafeHTMLElement {
+    template = () => {
+        return uHtml `<style>
+.hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
+</style><style>
+header{align-items:center;gap:1rem;font-size:1.5rem;display:flex}
+</style>
+<header><button onclick="${() => this.state.themes.lastSelectedTheme = null}" class="gg-icon-button gg-small"><img alt="Back button" src="icons/arrow_left.svg"></button> <img alt="Theme icon" src="${this.theme?.icon}"> <span i18n="${this.theme?.name}"></span></header><div class="children">${(this.theme?.children ?? []).map(layer => (layer instanceof GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-group groupid="${layer.treeItemId}"></girafe-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-layer layerid="${layer.treeItemId}"></girafe-layer>`)}</div>`;
+    };
+    theme;
+    static get observedAttributes() {
+        return ['themeid'];
+    }
+    constructor() {
+        super('theme-mobile');
+    }
+    render() {
+        super.render();
+        this.refreshTheme();
+    }
+    refreshTheme() {
+        const themeId = Number(this.getAttribute('themeid'));
+        const theme = this.state.layers.layersList.find((layer) => layer.id === themeId);
+        if (theme) {
+            this.theme = this.context.layerManager.getTreeItem(theme.treeItemId);
+        }
+        super.refreshRender();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'themeid') {
+            this.refreshTheme();
+        }
+    }
+}
+export default MobileThemeElementComponent;

package/components/themes-mobile/themes-select/component.d.ts

@@ -0,0 +1,17 @@
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
+import Basemap from '../../../models/basemaps/basemap';
+import GroupLayer from '../../../models/layers/grouplayer';
+import Layer from '../../../models/layers/layer';
+import ThemeLayer from '../../../models/layers/themelayer';
+export default class MobileThemeComponent extends GirafeHTMLElement {
+    template: () => import("uhtml").Hole;
+    activeTab: 'themes' | 'basemaps' | 'selected';
+    activeLayersByGroup: Map<GroupLayer, Layer[]>;
+    constructor();
+    registerEvents(): void;
+    private setActiveLayersByGroups;
+    changeTab(tab: 'themes' | 'basemaps' | 'selected'): void;
+    changeBasemap(basemap: Basemap): void;
+    changeTheme(theme: ThemeLayer): void;
+    connectedCallback(): void;
+}