@geotrekce/geotrek-rando-widget 0.0.5 → 0.0.6

package/dist/components/grw-app.js

@@ -53,9 +53,15 @@ 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.forwardTrekId = this.currentTrekId;
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
@@ -67,15 +73,27 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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) {
@@ -89,7 +107,7 @@ const GrwApp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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: () => 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')))));
+    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 {

package/dist/components/grw-map2.js

@@ -14159,6 +14159,7 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '	#4974a5';
     this.colorPoiIcon = '#974c6e';
+    this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
   }
   componentDidLoad() {
     this.map = leafletSrc.map(this.element, {
@@ -14215,16 +14216,18 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         },
       });
     }
-    if (trekscurrentDepartureCoordinates.length > 0) {
-      const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-      this.currentBounds = bounds;
-      this.map.fitBounds(this.currentBounds);
-    }
     if (!this.treksLayer) {
+      if (trekscurrentDepartureCoordinates.length > 0 && !state.currentMapTreksBounds) {
+        const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+        this.map.fitBounds(bounds);
+      }
+      else {
+        this.map.fitBounds(state.currentMapTreksBounds);
+      }
       this.treksLayer = leafletSrc.geoJSON(treksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
           icon: leafletSrc.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,
           }),
@@ -14251,17 +14254,27 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }).addTo(this.map);
     }
     else {
+      if (trekscurrentDepartureCoordinates.length > 0) {
+        const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+        this.map.fitBounds(bounds);
+      }
       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(leafletSrc.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+  }
   addTrek() {
     const currentTrekFeature = {
       type: 'Feature',
@@ -14275,8 +14288,7 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       interactive: false,
     }).addTo(this.map);
     const bounds = leafletSrc.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/components/grw-sensitive-area-detail2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as state } from './store.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/grw-trek-detail2.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './grw-information-desk-detail2.js';
 import { d as defineCustomElement$2 } from './grw-poi-detail2.js';
 import { d as defineCustomElement$1 } from './grw-sensitive-area-detail2.js';
 
