@geogirafe/lib-geoportal 1.1.0-dev.2316166507 → 1.1.0-dev.2321641404

package/LICENSE

@@ -237,6 +237,8 @@ From:
 - https://www.svgrepo.com/svg/309943/select-all-off
 - https://www.svgrepo.com/svg/310303/arrow-forward
 - https://www.svgrepo.com/svg/310306/arrow-import
+- https://www.svgrepo.com/svg/310006/star
+- https://www.svgrepo.com/svg/310008/star-add
 
 
 The MIT License (MIT)

package/api/apicontext.d.ts

@@ -30,6 +30,7 @@ import WmsManager from '../tools/wms/wmsmanager.js';
 import IGirafeContext from '../tools/context/icontext.js';
 import ApiSessionManager from './apisessionmanager.js';
 import OnBoardingManager from '../tools/onboarding/onboardingmanager.js';
+import ThemeFavoritesManager from '../tools/themes/themefavoritesmanager.js';
 export default class GirafeApiContext implements IGirafeContext {
     readonly userDataManager: UserDataManager;
     readonly configManager: ConfigManager;
@@ -62,6 +63,7 @@ export default class GirafeApiContext implements IGirafeContext {
     readonly ogcApiFeaturesManager: OgcApiFeaturesManager;
     readonly localFileManager: LocalFileManager;
     readonly onBoardingManager: OnBoardingManager;
+    readonly themeFavoritesManager: ThemeFavoritesManager;
     constructor();
     initialize(): Promise<void>;
 }

package/api/apicontext.js

@@ -29,6 +29,7 @@ import WfsManager from '../tools/wfs/wfsmanager.js';
 import WmsManager from '../tools/wms/wmsmanager.js';
 import ApiSessionManager from './apisessionmanager.js';
 import OnBoardingManager from '../tools/onboarding/onboardingmanager.js';
+import ThemeFavoritesManager from '../tools/themes/themefavoritesmanager.js';
 export default class GirafeApiContext {
     userDataManager;
     configManager;
@@ -61,6 +62,7 @@ export default class GirafeApiContext {
     ogcApiFeaturesManager;
     localFileManager;
     onBoardingManager;
+    themeFavoritesManager;
     constructor() {
         this.componentManager = new ComponentManager(this);
         this.userDataManager = new UserDataManager(this);
@@ -93,6 +95,7 @@ export default class GirafeApiContext {
         this.localFileManager = new LocalFileManager(this);
         this.ogcApiFeaturesManager = new OgcApiFeaturesManager(this);
         this.onBoardingManager = new OnBoardingManager(this);
+        this.themeFavoritesManager = new ThemeFavoritesManager(this);
     }
     async initialize() {
         // NOTE : This initialization order is important, because some singleton will need other ones !
@@ -129,5 +132,6 @@ export default class GirafeApiContext {
         this.localFileManager.initializeSingleton();
         this.ogcApiFeaturesManager.initializeSingleton();
         this.onBoardingManager.initializeSingleton();
+        this.themeFavoritesManager.initializeSingleton();
     }
 }

package/assets/i18n/de.json

@@ -54,7 +54,7 @@
     "Control opacity": "Deckkraft steuern",
     "Copy ShortUrl": "Kurz-URL kopieren",
     "Copy value": "Wert kopieren",
-    "Create custom theme": "Benutzerdefiniertes Thema erstellen",
+    "Create custom theme": "Thema erstellen",
     "cross-section-settings": "Querschnitt",
     "CSV export": "CSV-Export",
     "Current Feature": "Aktuelles Objekt",
@@ -410,10 +410,15 @@
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Der folgende Link wird mit Ihrer Nachricht gesendet. Er enthält Ihre aktuelle Konfiguration und hilft uns, Ihr Problem zu verstehen.",
     "The generated document may contain sensitive data.": "Das generierte Dokument kann sensible Daten enthalten.",
     "The print server is unavailable. Please, try later.": "Der Druckserver ist nicht verfügbar. Bitte versuche es später erneut.",
+    "The theme {name} is already present in the treeview.": "Das Thema {name} ist bereits im Layerbaum vorhanden.",
     "theme": "Standardthema",
     "Theme selection": "Themenauswahl",
     "Themes": "Themen",
     "themes": "themen",
+    "themes-add-remove-favorites": "Zu Favoriten hinzufügen/entfernen",
+    "themes-type-all": "Alle Themen",
+    "themes-type-custom": "Benutzerdefinierte",
+    "themes-type-favorites": "Favoriten",
     "This instance of GeoGirafe cannot be used at the moment.": "Diese Instanz von GeoGirafe kann momentan nicht verwendet werden.",
     "Toggle all legends": "Alle Legenden umschalten",
     "Toggle legend": "Legende umschalten",

package/assets/i18n/en.json

@@ -412,10 +412,15 @@
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.",
     "The generated document may contain sensitive data.": "The generated document may contain sensitive data.",
     "The print server is unavailable. Please, try later.": "The print server is unavailable. Please, try later.",
+    "The theme {name} is already present in the treeview.": "The theme {name} is already present in the treeview.",
     "theme": "Default theme",
     "Theme selection": "Theme selection",
     "Themes": "Themes",
     "themes": "themes",
+    "themes-add-remove-favorites": "Add/Remove to Favorites",
+    "themes-type-all": "All Themes",
+    "themes-type-custom": "Custom Themes",
+    "themes-type-favorites": "Favorite Themes",
     "This instance of GeoGirafe cannot be used at the moment.": "This instance of GeoGirafe cannot be used at the moment.",
     "Toggle all legends": "Toggle all legends",
     "Toggle legend": "Toggle legend",

package/assets/i18n/fr.json

@@ -410,10 +410,15 @@
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Le lien ci-dessous sera envoyé avec votre message. Il contient votre configuration courante et nous aidera à analyser votre demande.",
     "The generated document may contain sensitive data.": "Le document généré peut contenir des données sensibles.",
     "The print server is unavailable. Please, try later.": "Le serveur d'impression est indisponible. Veuillez réessayer plus tard.",
+    "The theme {name} is already present in the treeview.": "Le thème {name} est déjà présent dans l’arbre des couches.",
     "theme": "Thème par défaut",
     "Theme selection": "Sélection du thème",
     "Themes": "Thèmes",
     "themes": "thèmes",
+    "themes-add-remove-favorites": "Ajouter aux favoris / retirer des favoris",
+    "themes-type-all": "Tous les thèmes",
+    "themes-type-custom": "Personnalisés",
+    "themes-type-favorites": "Favoris",
     "This instance of GeoGirafe cannot be used at the moment.": "Cette instance de GeoGirafe ne peut pas être utilisée pour le moment.",
     "Toggle all legends": "Afficher / Masquer toutes les légendes",
     "Toggle legend": "Afficher / Masquer la légende",

package/assets/i18n/it.json

@@ -410,10 +410,15 @@
     "The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.": "Il seguente link verrà inviato con il tuo messaggio. Contiene la tua configurazione attuale e ci aiuterà a capire il problema.",
     "The generated document may contain sensitive data.": "Il documento generato potrebbe contenere dati sensibili.",
     "The print server is unavailable. Please, try later.": "Il server di stampa non è disponibile. Riprova più tardi.",
+    "The theme {name} is already present in the treeview.": "Il tema {name} è già presente nella struttura ad albero.",
     "theme": "Tema predefinito",
     "Theme selection": "Selezione del tema",
     "Themes": "Temi",
     "themes": "temi",
+    "themes-add-remove-favorites": "Aggiungi ai preferiti / rimuovi dai preferiti",
+    "themes-type-all": "Tutti i temi",
+    "themes-type-custom": "Personalizzati",
+    "themes-type-favorites": "Preferiti",
     "This instance of GeoGirafe cannot be used at the moment.": "Questa istanza di GeoGirafe non può essere utilizzata al momento.",
     "Toggle all legends": "Attiva / Disattiva tutte le legende",
     "Toggle legend": "Attiva / Disattiva legenda",

package/assets/icons/adjust-disable.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5f6368" viewBox="0 -960 960 960"><path d="M480-360q50 0 85-35t35-85-35-85-85-35-85 35-35 85 35 85 85 35m0 280q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"/><path d="m67.025-67.033 826.657-826.666" style="fill:none;stroke:#000;stroke-width:53.0651;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"/></svg>

package/assets/icons/favorite-add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 24 24"><title>ic_fluent_star_add_24_regular</title><path fill="#212121" fill-rule="nonzero" d="M17.5 12a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11m-4.827-9.24 2.683 5.448 6.011.869a.75.75 0 0 1 .416 1.279l-1.368 1.333a6.5 6.5 0 0 0-1.583-.552l.815-.793-4.896-.708a.75.75 0 0 1-.566-.41L12 4.787 9.815 9.225a.75.75 0 0 1-.566.411l-4.895.707 3.545 3.45a.75.75 0 0 1 .216.665l-.84 4.873L11 17.37a6.6 6.6 0 0 0 .167 1.607l-4.541 2.392a.75.75 0 0 1-1.09-.79l1.032-5.986-4.352-4.236a.75.75 0 0 1 .416-1.28l6.01-.868 2.684-5.448a.75.75 0 0 1 1.346 0M17.5 14l-.09.007a.5.5 0 0 0-.402.402L17 14.5V17L14.498 17l-.09.008a.5.5 0 0 0-.402.402l-.008.09.008.09a.5.5 0 0 0 .402.402l.09.008H17v2.503l.008.09a.5.5 0 0 0 .402.402l.09.008.09-.008a.5.5 0 0 0 .402-.402l.008-.09V18l2.504.001.09-.008a.5.5 0 0 0 .402-.402l.008-.09-.008-.09a.5.5 0 0 0-.403-.402l-.09-.008H18v-2.5l-.008-.09a.5.5 0 0 0-.402-.403z"/></svg>

package/assets/icons/favorite-no.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 28 28"><title>ic_fluent_star_28_regular</title><path fill="#212121" fill-rule="nonzero" d="M14.437 3.103a1 1 0 0 1 .455.455l2.923 5.924 6.538.95a1 1 0 0 1 .555 1.706l-4.731 4.611 1.116 6.512a1 1 0 0 1-1.45 1.054l-5.848-3.074-5.848 3.074a1 1 0 0 1-1.45-1.054l1.116-6.512-4.731-4.611a1 1 0 0 1 .554-1.706l6.538-.95 2.924-5.924a1 1 0 0 1 1.34-.455m-3.267 7.75-6.316.918 4.57 4.455-1.078 6.29 5.649-2.97 5.649 2.97-1.08-6.29 4.571-4.455-6.316-.918-2.824-5.723z"/></svg>

package/assets/icons/favorite-remove.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="#eab308" viewBox="0 0 24 24"><title>ic_fluent_star_add_24_regular</title><g fill="#212121" fill-rule="nonzero"><path d="M14.437 3.103a1 1 0 0 1 .455.455l2.923 5.924 6.538.95a1 1 0 0 1 .555 1.706l-4.731 4.611c-6.224 4.484-.045.03-6.182 4.492l-5.848 3.074a1 1 0 0 1-1.45-1.054l1.116-6.512-4.731-4.611a1 1 0 0 1 .554-1.706l6.538-.95 2.924-5.924a1 1 0 0 1 1.34-.455" class="UnoptimicedTransforms" style="display:inline;fill:#eab308;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(.82693 0 0 .81171 .481 .565)"/><path d="M17.5 12a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11m-4.827-9.24 2.683 5.448 6.011.869a.75.75 0 0 1 .416 1.279l-1.368 1.333a6.5 6.5 0 0 0-1.583-.552l.815-.793-4.896-.708a.75.75 0 0 1-.566-.41L12 4.787 9.815 9.225a.75.75 0 0 1-.566.411l-4.895.707 3.545 3.45a.75.75 0 0 1 .216.665l-.84 4.873L11 17.37a6.6 6.6 0 0 0 .167 1.607l-4.541 2.392a.75.75 0 0 1-1.09-.79l1.032-5.986-4.352-4.236a.75.75 0 0 1 .416-1.28l6.01-.868 2.684-5.448a.75.75 0 0 1 1.346 0M14.5 17a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1Z" style="display:inline"/></g></svg>

package/assets/icons/favorite-yes.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 28 28"><title>ic_fluent_star_28_regular</title><g fill="#212121" fill-rule="nonzero"><path d="M14.437 3.103a1 1 0 0 1 .455.455l2.923 5.924 6.538.95a1 1 0 0 1 .555 1.706l-4.731 4.611 1.116 6.512a1 1 0 0 1-1.45 1.054l-5.848-3.074-5.848 3.074a1 1 0 0 1-1.45-1.054l1.116-6.512-4.731-4.611a1 1 0 0 1 .554-1.706l6.538-.95 2.924-5.924a1 1 0 0 1 1.34-.455" class="UnoptimicedTransforms" style="display:inline;fill:#eab308;fill-opacity:1;stroke:none;stroke-opacity:1"/><path d="M14.437 3.103a1 1 0 0 1 .455.455l2.923 5.924 6.538.95a1 1 0 0 1 .555 1.706l-4.731 4.611 1.116 6.512a1 1 0 0 1-1.45 1.054l-5.848-3.074-5.848 3.074a1 1 0 0 1-1.45-1.054l1.116-6.512-4.731-4.611a1 1 0 0 1 .554-1.706l6.538-.95 2.924-5.924a1 1 0 0 1 1.34-.455m-3.267 7.75-6.316.918 4.57 4.455-1.078 6.29 5.649-2.97 5.649 2.97-1.08-6.29 4.571-4.455-6.316-.918-2.824-5.723z" class="UnoptimicedTransforms" style="display:inline"/><path d="M14.437 3.103a1 1 0 0 1 .455.455l2.923 5.924 6.538.95a1 1 0 0 1 .555 1.706l-4.731 4.611 1.116 6.512a1 1 0 0 1-1.45 1.054l-5.848-3.074-5.848 3.074a1 1 0 0 1-1.45-1.054l1.116-6.512-4.731-4.611a1 1 0 0 1 .554-1.706l6.538-.95 2.924-5.924a1 1 0 0 1 1.34-.455m-3.267 7.75-6.316.918 4.57 4.455-1.078 6.29 5.649-2.97 5.649 2.97-1.08-6.29 4.571-4.455-6.316-.918-2.824-5.723z"/></g></svg>

package/components/contact/component.js

@@ -7,7 +7,7 @@ class ContactComponent extends GirafeHTMLElement {
 </style><style>
 #content{background:var(--bkg-color);color:var(--text-color);flex-direction:column;margin:0;padding:1rem;display:flex}label,input,select,textarea{flex-grow:1;font-size:.9rem}.gg-input,.gg-select{margin-bottom:1rem}.mail-contact{margin-top:2rem;margin-bottom:2rem}
 </style>
-<div id="panel"><div id="content"><label for="email" i18n="Your email (optional)" class="gg-label">Your email (optional)</label> <input id="email" placeholder="superman@example.com" class="gg-input"> <label for="reason" i18n="Why are you contacting us?" class="gg-label">Why are you contacting us?</label> <select id="reason" class="gg-select"><option value="" disabled="disabled" selected="selected">-</option>${this.context.configManager.Config.contact?.reasons.map((reason) => uHtml `<option i18n="${reason}" value="${reason}">${reason}</option>`)}</select> <label for="message" i18n="Your message" class="gg-label">Your message</label> <textarea id="message" class="gg-input gg-textarea"></textarea> <label for="shortlink" i18n="The following link will be sent with your message. It contains your current configuration and will help us to understand your problem." class="gg-label">The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.</label> <input id="shortlink" disabled="disabled" value="${this.shortUrl}" class="gg-input"><div class="mail-contact"><span i18n="You can also contact us directly by E-Mail at">You can also contact us directly by E-Mail at</span> <a href="${'mailto:' + this.context.configManager.Config.contact?.email}">${this.context.configManager.Config.contact?.email}</a></div><button class="gg-button" tip="Send message" i18n="Send" onclick="${() => this.sendMessage()}">Send</button></div></div>`;
+<div id="panel"><div id="content"><label for="email" i18n="Your email (optional)" class="gg-label">Your email (optional)</label> <input id="email" placeholder="you@example.com" class="gg-input"> <label for="reason" i18n="Why are you contacting us?" class="gg-label">Why are you contacting us?</label> <select id="reason" class="gg-select"><option value="" disabled="disabled" selected="selected">-</option>${this.context.configManager.Config.contact?.reasons.map((reason) => uHtml `<option i18n="${reason}" value="${reason}">${reason}</option>`)}</select> <label for="message" i18n="Your message" class="gg-label">Your message</label> <textarea id="message" class="gg-input gg-textarea"></textarea> <label for="shortlink" i18n="The following link will be sent with your message. It contains your current configuration and will help us to understand your problem." class="gg-label">The following link will be sent with your message. It contains your current configuration and will help us to understand your problem.</label> <input id="shortlink" disabled="disabled" value="${this.shortUrl}" class="gg-input"><div class="mail-contact"><span i18n="You can also contact us directly by E-Mail at">You can also contact us directly by E-Mail at</span> <a href="${'mailto:' + this.context.configManager.Config.contact?.email}">${this.context.configManager.Config.contact?.email}</a></div><button class="gg-button" tip="Send message" i18n="Send" onclick="${() => this.sendMessage()}">Send</button></div></div>`;
     };
     isPanelVisible = false;
     panelTitle = 'contact-panel';

package/components/map/component.d.ts

@@ -74,6 +74,7 @@ export default class MapComponent extends GirafeHTMLElement {
     registerEvents(): void;
     locateUser(): void;
     getCurrentLocation(): void;
+    disableLocateUser: () => void;
     readonly updateGeolocation: (position: GeolocationPosition) => void;
     render(): void;
     listenOpenLayersEvents(): void;

package/components/map/component.js

@@ -46,9 +46,9 @@ export default class MapComponent 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-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style><style>
-#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.ol-rotate-reset{cursor:pointer;background-color:#fff;width:2rem!important;height:2rem!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}.ol-popup{background-color:var(--bkg-color);color:var(--text-color);box-shadow:0 1px 4px var(--bx-shdw);border:1px solid var(--text-color-grad1);border-radius:10px;min-width:140px;padding:15px;position:absolute;bottom:12px;left:-50px}.ol-popup:after,.ol-popup:before{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:100%}.ol-popup:after{border-top-color:var(--bkg-color);border-width:10px;margin-left:-10px;left:48px}.ol-popup:before{border-top-color:var(--text-color-grad1);border-width:11px;margin-left:-11px;left:48px}.ol-popup-closer{background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;text-decoration:none;position:absolute;top:2px;right:8px}.ol-popup-closer:after{content:"✖"}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1*var(--button-size)/2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
+#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location,.img-disable-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.ol-rotate-reset{cursor:pointer;background-color:#fff;width:2rem!important;height:2rem!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}.ol-popup{background-color:var(--bkg-color);color:var(--text-color);box-shadow:0 1px 4px var(--bx-shdw);border:1px solid var(--text-color-grad1);border-radius:10px;min-width:140px;padding:15px;position:absolute;bottom:12px;left:-50px}.ol-popup:after,.ol-popup:before{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:100%}.ol-popup:after{border-top-color:var(--bkg-color);border-width:10px;margin-left:-10px;left:48px}.ol-popup:before{border-top-color:var(--text-color-grad1);border-width:11px;margin-left:-11px;left:48px}.ol-popup-closer{background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;text-decoration:none;position:absolute;top:2px;right:8px}.ol-popup-closer:after{content:"✖"}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1*var(--button-size)/2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
 </style>
-<link rel="stylesheet" href="lib/ol/ol.css"><div id="container"><div id="ol-map"></div><div class="ol-location ol-unselectable ol-control"><button onclick="${() => this.locateUser()}" class="btn-location"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>`;
+<link rel="stylesheet" href="lib/ol/ol.css"><div id="container"><div id="ol-map"></div><div class="ol-location ol-unselectable ol-control"><button onclick="${() => this.locateUser()}" class="btn-location"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>`;
     };
     olMap;
     mapTarget;
@@ -169,6 +169,7 @@ export default class MapComponent extends GirafeHTMLElement {
             // The user's current position is utilized to show the distance to objects in the layer
             navigator.permissions.query({ name: 'geolocation' }).then((result) => {
                 if (result.state === 'granted' || result.state === 'prompt') {
+                    this.shadow.getElementById('disable-location')?.classList.remove('hidden');
                     this.getCurrentLocation();
                 }
             });
@@ -199,6 +200,10 @@ export default class MapComponent extends GirafeHTMLElement {
             maximumAge: 0
         });
     }
+    disableLocateUser = () => {
+        this.geolocationSource.clear();
+        this.shadow.getElementById('disable-location')?.classList.add('hidden');
+    };
     updateGeolocation = (position) => {
         const coords = position.coords;
         const longitude = coords.longitude;

package/components/search/component.d.ts

@@ -6,7 +6,7 @@ declare class SearchComponent extends GirafeHTMLElement {
     paintbrushIcon: string;
     private get map();
     private readonly previewFeaturesCollection;
-    private previewLayers;
+    private previewLayers?;
     private previewGeoLayer;
     private maxExtent?;
     private readonly geoJsonFormatter;

package/components/search/component.js

@@ -30,7 +30,7 @@ class SearchComponent extends GirafeHTMLElement {
         return this.context.mapManager.getMap();
     }
     previewFeaturesCollection = new Collection();
-    previewLayers = [];
+    previewLayers;
     previewGeoLayer = null;
     maxExtent;
     geoJsonFormatter = new GeoJSON();
@@ -321,14 +321,19 @@ class SearchComponent extends GirafeHTMLElement {
         // Clear preview search result
         this.previewFeaturesCollection.clear();
         // Clear preview layer
-        this.context.themesHelper.removeLayersFromLayerTree(this.previewLayers);
-        this.previewLayers = [];
+        if (this.previewLayers) {
+            this.context.themesHelper.removeLayersFromLayerTree(this.previewLayers.insertedLayers);
+            for (const layer of this.previewLayers.activatedLayers) {
+                this.context.layerManager.toggle(layer, 'off');
+            }
+            this.previewLayers = undefined;
+        }
     }
     onSelect(feature) {
         this.selectedResult = feature;
         this.ignoreBlur = false;
         this.forceHide = true;
-        this.previewLayers = [];
+        this.previewLayers = undefined;
         super.render();
         const geom = feature.getGeometry();
         if (geom) {

package/components/themes/component.d.ts

@@ -1,22 +1,34 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import ThemeLayer from '../../models/layers/themelayer.js';
-import Theme from '../../models/theme.js';
 import CustomTheme from '../../models/customtheme.js';
+declare const ThemeTypes: readonly ["all", "favorites", "custom"];
+type ThemeType = (typeof ThemeTypes)[number];
 declare class ThemeComponent extends GirafeHTMLElement {
     template: () => import("uhtml").Hole;
     newIcon: string;
     menuOpen: boolean;
     openedOnce: boolean;
+    activeThemeType: ThemeType;
+    clickOutsideContainer: HTMLElement | null;
     get customThemes(): CustomTheme[];
+    get allThemes(): Record<number, ThemeLayer>;
+    get favoriteThemes(): (ThemeLayer | CustomTheme)[];
+    get activeThemes(): Record<number, ThemeLayer> | (ThemeLayer | CustomTheme)[];
     constructor();
     registerEvents(): void;
+    protected render(): void;
     onBlur(): void;
     toggleThemesList(): void;
-    onThemeChanged(theme: ThemeLayer): void;
-    isThemeActive(theme: Theme): boolean;
+    activateThemeType(themeType: ThemeType): void;
+    onThemeChanged(theme: ThemeLayer | CustomTheme): void;
+    isThemeActive(theme: ThemeLayer | CustomTheme): boolean;
+    isThemeFavorite(theme: ThemeLayer | CustomTheme): boolean;
+    onThemeFavoriteChanged(theme: ThemeLayer | CustomTheme, e: Event): void;
+    isThemeTypeActive(themeType: ThemeType): boolean;
+    isCustomTheme(theme: ThemeLayer | CustomTheme): theme is CustomTheme;
     onCustomThemeChanged(customTheme: CustomTheme): void;
     onAddCustomTheme(): Promise<void>;
-    onDeleteCustomTheme(themelayer: CustomTheme, e: Event): Promise<void>;
+    onDeleteCustomTheme(customTheme: CustomTheme, e: Event): Promise<void>;
     protected connectedCallback(): void;
 }
 export default ThemeComponent;

package/components/themes/component.js

@@ -1,45 +1,86 @@
 import { htmlFor as uHtmlFor } from 'uhtml/keyed';
 import { html as uHtml } from 'uhtml';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import ThemeLayer from '../../models/layers/themelayer.js';
 import NewIcon from './images/new.svg';
+import CustomTheme from '../../models/customtheme.js';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ThemeTypes = ['all', 'favorites', 'custom'];
 class ThemeComponent extends GirafeHTMLElement {
     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-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style><style>
-.themes{background-color:var(--bkg-color);border:1px solid #444;border-radius:3px;flex-wrap:wrap;width:55rem;max-height:70vh;margin-top:0;padding:1rem;display:flex;position:absolute;overflow-y:auto}.theme,.custom-theme,.new-theme{cursor:pointer;background-color:#0000;border:none;border-radius:.5rem;align-content:flex-end;width:8rem;margin:.5rem;padding:0;position:relative}.themes>button>span,.custom-theme>button>span,.new-theme>button>span{text-align:center;width:95%;color:var(--text-color);display:inline-block}.themes>button>span,.custom-theme>button>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.theme>img,.custom-theme>button>img,.new-theme>img{max-width:100%}button.select{cursor:pointer;background-color:#0000;border:none;width:100%;padding:0}button.select>img{height:3rem;margin-bottom:1rem}button.delete{position:absolute;top:0;right:0}.theme.selected,.custom-theme.selected{background-color:var(--bkg-color-grad2)}.theme-icon{--svg-filter:none}
+.themes{background-color:var(--bkg-color);border:1px solid #444;border-radius:3px;flex-flow:column;width:58rem;max-height:70vh;margin-top:0;padding:1rem;display:flex;position:absolute;overflow-y:auto}#close-themes-menu{z-index:-1;background:0 0;width:100vw;height:100vh;display:none;position:absolute;top:0;left:0}#active-themes{flex-flow:wrap;flex:1;justify-content:flex-start;display:flex}.theme-card{border:var(--app-standard-border);background-color:#0000;border-radius:6px;flex-direction:column;align-items:center;width:7rem;height:9rem;margin:.25rem;padding:.25rem;display:flex;&:hover{cursor:pointer;background-color:var(--bkg-color-grad2)}& img.theme-favorite{content:url(icons/favorite-no.svg);align-self:flex-start;width:1.5rem;height:1.5rem;&:hover{content:url(icons/favorite-add.svg)}&.yes{content:url(icons/favorite-yes.svg);&:hover{content:url(icons/favorite-remove.svg)}}&.placeholder{content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=)}}& img.delete-icon{content:url(icons/close.svg);align-self:flex-end;width:1.5rem;height:1.5rem;margin-top:-1.5rem;&.placeholder{content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=)}}& img.theme-icon{max-width:5rem;max-height:2.5rem;margin-top:1.25rem;margin-bottom:1.25rem}&.selected{background-color:var(--bkg-color-grad1);border:solid 1px var(--text-color)}& span.theme-name{text-align:center;word-break:break-word;max-width:6rem;color:var(--text-color);max-height:2.2rem;line-height:1.1rem;overflow:hidden}}.theme,.custom-theme,.new-theme{cursor:pointer;background-color:#0000;border:none;border-radius:.5rem;align-content:flex-end;width:8rem;margin:.5rem;padding:0;position:relative}.themes>button>span,.custom-theme>button>span,.new-theme>button>span{text-align:center;width:95%;color:var(--text-color);display:inline-block}.themes>button>span,.custom-theme>button>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.theme>img,.custom-theme>button>img,.new-theme>img{max-width:100%}button.select{cursor:pointer;background-color:#0000;border:none;width:100%;padding:0}button.select>img{height:3rem;margin-bottom:1rem}button.delete{position:absolute;top:0;right:0}.theme.selected,.custom-theme.selected{background-color:var(--bkg-color-grad2)}.theme-icon{--svg-filter:none}#themes-type-chooser{flex:1;justify-content:space-between;display:flex}.gg-tabs{flex-grow:1;margin:0}
 </style>
-<button class="gg-icon-button gg-big-withtext" tip="Theme selection" onclick="${() => this.toggleThemesList()}" onblur="${() => this.onBlur()}"><img alt="menu-icon" src="icons/themes.svg" class="${(!this.state.loading ? (this.openedOnce ? '' : 'gg-spin-wait') : 'hidden')}"> <img alt="loading-icon" src="icons/loading.svg" class="${(this.state.loading ? 'gg-spin' : 'hidden')}"> <span i18n="Themes">Themes</span></button><div class="${(this.menuOpen ? 'themes' : 'hidden')}">${Object.values(this.state.themes._allThemes ?? {}).map(theme => uHtmlFor(theme, theme.id) ` <button class="${this.isThemeActive(theme) ? 'theme selected' : 'theme'}" onmousedown="${() => this.onThemeChanged(theme)}"><img class="theme-icon" alt="${'Icon for ' + theme.name}" src="${theme.icon}"> <span i18n="${theme.name}">${theme.name}</span></button> `)} ${Object.values(this.customThemes ?? {}).map(theme => uHtmlFor(theme, theme.id) `<div class="${this.isThemeActive(theme) ? 'custom-theme selected' : 'custom-theme'}"><button class="select" onmousedown="${() => this.onCustomThemeChanged(theme)}"><img alt="${'Icon for ' + theme.name}" src="${theme.icon}"> <span i18n="${theme.name}">${theme.name}</span></button> <button class="girafe-button-small delete" onmousedown="${(e) => this.onDeleteCustomTheme(theme, e)}"><img alt="delete-icon" src="icons/close.svg"></button></div>`)}<div class="new-theme"><button class="select" onmousedown="${() => this.onAddCustomTheme()}"><img alt="Create custom theme" src="${this.newIcon}" tip="Save the current layer configuration as new theme"> <span i18n="Create custom theme">Create custom theme</span></button></div></div>`;
+<button class="gg-icon-button gg-big-withtext" tip="Theme selection" onclick="${() => this.toggleThemesList()}"><img alt="menu-icon" src="icons/themes.svg" class="${(!this.state.loading ? (this.openedOnce ? '' : 'gg-spin-wait') : 'hidden')}"> <img alt="loading-icon" src="icons/loading.svg" class="${(this.state.loading ? 'gg-spin' : 'hidden')}"> <span i18n="Themes">Themes</span></button><div class="${(this.menuOpen ? 'themes' : 'hidden')}"><div id="themes-type-chooser"><div class="gg-tabs">${Object.values(ThemeTypes).map((themeType) => uHtml ` <button id="${'choose-themes-type-' + themeType}" i18n="${'themes-type-' + themeType}" class="${this.isThemeTypeActive(themeType) ? 'gg-tab active' : 'gg-tab'}" .active="${this.isThemeTypeActive(themeType)}" onclick="${() => this.activateThemeType(themeType)}"></button> `)}</div></div><div id="active-themes">${Object.values(this.activeThemes).map(theme => uHtmlFor(theme, theme.id) `<div role="button" tabindex="0" class="${this.isThemeActive(theme) ? 'theme-card selected' : 'theme-card'}" onkeyup="${() => this.onThemeChanged(theme)}" onclick="${() => this.onThemeChanged(theme)}"><img class="${this.isThemeFavorite(theme) ? 'theme-favorite yes' : 'theme-favorite'}" tip="themes-add-remove-favorites" alt="themes-add-remove-favorites" src="" onclick="${(e) => this.onThemeFavoriteChanged(theme, e)}" onkeyup="${(e) => this.onThemeFavoriteChanged(theme, e)}"> <img class="${this.isCustomTheme(theme) ? 'delete-icon' : 'delete-icon placeholder'}" onclick="${(e) => this.onDeleteCustomTheme(theme, e)}" onkeyup="${(e) => this.onDeleteCustomTheme(theme, e)}" alt="delete-icon" src=""> <img class="theme-icon" alt="${'Icon for ' + theme.name}" src="${theme.icon}"> <span i18n="${theme.name}" class="theme-name">${theme.name}</span></div>`)}<div role="button" tabindex="0" class="${this.isThemeTypeActive('custom') ? 'theme-card' : 'hidden'}" onclick="${() => this.onAddCustomTheme()}" onkeyup="${() => this.onAddCustomTheme()}"><img class="theme-favorite placeholder" src="" alt="" disabled="disabled"> <img class="theme-icon" alt="Create custom theme" src="${this.newIcon}" tip="Save the current layer configuration as new theme"> <span i18n="Create custom theme" class="theme-name">Create custom theme</span></div></div></div><div id="close-themes-menu" onclick="${() => this.onBlur()}"></div>`;
     };
     newIcon = NewIcon;
     menuOpen = false;
     openedOnce = false;
+    activeThemeType = 'all';
+    clickOutsideContainer = null;
     get customThemes() {
         return this.context.customThemesManager.customThemes;
     }
+    get allThemes() {
+        return this.state.themes._allThemes ?? {};
+    }
+    get favoriteThemes() {
+        return [
+            ...Object.values(this.allThemes).filter((theme) => this.context.themeFavoritesManager.isThemeInFavorites(theme)),
+            ...Object.values(this.customThemes).filter((theme) => this.context.themeFavoritesManager.isThemeInFavorites(theme))
+        ];
+    }
+    get activeThemes() {
+        switch (this.activeThemeType) {
+            case 'all':
+                return this.allThemes;
+            case 'favorites':
+                return this.favoriteThemes;
+            case 'custom':
+                return this.customThemes;
+            default:
+                return {};
+        }
+    }
     constructor() {
         super('themes');
     }
     registerEvents() {
-        this.subscribe('loading', () => super.render());
+        this.subscribe('loading', () => this.render());
         this.subscribe('themes.isLoaded', () => {
             if (this.state.themes.isLoaded) {
-                super.render();
+                this.render();
                 super.girafeTranslate();
             }
         });
     }
+    render() {
+        super.render();
+        if (this.clickOutsideContainer)
+            this.clickOutsideContainer.style.display = this.menuOpen ? 'block' : 'none';
+    }
     onBlur() {
         this.menuOpen = false;
-        super.render();
+        this.render();
     }
     toggleThemesList() {
         this.openedOnce = true;
         this.menuOpen = !this.menuOpen;
-        super.render();
+        this.render();
+    }
+    activateThemeType(themeType) {
+        this.activeThemeType = themeType;
+        this.render();
     }
     onThemeChanged(theme) {
+        if (this.context.configManager.Config.themes.selectionMode === 'add') {
+            this.state.themes.lastSelectedTheme = null;
+        }
         this.state.themes.lastSelectedTheme = theme;
+        if (theme instanceof CustomTheme)
+            return;
         if (theme.disclaimer) {
             this.state.infobox.elements.push({
                 id: theme.treeItemId,
@@ -61,7 +102,22 @@ class ThemeComponent extends GirafeHTMLElement {
         if (this.context.configManager.Config.themes.selectionMode === 'replace') {
             return theme.id === this.state.themes.lastSelectedTheme?.id;
         }
-        return false;
+        return this.state.layers.layersList.some((layer) => layer instanceof ThemeLayer && layer.id === theme.id);
+    }
+    isThemeFavorite(theme) {
+        return this.context.themeFavoritesManager.isThemeInFavorites(theme);
+    }
+    onThemeFavoriteChanged(theme, e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.context.themeFavoritesManager.addOrRemoveThemeFromFavorites(theme);
+        this.render();
+    }
+    isThemeTypeActive(themeType) {
+        return (this.activeThemeType ?? 'all') === themeType;
+    }
+    isCustomTheme(theme) {
+        return theme instanceof CustomTheme;
     }
     onCustomThemeChanged(customTheme) {
         this.state.themes.lastSelectedTheme = customTheme;
@@ -71,15 +127,15 @@ class ThemeComponent extends GirafeHTMLElement {
         const themeName = await window.gPrompt('Enter a name for your custom theme', 'Create custom theme', 'Enter a name...');
         if (themeName !== false && themeName.trim().length > 0) {
             this.context.customThemesManager.addTheme(themeName, this.state.layers.layersList);
-            super.render();
+            this.render();
         }
     }
-    async onDeleteCustomTheme(themelayer, e) {
+    async onDeleteCustomTheme(customTheme, e) {
         e.stopPropagation();
         const confirm = await window.gConfirm('Do you want to delete this theme?', 'Delete Theme');
         if (confirm) {
-            this.context.customThemesManager.deleteTheme(themelayer);
-            super.render();
+            this.context.customThemesManager.deleteTheme(customTheme);
+            this.render();
         }
     }
     connectedCallback() {
@@ -87,6 +143,7 @@ class ThemeComponent extends GirafeHTMLElement {
         super.render();
         this.registerEvents();
         this.girafeTranslate();
+        this.clickOutsideContainer = this.shadow.getElementById('close-themes-menu');
     }
 }
 export default ThemeComponent;

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

@@ -6,9 +6,11 @@ export default abstract class TreeViewElement extends GirafeHTMLElement {
     protected layer: BaseLayer;
     private dragButton;
     private container;
+    private header;
     constructor(layer: BaseLayer, name: string);
     protected connectedCallback(): void;
     render(): void;
+    private highlight;
     refreshRender(): void;
     refreshRender(layer?: BaseLayer): void;
     protected showMetadata(): void;

package/components/treeview/tools/treeviewelement.js

@@ -10,6 +10,7 @@ export default class TreeViewElement extends GirafeHTMLElement {
     layer;
     dragButton;
     container;
+    header;
     constructor(layer, name) {
         super(name);
         this.layer = layer;
@@ -22,11 +23,28 @@ export default class TreeViewElement extends GirafeHTMLElement {
         super.render();
         this.dragButton = this.shadow.getElementById('drag-button');
         this.container = this.shadow.getElementById('container');
+        this.header = this.shadow.querySelector('header');
         super.girafeTranslate();
         this.initializeDrag();
         if (isTimeAwareLayer(this.layer)) {
             this.createTimeRestrictionTooltip(this.layer);
         }
+        this.subscribe(/layers\.layersList\..*\.isHighlighted/, (_oldValue, newValue, layer) => {
+            if (newValue && layer === this.layer) {
+                this.highlight();
+            }
+        });
+    }
+    highlight() {
+        this.header.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+        });
+        this.header.classList.add('highlight');
+        setTimeout(() => {
+            this.header.classList.remove('highlight');
+            this.layer.isHighlighted = false;
+        }, 3000);
     }
     refreshRender(layer) {
         if (this.state.treeview.renderEnabled && (!layer || layer === this.layer)) {
@@ -34,6 +52,9 @@ export default class TreeViewElement extends GirafeHTMLElement {
             // Else, call refresh only if the layer in param is the current one
             super.refreshRender();
             super.girafeTranslate();
+            if (this.layer.isHighlighted) {
+                this.highlight();
+            }
         }
     }
     showMetadata() {

package/components/treeview/treeviewgroup/component.js

@@ -5,7 +5,7 @@ import TreeViewGroupElement from '../tools/treeviewgroupelement.js';
 class TreeViewGroupComponent extends TreeViewGroupElement {
     template = () => {
         return uHtml `<style>
-header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}
+header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
 </style><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-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style>

package/components/treeview/treeviewitem/component.js

@@ -10,7 +10,7 @@ import WmsLegendHelper from '../../../tools/wms/wmslegendhelper.js';
 class TreeViewItemComponent extends TreeViewElement {
     template = () => {
         return uHtml `<style>
-header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}
+header{border-top:1px solid #ddd;align-items:center;height:2rem;display:flex}.tool{display:none!important}header:hover .tool{display:flex!important}.tool.active{order:100;opacity:1!important;display:flex!important}.label-container{flex-grow:1;align-items:center;display:flex;overflow:auto}.label-out-resolution span{font-style:italic}.resolution-tool{margin-left:.5rem}.legend{display:flex}.legend img{background:var(--svg-legend-bkg);height:fit-content;filter:var(--svg-map-filter)}.legend-icon{background:var(--svg-legend-bkg);max-height:1.5rem;filter:var(--svg-map-filter);margin-left:.5rem}.children{flex-basis:100%;order:10;padding-left:1.3rem}.dragAfter{border-bottom:1rem dashed #ccc}.dragBefore{border-top:1rem dashed #ccc}.gg-checkbox{width:1.2rem}.gg-caret,.gg-spacer{text-align:center;width:1.5rem;padding:0}.gg-caret{transform:scale(1.3)}.gg-caret.gg-rotate90{transform:scale(1.3)rotate(90deg)}.gg-small.gg-lock{min-width:1rem}.gg-tree-label{text-align:left;white-space:nowrap;text-overflow:ellipsis;padding-left:0;overflow:hidden}.gg-grab:hover{cursor:grab}.gg-selected{opacity:1}.legend-file{color:var(--text-color);font-style:italic;display:flex}@keyframes headerFade{0%{background-color:var(--highlight-color)}to{background-color:#0000}}.highlight{animation:3s ease-in-out forwards headerFade}
 </style><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-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style>