@geotrekce/geotrek-rando-widget 0.0.4 → 0.0.5

package/dist/collection/components/grw-poi-detail/grw-poi-detail.css

@@ -1,7 +1,9 @@
 :host {
   display: flex;
   flex-direction: column;
-  padding: 0px 8px 8px 8px;
+}
+:host a {
+  color: var(--color-primary);
 }
 
 .poi-img {
@@ -12,17 +14,16 @@
   border-radius: 8px;
 }
 
-.poi-right-container {
+.poi-sub-container {
   display: flex;
   flex-direction: column;
-  padding: 8px;
 }
 
 .poi-name {
   color: var(--color-primary);
   font-size: 24px;
   font-weight: bold;
-  padding: 0px 0px 8px 0px;
+  padding: 12px 0px;
 }
 
 .poi-description {

package/dist/collection/components/grw-poi-detail/grw-poi-detail.js

@@ -4,7 +4,7 @@ export class GrwPoiDetail {
     return (h(Host, null,
       this.poi.attachments && this.poi.attachments[0] && this.poi.attachments[0].thumbnail && (h("div", { class: "poi-img" },
         h("img", { src: this.poi.attachments[0].thumbnail, loading: "lazy" }))),
-      h("div", { class: "poi-right-container" },
+      h("div", { class: "poi-sub-container" },
         h("div", { class: "poi-name" }, this.poi.name),
         h("div", { class: "poi-description", innerHTML: this.poi.description }))));
   }

package/dist/collection/components/grw-sensitive-area-detail/grw-sensitive-area-detail.css

@@ -1,16 +1,39 @@
 :host {
   display: flex;
   flex-direction: column;
-  padding: 0px 8px 8px 8px;
+}
+:host a {
+  color: var(--color-primary);
 }
 
-.sensitive-area-name {
+.sensitive-area-title {
   color: var(--color-primary);
   font-size: 24px;
-  font-weight: bold;
-  padding: 0px 0px 8px 0px;
+  padding: 12px 0px;
 }
 
 .sensitive-area-description {
   font-size: 16px;
+}
+
+.sensitive-area-period-container .sensitive-area-period-title,
+.sensitive-area-period-container .sensitive-area-practice-title,
+.sensitive-area-period-container .sensitive-area-contact-title,
+.sensitive-area-practice-container .sensitive-area-period-title,
+.sensitive-area-practice-container .sensitive-area-practice-title,
+.sensitive-area-practice-container .sensitive-area-contact-title,
+.sensitive-area-contact-container .sensitive-area-period-title,
+.sensitive-area-contact-container .sensitive-area-practice-title,
+.sensitive-area-contact-container .sensitive-area-contact-title {
+  color: var(--color-primary);
+  font-size: 24px;
+  padding: 12px 0px;
+}
+.sensitive-area-period-container .sensitive-area-period-values,
+.sensitive-area-period-container .sensitive-area-practice-values,
+.sensitive-area-practice-container .sensitive-area-period-values,
+.sensitive-area-practice-container .sensitive-area-practice-values,
+.sensitive-area-contact-container .sensitive-area-period-values,
+.sensitive-area-contact-container .sensitive-area-practice-values {
+  display: flex;
 }

package/dist/collection/components/grw-sensitive-area-detail/grw-sensitive-area-detail.js

@@ -1,9 +1,23 @@
 import { Component, Host, h, Prop } from '@stencil/core';
+import state from 'store/store';
 export class GrwSensitiveAreaDetail {
   render() {
     return (h(Host, null,
-      h("div", { class: "sensitive-area-name" }, this.sensitiveArea.name),
-      h("div", { class: "sensitive-area-description", innerHTML: this.sensitiveArea.description })));
+      h("div", { class: "sensitive-area-title" }, this.sensitiveArea.name),
+      h("div", { class: "sensitive-area-description", innerHTML: this.sensitiveArea.description }),
+      this.sensitiveArea.practices && this.sensitiveArea.practices.length > 0 && (h("div", { class: "sensitive-area-practice-container" },
+        h("div", { class: "sensitive-area-practice-title" }, "Domaines d'activit\u00E9s concern\u00E9s :"),
+        h("div", { class: "sensitive-area-practice-values" }, this.sensitiveArea.practices.map((practice, index) => (h("div", { innerHTML: `${state.practices.find(statePractice => statePractice.id === practice).name.toUpperCase()}${index + 1 !== this.sensitiveArea.practices.length ? ' - ' : ''}` })))))),
+      this.sensitiveArea.period && this.sensitiveArea.period.length > 0 && (h("div", { class: "sensitive-area-period-container" },
+        h("div", { class: "sensitive-area-period-title" }, "P\u00E9riodes de sensibilit\u00E9"),
+        h("div", { class: "sensitive-area-period-values" }, this.sensitiveArea.period.map((month, index) => {
+          if (month) {
+            return (h("div", { innerHTML: `${new Date(0, index + 1, 0).toLocaleDateString('fr', { month: 'long' }).toUpperCase()}${this.sensitiveArea.period.slice(index + 1).find(month => month) ? ' - ' : ''}` }));
+          }
+        })))),
+      h("div", { class: "sensitive-area-contact-container" },
+        h("div", { class: "sensitive-area-contact-title" }, "Contact"),
+        h("div", { innerHTML: this.sensitiveArea.contact, class: "sensitive-area-contact-value" }))));
   }
   static get is() { return "grw-sensitive-area-detail"; }
   static get encapsulation() { return "shadow"; }
@@ -19,7 +33,7 @@ export class GrwSensitiveAreaDetail {
       "mutable": false,
       "complexType": {
         "original": "SensitiveArea",
-        "resolved": "{ id: number; geometry: Geometry; name: string; description: string; }",
+        "resolved": "{ id: number; geometry: Geometry; name: string; description: string; contact: string; info_url: string; period: boolean[]; practices: number[]; }",
         "references": {
           "SensitiveArea": {
             "location": "import",

package/dist/collection/components/grw-trek-card/grw-trek-card.js

@@ -73,7 +73,7 @@ export class GrwTrekCard {
       "mutable": false,
       "complexType": {
         "original": "Trek",
-        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; }",
+        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; arrival?: string; altimetric_profile?: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; ambiance?: string; access?: string; public_transport?: string; advice?: string; advised_parking?: string; gear?: string; labels?: number[]; points_reference?: MultiPoint; source?: number[]; structure?: number; disabled_infrastructure?: string; accessibilities?: number[]; accessibility_level?: number; accessibility_slope?: string; accessibility_width?: string; accessibility_signage?: string; accessibility_covering?: string; accessibility_exposure?: string; accessibility_advice?: string; }",
         "references": {
           "Trek": {
             "location": "import",

package/dist/collection/components/grw-trek-detail/grw-trek-detail.css

@@ -65,7 +65,10 @@
 .trek-detail-container .downloads-container .download-title {
   color: var(--color-primary);
   font-size: 18px;
-  margin-bottom: 18px;
+  margin-bottom: 12px;
+}
+.trek-detail-container .downloads-container .links-container {
+  display: flex;
 }
 .trek-detail-container .downloads-container .links-container a {
   background-color: var(--color-primary);
@@ -80,14 +83,135 @@
 .trek-detail-container .downloads-container .links-container a:hover {
   background-color: var(--color-primary-shade);
 }
-.trek-detail-container .description {
+.trek-detail-container .themes-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+  padding: 0px 24px 24px 24px;
+}
+.trek-detail-container .themes-container .theme {
+  background-color: var(--color-primary-tint);
+  color: #ffffff;
+  border-radius: 8px;
+  padding: 8px;
+  margin: 0px 8px 8px 0px;
+}
+.trek-detail-container .ambiance,
+.trek-detail-container .description-teaser,
+.trek-detail-container .description-container,
+.trek-detail-container .altimetric-profile-container,
+.trek-detail-container .access-container,
+.trek-detail-container .public-transport-container,
+.trek-detail-container .advice-container,
+.trek-detail-container .advised-parking-container,
+.trek-detail-container .gear-container,
+.trek-detail-container .pois-container,
+.trek-detail-container .sensitive-areas-container,
+.trek-detail-container .information-desks-container,
+.trek-detail-container .source-container,
+.trek-detail-container .accessibilities-container {
   padding: 0px 24px 24px 24px;
 }
+.trek-detail-container .ambiance a,
+.trek-detail-container .description-teaser a,
+.trek-detail-container .description-container a,
+.trek-detail-container .altimetric-profile-container a,
+.trek-detail-container .access-container a,
+.trek-detail-container .public-transport-container a,
+.trek-detail-container .advice-container a,
+.trek-detail-container .advised-parking-container a,
+.trek-detail-container .gear-container a,
+.trek-detail-container .pois-container a,
+.trek-detail-container .sensitive-areas-container a,
+.trek-detail-container .information-desks-container a,
+.trek-detail-container .source-container a,
+.trek-detail-container .accessibilities-container a {
+  color: var(--color-primary);
+}
+.trek-detail-container .description-title,
+.trek-detail-container .altimetric-profile-title,
+.trek-detail-container .access-title,
+.trek-detail-container .public-transport-title,
+.trek-detail-container .advice-title,
+.trek-detail-container .advised-parking-title,
+.trek-detail-container .gear-title,
 .trek-detail-container .pois-title,
 .trek-detail-container .sensitive-areas-title,
-.trek-detail-container .information-desks-title {
+.trek-detail-container .information-desks-title,
+.trek-detail-container .source-title,
+.trek-detail-container .accessibilities-title {
   color: var(--color-primary);
   font-size: 36px;
   font-weight: bold;
-  padding: 16px;
+  margin: 12px 0px;
+}
+
+.label-container .label-sub-container {
+  display: flex;
+  align-items: center;
+}
+.label-container .label-sub-container img {
+  width: 26px;
+  margin-right: 16px;
+}
+.label-container .label-sub-container .label-name {
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+  padding: 12px 0px;
+}
+
+.source-container .source-sub-container {
+  display: flex;
+  align-items: center;
+}
+.source-container .source-sub-container img {
+  width: 26px;
+  margin-right: 16px;
+}
+.source-container .source-sub-container .source-name {
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+  padding: 12px 0px;
+}
+
+.departure-container,
+.arrival-container {
+  display: flex;
+  align-items: center;
+  padding: 0px 24px 24px 24px;
+}
+.departure-container .departure-title,
+.departure-container .arrival-title,
+.arrival-container .departure-title,
+.arrival-container .arrival-title {
+  color: var(--color-primary);
+  font-weight: bold;
+}
+
+.accessibilities-container .accessibilities-content-container {
+  padding: 12px 0px 0px 0px;
+  display: flex;
+}
+.accessibilities-container .accessibilities-content-container .accessibility-content-container {
+  display: flex;
+  align-items: center;
+  margin: 0px 8px 8px 0px;
+}
+.accessibilities-container .accessibilities-content-container .accessibility-content-container img {
+  margin-right: 16px;
+  width: 26px;
+}
+.accessibilities-container .accessibility-level-title,
+.accessibilities-container .accessibility-slope-title,
+.accessibilities-container .accessibility-width-title,
+.accessibilities-container .accessibility-signage-title,
+.accessibilities-container .accessibility-covering-title,
+.accessibilities-container .accessibility-exposure-title,
+.accessibilities-container .accessibility-advice-title {
+  color: var(--color-primary);
+  font-size: 24px;
+  padding: 12px 0px;
 }

package/dist/collection/components/grw-trek-detail/grw-trek-detail.js

@@ -16,6 +16,11 @@ export class GrwTrekDetail {
       this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
       this.route = state.routes.find(route => route.id === this.currentTrek.route);
       this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+      this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
+      this.labels = state.labels.filter(label => this.currentTrek.labels.includes(label.id));
+      this.sources = state.sources.filter(source => this.currentTrek.source.includes(source.id));
+      this.accessibilities = state.accessibilities.filter(accessibility => this.currentTrek.accessibilities.includes(accessibility.id));
+      this.accessibilityLevel = state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
     }
     onChange('currentTrek', () => {
       this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -23,6 +28,9 @@ export class GrwTrekDetail {
         this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
         this.route = state.routes.find(route => route.id === this.currentTrek.route);
         this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+        this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
+        this.labels = state.labels.filter(label => this.currentTrek.labels.includes(label.id));
+        this.sources = state.sources.filter(source => this.currentTrek.source.includes(source.id));
       }
     });
   }
@@ -59,16 +67,84 @@ export class GrwTrekDetail {
           h("a", { href: `${this.currentTrek.gpx}` }, "GPX"),
           h("a", { href: `${this.currentTrek.kml}` }, "KML"),
           h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))),
-      h("div", { class: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser }),
+      this.themes.length > 0 && (h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label))))),
+      this.currentTrek.description_teaser && h("div", { class: "description-teaser", innerHTML: this.currentTrek.description_teaser }),
+      this.currentTrek.ambiance && h("div", { class: "ambiance", innerHTML: this.currentTrek.ambiance }),
+      this.currentTrek.description && (h("div", { class: "description-container" },
+        h("div", { class: "description-title" }, "Description"),
+        h("div", { class: "description", innerHTML: this.currentTrek.description }))),
+      this.currentTrek.departure && (h("div", { class: "departure-container" },
+        h("div", { class: "departure-title" }, "D\u00E9part :\u00A0"),
+        h("div", { innerHTML: this.currentTrek.departure }))),
+      this.currentTrek.arrival && (h("div", { class: "arrival-container" },
+        h("div", { class: "arrival-title" }, "Arriv\u00E9e :\u00A0"),
+        h("div", { innerHTML: this.currentTrek.arrival }))),
+      this.currentTrek.altimetric_profile && (h("div", { class: "altimetric-profile-container" },
+        h("div", { class: "altimetric-profile-title" }, "Profil altim\u00E9trique"),
+        h("img", { src: this.currentTrek.altimetric_profile }))),
+      this.currentTrek.access && (h("div", { class: "access-container" },
+        h("div", { class: "access-title" }, "Acc\u00E8s routier"),
+        h("div", { class: "access", innerHTML: this.currentTrek.access }))),
+      this.currentTrek.public_transport && (h("div", { class: "public-transport-container" },
+        h("div", { class: "public-transport-title" }, "Transport"),
+        h("div", { class: "public-transport", innerHTML: this.currentTrek.public_transport }))),
+      (this.currentTrek.advice || this.labels.length > 0) && (h("div", { class: "advice-container" },
+        h("div", { class: "advice-title" }, "Recommandations"),
+        this.currentTrek.advice && h("div", { class: "advice", innerHTML: this.currentTrek.advice }),
+        this.labels.map(label => (h("div", { class: "label-container" },
+          h("div", { class: "label-sub-container" },
+            label.pictogram && h("img", { src: label.pictogram }),
+            h("div", { class: "label-name", innerHTML: label.name })),
+          h("div", { class: "label-advice", innerHTML: label.advice })))))),
+      this.currentTrek.advised_parking && (h("div", { class: "advised-parking-container" },
+        h("div", { class: "advised-parking-title" }, "Parking conseill\u00E9"),
+        h("div", { class: "advised_parking", innerHTML: this.currentTrek.advised_parking }))),
+      this.currentTrek.gear && (h("div", { class: "gear-container" },
+        h("div", { class: "gear-title" }, "\u00C9quipements"),
+        h("div", { class: "gear", innerHTML: this.currentTrek.gear }))),
       state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", { class: "sensitive-areas-container" },
-        h("div", { class: "sensitive-areas-title" }, "Zones sensibles"),
+        h("div", { class: "sensitive-areas-title" }, "Zones de sensibilit\u00E9 environnementale"),
         state.currentSensitiveAreas.map(sensitiveArea => (h("grw-sensitive-area-detail", { sensitiveArea: sensitiveArea }))))),
       state.currentInformationDesks && state.currentInformationDesks.length > 0 && (h("div", { class: "information-desks-container" },
         h("div", { class: "information-desks-title" }, "Lieux de renseignement"),
         state.currentInformationDesks.map(informationDesk => (h("grw-information-desk-detail", { informationDesk: informationDesk }))))),
+      h("div", { class: "accessibilities-container" },
+        h("div", { class: "accessibilities-title" }, "Accessibilit\u00E9"),
+        this.currentTrek.disabled_infrastructure && h("div", { innerHTML: this.currentTrek.disabled_infrastructure }),
+        h("div", { class: "accessibilities-content-container" }, this.accessibilities.map(accessibility => (h("div", { class: "accessibility-content-container" },
+          h("img", { src: accessibility.pictogram }),
+          h("div", { innerHTML: accessibility.name }))))),
+        this.currentTrek.accessibility_level && (h("div", { class: "accessibility-level-container" },
+          h("div", { class: "accessibility-level-title" }, "Niveau d'accessibilit\u00E9"),
+          h("div", { innerHTML: this.accessibilityLevel.name }))),
+        this.currentTrek.accessibility_slope && (h("div", { class: "accessibility-slope-container" },
+          h("div", { class: "accessibility-slope-title" }, "Pente"),
+          h("div", { innerHTML: this.currentTrek.accessibility_slope }))),
+        this.currentTrek.accessibility_width && (h("div", { class: "accessibility-width-container" },
+          h("div", { class: "accessibility-width-title" }, "Largeur"),
+          h("div", { innerHTML: this.currentTrek.accessibility_width }))),
+        this.currentTrek.accessibility_signage && (h("div", { class: "accessibility-signage-container" },
+          h("div", { class: "accessibility-signage-title" }, "Pente"),
+          h("div", { innerHTML: this.currentTrek.accessibility_signage }))),
+        this.currentTrek.accessibility_covering && (h("div", { class: "accessibility-covering-container" },
+          h("div", { class: "accessibility-covering-title" }, "Rev\u00EAtement"),
+          h("div", { innerHTML: this.currentTrek.accessibility_covering }))),
+        this.currentTrek.accessibility_exposure && (h("div", { class: "accessibility-exposure-container" },
+          h("div", { class: "accessibility-exposure-title" }, "Exposition"),
+          h("div", { innerHTML: this.currentTrek.accessibility_exposure }))),
+        this.currentTrek.accessibility_advice && (h("div", { class: "accessibility-advice-container" },
+          h("div", { class: "accessibility-advice-title" }, "Conseils"),
+          h("div", { innerHTML: this.currentTrek.accessibility_advice })))),
       state.currentPois && state.currentPois.length > 0 && (h("div", { class: "pois-container" },
         h("div", { class: "pois-title" }, "Points d'int\u00E9r\u00EAts"),
-        state.currentPois.map(poi => (h("grw-poi-detail", { poi: poi })))))))));
+        state.currentPois.map(poi => (h("grw-poi-detail", { poi: poi }))))),
+      this.currentTrek.source && this.currentTrek.source.length > 0 && (h("div", { class: "source-container" },
+        h("div", { class: "source-title" }, "Sources"),
+        this.sources.map(source => (h("div", { class: "source-sub-container" },
+          source.pictogram && h("img", { src: source.pictogram }),
+          h("div", null,
+            h("div", { class: "source-name", innerHTML: source.name }),
+            h("a", { class: "source-advice", innerHTML: source.website })))))))))));
   }
   static get is() { return "grw-trek-detail"; }
   static get encapsulation() { return "shadow"; }
