@geogirafe/lib-geoportal 1.2.0-dev.2853894139 → 1.2.0-dev.2857838548

package/assets/i18n/de.json

@@ -247,6 +247,7 @@
     "geoadminch_other": "Andere",
     "geoadminch_parcel": "Parzellen",
     "geoadminch_zipcode": "PLZ",
+    "GeoGirafe is a flexible application to build online geoportals.": "GeoGirafe ist eine flexible Applikation um Online-Geoportale zu erstellen.",
     "GeoJSON": "GeoJSON",
     "Geolocation browser error": "Ihr Browser unterstützt keine Geolokalisierung",
     "Geolocation error": "Geolocation-Fehler",

package/assets/i18n/en.json

@@ -249,6 +249,7 @@
     "geoadminch_other": "Other",
     "geoadminch_parcel": "Parcels",
     "geoadminch_zipcode": "ZIP codes",
+    "GeoGirafe is a flexible application to build online geoportals.": "GeoGirafe is a flexible application to build online geoportals.",
     "GeoJSON": "GeoJSON",
     "Geolocation browser error": "Your browser does not support geolocation",
     "Geolocation error": "Geolocation error",

package/assets/i18n/fr.json

@@ -247,6 +247,7 @@
     "geoadminch_other": "Autres",
     "geoadminch_parcel": "Parcelles",
     "geoadminch_zipcode": "Codes postaux",
+    "GeoGirafe is a flexible application to build online geoportals.": "GeoGirafe est une application flexible permettant de créer des géoportails en ligne.",
     "GeoJSON": "GeoJSON",
     "Geolocation browser error": "Votre navigateur ne supporte pas la géolocalisation",
     "Geolocation error": "Erreur de géolocalisation",

package/assets/i18n/it.json

@@ -247,6 +247,7 @@
     "geoadminch_other": "Altri",
     "geoadminch_parcel": "Parcelle",
     "geoadminch_zipcode": "Codici postali",
+    "GeoGirafe is a flexible application to build online geoportals.": "GeoGirafe è un'applicazione flessibile per creare geoportali online.",
     "GeoJSON": "GeoJSON",
     "Geolocation browser error": "Il tuo browser non supporta la geolocalizzazione",
     "Geolocation error": "Errore di geolocalizzazione",

package/components/auth/component.js

