@geotrekce/geotrek-rando-widget 0.0.5 → 0.0.8

package/dist/cjs/grw-information-desk-detail_3.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c2c4531d.js');
-const store = require('./store-972b8d2a.js');
+const index = require('./index-4c76daa3.js');
+const store = require('./store-b4c3c507.js');
 
 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}";
 
@@ -31,7 +31,7 @@ const GrwPoiDetail = class {
 };
 GrwPoiDetail.style = grwPoiDetailCss;
 
-const grwSensitiveAreaDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.sensitive-area-title{color:var(--color-primary);font-size:24px;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}";
+const grwSensitiveAreaDetailCss = ":host{display:flex;flex-direction:column}:host a{color:var(--color-primary)}.sensitive-area-title{color:var(--color-primary);font-size:24px;padding:12px 0px;font-weight:bold}.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}";
 
 const GrwSensitiveAreaDetail = class {
   constructor(hostRef) {

package/dist/cjs/grw-trek-card.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c2c4531d.js');
-const store = require('./store-972b8d2a.js');
+const index = require('./index-4c76daa3.js');
+const store = require('./store-b4c3c507.js');
 const length = require('./length-d315d156.js');
 
 const grwTrekCardCss = ".trek-card-container,.trek-card-large-view-container{font-family:\"Roboto\";border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25);cursor:pointer}.trek-card-container .image,.trek-card-large-view-container .image{object-fit:cover}.trek-card-container .sub-container,.trek-card-large-view-container .sub-container{display:flex;flex-direction:column;justify-content:center;padding:12px}.trek-card-container .sub-container .name,.trek-card-large-view-container .sub-container .name{color:var(--color-primary);font-size:24px;font-weight:bold;margin-bottom:8px}.trek-card-container .sub-container .departure,.trek-card-large-view-container .sub-container .departure{color:rgba(0, 0, 0, 0.7);font-size:16px;margin:4px 0px}.trek-card-container .sub-container .themes-container,.trek-card-large-view-container .sub-container .themes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .themes-container .theme,.trek-card-large-view-container .sub-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-card-container .sub-container .icons-labels-container,.trek-card-large-view-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .icons-labels-container .row,.trek-card-large-view-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-card-container .sub-container .icons-labels-container .row:not(:last-child),.trek-card-large-view-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:12px}.trek-card-container .sub-container .icons-labels-container .row .icon-label,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label{display:flex;align-items:center;width:50%}.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2),.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 4px}.trek-card-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:8px}.trek-card-container .sub-container .icons-labels-container .row .practice img,.trek-card-large-view-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-card-container{width:350px;height:auto}.trek-card-container .image{width:100%}.trek-card-large-view-container{height:auto;display:flex;flex-direction:row}.trek-card-large-view-container .image{width:250px}";
@@ -16,7 +16,7 @@ const GrwTrekCard = class {
     this.colorPrimaryTint = '#974c6e';
     this.isLargeView = false;
   }
-  componentWillLoad() {
+  connectedCallback() {
     this.currentTrek = this.trek ? this.trek : store.state.currentTrek;
     if (this.currentTrek) {
       this.difficulty = store.state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);

package/dist/cjs/{index-c2c4531d.js → index-4c76daa3.js}

@@ -681,9 +681,6 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
                 hostRef.$queuedListeners$ = null;
             }
         }
-        {
-            promise = safeCall(instance, 'componentWillLoad');
-        }
     }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
@@ -1061,6 +1058,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 hostRef.$flags$ |= 128 /* isWatchReady */;
             }
             endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