-const grwTrekDetailCss = ".trek-detail-container{font-family:\"Roboto\";display:flex;flex-direction:column;height:100%;overflow-y:auto}.trek-detail-container .name{color:var(--color-primary);font-size:48px;font-weight:bold;padding:24px}.trek-detail-container .image{border-radius:8px;align-self:center;width:100%;max-width:700px;height:auto;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-detail-container .sub-container{padding:24px}.trek-detail-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-detail-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-detail-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:24px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label{display:flex;justify-content:center;align-items:center;width:33.3333333333%}.trek-detail-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 8px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label img,.trek-detail-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:24px}.trek-detail-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-detail-container .downloads-container{padding:0px 24px 24px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}.trek-detail-container .downloads-container .download-title{color:var(--color-primary);font-size: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);padding:8px;color:#ffffff;text-decoration:none;border-radius:8px}.trek-detail-container .downloads-container .links-container a:nth-child(2){margin:0px 12px}.trek-detail-container .downloads-container .links-container a:hover{background-color:var(--color-primary-shade)}.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 .source-title,.trek-detail-container .accessibilities-title{color:var(--color-primary);font-size:36px;font-weight:bold;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}";
+const grwTrekDetailCss = "grw-sensitive-area-detail,grw-information-desk-detail,grw-poi-detail{margin-top:12px}.trek-detail-container{font-family:\"Roboto\";display:flex;flex-direction:column;height:100%;overflow-y:auto}.trek-detail-container .name{color:var(--color-primary);font-size:48px;font-weight:bold;padding:24px}.trek-detail-container .image{border-radius:8px;align-self:center;width:100%;max-width:700px;height:auto;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-detail-container .sub-container{padding:24px}.trek-detail-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-detail-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-detail-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:24px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label{display:flex;justify-content:center;align-items:center;width:33.3333333333%}.trek-detail-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 8px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label img,.trek-detail-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:24px}.trek-detail-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-detail-container .downloads-container{padding:0px 24px 24px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}.trek-detail-container .downloads-container .download-title{color:var(--color-primary);font-size: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);padding:8px;color:#ffffff;text-decoration:none;border-radius:8px}.trek-detail-container .downloads-container .links-container a:nth-child(2){margin:0px 12px}.trek-detail-container .downloads-container .links-container a:hover{background-color:var(--color-primary-shade)}.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 .source-title,.trek-detail-container .accessibilities-title{color:var(--color-primary);font-size:36px;font-weight:bold;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}";
 
 const GrwTrekDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -45,7 +45,15 @@ const GrwTrekDetail = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-shade': this.colorPrimaryShade, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: "trek-detail-container" }, h("div", { class: "name" }, this.currentTrek.name), this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (h("img", { class: "image", src: this.currentTrek.attachments[0].thumbnail, loading: "lazy" })), h("div", { class: "sub-container" }, h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && h("img", { src: this.difficulty.pictogram }), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
       _b.label), h("div", { class: "icon-label duration" }, h("div", { class: "svg-icon", innerHTML: durationImage }), formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)), h("div", { class: "icon-label route" }, ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
       _e.route)), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("div", { class: "svg-icon", innerHTML: lengthImage }), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("div", { class: "svg-icon", innerHTML: ascentImage }), formatAscent(this.currentTrek.ascent)), h("div", { class: "icon-label practice" }, ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && h("img", { src: this.practice.pictogram }), (_g = this.practice) === null || _g === void 0 ? void 0 :
-      _g.name)))), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"), h("div", { class: "links-container" }, h("a", { href: `${this.currentTrek.gpx}` }, "GPX"), h("a", { href: `${this.currentTrek.kml}` }, "KML"), h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))), 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 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 }))))), 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 })))))))))));
+      _g.name)))), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"), h("div", { class: "links-container" }, h("a", { href: `${this.currentTrek.gpx}` }, "GPX"), h("a", { href: `${this.currentTrek.kml}` }, "KML"), h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))), 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 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 }))))), (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" }, 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 }))))), 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 style() { return grwTrekDetailCss; }
 }, [1, "grw-trek-detail", {

package/dist/components/grw-treks-list2.js

@@ -22,11 +22,16 @@ const GrwTreksList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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.currentTreks.slice(0, this.treksToDisplay.length + this.step >= state.currentTreks.length ? state.currentTreks.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);
@@ -34,7 +39,7 @@ const GrwTreksList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.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 }))))));
+    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 }))))));
   }
   get element() { return this; }
   static get style() { return grwTreksListCss; }

package/dist/components/grw-treks-provider2.js

@@ -41,6 +41,7 @@ const GrwTreksProvider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       ];
       state.treks = treks.results;
       state.currentTreks = treks.results;