@@ -8,10 +8,10 @@ export default class OauthComponent extends GirafeHTMLElement {
         return uHtml `<style>
 .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}button,input,select,textarea{font:inherit}.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);cursor:pointer;width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.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:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){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}.tippy-box{background-color:var(--bkg-color)!important;border:var(--app-standard-border)!important}.tippy-content{color:var(--text-color)!important}.tippy-arrow{color:var(--bkg-color)!important}.tippy-box[data-theme~=error]{background-color:var(--error-color);white-space:pre-line}div.tippy-box[data-theme=image-popup]{border:var(--app-standard-border)!important;& div.tippy-content{background-color:var(--bkg-color)!important;& img{max-width:20rem;max-height:20rem}}& div.tippy-arrow{color:var(--bkg-color)!important}}
 </style><style>
-.container{border-right:var(--app-standard-border);flex-direction:row;align-items:center;display:flex}.name{text-align:left;flex-direction:column;display:flex}.avatar-initials{background-color:var(--app-color-grey);color:#000;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;font-weight:700;display:flex}.gg-icon-button.logged-in{flex-direction:row;gap:.5rem;padding:.5rem}
+.container{border-right:var(--app-standard-border);flex-direction:row;align-items:center;display:flex}.name{text-align:left;flex-direction:column;display:flex}.avatar-initials{background-color:var(--app-color-grey);color:#000;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;font-weight:700;display:flex}.gg-icon-button.logged-in{flex-direction:row;gap:.5rem;padding:.5rem}@media (width<=991px){#login-btn>span,.logged-in>.name{display:none}#login-btn>img{padding-right:.5rem}}
 </style>
 <style>${this.customStyle}</style>
-<div class="${this.context.configManager.Config.oauth || this.context.configManager.Config.gmfauth ? '' : 'hidden'}"><div class="${this.state.oauth.status === 'loggedIn' ? 'hidden' : 'container'}"><button class="gg-icon-button gg-medium-withtext" onclick="${() => this.onLoginClick()}"><img alt="menu-icon" src="icons/user.svg"> <span i18n="Login">Login</span></button></div><div class="${this.state.oauth.status !== 'loggedIn' ? 'hidden' : 'container'}"><button class="gg-icon-button logged-in" onclick="${() => this.onLogoutClick()}"><span class="avatar-initials">${this.getInitials()}</span><div class="name"><span class="${this.getFullName() ? '' : 'hidden'}">${this.getFullName()}</span> <span>${this.getDisplayName()}</span></div></button></div></div>
+<div class="${this.context.configManager.Config.oauth || this.context.configManager.Config.gmfauth ? '' : 'hidden'}"><div class="${this.state.oauth.status === 'loggedIn' ? 'hidden' : 'container'}"><button id="login-btn" class="gg-icon-button gg-medium-withtext" aria-label="Login" onclick="${() => this.onLoginClick()}"><img alt="menu-icon" src="icons/user.svg"> <span i18n="Login">Login</span></button></div><div class="${this.state.oauth.status !== 'loggedIn' ? 'hidden' : 'container'}"><button class="gg-icon-button logged-in" onclick="${() => this.onLogoutClick()}"><span class="avatar-initials">${this.getInitials()}</span><div class="name"><span class="${this.getFullName() ? '' : 'hidden'}">${this.getFullName()}</span> <span>${this.getDisplayName()}</span></div></button></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     constructor(name = 'oauth') {

package/components/auth/style.css

@@ -29,3 +29,13 @@
   gap: 0.5rem;
   padding: 0.5rem;
 }
+
+@media (max-width: 991px) {
+  #login-btn > span,
+  .logged-in > .name {
+    display: none;
+  }
+  #login-btn > img {
+    padding-right: 0.5rem;
+  }
+}

package/components/auth-mobile/component.js

@@ -11,7 +11,7 @@ export default class MobileOauthComponent extends OauthComponent {
 .container{filter:drop-shadow(0 4px 7px #0004382c);background-color:#fff;border-radius:8px;flex-direction:column;padding:1em;display:flex}.container:active{background-color:#c6ceda}.container>button{background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.container>button>img{opacity:.7;width:25%;padding-bottom:1em}.container>button>span{color:#3f68a7;flex:1;justify-content:center;align-items:center;font-size:1.2em;font-weight:600;display:flex}
 </style>
 <style>${this.customStyle}</style>
-<div class="${this.context.configManager.Config.oauth || this.context.configManager.Config.gmfauth ? '' : 'hidden'}"><div class="${this.state.oauth.status === 'loggedIn' ? 'hidden' : 'container'}"><button class="gg-icon-button gg-medium-withtext" onclick="${() => this.onLoginClick()}"><img alt="menu-icon" src="icons/user.svg"> <span i18n="Login">Login</span></button></div><div class="${this.state.oauth.status !== 'loggedIn' ? 'hidden' : 'container'}"><button class="gg-icon-button logged-in" onclick="${() => this.onLogoutClick()}"><span class="avatar-initials">${this.getInitials()}</span><div class="name"><span class="${this.getFullName() ? '' : 'hidden'}">${this.getFullName()}</span> <span>${this.getDisplayName()}</span></div></button></div></div>
+<div class="${this.context.configManager.Config.oauth || this.context.configManager.Config.gmfauth ? '' : 'hidden'}"><div class="${this.state.oauth.status === 'loggedIn' ? 'hidden' : 'container'}"><button id="login-btn" class="gg-icon-button gg-medium-withtext" aria-label="Login" onclick="${() => this.onLoginClick()}"><img alt="menu-icon" src="icons/user.svg"> <span i18n="Login">Login</span></button></div><div class="${this.state.oauth.status !== 'loggedIn' ? 'hidden' : 'container'}"><button class="gg-icon-button logged-in" onclick="${() => this.onLogoutClick()}"><span class="avatar-initials">${this.getInitials()}</span><div class="name"><span class="${this.getFullName() ? '' : 'hidden'}">${this.getFullName()}</span> <span>${this.getDisplayName()}</span></div></button></div></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     constructor() {

package/components/header/component.d.ts

@@ -0,0 +1,15 @@
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import GirafeConfig from '../../tools/configuration/girafeconfig.js';
+declare class HeaderComponent extends GirafeHTMLElement {
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
+    constructor();
+    get config(): GirafeConfig;
+    get logoSource(): string;
+    get logoAltText(): string;
+    private setHtmlMetaData;
+    registerEvents(): void;
+    protected connectedCallback(): void;
+}
+export default HeaderComponent;

package/components/header/component.js

@@ -0,0 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html as uHtml } from 'uhtml';
+// SPDX-License-Identifier: Apache-2.0
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import { UsedInTemplateOnly } from '../../decorators.js';
+class HeaderComponent extends GirafeHTMLElement {
+    templateUrl = null;
+    styleUrls = null;
+    template = () => {
+        return uHtml `<style>
+#header{box-sizing:border-box;align-items:center;gap:1rem;height:100%;padding:.15rem 1rem;display:flex}#logo{filter:none;width:auto;height:100%;max-height:100%;display:block}#app-title{color:var(--text-color);-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0;font-size:1.3rem;font-weight:700;display:-webkit-box;overflow:hidden}@media (width<=991px){#app-title{display:none}}
+</style>
+<style>${this.customStyle}</style>
+<div id="header">${this.config.branding.logo !== '' ? uHtml ` <img id="logo" alt="${this.logoAltText}" src="${this.logoSource}"> ` : ''} ${this.config.branding.showAppTitleInHeader ? uHtml `<div id="app-title" i18n="${this.config.branding.appTitle}">${this.config.branding.appTitle}</div>` : ''}</div>
+${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
+    };
+    constructor() {
+        super('header');
+    }
+    get config() {
+        return this.context.configManager.Config;
+    }
+    get logoSource() {
+        if (this.state.interface.darkFrontendMode) {
+            return this.config.branding.logoDarkMode;
+        }
+        return this.config.branding.logo;
+    }
+    get logoAltText() {
+        return `${this.config.branding.appTitle.toLowerCase().replaceAll(' ', '-')}-logo`;
+    }
+    setHtmlMetaData() {
+        const title = this.context.i18nManager.getTranslation(this.config.branding.appTitle);
+        const description = this.context.i18nManager.getTranslation(this.config.branding.description);
+        document.title = title;
+        document.querySelector('meta[name="description"]')?.setAttribute('content', description);
+    }
+    registerEvents() {
+        this.subscribe('language', () => this.setHtmlMetaData());
+        if (!this.state.interface.isMobile) {
+            this.subscribe('interface.darkFrontendMode', () => this.refreshRender());
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setHtmlMetaData();
+        this.render();
+        super.girafeTranslate();
+        if (this.state.interface.isMobile) {
+            // Header shouldn't be visible on mobile
+            this.hide();
+        }
+        this.registerEvents();
+    }
+}
+__decorate([
+    UsedInTemplateOnly()
+], HeaderComponent.prototype, "logoSource", null);
+__decorate([
+    UsedInTemplateOnly()
+], HeaderComponent.prototype, "logoAltText", null);
+export default HeaderComponent;

package/components/header/style.css

@@ -0,0 +1,38 @@
+/* SPDX-License-Identifier: Apache-2.0  */
+#header {
+  height: 100%;
+  display: flex;
+  gap: 1rem;
+  padding: 0.15rem 1rem;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+#logo {
+  width: auto;
+  height: 100%;
+  max-height: 100%;
+  display: block;
+  filter: none;
+}
+
+#app-title {
+  font-size: 1.3rem;
+  font-weight: bold;
+  color: var(--text-color);
+  min-width: 0;
+  /* Will limit word wrapping to two lines */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+/*
+Don't show app title on small screens
+ */
+@media (max-width: 991px) {
+  #app-title {
+    display: none;
+  }
+}