@@ -1089,6 +1087,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1132,6 +1135,8 @@ const connectedCallback = (elm) => {
             // reattach any event listeners to the host
             // since they would have been removed when disconnected
             addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         endConnected();
     }

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c2c4531d.js');
+const index = require('./index-4c76daa3.js');
 
 /*
  Stencil Client Patch Esm v2.16.1 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["grw-trek-card.cjs",[[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32],"themes":[32]}]]],["grw-information-desk-detail_3.cjs",[[1,"grw-information-desk-detail",{"informationDesk":[16]}],[1,"grw-poi-detail",{"poi":[16]}],[1,"grw-sensitive-area-detail",{"sensitiveArea":[16]}]]],["grw-filter_6.cjs",[[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"difficulty":[32],"route":[32],"practice":[32],"themes":[32],"labels":[32],"sources":[32],"accessibilities":[32],"accessibilityLevel":[32],"currentTrek":[32]}],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"treksToDisplay":[32]}],[1,"grw-filter",{"filterType":[1,"filter-type"],"filterName":[1,"filter-name"],"filterNameProperty":[1,"filter-name-property"]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"mapIsReady":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}]]],["grw-app.cjs",[[1,"grw-app",{"api":[1],"language":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[8],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"showTrek":[32],"showTreksMap":[32],"showTrekMap":[32],"showFilters":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]]]]], options);
+  return index.bootstrapLazy([["grw-trek-card.cjs",[[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32],"themes":[32]}]]],["grw-information-desk-detail_3.cjs",[[1,"grw-information-desk-detail",{"informationDesk":[16]}],[1,"grw-poi-detail",{"poi":[16]}],[1,"grw-sensitive-area-detail",{"sensitiveArea":[16]}]]],["grw-filter_6.cjs",[[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"difficulty":[32],"route":[32],"practice":[32],"themes":[32],"labels":[32],"sources":[32],"accessibilities":[32],"accessibilityLevel":[32],"currentTrek":[32]}],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"treksToDisplay":[32]}],[1,"grw-filter",{"filterType":[1,"filter-type"],"filterName":[1,"filter-name"],"filterNameProperty":[1,"filter-name-property"]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"mapIsReady":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}]]],["grw-app.cjs",[[1,"grw-app",{"api":[1],"language":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[2],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"showTrek":[32],"showTreksMap":[32],"showTrekMap":[32],"showFilters":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]]]]], options);
   });
 };
 

package/dist/cjs/{store-972b8d2a.js → store-b4c3c507.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-c2c4531d.js');
+const index = require('./index-4c76daa3.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -188,8 +188,10 @@ const createStore = (defaultState, shouldUpdate) => {
 
 const { state, onChange } = createStore({
   api: '',
-  treks: [],
-  currentTreks: [],
+  treks: null,
+  currentTreks: null,
+  treksWithinBounds: null,
+  currentMapTreksBounds: null,
   difficulties: [],
   routes: [],
   practices: [],
@@ -203,6 +205,8 @@ const { state, onChange } = createStore({
   currentTrek: null,
   currentPois: null,
   currentInformationDesks: null,
+  treksNetworkError: false,
+  trekNetworkError: false,
 });
 
 exports.onChange = onChange;

package/dist/collection/components/grw-app/grw-app.css

@@ -8,6 +8,7 @@
 .header-container,
 .large-view-header-container {
   display: flex;
+  flex-direction: row;
   align-items: center;
   background-color: var(--color-primary);
   height: 64px;
@@ -24,16 +25,26 @@
   width: 48px;
   height: auto;
 }
-.header-container .handle-filters-button,
-.large-view-header-container .handle-filters-button {
+.header-container .handle-filters-container,
+.large-view-header-container .handle-filters-container {
+  display: flex;
+  align-items: center;
+}
+.header-container .handle-filters-container .handle-filters-button,
+.large-view-header-container .handle-filters-container .handle-filters-button {
   user-select: none;
   cursor: pointer;
   color: var(--color-primary);
   background-color: #ffffff;
-  margin-left: 36px;
+  margin-left: 12px;
   border-radius: 8px;
   padding: 8px;
 }
+.header-container .handle-filters-container .current-treks-within-bounds-length,
+.large-view-header-container .handle-filters-container .current-treks-within-bounds-length {
+  margin-left: 12px;
+  color: #ffffff;
+}
 .header-container .attribution-container,
 .large-view-header-container .attribution-container {
   position: absolute;
@@ -78,12 +89,6 @@
 .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);
@@ -94,6 +99,7 @@
   top: 64px;
 }
 
+.init-loader-container,
 .loader-container,
 .large-view-loader-container {
   display: flex;
@@ -101,6 +107,7 @@
   align-items: center;
   height: 100%;
 }
+.init-loader-container .loader,
 .loader-container .loader,
 .large-view-loader-container .loader {
   width: 48px;
@@ -164,8 +171,8 @@
   font-size: 24px;
 }
 
+.init-loader-container,
 .loader-container {
-  position: absolute;
   width: 100%;
 }
 
@@ -185,7 +192,6 @@
 }
 
 .large-view-loader-container {
-  position: relative;
   width: 50%;
 }
 

package/dist/collection/components/grw-app/grw-app.js

@@ -1,5 +1,5 @@
 import { Component, Host, h, Listen, State, Prop, Element, Watch } from '@stencil/core';
-import state from 'store/store';
+import state, { onChange } from 'store/store';
 import arrowBackImage from '../../assets/arrow-back.svg';
 export class GrwApp {
   constructor() {
@@ -17,8 +17,8 @@ export class GrwApp {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
-    this.handlePopStateBind = this.handlePopState.bind(this);
     this.largeViewSize = 1024;
+    this.handlePopStateBind = this.handlePopState.bind(this);
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
@@ -34,11 +34,26 @@ export class GrwApp {
     window.dispatchEvent(new window.Event('resize'));
   }
   componentDidLoad() {
+    onChange('trekNetworkError', () => {
+      if (state.trekNetworkError) {
+        const urlRedirect = new URL(window.location.toString());
+        urlRedirect.searchParams.delete('trek');
+        window.history.replaceState({}, '', urlRedirect);
+        this.onTrekDetailsClose();
+      }
+    });
     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.forwardTrekId = this.currentTrekId;
+    state.currentTrek = null;
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
@@ -50,15 +65,27 @@ export class GrwApp {
   handleFilters() {
     this.showFilters = !this.showFilters;
   }
-  handlePopState() {
-    if (this.showTrek) {
+  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();
     }
-    else if (this.forwardTrekId) {
-      this.currentTrekId = this.forwardTrekId;
-      this.forwardTrekId = null;
+  }
+  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) {
@@ -74,13 +101,16 @@ export class GrwApp {
   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 }),
+      !state.currentTreks && !state.currentTrek && (h("div", { class: "init-loader-container" },
+        h("span", { class: "loader" }))),
       this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }),
-      h("div", { class: "app-container" },
+      (state.currentTreks || state.currentTrek) && (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 ? (h("div", { onClick: () => this.handleBackButton(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (h("div", { class: "handle-filters-container" },
+            h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER"),
+            state.treksWithinBounds && (h("div", { class: "current-treks-within-bounds-length" }, `${state.treksWithinBounds.length} randonnée${state.treksWithinBounds.length > 1 ? 's' : ''}`)))),
           !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" })),
@@ -100,7 +130,7 @@ export class GrwApp {
             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')))));
+          h("div", { onClick: () => this.handleShowMap() }, this.showTrek ? (this.showTrekMap ? 'Voir la fiche' : 'Voir la carte') : this.showTreksMap ? 'Voir la liste' : 'Voir la carte'))))));
   }
   static get is() { return "grw-app"; }
   static get encapsulation() { return "shadow"; }
@@ -317,11 +347,11 @@ export class GrwApp {
       "reflect": false
     },
     "zoom": {
-      "type": "any",
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,

package/dist/collection/components/grw-filter/grw-filter.js

@@ -23,18 +23,17 @@ export class GrwFilter {
             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)];
+            filtersTreks = [
+              ...filtersTreks.filter(trek => {
+                for (const currentFilterId of currentFiltersId) {
+                  const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+                  if (trek[filter.trekProperty] >= currentFilter.minValue && trek[filter.trekProperty] <= currentFilter.maxValue) {
+                    return true;
+                  }
+                }
+                return false;
+              }),
+            ];
           }
         }
         else {

package/dist/collection/components/grw-map/grw-map.js

@@ -14,8 +14,9 @@ export class GrwMap {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '	#4974a5';
     this.colorPoiIcon = '#974c6e';
+    this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
   }
-  componentDidLoad() {
+  connectedCallback() {
     this.map = L.map(this.element, {
       center: this.center.split(',').map(Number),
       zoom: this.zoom,
@@ -28,7 +29,7 @@ export class GrwMap {
     if (state.currentTrek) {
       this.addTrek();
     }
-    else if (state.currentTrek) {
+    else if (state.currentTreks) {
       this.addTreks();
     }
     onChange('currentTreks', () => {
@@ -57,29 +58,35 @@ export class GrwMap {
       type: 'FeatureCollection',
       features: [],
     };
-    for (const trek of state.currentTreks) {
-      trekscurrentDepartureCoordinates.push(trek.departure_geom);
-      treksFeatureCollection.features.push({
-        type: 'Feature',
-        geometry: { type: 'Point', coordinates: trek.departure_geom },
-        properties: {
-          id: trek.id,
-          name: trek.name,
-          practice: (_a = state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram,
-          imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
-        },
-      });
-    }
-    if (trekscurrentDepartureCoordinates.length > 0) {
-      const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-      this.currentBounds = bounds;
-      this.map.fitBounds(this.currentBounds);
+    if (state.currentTreks) {
+      for (const trek of state.currentTreks) {
+        trekscurrentDepartureCoordinates.push(trek.departure_geom);
+        treksFeatureCollection.features.push({
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: trek.departure_geom },
+          properties: {
+            id: trek.id,
+            name: trek.name,
+            practice: (_a = state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram,
+            imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
+          },
+        });
+      }
     }
     if (!this.treksLayer) {
+      if (trekscurrentDepartureCoordinates.length > 0 && !state.currentMapTreksBounds) {
+        const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+        this.map.fitBounds(bounds);
+      }
+      else {
+        if (state.currentMapTreksBounds) {
+          this.map.fitBounds(state.currentMapTreksBounds);
+        }
+      }
       this.treksLayer = L.geoJSON(treksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.practice && `<img src=${geoJsonPoint.properties.practice} />`,
+            html: geoJsonPoint.properties.practice ? `<img src=${geoJsonPoint.properties.practice} />` : `<img />`,
             className: 'trek-marker',
             iconSize: 48,
           }),
@@ -106,17 +113,30 @@ export class GrwMap {
       }).addTo(this.map);
     }
     else {
+      if (trekscurrentDepartureCoordinates.length > 0) {
+        const bounds = L.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+        this.map.fitBounds(bounds);
+      }
+      else {
+        this.map.fire('moveend');
+      }
       this.treksLayer.clearLayers();
       this.treksLayer.addData(treksFeatureCollection);
     }
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
+    this.map.on('moveend', this.handleTreksWithinBoundsBind);
   }
   removeTreks() {
     if (this.treksLayer) {
+      state.currentMapTreksBounds = this.map.getBounds();
       this.map.removeLayer(this.treksLayer);
       this.treksLayer = null;
+      this.map.off('moveend', this.handleTreksWithinBoundsBind);
     }
   }
+  handleTreksWithinBounds() {
+    state.treksWithinBounds = state.currentTreks.filter(trek => this.map.getBounds().contains(L.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+  }
   addTrek() {
     const currentTrekFeature = {
       type: 'Feature',
@@ -130,8 +150,7 @@ export class GrwMap {
       interactive: false,
     }).addTo(this.map);
     const bounds = L.latLngBounds(state.currentTrek.geometry.coordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-    this.currentBounds = bounds;
-    this.map.fitBounds(this.currentBounds);
+    this.map.fitBounds(bounds);
     const currentDepartureCoordinates = [state.currentTrek.geometry.coordinates.at(0)[0], state.currentTrek.geometry.coordinates.at(0)[1]];
     const currentArrivalCoordinates = [state.currentTrek.geometry.coordinates.at(-1)[0], state.currentTrek.geometry.coordinates.at(-1)[1]];
     const currentDepartureArrivalFeatureCollection = {

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

@@ -10,6 +10,7 @@
   color: var(--color-primary);
   font-size: 24px;
   padding: 12px 0px;
+  font-weight: bold;
 }
 
 .sensitive-area-description {

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

@@ -10,7 +10,7 @@ export class GrwTrekCard {
     this.colorPrimaryTint = '#974c6e';
     this.isLargeView = false;
   }
-  componentWillLoad() {
+  connectedCallback() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
     if (this.currentTrek) {
       this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);

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

@@ -1,3 +1,9 @@
+grw-sensitive-area-detail,
+grw-information-desk-detail,
+grw-poi-detail {
+  margin-top: 12px;
+}
+
 .trek-detail-container {
   font-family: "Roboto";
   display: flex;

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

@@ -10,7 +10,7 @@ export class GrwTrekDetail {
     this.colorPrimaryShade = '#4a0021';
     this.colorPrimaryTint = '#974c6e';
   }
-  componentWillLoad() {
+  connectedCallback() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
     if (this.currentTrek) {
       this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
@@ -20,7 +20,9 @@ export class GrwTrekDetail {
       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);
+      if (state.accessibilitiesLevel) {
+        this.accessibilityLevel = state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
+      }
     }
     onChange('currentTrek', () => {
       this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -31,6 +33,10 @@ export class GrwTrekDetail {
         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));
+        if (state.accessibilitiesLevel) {
+          this.accessibilityLevel = state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
+        }
       }
     });
   }
@@ -81,7 +87,9 @@ export class GrwTrekDetail {
         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 }))),
+        h("img", { src: this.currentTrek.altimetric_profile.endsWith('.json')
+            ? this.currentTrek.altimetric_profile.replace('.json', '.svg')
+            : `${this.currentTrek.altimetric_profile}?format=svg` }))),
       this.currentTrek.access && (h("div", { class: "access-container" },
         h("div", { class: "access-title" }, "Acc\u00E8s routier"),
         h("div", { class: "access", innerHTML: this.currentTrek.access }))),
@@ -108,7 +116,15 @@ export class GrwTrekDetail {
       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" },
+      (this.currentTrek.disabled_infrastructure ||
+        (this.accessibilities && this.accessibilities.length > 0) ||
+        this.currentTrek.accessibility_level ||
+        this.currentTrek.accessibility_slope ||
+        this.currentTrek.accessibility_width ||
+        this.currentTrek.accessibility_signage ||
+        this.currentTrek.accessibility_covering ||
+        this.currentTrek.accessibility_exposure ||
+        this.currentTrek.accessibility_advice) && (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" },
@@ -134,7 +150,7 @@ export class GrwTrekDetail {
           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 })))),
+          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 }))))),

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

@@ -4,18 +4,6 @@
   height: 100%;
   max-height: 100vh;
   overflow-y: auto;
-}
-
-.current-treks-length {
-  width: 100%;
-  text-align: center;
-  padding: 32px 0px;
-  color: var(--color-primary);
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.current-treks-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;