@geotrekce/geotrek-rando-widget 0.0.8 → 0.0.11

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4c76daa3.js');
-const store = require('./store-b4c3c507.js');
+const store = require('./store-4d75c7a8.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>`;
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4c76daa3.js');
-const store = require('./store-b4c3c507.js');
+const store = require('./store-4d75c7a8.js');
 const length = require('./length-d315d156.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)}";
@@ -14254,9 +14254,11 @@ const GrwMap = class {
     }
     store.onChange('currentTreks', () => {
       if (store.state.currentTrek) {
+        this.removeTreks();
         this.addTrek();
       }
       else if (store.state.currentTreks) {
+        this.removeTrek();
         this.addTreks();
       }
     });
@@ -14266,8 +14268,8 @@ const GrwMap = class {
         this.addTrek();
       }
       else {
-        this.addTreks();
         this.removeTrek();
+        this.addTreks();
       }
     });
   }
@@ -14355,9 +14357,12 @@ const GrwMap = class {
     }
   }
   handleTreksWithinBounds() {
-    store.state.treksWithinBounds = store.state.currentTreks.filter(trek => this.map.getBounds().contains(leafletSrc.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+    if (!store.state.currentMapTreksBounds || store.state.currentMapTreksBounds.toBBoxString() !== this.map.getBounds().toBBoxString()) {
+      store.state.treksWithinBounds = store.state.currentTreks.filter(trek => this.map.getBounds().contains(leafletSrc.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+    }
   }
   addTrek() {
+    var _a;
     const currentTrekFeature = {
       type: 'Feature',
       geometry: store.state.currentTrek.geometry,
@@ -14480,14 +14485,14 @@ const GrwMap = class {
       for (const currentPoi of store.state.currentPois) {
         currentPoisFeatureCollection.features.push({
           type: 'Feature',
-          properties: { name: currentPoi.name, type_pictogram: currentPoi.type_pictogram },
+          properties: { name: currentPoi.name, type_pictogram: (_a = store.state.poiTypes.find(poiType => poiType.id === currentPoi.type)) === null || _a === void 0 ? void 0 : _a.pictogram },
           geometry: currentPoi.geometry,
         });
       }
       this.currentPoisLayer = leafletSrc.geoJSON(currentPoisFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
           icon: leafletSrc.divIcon({
-            html: geoJsonPoint.properties.type_pictogram && `<img src=${geoJsonPoint.properties.type_pictogram} />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'poi-icon',
             iconSize: 48,
           }),
@@ -14521,7 +14526,7 @@ const GrwMap = class {
       this.currentInformationDesksLayer = leafletSrc.geoJSON(currentInformationDesksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
           icon: leafletSrc.divIcon({
-            html: geoJsonPoint.properties.type_pictogram && `<img src=${geoJsonPoint.properties.type_pictogram} />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'information-desks-icon',
             iconSize: 48,
           }),
@@ -14696,12 +14701,15 @@ const GrwTrekProvider = class {
       fetch(`${this.api}source/?language=${this.language}&fields=id,name,website,pictogram`, { signal: this.signal }),
       fetch(`${this.api}trek_accessibility/?language=${this.language}&fields=id,name,pictogram`, { signal: this.signal }),
       fetch(`${this.api}trek_accessibility_level/?language=${this.language}&fields=id,name`, { signal: this.signal }).catch(() => new Response('null')),
-      fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,type_label,type_pictogram,url,published,geometry&page_size=999`, { signal: this.signal }),
+      fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,geometry&page_size=999`, {
+        signal: this.signal,
+      }),
+      fetch(`${this.api}poi_type/?language=${this.language}&fields=id,pictogram`, { signal: this.signal }),
       fetch(`${this.api}informationdesk/?language=${this.language}&near_trek=${this.trekId}&fields=id,name,description,type,phone,email,website,municipality,postal_code,street,photo_url,latitude,longitude&page_size=999`, { signal: this.signal }),
       fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure,arrival,altimetric_profile,ambiance,access,public_transport,advice,advised_parking,gear,labels,source,points_reference,disabled_infrastructure,accessibility_level,accessibility_slope,accessibility_width,accessibility_signage,accessibility_covering,accessibility_exposure,accessibility_advice,accessibilities`, { signal: this.signal }),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, pois, informationDesks, trek]) => {
+      .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, pois, poiTypes, informationDesks, trek]) => {
       store.state.trekNetworkError = false;
       if (difficulties) {
         store.state.difficulties = difficulties.results;
@@ -14725,6 +14733,7 @@ const GrwTrekProvider = class {
         store.state.accessibilitiesLevel = accessibilitiesLevel.results;
       }
       store.state.currentPois = pois.results;
+      store.state.poiTypes = poiTypes.results;
       store.state.currentInformationDesks = informationDesks.results;
       store.state.currentTrek = trek;
     })
@@ -14753,19 +14762,22 @@ const GrwTreksList = class {
     this.isLargeView = false;
     this.step = 10;
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
+    this.shouldAddInfiniteScrollEvent = true;
   }
   connectedCallback() {
-    this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+    this.handleInfiniteScrollEvent(true);
     if (store.state.currentTreks) {
       this.treksToDisplay = [...store.state.currentTreks.slice(0, this.step)];
     }
     store.onChange('currentTreks', () => {
+      this.handleInfiniteScrollEvent(true);
       this.element.scroll({ top: 0 });
       if (store.state.currentTreks) {
         this.treksToDisplay = [...store.state.currentTreks.slice(0, this.step)];
       }
     });
     store.onChange('treksWithinBounds', () => {
+      this.handleInfiniteScrollEvent(true);
       this.element.scroll({ top: 0 });
       if (store.state.treksWithinBounds) {
         this.treksToDisplay = [...store.state.treksWithinBounds.slice(0, this.step)];
@@ -14778,12 +14790,24 @@ const GrwTreksList = class {
         this.treksToDisplay = store.state.treksWithinBounds.slice(0, this.treksToDisplay.length + this.step >= store.state.treksWithinBounds.length ? store.state.treksWithinBounds.length : this.treksToDisplay.length + this.step);
       }
       else {
-        this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+        this.handleInfiniteScrollEvent(false);
+      }
+    }
+  }
+  handleInfiniteScrollEvent(shouldAddInfiniteScrollEvent) {
+    if (shouldAddInfiniteScrollEvent) {
+      if (this.shouldAddInfiniteScrollEvent) {
+        this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+        this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;
       }
     }
+    else {
+      this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+      this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;
+    }
   }
   disconnectedCallback() {
-    this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+    this.handleInfiniteScrollEvent(false);
   }
   render() {
     return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (index.h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4c76daa3.js');
-const store = require('./store-b4c3c507.js');
+const store = require('./store-4d75c7a8.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}";
 

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

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

package/dist/cjs/{store-b4c3c507.js → store-4d75c7a8.js}

@@ -202,6 +202,7 @@ const { state, onChange } = createStore({
   sources: null,
   accessibilities: null,
   accessibilitiesLevel: null,
+  poiTypes: null,
   currentTrek: null,
   currentPois: null,
   currentInformationDesks: null,

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

@@ -34,9 +34,11 @@ export class GrwMap {
     }
     onChange('currentTreks', () => {
       if (state.currentTrek) {
+        this.removeTreks();
         this.addTrek();
       }
       else if (state.currentTreks) {
+        this.removeTrek();
         this.addTreks();
       }
     });
@@ -46,8 +48,8 @@ export class GrwMap {
         this.addTrek();
       }
       else {
-        this.addTreks();
         this.removeTrek();
+        this.addTreks();
       }
     });
   }
@@ -135,9 +137,12 @@ export class GrwMap {
     }
   }
   handleTreksWithinBounds() {
-    state.treksWithinBounds = state.currentTreks.filter(trek => this.map.getBounds().contains(L.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+    if (!state.currentMapTreksBounds || state.currentMapTreksBounds.toBBoxString() !== this.map.getBounds().toBBoxString()) {
+      state.treksWithinBounds = state.currentTreks.filter(trek => this.map.getBounds().contains(L.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+    }
   }
   addTrek() {
+    var _a;
     const currentTrekFeature = {
       type: 'Feature',
       geometry: state.currentTrek.geometry,
@@ -260,14 +265,14 @@ export class GrwMap {
       for (const currentPoi of state.currentPois) {
         currentPoisFeatureCollection.features.push({
           type: 'Feature',
-          properties: { name: currentPoi.name, type_pictogram: currentPoi.type_pictogram },
+          properties: { name: currentPoi.name, type_pictogram: (_a = state.poiTypes.find(poiType => poiType.id === currentPoi.type)) === null || _a === void 0 ? void 0 : _a.pictogram },
           geometry: currentPoi.geometry,
         });
       }
       this.currentPoisLayer = L.geoJSON(currentPoisFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.type_pictogram && `<img src=${geoJsonPoint.properties.type_pictogram} />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'poi-icon',
             iconSize: 48,
           }),
@@ -301,7 +306,7 @@ export class GrwMap {
       this.currentInformationDesksLayer = L.geoJSON(currentInformationDesksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
           icon: L.divIcon({
-            html: geoJsonPoint.properties.type_pictogram && `<img src=${geoJsonPoint.properties.type_pictogram} />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'information-desks-icon',
             iconSize: 48,
           }),

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

@@ -22,7 +22,7 @@ export class GrwPoiDetail {
       "mutable": false,
       "complexType": {
         "original": "Poi",
-        "resolved": "{ id: number; name: string; description: string; attachments: Attachments; type: any; type_label: any; type_pictogram: any; url: string; published: boolean; geometry: Geometry; }",
+        "resolved": "{ id: number; name: string; description: string; attachments: Attachments; type: number; geometry: Geometry; }",
         "references": {
           "Poi": {
             "location": "import",

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

@@ -8,19 +8,22 @@ export class GrwTreksList {
     this.isLargeView = false;
     this.step = 10;
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
+    this.shouldAddInfiniteScrollEvent = true;
   }
   connectedCallback() {
-    this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+    this.handleInfiniteScrollEvent(true);
     if (state.currentTreks) {
       this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
     }
     onChange('currentTreks', () => {
+      this.handleInfiniteScrollEvent(true);
       this.element.scroll({ top: 0 });
       if (state.currentTreks) {
         this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
       }
     });
     onChange('treksWithinBounds', () => {
+      this.handleInfiniteScrollEvent(true);
       this.element.scroll({ top: 0 });
       if (state.treksWithinBounds) {
         this.treksToDisplay = [...state.treksWithinBounds.slice(0, this.step)];
@@ -33,12 +36,24 @@ export class GrwTreksList {
         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);
+        this.handleInfiniteScrollEvent(false);
       }
     }
   }
+  handleInfiniteScrollEvent(shouldAddInfiniteScrollEvent) {
+    if (shouldAddInfiniteScrollEvent) {
+      if (this.shouldAddInfiniteScrollEvent) {
+        this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+        this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;
+      }
+    }
+    else {
+      this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+      this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;
+    }
+  }
   disconnectedCallback() {
-    this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+    this.handleInfiniteScrollEvent(false);
   }
   render() {
     return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, 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 })))));

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

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

package/dist/collection/store/store.js

@@ -15,6 +15,7 @@ const { state, onChange } = createStore({
   sources: null,
   accessibilities: null,
   accessibilitiesLevel: null,
+  poiTypes: null,
   currentTrek: null,
   currentPois: null,
   currentInformationDesks: null,

package/dist/components/grw-map2.js

@@ -14179,9 +14179,11 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     onChange('currentTreks', () => {
       if (state.currentTrek) {
+        this.removeTreks();
         this.addTrek();
       }
       else if (state.currentTreks) {
+        this.removeTrek();
         this.addTreks();
       }
     });
@@ -14191,8 +14193,8 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.addTrek();
       }
       else {
-        this.addTreks();
         this.removeTrek();
+        this.addTreks();
       }
     });
   }
@@ -14280,9 +14282,12 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   handleTreksWithinBounds() {
-    state.treksWithinBounds = state.currentTreks.filter(trek => this.map.getBounds().contains(leafletSrc.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+    if (!state.currentMapTreksBounds || state.currentMapTreksBounds.toBBoxString() !== this.map.getBounds().toBBoxString()) {
+      state.treksWithinBounds = state.currentTreks.filter(trek => this.map.getBounds().contains(leafletSrc.latLng(trek.departure_geom[1], trek.departure_geom[0])));
+    }
   }
   addTrek() {
+    var _a;
     const currentTrekFeature = {
       type: 'Feature',
       geometry: state.currentTrek.geometry,
@@ -14405,14 +14410,14 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       for (const currentPoi of state.currentPois) {
         currentPoisFeatureCollection.features.push({
           type: 'Feature',
-          properties: { name: currentPoi.name, type_pictogram: currentPoi.type_pictogram },
+          properties: { name: currentPoi.name, type_pictogram: (_a = state.poiTypes.find(poiType => poiType.id === currentPoi.type)) === null || _a === void 0 ? void 0 : _a.pictogram },
           geometry: currentPoi.geometry,
         });
       }
       this.currentPoisLayer = leafletSrc.geoJSON(currentPoisFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
           icon: leafletSrc.divIcon({
-            html: geoJsonPoint.properties.type_pictogram && `<img src=${geoJsonPoint.properties.type_pictogram} />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'poi-icon',
             iconSize: 48,
           }),
@@ -14446,7 +14451,7 @@ const GrwMap = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.currentInformationDesksLayer = leafletSrc.geoJSON(currentInformationDesksFeatureCollection, {
         pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
           icon: leafletSrc.divIcon({
-            html: geoJsonPoint.properties.type_pictogram && `<img src=${geoJsonPoint.properties.type_pictogram} />`,
+            html: geoJsonPoint.properties.type_pictogram ? `<img src=${geoJsonPoint.properties.type_pictogram} />` : `<img />`,
             className: 'information-desks-icon',
             iconSize: 48,
           }),

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

@@ -27,12 +27,15 @@ const GrwTrekProvider = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       fetch(`${this.api}source/?language=${this.language}&fields=id,name,website,pictogram`, { signal: this.signal }),
       fetch(`${this.api}trek_accessibility/?language=${this.language}&fields=id,name,pictogram`, { signal: this.signal }),
       fetch(`${this.api}trek_accessibility_level/?language=${this.language}&fields=id,name`, { signal: this.signal }).catch(() => new Response('null')),
-      fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,type_label,type_pictogram,url,published,geometry&page_size=999`, { signal: this.signal }),
+      fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,geometry&page_size=999`, {
+        signal: this.signal,
+      }),
+      fetch(`${this.api}poi_type/?language=${this.language}&fields=id,pictogram`, { signal: this.signal }),
       fetch(`${this.api}informationdesk/?language=${this.language}&near_trek=${this.trekId}&fields=id,name,description,type,phone,email,website,municipality,postal_code,street,photo_url,latitude,longitude&page_size=999`, { signal: this.signal }),
       fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure,arrival,altimetric_profile,ambiance,access,public_transport,advice,advised_parking,gear,labels,source,points_reference,disabled_infrastructure,accessibility_level,accessibility_slope,accessibility_width,accessibility_signage,accessibility_covering,accessibility_exposure,accessibility_advice,accessibilities`, { signal: this.signal }),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, pois, informationDesks, trek]) => {
+      .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, pois, poiTypes, informationDesks, trek]) => {
       state.trekNetworkError = false;
       if (difficulties) {
         state.difficulties = difficulties.results;
@@ -56,6 +59,7 @@ const GrwTrekProvider = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         state.accessibilitiesLevel = accessibilitiesLevel.results;
       }
       state.currentPois = pois.results;
+      state.poiTypes = poiTypes.results;
       state.currentInformationDesks = informationDesks.results;
       state.currentTrek = trek;
     })

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

@@ -15,19 +15,22 @@ const GrwTreksList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.isLargeView = false;
     this.step = 10;
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
+    this.shouldAddInfiniteScrollEvent = true;
   }
   connectedCallback() {
-    this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+    this.handleInfiniteScrollEvent(true);
     if (state.currentTreks) {
       this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
     }
     onChange('currentTreks', () => {
+      this.handleInfiniteScrollEvent(true);
       this.element.scroll({ top: 0 });
       if (state.currentTreks) {
         this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
       }
     });
     onChange('treksWithinBounds', () => {
+      this.handleInfiniteScrollEvent(true);
       this.element.scroll({ top: 0 });
       if (state.treksWithinBounds) {
         this.treksToDisplay = [...state.treksWithinBounds.slice(0, this.step)];
@@ -40,12 +43,24 @@ const GrwTreksList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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);
+        this.handleInfiniteScrollEvent(false);
       }
     }
   }
+  handleInfiniteScrollEvent(shouldAddInfiniteScrollEvent) {
+    if (shouldAddInfiniteScrollEvent) {
+      if (this.shouldAddInfiniteScrollEvent) {
+        this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+        this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;
+      }
+    }
+    else {
+      this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+      this.shouldAddInfiniteScrollEvent = !shouldAddInfiniteScrollEvent;
+    }
+  }
   disconnectedCallback() {
-    this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
+    this.handleInfiniteScrollEvent(false);
   }
   render() {
     return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, 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 })))));

package/dist/components/store.js

@@ -200,6 +200,7 @@ const { state, onChange } = createStore({
   sources: null,
   accessibilities: null,
   accessibilitiesLevel: null,
+  poiTypes: null,
   currentTrek: null,
   currentPois: null,
   currentInformationDesks: null,

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-ee473772.js';
-import { o as onChange, s as state } from './store-a5f523fd.js';
+import { o as onChange, s as state } from './store-ab2dacd4.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>`;