@@ -84,7 +160,7 @@ export class GrwTrekDetail {
       "mutable": false,
       "complexType": {
         "original": "Trek",
-        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; }",
+        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; arrival?: string; altimetric_profile?: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; ambiance?: string; access?: string; public_transport?: string; advice?: string; advised_parking?: string; gear?: string; labels?: number[]; points_reference?: MultiPoint; source?: number[]; structure?: number; disabled_infrastructure?: string; accessibilities?: number[]; accessibility_level?: number; accessibility_slope?: string; accessibility_width?: string; accessibility_signage?: string; accessibility_covering?: string; accessibility_exposure?: string; accessibility_advice?: string; }",
         "references": {
           "Trek": {
             "location": "import",
@@ -155,9 +231,14 @@ export class GrwTrekDetail {
     }
   }; }
   static get states() { return {
-    "currentTrek": {},
     "difficulty": {},
     "route": {},
-    "practice": {}
+    "practice": {},
+    "themes": {},
+    "labels": {},
+    "sources": {},
+    "accessibilities": {},
+    "accessibilityLevel": {},
+    "currentTrek": {}
   }; }
 }

package/dist/collection/store/grw-trek-provider.js

@@ -13,13 +13,17 @@ export class GrwTrekProvider {
     requests.push(!state.themes ? fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
     return Promise.all([
       ...requests,
-      fetch(`${this.api}sensitivearea/?language=${this.language}&trek=${this.trekId}&fields=id,geometry,name,description`).catch(() => new Response('null')),
+      fetch(`${this.api}sensitivearea/?language=${this.language}&published=true&trek=${this.trekId}&fields=id,geometry,name,description,contact,info_url,period,practices`).catch(() => new Response('null')),
+      fetch(`${this.api}label/?language=${this.language}&fields=id,name,advice,pictogram`),
+      fetch(`${this.api}source/?language=${this.language}&fields=id,name,website,pictogram`),
+      fetch(`${this.api}trek_accessibility/?language=${this.language}&fields=id,name,pictogram`),
+      fetch(`${this.api}trek_accessibility_level/?language=${this.language}&fields=id,name`),
       fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,type_label,type_pictogram,url,published,geometry&page_size=999`),
       fetch(`${this.api}informationdesk/?language=${this.language}&near_trek=${this.trekId}&fields=id,name,description,type,phone,email,website,municipality,postal_code,street,photo_url,latitude,longitude&page_size=999`),
-      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure`),
+      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure,arrival,altimetric_profile,ambiance,access,public_transport,advice,advised_parking,gear,labels,source,points_reference,disabled_infrastructure,accessibility_level,accessibility_slope,accessibility_width,accessibility_signage,accessibility_covering,accessibility_exposure,accessibility_advice,accessibilities`),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, themes, sensitiveAreas, pois, informationDesks, trek]) => {
+      .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, pois, informationDesks, trek]) => {
       if (difficulties) {
         state.difficulties = difficulties.results;
       }
@@ -35,6 +39,10 @@ export class GrwTrekProvider {
       if (sensitiveAreas) {
         state.currentSensitiveAreas = sensitiveAreas.results;
       }
+      state.labels = labels.results;
+      state.sources = sources.results;
+      state.accessibilities = accessibilities.results;
+      state.accessibilitiesLevel = accessibilitiesLevel.results;
       state.currentPois = pois.results;
       state.currentInformationDesks = informationDesks.results;
       state.currentTrek = trek;

package/dist/collection/store/grw-treks-provider.js

@@ -6,7 +6,7 @@ export class GrwTreksProvider {
   }
   componentWillLoad() {
     state.api = this.api;
-    let treksRequest = `${this.api}trek/?language=${this.language}`;
+    let treksRequest = `${this.api}trek/?language=${this.language}&published=true`;
     this.inBbox && (treksRequest += `&in_bbox=${this.inBbox}`);
     this.cities && (treksRequest += `&cities=${this.cities}`);
     this.districts && (treksRequest += `&districts=${this.districts}`);

package/dist/collection/store/store.js

@@ -9,8 +9,12 @@ const { state, onChange } = createStore({
   themes: [],
   durations: [],
   currentSensitiveAreas: null,
-  currentPois: null,
+  labels: null,
+  sources: null,
+  accessibilities: null,
+  accessibilitiesLevel: null,
   currentTrek: null,
+  currentPois: null,
   currentInformationDesks: null,
 });
 export { onChange };

package/dist/components/grw-app.js

@@ -21,11 +21,11 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.showTrek = false;
-    this.showMap = false;
+    this.showTreksMap = false;
+    this.showTrekMap = false;
     this.showFilters = false;
     this.isLargeView = false;
     this.language = 'fr';
-    this.appName = 'Geotrek Rando Widget';
     this.colorPrimary = '#6b0030';
     this.colorPrimaryShade = '#4a0021';
     this.colorPrimaryTint = '#974c6e';
@@ -34,11 +34,15 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
+    this.handlePopStateBind = this.handlePopState.bind(this);
     this.largeViewSize = 1024;
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
     this.showTrek = !this.showTrek;
+    const url = new URL(window.location.toString());
+    url.searchParams.set('trek', this.currentTrekId.toString());
+    window.history.pushState({}, '', url);
   }
   onWindowResize() {
     this.handleView();
@@ -48,20 +52,44 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     this.handleView();
+    window.addEventListener('popstate', this.handlePopStateBind, false);
   }
   onTrekDetailsClose() {
+    this.forwardTrekId = this.currentTrekId;
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
   handleView() {
     this.isLargeView = this.element.getBoundingClientRect().width >= this.largeViewSize;
-    this.showMap = this.isLargeView;
+    this.showTreksMap = this.isLargeView;
+    this.showTrekMap = this.isLargeView;
   }
   handleFilters() {
     this.showFilters = !this.showFilters;
   }
+  handlePopState() {
+    if (this.showTrek) {
+      this.onTrekDetailsClose();
+    }
+    else if (this.forwardTrekId) {
+      this.currentTrekId = this.forwardTrekId;
+      this.forwardTrekId = null;
+      this.showTrek = !this.showTrek;
+    }
+  }
+  handleShowMap() {
+    if (this.currentTrekId) {
+      this.showTrekMap = !this.showTrekMap;
+    }
+    else {
+      this.showTreksMap = !this.showTreksMap;
+    }
+  }
+  disconnectedCallback() {
+    window.removeEventListener('popstate', this.handlePopStateBind);
+  }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }), this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }), h("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")), !this.showTrek && this.showFilters && (h("div", { class: "options-container" }, h("div", { class: "filters-container" }, h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`), h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"), h("div", null, h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))), h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))), h("div", { class: "attribution-container" }, h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))), h("div", { class: "content-container" }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: this.showMap ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }), this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }), h("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (h("div", { onClick: () => window.history.back(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")), !this.showTrek && this.showFilters && (h("div", { class: "options-container" }, h("div", { class: "filters-container" }, h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`), h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"), h("div", null, h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })), h("div", { class: "filter-margin-top" }, h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))), h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))), h("div", { class: "attribution-container" }, h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))), h("div", { class: "content-container" }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: (this.showTreksMap && !this.showTrek) || (this.showTrekMap && this.showTrek) ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("div", { onClick: () => this.handleShowMap() }, this.showTreksMap || this.showTrekMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -79,7 +107,6 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "portals": [1],
     "routes": [1],
     "practices": [1],
-    "appName": [1, "app-name"],
     "urlLayer": [1, "url-layer"],
     "center": [1],
     "zoom": [8],
@@ -93,7 +120,8 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "colorSensitiveArea": [1, "color-sensitive-area"],
     "colorPoiIcon": [1, "color-poi-icon"],
     "showTrek": [32],
-    "showMap": [32],
+    "showTreksMap": [32],
+    "showTrekMap": [32],
     "showFilters": [32],
     "isLargeView": [32],
     "currentTrekId": [32]

package/dist/components/grw-information-desk-detail2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const grwInformationDeskDetailCss = ":host{display:flex;flex-direction:column;padding:0px 8px 8px 8px}.information-desk-img{width:180px}.information-desk-img img{width:180px;border-radius:8px}.information-desk-right-container{display:flex;flex-direction:column;padding:8px}.information-desk-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:0px 0px 8px 0px}.information-desk-description{font-size:16px}";
+const grwInformationDeskDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.information-desk-img{width:180px}.information-desk-img img{width:180px;border-radius:8px}.information-desk-sub-container{display:flex;flex-direction:column}.information-desk-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:12px 0px}.information-desk-description{font-size:16px}";
 
 const GrwInformationDeskDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -9,7 +9,7 @@ const GrwInformationDeskDetail = /*@__PURE__*/ proxyCustomElement(class extends
     this.__attachShadow();
   }
   render() {
-    return (h(Host, null, this.informationDesk.photo_url && (h("div", { class: "information-desk-img" }, h("img", { src: this.informationDesk.photo_url, loading: "lazy" }))), h("div", { class: "information-desk-right-container" }, this.informationDesk.name && h("div", { class: "information-desk-name" }, this.informationDesk.name), this.informationDesk.description && h("div", { class: "information-desk-description", innerHTML: this.informationDesk.description }), this.informationDesk.postal_code ||
+    return (h(Host, null, this.informationDesk.photo_url && (h("div", { class: "information-desk-img" }, h("img", { src: this.informationDesk.photo_url, loading: "lazy" }))), h("div", { class: "information-desk-sub-container" }, this.informationDesk.name && h("div", { class: "information-desk-name" }, this.informationDesk.name), this.informationDesk.description && h("div", { class: "information-desk-description", innerHTML: this.informationDesk.description }), this.informationDesk.postal_code ||
       this.informationDesk.municipality ||
       (this.informationDesk.street && (h("div", null, this.informationDesk.postal_code, ` ${this.informationDesk.municipality}`, ` ${this.informationDesk.street}`))), this.informationDesk.phone && (h("div", null, h("a", { href: `tel:${this.informationDesk.phone}` }, this.informationDesk.phone))), this.informationDesk.email && (h("div", null, h("a", { href: `mailto:${this.informationDesk.email}` }, this.informationDesk.email))), this.informationDesk.website && (h("div", null, h("a", { href: `${this.informationDesk.website}` }, this.informationDesk.website))))));
   }