package/components/main.d.ts

@@ -24,6 +24,7 @@ export { default as ExternalLayersComponent } from './extlayers/component.js';
 export { default as FeedbackButtonComponent } from './feedbackbutton/component.js';
 export { default as GeolocationMobile } from './geolocation-mobile/component.js';
 export { default as GetDirectionsArtifact } from './getdirections/component.js';
+export { default as HeaderComponent } from './header/component.js';
 export { default as HelpComponent } from './help/component.js';
 export { default as InfoboxComponent } from './infobox/component.js';
 export { default as InfoWindowComponent } from './infowindow/component.js';

package/components/main.js

@@ -23,6 +23,7 @@ export { default as ExternalLayersComponent } from './extlayers/component.js';
 export { default as FeedbackButtonComponent } from './feedbackbutton/component.js';
 export { default as GeolocationMobile } from './geolocation-mobile/component.js';
 export { default as GetDirectionsArtifact } from './getdirections/component.js';
+export { default as HeaderComponent } from './header/component.js';
 export { default as HelpComponent } from './help/component.js';
 export { default as InfoboxComponent } from './infobox/component.js';
 export { default as InfoWindowComponent } from './infowindow/component.js';

package/components/prototypebanner/component.js

@@ -19,7 +19,12 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     }
     connectedCallback() {
         super.connectedCallback();
-        this.render();
+        if (this.context.configManager.Config.branding.prototypeBanner) {
+            this.render();
+        }
+        else {
+            this.hide();
+        }
     }
 }
 export default PrototypeBannerComponent;

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