+      state.treksWithinBounds = treks.results;
     });
   }
   render() {

package/dist/components/store.js

@@ -188,6 +188,8 @@ const { state, onChange } = createStore({
   api: '',
   treks: [],
   currentTreks: [],
+  treksWithinBounds: [],
+  currentMapTreksBounds: null,
   difficulties: [],
   routes: [],
   practices: [],

package/dist/esm/grw-app.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-192d910f.js';
-import { s as state } from './store-5a42b5d8.js';
+import { s as state } from './store-b2c76c0c.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>`;
 
@@ -41,9 +41,15 @@ const GrwApp = class {
   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.forwardTrekId = this.currentTrekId;
     this.currentTrekId = null;
     this.showTrek = !this.showTrek;
   }
@@ -55,15 +61,27 @@ const GrwApp = class {
   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) {
@@ -77,7 +95,7 @@ const GrwApp = class {
     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: () => 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')))));
+    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 getElement(this); }
   static get watchers() { return {

package/dist/esm/grw-filter_6.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-192d910f.js';
-import { s as state, o as onChange } from './store-5a42b5d8.js';
+import { s as state, o as onChange } from './store-b2c76c0c.js';
 import { d as durationImage, f as formatDuration, l as lengthImage, a as formatLength, b as ascentImage, c as formatAscent } from './length-d82189db.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)}";
@@ -14231,6 +14231,7 @@ const GrwMap = class {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '	#4974a5';
     this.colorPoiIcon = '#974c6e';
+    this.handleTreksWithinBoundsBind = this.handleTreksWithinBounds.bind(this);
   }
   componentDidLoad() {
     this.map = leafletSrc.map(this.element, {
@@ -14287,16 +14288,18 @@ const GrwMap = class {
         },
       });
     }
-    if (trekscurrentDepartureCoordinates.length > 0) {
-      const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-      this.currentBounds = bounds;
-      this.map.fitBounds(this.currentBounds);
-    }
     if (!this.treksLayer) {
+      if (trekscurrentDepartureCoordinates.length > 0 && !state.currentMapTreksBounds) {
+        const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+        this.map.fitBounds(bounds);
+      }
+      else {
+        this.map.fitBounds(state.currentMapTreksBounds);
+      }
       this.treksLayer = leafletSrc.geoJSON(treksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
           icon: leafletSrc.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,
           }),
@@ -14323,17 +14326,27 @@ const GrwMap = class {
       }).addTo(this.map);
     }
     else {
+      if (trekscurrentDepartureCoordinates.length > 0) {
+        const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
+        this.map.fitBounds(bounds);
+      }
       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(leafletSrc.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+  }
   addTrek() {
     const currentTrekFeature = {
       type: 'Feature',
@@ -14347,8 +14360,7 @@ const GrwMap = class {
       interactive: false,
     }).addTo(this.map);
     const bounds = leafletSrc.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 = {
@@ -14591,7 +14603,7 @@ const GrwMap = class {
 };
 GrwMap.style = grwMapCss;
 
-const grwTrekDetailCss = ".trek-detail-container{font-family:\"Roboto\";display:flex;flex-direction:column;height:100%;overflow-y:auto}.trek-detail-container .name{color:var(--color-primary);font-size:48px;font-weight:bold;padding:24px}.trek-detail-container .image{border-radius:8px;align-self:center;width:100%;max-width:700px;height:auto;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-detail-container .sub-container{padding:24px}.trek-detail-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-detail-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-detail-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:24px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label{display:flex;justify-content:center;align-items:center;width:33.3333333333%}.trek-detail-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 8px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label img,.trek-detail-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:24px}.trek-detail-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-detail-container .downloads-container{padding:0px 24px 24px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}.trek-detail-container .downloads-container .download-title{color:var(--color-primary);font-size: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);padding:8px;color:#ffffff;text-decoration:none;border-radius:8px}.trek-detail-container .downloads-container .links-container a:nth-child(2){margin:0px 12px}.trek-detail-container .downloads-container .links-container a:hover{background-color:var(--color-primary-shade)}.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 .source-title,.trek-detail-container .accessibilities-title{color:var(--color-primary);font-size:36px;font-weight:bold;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}";
+const grwTrekDetailCss = "grw-sensitive-area-detail,grw-information-desk-detail,grw-poi-detail{margin-top:12px}.trek-detail-container{font-family:\"Roboto\";display:flex;flex-direction:column;height:100%;overflow-y:auto}.trek-detail-container .name{color:var(--color-primary);font-size:48px;font-weight:bold;padding:24px}.trek-detail-container .image{border-radius:8px;align-self:center;width:100%;max-width:700px;height:auto;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-detail-container .sub-container{padding:24px}.trek-detail-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-detail-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-detail-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:24px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label{display:flex;justify-content:center;align-items:center;width:33.3333333333%}.trek-detail-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 8px}.trek-detail-container .sub-container .icons-labels-container .row .icon-label img,.trek-detail-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:24px}.trek-detail-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-detail-container .downloads-container{padding:0px 24px 24px 24px;display:flex;flex-direction:column;justify-content:center;align-items:center}.trek-detail-container .downloads-container .download-title{color:var(--color-primary);font-size: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);padding:8px;color:#ffffff;text-decoration:none;border-radius:8px}.trek-detail-container .downloads-container .links-container a:nth-child(2){margin:0px 12px}.trek-detail-container .downloads-container .links-container a:hover{background-color:var(--color-primary-shade)}.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 .source-title,.trek-detail-container .accessibilities-title{color:var(--color-primary);font-size:36px;font-weight:bold;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}";
 
 const GrwTrekDetail = class {
   constructor(hostRef) {
@@ -14629,7 +14641,15 @@ const GrwTrekDetail = class {
     return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-shade': this.colorPrimaryShade, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: "trek-detail-container" }, h("div", { class: "name" }, this.currentTrek.name), this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (h("img", { class: "image", src: this.currentTrek.attachments[0].thumbnail, loading: "lazy" })), h("div", { class: "sub-container" }, h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_a = this.difficulty) === null || _a === void 0 ? void 0 : _a.pictogram) && h("img", { src: this.difficulty.pictogram }), (_b = this.difficulty) === null || _b === void 0 ? void 0 :
       _b.label), h("div", { class: "icon-label duration" }, h("div", { class: "svg-icon", innerHTML: durationImage }), formatDuration((_c = this.currentTrek) === null || _c === void 0 ? void 0 : _c.duration)), h("div", { class: "icon-label route" }, ((_d = this.route) === null || _d === void 0 ? void 0 : _d.pictogram) && h("img", { src: this.route.pictogram }), (_e = this.route) === null || _e === void 0 ? void 0 :
       _e.route)), h("div", { class: "row" }, h("div", { class: "icon-label length" }, h("div", { class: "svg-icon", innerHTML: lengthImage }), formatLength(this.currentTrek.length_2d)), h("div", { class: "icon-label ascent" }, h("div", { class: "svg-icon", innerHTML: ascentImage }), formatAscent(this.currentTrek.ascent)), h("div", { class: "icon-label practice" }, ((_f = this.practice) === null || _f === void 0 ? void 0 : _f.pictogram) && h("img", { src: this.practice.pictogram }), (_g = this.practice) === null || _g === void 0 ? void 0 :
-      _g.name)))), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"), h("div", { class: "links-container" }, h("a", { href: `${this.currentTrek.gpx}` }, "GPX"), h("a", { href: `${this.currentTrek.kml}` }, "KML"), h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))), 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 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 }))))), 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 })))))))))));
+      _g.name)))), h("div", { class: "downloads-container" }, h("div", { class: "download-title" }, "T\u00E9l\u00E9chargements"), h("div", { class: "links-container" }, h("a", { href: `${this.currentTrek.gpx}` }, "GPX"), h("a", { href: `${this.currentTrek.kml}` }, "KML"), h("a", { href: `${this.currentTrek.pdf}` }, "PDF"))), 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 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 }))))), (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" }, 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 }))))), 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 })))))))))));
   }
 };
 GrwTrekDetail.style = grwTrekDetailCss;
@@ -14709,11 +14729,16 @@ const GrwTreksList = class {
       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.currentTreks.slice(0, this.treksToDisplay.length + this.step >= state.currentTreks.length ? state.currentTreks.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);
@@ -14721,7 +14746,7 @@ const GrwTreksList = class {
     }
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.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 }))))));
+    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 }))))));
   }
   get element() { return getElement(this); }
 };
@@ -14765,6 +14790,7 @@ const GrwTreksProvider = class {
       ];
       state.treks = treks.results;
       state.currentTreks = treks.results;
+      state.treksWithinBounds = treks.results;
     });
   }
   render() {

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-192d910f.js';
-import { s as state } from './store-5a42b5d8.js';
+import { s as state } from './store-b2c76c0c.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}";
 
@@ -27,7 +27,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) {