@geogirafe/lib-geoportal 1.1.0-dev.2318696406 → 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",
@@ -415,6 +415,10 @@
     "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

@@ -417,6 +417,10 @@
     "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

@@ -415,6 +415,10 @@
     "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

@@ -415,6 +415,10 @@
     "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/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/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,48 +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,
@@ -64,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;
@@ -74,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() {
@@ -90,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/package.json

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

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2318696406", "build":"2318696406", "date":"11/02/2026"}
+{"version":"1.1.0-dev.2321641404", "build":"2321641404", "date":"12/02/2026"}

package/tools/context/context.d.ts

@@ -30,6 +30,7 @@ import UserDataManager from '../userdata/userdatamanager.js';
 import WfsManager from '../wfs/wfsmanager.js';
 import WmsManager from '../wms/wmsmanager.js';
 import IGirafeContext from './icontext.js';
+import ThemeFavoritesManager from '../themes/themefavoritesmanager.js';
 export default class GirafeContext implements IGirafeContext {
     readonly userDataManager: UserDataManager;
     readonly configManager: ConfigManager;
@@ -62,6 +63,7 @@ export default class GirafeContext implements IGirafeContext {
     readonly ogcApiFeaturesManager: OgcApiFeaturesManager;
     readonly localFileManager: LocalFileManager;
     readonly onBoardingManager: OnBoardingManager;
+    readonly themeFavoritesManager: ThemeFavoritesManager;
     constructor();
     initialize(): Promise<void>;
 }

package/tools/context/context.js

@@ -29,6 +29,7 @@ import UrlManager from '../url/urlmanager.js';
 import UserDataManager from '../userdata/userdatamanager.js';
 import WfsManager from '../wfs/wfsmanager.js';
 import WmsManager from '../wms/wmsmanager.js';
+import ThemeFavoritesManager from '../themes/themefavoritesmanager.js';
 export default class GirafeContext {
     userDataManager;
     configManager;
@@ -61,6 +62,7 @@ export default class GirafeContext {
     ogcApiFeaturesManager;
     localFileManager;
     onBoardingManager;
+    themeFavoritesManager;
     constructor() {
         this.componentManager = new ComponentManager(this);
         this.userDataManager = new UserDataManager(this);
@@ -93,6 +95,7 @@ export default class GirafeContext {
         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 GirafeContext {
         this.localFileManager.initializeSingleton();
         this.ogcApiFeaturesManager.initializeSingleton();
         this.onBoardingManager.initializeSingleton();
+        this.themeFavoritesManager.initializeSingleton();
     }
 }

package/tools/context/icontext.d.ts

@@ -29,6 +29,7 @@ import UrlManager from '../url/urlmanager.js';
 import UserDataManager from '../userdata/userdatamanager.js';
 import WfsManager from '../wfs/wfsmanager.js';
 import WmsManager from '../wms/wmsmanager.js';
+import ThemeFavoritesManager from '../themes/themefavoritesmanager.js';
 export default interface IGirafeContext {
     readonly userDataManager: UserDataManager;
     readonly configManager: ConfigManager;
@@ -61,5 +62,6 @@ export default interface IGirafeContext {
     readonly ogcApiFeaturesManager: OgcApiFeaturesManager;
     readonly localFileManager: LocalFileManager;
     readonly onBoardingManager: OnBoardingManager;
+    readonly themeFavoritesManager: ThemeFavoritesManager;
     initialize(): Promise<void>;
 }

package/tools/main.d.ts

@@ -90,6 +90,7 @@ export { default as UserInteractionManager } from './state/userInteractionManage
 export type { GgUserInteractionEvent } from './state/userinteractionevent.js';
 export { gGEventDependencies, isPrimaryPointerAction, isAlternateMouseClick, isMouseWheelClick } from './state/userinteractionevent.js';
 export { default as CustomThemesManager } from './themes/customthemesmanager.js';
+export { default as ThemeFavoritesManager } from './themes/themefavoritesmanager.js';
 export { DEFAULT_OPACITY, OPACITY_FOR_DEFAULT_BASEMAP } from './themes/themes-config.js';
 export type { LayerTreeChanges } from './themes/themeshelper.js';
 export { default as ThemesHelper } from './themes/themeshelper.js';

package/tools/main.js

@@ -68,6 +68,7 @@ export { default as StateManager } from './state/statemanager.js';
 export { default as UserInteractionManager } from './state/userInteractionManager.js';
 export { gGEventDependencies, isPrimaryPointerAction, isAlternateMouseClick, isMouseWheelClick } from './state/userinteractionevent.js';
 export { default as CustomThemesManager } from './themes/customthemesmanager.js';
+export { default as ThemeFavoritesManager } from './themes/themefavoritesmanager.js';
 export { DEFAULT_OPACITY, OPACITY_FOR_DEFAULT_BASEMAP } from './themes/themes-config.js';
 export { default as ThemesHelper } from './themes/themeshelper.js';
 export { default as ThemesManager } from './themes/themesmanager.js';

package/tools/share/serializers/activebasemapsserializer.js

@@ -13,8 +13,7 @@ export default class ActiveBasemapsSerializer {
         return this.serialize(activeBasemaps);
     }
     brainDeserialize(serializedString) {
-        const activeBasemaps = this.deserialize(serializedString);
-        this.state.activeBasemaps = activeBasemaps;
+        this.state.activeBasemaps = this.deserialize(serializedString);
     }
     serialize(basemaps) {
         const sharedBasemaps = [];

package/tools/tests/mockcontext.d.ts

@@ -30,6 +30,7 @@ import UserDataManager from '../userdata/userdatamanager';
 import WfsManager from '../wfs/wfsmanager';
 import WmsManager from '../wms/wmsmanager';
 import OnBoardingManager from '../onboarding/onboardingmanager';
+import ThemeFavoritesManager from '../themes/themefavoritesmanager';
 export default class MockGirafeContext implements IGirafeContext {
     readonly userDataManager: UserDataManager;
     readonly configManager: ConfigManager;
@@ -62,6 +63,7 @@ export default class MockGirafeContext implements IGirafeContext {
     readonly ogcApiFeaturesManager: OgcApiFeaturesManager;
     readonly localFileManager: LocalFileManager;
     readonly onBoardingManager: OnBoardingManager;
+    readonly themeFavoritesManager: ThemeFavoritesManager;
     constructor();
     initialize(): Promise<void>;
 }

package/tools/tests/mockcontext.js

@@ -31,6 +31,7 @@ import WfsManager from '../wfs/wfsmanager';
 import WmsManager from '../wms/wmsmanager';
 import { MockConfig } from './mockconfig';
 import OnBoardingManager from '../onboarding/onboardingmanager';
+import ThemeFavoritesManager from '../themes/themefavoritesmanager';
 export default class MockGirafeContext {
     userDataManager;
     configManager;
@@ -63,6 +64,7 @@ export default class MockGirafeContext {
     ogcApiFeaturesManager;
     localFileManager;
     onBoardingManager;
+    themeFavoritesManager;
     constructor() {
         this.componentManager = new ComponentManager(this);
         this.userDataManager = new UserDataManager(this);
@@ -95,6 +97,7 @@ export default class MockGirafeContext {
         this.localFileManager = new LocalFileManager(this);
         this.ogcApiFeaturesManager = new OgcApiFeaturesManager(this);
         this.onBoardingManager = new OnBoardingManager(this);
+        this.themeFavoritesManager = new ThemeFavoritesManager(this);
         this.initialize();
     }
     async initialize() {
@@ -137,5 +140,6 @@ export default class MockGirafeContext {
         this.localFileManager.initializeSingleton();
         this.ogcApiFeaturesManager.initializeSingleton();
         this.onBoardingManager.initializeSingleton();
+        this.themeFavoritesManager.initializeSingleton();
     }
 }

package/tools/themes/themefavoritesmanager.d.ts

@@ -0,0 +1,17 @@
+import GirafeSingleton from '../../base/GirafeSingleton.js';
+import CustomTheme from '../../models/customtheme.js';
+import ThemeLayer from '../../models/layers/themelayer.js';
+declare class ThemeFavoritesManager extends GirafeSingleton {
+    private themeFavorites;
+    private readonly storagePath;
+    initializeSingleton(): void;
+    private saveThemeFavorites;
+    private loadThemeFavorites;
+    addThemeToFavorites(theme: ThemeLayer | CustomTheme): void;
+    removeThemeFromFavorites(theme: ThemeLayer | CustomTheme): void;
+    addOrRemoveThemeFromFavorites(theme: ThemeLayer | CustomTheme): void;
+    clearThemeFavorites(): void;
+    isThemeInFavorites(theme: ThemeLayer | CustomTheme): boolean;
+    getThemeFavorites(): Array<number | string>;
+}
+export default ThemeFavoritesManager;

package/tools/themes/themefavoritesmanager.js

@@ -0,0 +1,53 @@
+import GirafeSingleton from '../../base/GirafeSingleton.js';
+import ThemeLayer from '../../models/layers/themelayer.js';
+class ThemeFavoritesManager extends GirafeSingleton {
+    themeFavorites = [];
+    storagePath = 'themeFavorites';
+    initializeSingleton() {
+        super.initializeSingleton();
+        this.loadThemeFavorites();
+    }
+    saveThemeFavorites() {
+        const serializedThemeFavorites = JSON.stringify(this.themeFavorites);
+        this.context.userDataManager.saveUserData(this.storagePath, serializedThemeFavorites);
+    }
+    loadThemeFavorites() {
+        const serializedThemeFavorites = this.context.userDataManager.getUserData(this.storagePath);
+        if (serializedThemeFavorites) {
+            this.themeFavorites = JSON.parse(serializedThemeFavorites);
+        }
+    }
+    addThemeToFavorites(theme) {
+        this.themeFavorites.push(theme instanceof ThemeLayer ? theme.id : theme.name);
+        this.saveThemeFavorites();
+    }
+    removeThemeFromFavorites(theme) {
+        const index = this.themeFavorites.findIndex((themeIdOrName) => theme instanceof ThemeLayer ? themeIdOrName === theme.id : themeIdOrName === theme.name);
+        if (index >= 0) {
+            this.themeFavorites.splice(index, 1);
+            this.saveThemeFavorites();
+        }
+        else {
+            throw new Error('The theme to be removed cannot be found in the list of favorites');
+        }
+    }
+    addOrRemoveThemeFromFavorites(theme) {
+        if (this.isThemeInFavorites(theme)) {
+            this.removeThemeFromFavorites(theme);
+        }
+        else {
+            this.addThemeToFavorites(theme);
+        }
+    }
+    clearThemeFavorites() {
+        this.themeFavorites = [];
+        this.saveThemeFavorites();
+    }
+    isThemeInFavorites(theme) {
+        return this.themeFavorites.includes(theme instanceof ThemeLayer ? theme.id : theme.name);
+    }
+    getThemeFavorites() {
+        return this.themeFavorites;
+    }
+}
+export default ThemeFavoritesManager;

package/tools/themes/themefavoritesmanager.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/tools/themes/themefavoritesmanager.spec.js

@@ -0,0 +1,103 @@
+import { beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import MockHelper from '../tests/mockhelper';
+import ThemeLayer from '../../models/layers/themelayer';
+import CustomTheme from '../../models/customtheme';
+let themeFavoritesManager;
+let context;
+const storagePath = 'themeFavorites';
+const themeLayer = new ThemeLayer(42, "ThemeLayer", 1);
+const customTheme = new CustomTheme("CustomTheme");
+beforeAll(() => {
+    context = MockHelper.startMocking();
+    themeFavoritesManager = context.themeFavoritesManager;
+});
+beforeEach(() => {
+    context.userDataManager.deleteAllUserData();
+    themeFavoritesManager.clearThemeFavorites();
+});
+describe('ThemeFavoritesManager.addThemeToFavorites', () => {
+    it('adding a ThemeLayer should result in an number array', () => {
+        themeFavoritesManager.addThemeToFavorites(themeLayer);
+        expect(context.userDataManager.getUserData(storagePath)).toEqual(`[${themeLayer.id}]`);
+    });
+    it('adding a CustomTheme should result in an string array', () => {
+        themeFavoritesManager.addThemeToFavorites(customTheme);
+        expect(context.userDataManager.getUserData(storagePath)).toEqual(`["${customTheme.name}"]`);
+    });
+    it('adding a ThemeLayer and a CustomTheme should result in an mixed array', () => {
+        themeFavoritesManager.addThemeToFavorites(themeLayer);
+        themeFavoritesManager.addThemeToFavorites(customTheme);
+        expect(context.userDataManager.getUserData(storagePath)).toEqual(`[${themeLayer.id},"${customTheme.name}"]`);
+    });
+});
+describe('ThemeFavoritesManager.initializeSingleton', () => {
+    it('starting without persisted favorites should result in an empty array', () => {
+        themeFavoritesManager.initializeSingleton();
+        expect(themeFavoritesManager.getThemeFavorites()).toEqual([]);
+    });
+    it('starting with an empty string as persisted data  should result in an empty array', () => {
+        context.userDataManager.saveUserData(storagePath, '');
+        themeFavoritesManager.initializeSingleton();
+        expect(themeFavoritesManager.getThemeFavorites()).toEqual([]);
+    });
+    it('starting with "[42]" as persisted data should result in [42]', () => {
+        context.userDataManager.saveUserData(storagePath, '[42]');
+        themeFavoritesManager.initializeSingleton();
+        expect(themeFavoritesManager.getThemeFavorites()).toEqual([42]);
+    });
+    it('starting with "["CustomTheme""]" as persisted data should result in ["CustomTheme"]', () => {
+        context.userDataManager.saveUserData(storagePath, '["CustomTheme"]');
+        themeFavoritesManager.initializeSingleton();
+        expect(themeFavoritesManager.getThemeFavorites()).toEqual(['CustomTheme']);
+    });
+    it('starting with "[42,"CustomTheme""]" as persisted data should result in [42,"CustomTheme"]', () => {
+        context.userDataManager.saveUserData(storagePath, '[42,"CustomTheme"]');
+        themeFavoritesManager.initializeSingleton();
+        expect(themeFavoritesManager.getThemeFavorites()).toEqual([42, 'CustomTheme']);
+    });
+});
+describe('ThemeFavoritesManager.isThemeInFavorites', () => {
+    it('adding ThemeLayer should result in ThemeLayer being a favorite', () => {
+        themeFavoritesManager.addThemeToFavorites(themeLayer);
+        expect(themeFavoritesManager.isThemeInFavorites(themeLayer)).toBeTruthy();
+    });
+    it('adding CustomTheme should result in CustomTheme being a favorite', () => {
+        themeFavoritesManager.addThemeToFavorites(customTheme);
+        expect(themeFavoritesManager.isThemeInFavorites(customTheme)).toBeTruthy();
+    });
+    it('adding CustomTheme should result in ThemeLayer being not a favorite', () => {
+        themeFavoritesManager.addThemeToFavorites(customTheme);
+        expect(themeFavoritesManager.isThemeInFavorites(themeLayer)).toBeFalsy();
+    });
+    it('adding ThemeLayer should result in CustomTheme being not a favorite', () => {
+        themeFavoritesManager.addThemeToFavorites(themeLayer);
+        expect(themeFavoritesManager.isThemeInFavorites(customTheme)).toBeFalsy();
+    });
+    it('adding ThemeLayer and CustomTheme should result in both being a favorite', () => {
+        themeFavoritesManager.addThemeToFavorites(themeLayer);
+        themeFavoritesManager.addThemeToFavorites(customTheme);
+        expect(themeFavoritesManager.isThemeInFavorites(themeLayer)).toBeTruthy();
+        expect(themeFavoritesManager.isThemeInFavorites(customTheme)).toBeTruthy();
+    });
+});
+describe('ThemeFavoritesManager.clearThemeFavorites', () => {
+    it('clearing favorites should result in an empty array', () => {
+        context.userDataManager.saveUserData(storagePath, '[42,"CustomTheme"]');
+        themeFavoritesManager.initializeSingleton();
+        expect(themeFavoritesManager.getThemeFavorites().length).toEqual(2);
+        themeFavoritesManager.clearThemeFavorites();
+        expect(themeFavoritesManager.getThemeFavorites().length).toEqual(0);
+    });
+});
+describe('ThemeFavoritesManager.addOrRemoveThemeFromFavorites', () => {
+    it('not already being a favorite should result in being a favorite afterwards ', () => {
+        themeFavoritesManager.addOrRemoveThemeFromFavorites(themeLayer);
+        expect(themeFavoritesManager.isThemeInFavorites(themeLayer)).toBeTruthy();
+    });
+    it('already being a favorite should result in no longer being a favorite afterwards ', () => {
+        context.userDataManager.saveUserData(storagePath, '[42]');
+        themeFavoritesManager.initializeSingleton();
+        themeFavoritesManager.addOrRemoveThemeFromFavorites(themeLayer);
+        expect(themeFavoritesManager.isThemeInFavorites(themeLayer)).toBeFalsy();
+    });
+});