@@ -10,7 +10,7 @@ class MobileThemeElementComponent extends GirafeHTMLElement {
         return uHtml `<style>
 .hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}button,input,select,textarea{font:inherit}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
-header{align-items:center;gap:1rem;font-size:1.5rem;display:flex}
+header{align-items:center;gap:1rem;font-size:1.5rem;display:flex}header>img{max-width:50%}header>span{overflow-wrap:anywhere}
 </style>
 <style>${this.customStyle}</style>
 <header><button onclick="${() => this.state.themes.lastSelectedTheme = null}" class="gg-icon-button gg-small"><img alt="Back button" src="icons/arrow_left.svg"></button> <img alt="Theme icon" src="${this.theme?.icon}"> <span i18n="${this.theme?.name}"></span></header><div class="children">${(this.theme?.children ?? []).map(layer => (layer instanceof _GroupLayer) ? uHtmlFor(layer, layer.treeItemId) `<girafe-group groupid="${layer.treeItemId}"></girafe-group>` : uHtmlFor(layer, layer.treeItemId) `<girafe-layer layerid="${layer.treeItemId}"></girafe-layer>`)}</div>

package/components/themes-mobile/theme/style.css

@@ -5,3 +5,11 @@ header {
   gap: 1rem;
   font-size: 1.5rem;
 }
+
+header > img {
+  max-width: 50%;
+}
+
+header > span {
+  overflow-wrap: anywhere;
+}

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

@@ -11,7 +11,7 @@ export default class MobileThemeComponent extends GirafeHTMLElement {
         return uHtml `<style>
 .hidden{display:none}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}button,input,select,textarea{font:inherit}.gg-icon-button,.gg-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-button{text-align:left}.gg-small{flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 2.5);margin:0}.gg-small span{margin-left:.5rem;font-size:1rem}.girafe-button-big{filter:drop-shadow(0 0 8px #0000004d);background-color:var(--bkg-color);width:3.5rem;height:3.5rem;color:var(--text-color);border:none;border-radius:4rem;flex-direction:column;align-items:center;padding:.5rem;display:flex}.girafe-button-big img{width:95%;height:auto;padding:5%;overflow:hidden}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color)}
 </style><style>
-header{background:#fff;margin:0;position:sticky;top:-5px}.container{scrollbar-width:thin;width:100%}.tiles{grid-template-columns:repeat(3,1fr);align-items:start;gap:.5rem;display:grid}.item{text-align:left;background:0 0;border:none;font-size:.8rem}.item img{border:solid 2px var(--bkg-color);border-radius:5px;width:100%;margin:0}.item.active img{border:solid 2px var(--text-color);border-radius:5px;width:100%;margin:0}h3{text-align:center;font-variant:small-caps;background-color:var(--text-color);color:var(--bkg-color);padding:1rem;font-size:1rem}.counter{float:right}
+header{background:#fff;margin:0;position:sticky;top:-5px}.container{scrollbar-width:thin;width:100%}.tiles{grid-template-columns:repeat(3,1fr);align-items:start;gap:.5rem;display:grid}.item{text-align:left;white-space:normal;overflow-wrap:anywhere;background:0 0;border:none;font-size:.8rem}.item img{border:solid 2px var(--bkg-color);border-radius:5px;width:100%;margin:0}.item.active img{border:solid 2px var(--text-color);border-radius:5px;width:100%;margin:0}h3{text-align:center;font-variant:small-caps;background-color:var(--text-color);color:var(--bkg-color);padding:1rem;font-size:1rem}.counter{float:right}
 </style>
 <style>${this.customStyle}</style>
 <div class="${this.state.interface.swipeupPanelContent === 'selector' ? '' : 'hidden'}"><header class="gg-tabs"><button class="${this.activeTab === 'themes' ? 'gg-tab active' : 'gg-tab'}" i18n="Themes" onclick="${() => this.changeTab('themes')}"></button> <button class="${this.activeTab === 'selected' ? 'gg-tab active' : 'gg-tab'}" onclick="${() => this.changeTab('selected')}"><span i18n="My selection"></span> <span id="counter" class="counter"></span></button> <button id="basemap-button" class="${this.activeTab === 'basemaps' ? 'gg-tab active' : 'gg-tab'}" i18n="Basemaps" onclick="${() => this.changeTab('basemaps')}"></button></header><div class="${this.activeTab === 'themes' ? 'container' : 'hidden'}"><div class="${this.state.themes.lastSelectedTheme !== null ? 'hidden' : 'tiles'}">${Object.values(this.state.themes._allThemes).map((theme) => uHtmlFor(theme, theme.id) ` <button onclick="${() => this.changeTheme(theme)}" class="item"><img alt="Theme icon" src="${theme.icon}"> <span i18n="${theme.name}"></span></button> `)}</div><div class="${this.state.themes.lastSelectedTheme === null ? 'hidden' : 'layers'}"><girafe-theme themeid="${this.state.themes.lastSelectedTheme?.id}"></girafe-theme></div></div><div class="${this.activeTab === 'selected' ? 'container' : 'hidden'}"><div class="layers">${Array.from(this.activeLayersByGroup.keys()).map(group => uHtmlFor(group, group.treeItemId) `<h3 i18n="${group.name}">${group.name}</h3><div class="children">${this.activeLayersByGroup.get(group).map(layer => uHtmlFor(layer, layer.treeItemId) `<girafe-layer-selected layerid="${layer.treeItemId}"></girafe-layer-selected>`)}</div>`)}</div></div><div class="${this.activeTab === 'basemaps' ? 'container' : 'hidden'}"><div class="tiles">${Object.values(this.state.basemaps).map(basemap => uHtmlFor(basemap, basemap.id) ` <button onclick="${() => this.changeBasemap(basemap)}" class="${this.state.activeBasemaps.length > 0 && this.state.activeBasemaps[0] === basemap ? 'item active' : 'item'}"><img alt="Basemap thumbnail" src="${basemap.thumbnail}"> <span i18n="${basemap.name}"></span></button> `)}</div></div></div>

package/components/themes-mobile/themes-select/style.css

@@ -23,6 +23,8 @@ header {
   text-align: left;
   border: none;
   font-size: 0.8rem;
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
 .item img {

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2853894139",
+  "version": "1.2.0-dev.2857838548",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/styles/iframe.css

@@ -10,14 +10,15 @@ body {
   overflow: hidden;
 }
 
-.logo {
+girafe-header {
+  height: 2.25rem;
   position: absolute;
-  top: 0.2rem;
-  left: 1rem;
+  top: 0.5rem;
+  left: 0.5rem;
   z-index: 10;
-  width: 8rem;
-  background-color: #fff;
+  background-color: var(--bkg-color);
   opacity: 0.5;
+  border-radius: 4px;
 }
 
 #content {

package/styles/index.css

@@ -39,10 +39,8 @@ girafe-theme-select {
   border-right: var(--app-standard-border);
 }
 
-.logo {
-  margin: 0.2rem 1rem;
-  height: var(--app-standard-height);
-  opacity: 0.8;
+girafe-header {
+  height: 100%;
 }
 
 girafe-search {

package/templates/iframe.html

@@ -4,7 +4,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="GeoGirafe is an flexible application to build online geoportals." />
+    <meta name="description" content="GeoGirafe is a flexible application to build online geoportals." />
 
     <meta name="configs" content="main" />
     <link rel="config-main-url" href="config.json" />
@@ -107,7 +107,7 @@
       <span lang="en">Loading...</span>
     </div>
     <girafe-app>
-      <img class="logo" alt="geogirafe-logo" src="images/logo/horizontal_black.svg" />
+      <girafe-header></girafe-header>
 
       <div id="content">
         <div id="main">

package/templates/index.html

@@ -4,7 +4,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="GeoGirafe is an flexible application to build online geoportals." />
+    <meta name="description" content="GeoGirafe is a flexible application to build online geoportals." />
 
     <!--
       If redirect-url meta tag is present, a redirect will happen when the detected device is an iPhone or Android.
@@ -114,7 +114,7 @@
     <girafe-app>
       <header>
         <girafe-theme-select data-tour="theme-selection"></girafe-theme-select>
-        <img class="logo" alt="geogirafe-logo" src="images/logo/horizontal_black.svg" />
+        <girafe-header></girafe-header>
         <div class="header-center-align">
           <girafe-search id="search" plugin="config:search">
             <!-- <div slot="search-tooltip">

package/templates/mobile.html

@@ -3,7 +3,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="GeoGirafe is an flexible application to build online geoportals." />
+    <meta name="description" content="GeoGirafe is a flexible application to build online geoportals." />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
@@ -80,6 +80,7 @@
       <span lang="en">Loading...</span>
     </div>
     <girafe-app>
+      <girafe-header></girafe-header>
       <div class="bottom-button-container-mobile">
         <girafe-align-north-button-mobile></girafe-align-north-button-mobile>
 

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2853894139", "build":"2853894139", "date":"16/09/2026"}
+{"version":"1.2.0-dev.2857838548", "build":"2857838548", "date":"17/09/2026"}

package/tools/app/geogirafeapp-mobile.js

@@ -29,6 +29,7 @@ import MobileSelectedLayerElementComponent from '../../components/themes-mobile/
 import GetDirectionsArtifact from '../../components/getdirections/component.js';
 import MenuMobileShareButton from '../../components/menu-buttons-mobile/MenuMobileShareButton.js';
 import ShareMobileComponent from '../../components/share-mobile/component.js';
+import HeaderComponent from '../../components/header/component.js';
 export default class GeoGirafeAppMobile extends GeoGirafeApp {
     initializeInterface() {
         if (window.cordova) {
@@ -54,6 +55,7 @@ export default class GeoGirafeAppMobile extends GeoGirafeApp {
         customElements.define('girafe-map', DeprecatedMapComponent);
         customElements.define('girafe-search', MobileSearchComponent);
         customElements.define('girafe-offline', OfflineComponent);
+        customElements.define('girafe-header', HeaderComponent);
         customElements.define('girafe-theme-select', MobileThemeComponent);
         customElements.define('girafe-display-selector-button-mobile', DisplaySelectorButtonMobile);
         customElements.define('girafe-display-menu-button-mobile', DisplayMenuButtonMobile);

package/tools/app/geogirafeapp.js

@@ -58,6 +58,7 @@ import FeedbackButtonComponent from '../../components/feedbackbutton/component.j
 import AddBookmarkComponent from '../../components/addbookmark/component.js';
 import DrawingToolbarComponent from '../../components/drawing-toolbar/component.js';
 import SearchFilterComponent from '../../components/search-filter/component.js';
+import HeaderComponent from '../../components/header/component.js';
 export default class GeoGirafeApp {
     readyPromise;
     resolveReady;
@@ -108,6 +109,7 @@ export default class GeoGirafeApp {
     defineCoreComponents() {
         customElements.define('girafe-about', AboutComponent);
         customElements.define('girafe-advanced-filter', AdvancedFilterComponent);
+        customElements.define('girafe-header', HeaderComponent);
         customElements.define('girafe-basemap', BasemapComponent);
         customElements.define('girafe-coordinate', CoordinateComponent);
         customElements.define('girafe-contact', ContactComponent);

package/tools/configuration/girafeconfig.d.ts

@@ -289,6 +289,14 @@ declare class GirafeConfig {
     permalink?: {
         sanitizeConfig?: SanitizeConfig;
     };
+    branding: {
+        logo: string;
+        logoDarkMode: string;
+        appTitle: string;
+        showAppTitleInHeader: boolean;
+        description: string;
+        prototypeBanner: boolean;
+    };
     extendedConfig?: Record<string, object>;
     static readonly DEFAULT_LOCALE = "en-US";
     /**
@@ -332,5 +340,6 @@ declare class GirafeConfig {
     private initApiConfig;
     private initConfigFiltering;
     private initPermalinkConfig;
+    private initBrandingConfig;
 }
 export default GirafeConfig;

package/tools/configuration/girafeconfig.js

@@ -39,6 +39,7 @@ class GirafeConfig {
     feedback;
     filtering;
     permalink;
+    branding;
     // The extended configuration can be used by third-party components or extensions
     // to add custom attributes to the GirafeConfig.
     extendedConfig;
@@ -81,6 +82,7 @@ class GirafeConfig {
         this.api = this.initApiConfig(config);
         this.filtering = this.initConfigFiltering(config);
         this.permalink = this.initPermalinkConfig(config);
+        this.branding = this.initBrandingConfig(config);
         try {
             this.search = this.initConfigSearch(config);
         }
@@ -510,5 +512,17 @@ class GirafeConfig {
             sanitizeConfig: defaultPermalinkSanitizeConfig
         });
     }
+    initBrandingConfig(config) {
+        // Logos, title and description fall back to GeoGirafe defaults if not specified
+        return {
+            logo: config.branding?.logo ?? 'images/logo/horizontal_black.svg',
+            logoDarkMode: config.branding?.logoDarkMode ?? config.branding?.logo ?? 'images/logo/horizontal_white.svg',
+            appTitle: config.branding?.appTitle ?? 'GeoGirafe',
+            showAppTitleInHeader: config.branding?.showAppTitleInHeader ?? false,
+            description: config.branding?.description ?? 'GeoGirafe is a flexible application to build online geoportals.',
+            // The prototype banner is shown by default
+            prototypeBanner: config.branding?.prototypeBanner ?? true
+        };
+    }
 }
 export default GirafeConfig;