@geotrekce/geotrek-rando-widget 0.0.3 → 0.0.6

package/dist/collection/components/grw-treks-list/grw-treks-list.js

@@ -5,19 +5,26 @@ export class GrwTreksList {
     this.treksToDisplay = [];
     this.colorPrimary = '#6b0030';
     this.colorPrimaryTint = '#974c6e';
+    this.isLargeView = false;
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
     this.step = 10;
   }
   componentWillLoad() {
-    this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
-    onChange('treks', () => {
-      this.treksToDisplay = state.treks.slice(0, this.step);
+    onChange('currentTreks', () => {
+      this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+      this.element.scroll({ top: 0 });
+      this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
+    });
+    onChange('treksWithinBounds', () => {
+      this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+      this.element.scroll({ top: 0 });
+      this.treksToDisplay = [...state.treksWithinBounds.slice(0, this.step)];
     });
   }
   handleInfiniteScroll(event) {
     if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
-      if (this.treksToDisplay.length < state.treks.length) {
-        this.treksToDisplay = state.treks.slice(0, this.treksToDisplay.length + this.step >= state.treks.length ? state.treks.length : this.treksToDisplay.length + this.step);
+      if (this.treksToDisplay.length < state.treksWithinBounds.length) {
+        this.treksToDisplay = state.treksWithinBounds.slice(0, this.treksToDisplay.length + this.step >= state.treksWithinBounds.length ? state.treksWithinBounds.length : this.treksToDisplay.length + this.step);
       }
       else {
         this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
@@ -25,7 +32,9 @@ export class GrwTreksList {
     }
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (h("grw-trek-card", { trek: trek, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
+      h("div", { class: "current-treks-length" }, `${state.treksWithinBounds.length} résultat${state.treksWithinBounds.length > 1 ? 's' : ''}`),
+      h("div", { class: "current-treks-container" }, this.treksToDisplay.map(trek => (h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint }))))));
   }
   static get is() { return "grw-treks-list"; }
   static get encapsulation() { return "shadow"; }
@@ -71,6 +80,24 @@ export class GrwTreksList {
       "attribute": "color-primary-tint",
       "reflect": false,
       "defaultValue": "'#974c6e'"
+    },
+    "isLargeView": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-large-view",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -6,21 +6,43 @@ export class GrwTrekProvider {
   }
   componentWillLoad() {
     state.api = this.api;
+    const requests = [];
+    requests.push(!state.difficulties ? fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
+    requests.push(!state.routes ? fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`) : new Response('null'));
+    requests.push(!state.practices ? fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`) : new Response('null'));
+    requests.push(!state.themes ? fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
     return Promise.all([
-      fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
-      fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
-      fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
-      fetch(`${this.api}sensitivearea/?language=${this.language}&trek=${this.trekId}&fields=id,geometry,name,description`).catch(() => new Response('[]')),
+      ...requests,
+      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,route,geometry,gpx,kml,pdf,parking_location`),
+      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, sensitiveAreas, pois, informationDesks, trek]) => {
-      state.difficulties = difficulties.results;
-      state.routes = routes.results;
-      state.practices = practices.results;
-      state.currentSensitiveAreas = sensitiveAreas.results;
+      .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, pois, informationDesks, trek]) => {
+      if (difficulties) {
+        state.difficulties = difficulties.results;
+      }
+      if (routes) {
+        state.routes = routes.results;
+      }
+      if (practices) {
+        state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
+      }
+      if (themes) {
+        state.themes = themes.results;
+      }
+      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}`);
@@ -15,19 +15,29 @@ export class GrwTreksProvider {
     this.portals && (treksRequest += `&portals=${this.portals}`);
     this.routes && (treksRequest += `&routes=${this.routes}`);
     this.practices && (treksRequest += `&practices=${this.practices}`);
-    treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,route,departure_geom&page_size=999`;
+    treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,departure,departure_geom&page_size=999`;
     return Promise.all([
       fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
       fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
       fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
+      fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`),
       fetch(treksRequest),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, treks]) => {
+      .then(([difficulties, routes, practices, themes, treks]) => {
       state.difficulties = difficulties.results;
       state.routes = routes.results;
-      state.practices = practices.results;
+      state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
+      state.themes = themes.results;
+      state.durations = [
+        { id: 1, name: '0 - 1h', minValue: 0, maxValue: 1, selected: false },
+        { id: 2, name: '1 - 2h', minValue: 1, maxValue: 2, selected: false },
+        { id: 3, name: '2 - 5h', minValue: 2, maxValue: 5, selected: false },
+        { id: 4, name: '5 - 10h', minValue: 5, maxValue: 10, selected: false },
+      ];
       state.treks = treks.results;
+      state.currentTreks = treks.results;
+      state.treksWithinBounds = treks.results;
     });
   }
   render() {

package/dist/collection/store/store.js

@@ -2,12 +2,21 @@ import { createStore } from '@stencil/store';
 const { state, onChange } = createStore({
   api: '',
   treks: [],
+  currentTreks: [],
+  treksWithinBounds: [],
+  currentMapTreksBounds: null,
   difficulties: [],
   routes: [],
   practices: [],
+  themes: [],
+  durations: [],
   currentSensitiveAreas: null,
-  currentPois: null,
+  labels: null,
+  sources: null,
+  accessibilities: null,
+  accessibilitiesLevel: null,
   currentTrek: null,
+  currentPois: null,
   currentInformationDesks: null,
 });
 export { onChange };

package/dist/collection/stories/App.js

@@ -9,7 +9,6 @@ export const createApp = ({
   portals,
   routes,
   practices,
-  appName,
   urlLayer,
   attribution,
   colorPrimary,
@@ -24,15 +23,14 @@ export const createApp = ({
   const app = document.createElement('grw-app');
   app.setAttribute('api', api);
   app.setAttribute('language', language);
-  app.setAttribute('in-bbox', inBbox);
-  app.setAttribute('cities', cities);
-  app.setAttribute('districts', districts);
-  app.setAttribute('structures', structures);
-  app.setAttribute('themes', themes);
-  app.setAttribute('portals', portals);
-  app.setAttribute('routes', routes);
-  app.setAttribute('practices', practices);
-  app.setAttribute('app-name', appName);
+  inBbox && app.setAttribute('in-bbox', inBbox);
+  cities && app.setAttribute('cities', cities);
+  districts && app.setAttribute('districts', districts);
+  structures && app.setAttribute('structures', structures);
+  themes && app.setAttribute('themes', themes);
+  portals && app.setAttribute('portals', portals);
+  routes && app.setAttribute('routes', routes);
+  practices && app.setAttribute('practices', practices);
   app.setAttribute('url-layer', urlLayer);
   app.setAttribute('attribution', attribution);
   app.setAttribute('color-primary', colorPrimary);

package/dist/collection/stories/App.stories.js

@@ -5,9 +5,11 @@ export default {
   argTypes: {
     urlLayer: {
       control: 'select',
-      options: ['openstreetmap'],
+      options: ['openstreetmap', 'planignv2'],
       mapping: {
         openstreetmap: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        planignv2:
+          'https://wxs.ign.fr/cartes/geoportail/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/png&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
       },
     },
   },
@@ -30,9 +32,8 @@ App.args = {
   portals: '',
   routes: '',
   practices: '',
-  appName: 'Geotrek Rando Widget',
   urlLayer: 'openstreetmap',
-  attribution: '© OpenStreetMap',
+  attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
   colorPrimary: '#6b0030',
   colorPrimaryShade: '4a0021',
   colorPrimaryTint: '#974c6e',

package/dist/collection/stories/TrekMap.stories.js

@@ -5,9 +5,10 @@ export default {
   argTypes: {
     urlLayer: {
       control: 'select',
-      options: ['openstreetmap'],
+      options: ['openstreetmap', 'planignv2'],
       mapping: {
         openstreetmap: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        planignv2: 'https://wxs.ign.fr/cartes/geoportail/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/png&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
       },
     },
   },
@@ -25,7 +26,7 @@ TrekMap.args = {
   urlLayer: 'openstreetmap',
   center: '46.50761080179829, 5.927117067721017',
   zoom: 8,
-  attribution: '© OpenStreetMap',
+  attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
   colorTrekLine: '#6b0030',
   colorDepartureIcon: '#006b3b',
   colorArrivalIcon: '#85003b',

package/dist/collection/stories/TreksList.js

@@ -3,14 +3,14 @@ export const createTreksList = ({ api, language, inBbox, cities, districts, stru
   const treks = document.createElement('grw-treks-provider');
   treks.setAttribute('api', api);
   treks.setAttribute('language', language);
-  treks.setAttribute('in-bbox', inBbox);
-  treks.setAttribute('cities', cities);
-  treks.setAttribute('districts', districts);
-  treks.setAttribute('structures', structures);
-  treks.setAttribute('themes', themes);
-  treks.setAttribute('portals', portals);
-  treks.setAttribute('routes', routes);
-  treks.setAttribute('practices', practices);
+  inBbox && treks.setAttribute('in-bbox', inBbox);
+  cities && treks.setAttribute('cities', cities);
+  districts && treks.setAttribute('districts', districts);
+  structures && treks.setAttribute('structures', structures);
+  themes && treks.setAttribute('themes', themes);
+  portals && treks.setAttribute('portals', portals);
+  routes && treks.setAttribute('routes', routes);
+  practices && treks.setAttribute('practices', practices);
   container.appendChild(treks);
   const list = document.createElement('grw-treks-list');
   list.setAttribute('color-primary', colorPrimary);

package/dist/collection/stories/TreksMap.stories.js

@@ -5,9 +5,10 @@ export default {
   argTypes: {
     urlLayer: {
       control: 'select',
-      options: ['openstreetmap'],
+      options: ['openstreetmap', 'planignv2'],
       mapping: {
         openstreetmap: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        planignv2: 'https://wxs.ign.fr/cartes/geoportail/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/png&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
       },
     },
   },
@@ -24,7 +25,7 @@ TreksMap.args = {
   urlLayer: 'openstreetmap',
   center: '46.50761080179829, 5.927117067721017',
   zoom: 8,
-  attribution: '© OpenStreetMap',
+  attribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
   colorPrimary: '#6b0030',
   colorPrimaryTint: '#974c6e',
 };

package/dist/components/grw-app.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as state } from './store.js';
+import { d as defineCustomElement$b } from './grw-filter2.js';
 import { d as defineCustomElement$a } from './grw-information-desk-detail2.js';
 import { d as defineCustomElement$9 } from './grw-map2.js';
 import { d as defineCustomElement$8 } from './grw-poi-detail2.js';
@@ -12,7 +13,7 @@ import { d as defineCustomElement$2 } from './grw-treks-provider2.js';
 
 const arrowBackImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="244 400 100 256 244 112" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/><line x1="120" y1="256" x2="412" y2="256" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`;
 
-const grwAppCss = ".app-container{position:relative;height:100%;max-height:100vh;font-family:\"Roboto\"}.header-container,.large-view-header-container{display:flex;align-items:center;background-color:var(--color-primary);height:64px}.header-container .title,.large-view-header-container .title{color:#ffffff;margin-left:24px}.header-container .arrow-back-icon,.large-view-header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg,.large-view-header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.loader-container,.large-view-loader-container{display:flex;justify-content:center;align-items:center;height:100%}.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.content-container{position:relative;display:flex;height:calc(100% - 64px)}.app-treks-list-container,.app-trek-detail-container,.large-view-app-treks-list-container,.large-view-app-trek-detail-container{height:100%}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button{cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;bottom:24px;width:100%;z-index:400;user-select:none}.map-visibility-button div{background-color:var(--color-primary);color:#ffffff;padding:12px;border-radius:24px;width:120px;text-align:center}.header-container .title{font-size:24px}.loader-container{position:absolute;width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}.app-map-container{position:relative;width:100%;position:absolute}.large-view-header-container .title{font-size:32px}.large-view-loader-container{position:relative;width:50%}.large-view-app-treks-list-container,.large-view-app-trek-detail-container{width:50%}.large-view-app-map-container{position:relative;width:50%}";
+const grwAppCss = ".app-container{position:relative;height:100%;max-height:100vh;font-family:\"Roboto\"}.header-container,.large-view-header-container{display:flex;align-items:center;background-color:var(--color-primary);height:64px}.header-container .arrow-back-icon,.large-view-header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg,.large-view-header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.header-container .handle-filters-button,.large-view-header-container .handle-filters-button{user-select:none;cursor:pointer;color:var(--color-primary);background-color:#ffffff;margin-left:36px;border-radius:8px;padding:8px}.header-container .attribution-container,.large-view-header-container .attribution-container{position:absolute;right:24px}.header-container .attribution-container a,.large-view-header-container .attribution-container a{color:#ffffff;text-decoration:none}.options-container{height:calc(100% - 64px);position:absolute;width:100%;z-index:1100;top:64px}.filters-container{position:absolute;width:100%;background-color:#ffffff;padding:36px 0px;z-index:1100}.filters-container .close-filters-button{cursor:pointer;font-weight:bold;position:absolute;top:12px;right:12px;padding:12px;border-radius:12px;color:var(--color-primary);border:1px var(--color-primary) solid}.filters-container .close-filters-button:hover{background-color:var(--color-primary);color:#ffffff}.filters-container .filter-margin-top{margin-top:24px}.filters-container .current-treks-length{margin:0px 0px 32px 8px;color:var(--color-primary);font-size:24px;font-weight:bold}.back-filters-container{background-color:rgba(0, 0, 0, 0.5);width:100%;height:calc(100% - 64px);position:absolute;z-index:1099;top:64px}.loader-container,.large-view-loader-container{display:flex;justify-content:center;align-items:center;height:100%}.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.content-container{position:relative;display:flex;height:calc(100% - 64px)}.app-treks-list-container,.app-trek-detail-container,.large-view-app-treks-list-container,.large-view-app-trek-detail-container{height:100%}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button{cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;bottom:24px;width:100%;z-index:400;user-select:none}.map-visibility-button div{background-color:var(--color-primary);color:#ffffff;padding:12px;border-radius:24px;width:120px;text-align:center}.header-container .title{font-size:24px}.loader-container{position:absolute;width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}.app-map-container{position:relative;width:100%;position:absolute}.large-view-header-container .title{font-size:32px}.large-view-loader-container{position:relative;width:50%}.large-view-app-treks-list-container,.large-view-app-trek-detail-container{width:50%}.large-view-app-map-container{position:relative;width:50%}";
 
 const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -20,10 +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';
@@ -32,11 +34,15 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
-    this.largeViewSize = 664;
+    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();
@@ -46,6 +52,14 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     this.handleView();
+    window.addEventListener('popstate', this.handlePopStateBind, false);
+    const url = new URL(window.location.toString());
+    const trekParam = url.searchParams.get('trek');
+    if (trekParam) {
+      window.history.replaceState({ isInitialHistoryWithTrek: true }, '', url);
+      this.currentTrekId = Number(trekParam);
+      this.showTrek = !this.showTrek;
+    }
   }
   onTrekDetailsClose() {
     this.currentTrekId = null;
@@ -53,10 +67,47 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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;
+  }
+  handleBackButton() {
+    if (window.history.state.isInitialHistoryWithTrek) {
+      this.onTrekDetailsClose();
+      const url = new URL(window.location.toString());
+      url.searchParams.delete('trek');
+      window.history.pushState({}, '', url);
+    }
+    else {
+      window.history.back();
+    }
+  }
+  handlePopState() {
+    const url = new URL(window.location.toString());
+    const trekParam = url.searchParams.get('trek');
+    if (trekParam) {
+      this.currentTrekId = Number(trekParam);
+      this.showTrek = !this.showTrek;
+    }
+    else {
+      this.onTrekDetailsClose();
+    }
+  }
+  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 } }, 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", { class: "title" }, this.appName)), 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", { "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-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: () => this.handleBackButton(), 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 {
@@ -74,7 +125,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],
@@ -88,7 +138,9 @@ 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]
   }, [[0, "trekCardPress", "onTrekCardPress"], [9, "resize", "onWindowResize"]]]);
@@ -96,13 +148,18 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["grw-app", "grw-information-desk-detail", "grw-map", "grw-poi-detail", "grw-sensitive-area-detail", "grw-trek-card", "grw-trek-detail", "grw-trek-provider", "grw-treks-list", "grw-treks-provider"];
+  const components = ["grw-app", "grw-filter", "grw-information-desk-detail", "grw-map", "grw-poi-detail", "grw-sensitive-area-detail", "grw-trek-card", "grw-trek-detail", "grw-trek-provider", "grw-treks-list", "grw-treks-provider"];
   components.forEach(tagName => { switch (tagName) {
     case "grw-app":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, GrwApp$1);
       }
       break;
+    case "grw-filter":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
     case "grw-information-desk-detail":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();

package/dist/components/grw-filter.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GrwFilter extends Components.GrwFilter, HTMLElement {}
+export const GrwFilter: {
+  prototype: GrwFilter;
+  new (): GrwFilter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/grw-filter.js

@@ -0,0 +1,6 @@
+import { G as GrwFilter$1, d as defineCustomElement$1 } from './grw-filter2.js';
+
+const GrwFilter = GrwFilter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GrwFilter, defineCustomElement };

package/dist/components/grw-filter2.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './store.js';
+
+const grwFilterCss = ".filter-name{margin-left:8px;color:var(--color-primary);font-size:24px;font-weight:bold}.filter-button-container{display:flex;flex-direction:row;flex-wrap:wrap}.filter-button-container .filter-button,.filter-button-container .selected-filter-button{user-select:none;cursor:pointer;border:1px var(--color-primary) solid;border-radius:8px;margin:8px 0px 0px 8px;padding:8px}.filter-button-container .filter-button{color:var(--color-primary);background-color:#ffffff}.filter-button-container .selected-filter-button{color:#ffffff;background-color:var(--color-primary)}";
+
+const GrwFilter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.filters = [
+      { property: 'practices', trekProperty: 'practice', type: 'include' },
+      { property: 'difficulties', trekProperty: 'difficulty', type: 'include' },
+      { property: 'durations', trekProperty: 'duration', type: 'interval' },
+    ];
+  }
+  handleFilter(_event, filterToHandle) {
+    const filterFromState = [...state[this.filterType]];
+    filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id).selected = !filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id)
+      .selected;
+    state[this.filterType] = filterFromState;
+    let isUsingFilter = false;
+    let filtersTreks = [];
+    for (const filter of this.filters) {
+      const currentFiltersId = state[filter.property].filter(currentFilter => currentFilter.selected).map(currentFilter => currentFilter.id);
+      if (currentFiltersId.length > 0) {
+        if (filtersTreks.length > 0) {
+          if (filter.type === 'include') {
+            filtersTreks = [...filtersTreks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
+          }
+          else if (filter.type === 'interval') {
+            let minValue;
+            let maxValue;
+            for (const currentFilterId of currentFiltersId) {
+              const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+              if (isNaN(minValue) || currentFilter.minValue < minValue) {
+                minValue = currentFilter.minValue;
+              }
+              if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
+                maxValue = currentFilter.maxValue;
+              }
+            }
+            filtersTreks = [...filtersTreks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+        else {
+          if (!isUsingFilter) {
+            isUsingFilter = true;
+          }
+          if (filter.type === 'include') {
+            filtersTreks = [...state.treks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
+          }
+          else if (filter.type === 'interval') {
+            let minValue;
+            let maxValue;
+            for (const currentFilterId of currentFiltersId) {
+              const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+              if (isNaN(minValue) || currentFilter.minValue < minValue) {
+                minValue = currentFilter.minValue;
+              }
+              if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
+                maxValue = currentFilter.maxValue;
+              }
+            }
+            filtersTreks = [...state.treks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+      }
+    }
+    state.currentTreks = isUsingFilter ? filtersTreks : state.treks;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "filter-name" }, this.filterName), h("div", { class: "filter-button-container" }, state[this.filterType].map(currentFilter => (h("div", { onClick: event => this.handleFilter(event, currentFilter), class: currentFilter.selected ? 'selected-filter-button' : 'filter-button' }, currentFilter[this.filterNameProperty]))))));
+  }
+  static get style() { return grwFilterCss; }
+}, [1, "grw-filter", {
+    "filterType": [1, "filter-type"],
+    "filterName": [1, "filter-name"],
+    "filterNameProperty": [1, "filter-name-property"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["grw-filter"];
+  components.forEach(tagName => { switch (tagName) {
+    case "grw-filter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GrwFilter);
+      }
+      break;
+  } });
+}
+
+export { GrwFilter as G, defineCustomElement as d };

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))))));
   }