@geotrekce/geotrek-rando-widget 0.0.3 → 0.0.4

package/dist/cjs/geotrek-rando-widget.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-c6f73e30.js');
+const index = require('./index-c2c4531d.js');
 
 /*
  Stencil Client Patch Browser v2.16.1 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["grw-app_10.cjs",[[1,"grw-app",{"api":[1],"language":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"appName":[1,"app-name"],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[8],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"showTrek":[32],"showMap":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"treksToDisplay":[32]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"mapIsReady":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}],[1,"grw-information-desk-detail",{"informationDesk":[16]}],[1,"grw-poi-detail",{"poi":[16]}],[1,"grw-sensitive-area-detail",{"sensitiveArea":[16]}],[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}]]]], options);
+  return index.bootstrapLazy([["grw-app_11.cjs",[[1,"grw-app",{"api":[1],"language":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1],"appName":[1,"app-name"],"urlLayer":[1,"url-layer"],"center":[1],"zoom":[8],"attribution":[1],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"showTrek":[32],"showMap":[32],"showFilters":[32],"isLargeView":[32],"currentTrekId":[32]},[[0,"trekCardPress","onTrekCardPress"],[9,"resize","onWindowResize"]]],[1,"grw-trek-detail",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryShade":[1,"color-primary-shade"],"colorPrimaryTint":[1,"color-primary-tint"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32]}],[1,"grw-treks-list",{"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"treksToDisplay":[32]}],[1,"grw-filter",{"filterType":[1,"filter-type"],"filterName":[1,"filter-name"],"filterNameProperty":[1,"filter-name-property"]}],[0,"grw-map",{"urlLayer":[1,"url-layer"],"attribution":[1],"center":[1],"zoom":[2],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"colorTrekLine":[1,"color-trek-line"],"colorDepartureIcon":[1,"color-departure-icon"],"colorArrivalIcon":[1,"color-arrival-icon"],"colorSensitiveArea":[1,"color-sensitive-area"],"colorPoiIcon":[1,"color-poi-icon"],"mapIsReady":[32]}],[1,"grw-trek-provider",{"language":[1],"api":[1],"trekId":[1,"trek-id"]}],[1,"grw-treks-provider",{"language":[1],"api":[1],"inBbox":[1,"in-bbox"],"cities":[1],"districts":[1],"structures":[1],"themes":[1],"portals":[1],"routes":[1],"practices":[1]}],[1,"grw-information-desk-detail",{"informationDesk":[16]}],[1,"grw-poi-detail",{"poi":[16]}],[1,"grw-sensitive-area-detail",{"sensitiveArea":[16]}],[1,"grw-trek-card",{"trek":[16],"colorPrimary":[1,"color-primary"],"colorPrimaryTint":[1,"color-primary-tint"],"isLargeView":[4,"is-large-view"],"currentTrek":[32],"difficulty":[32],"route":[32],"practice":[32],"themes":[32]}]]]], options);
 });

package/dist/cjs/{grw-app_10.cjs.entry.js → grw-app_11.cjs.entry.js}

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f73e30.js');
+const index = require('./index-c2c4531d.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -191,9 +191,12 @@ const createStore = (defaultState, shouldUpdate) => {
 const { state, onChange } = createStore({
   api: '',
   treks: [],
+  currentTreks: [],
   difficulties: [],
   routes: [],
   practices: [],
+  themes: [],
+  durations: [],
   currentSensitiveAreas: null,
   currentPois: null,
   currentTrek: null,
@@ -202,13 +205,14 @@ const { state, onChange } = createStore({
 
 const arrowBackImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="244 400 100 256 244 112" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/><line x1="120" y1="256" x2="412" y2="256" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`;
 
-const grwAppCss = ".app-container{position:relative;height:100%;max-height:100vh;font-family:\"Roboto\"}.header-container,.large-view-header-container{display:flex;align-items:center;background-color:var(--color-primary);height:64px}.header-container .title,.large-view-header-container .title{color:#ffffff;margin-left:24px}.header-container .arrow-back-icon,.large-view-header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg,.large-view-header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.loader-container,.large-view-loader-container{display:flex;justify-content:center;align-items:center;height:100%}.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.content-container{position:relative;display:flex;height:calc(100% - 64px)}.app-treks-list-container,.app-trek-detail-container,.large-view-app-treks-list-container,.large-view-app-trek-detail-container{height:100%}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button{cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;bottom:24px;width:100%;z-index:400;user-select:none}.map-visibility-button div{background-color:var(--color-primary);color:#ffffff;padding:12px;border-radius:24px;width:120px;text-align:center}.header-container .title{font-size:24px}.loader-container{position:absolute;width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}.app-map-container{position:relative;width:100%;position:absolute}.large-view-header-container .title{font-size:32px}.large-view-loader-container{position:relative;width:50%}.large-view-app-treks-list-container,.large-view-app-trek-detail-container{width:50%}.large-view-app-map-container{position:relative;width:50%}";
+const grwAppCss = ".app-container{position:relative;height:100%;max-height:100vh;font-family:\"Roboto\"}.header-container,.large-view-header-container{display:flex;align-items:center;background-color:var(--color-primary);height:64px}.header-container .arrow-back-icon,.large-view-header-container .arrow-back-icon{width:48px;height:auto;margin-left:24px}.header-container .arrow-back-icon svg,.large-view-header-container .arrow-back-icon svg{cursor:pointer;width:48px;height:auto}.header-container .handle-filters-button,.large-view-header-container .handle-filters-button{user-select:none;cursor:pointer;color:var(--color-primary);background-color:#ffffff;margin-left:36px;border-radius:8px;padding:8px}.header-container .attribution-container,.large-view-header-container .attribution-container{position:absolute;right:24px}.header-container .attribution-container a,.large-view-header-container .attribution-container a{color:#ffffff;text-decoration:none}.options-container{height:calc(100% - 64px);position:absolute;width:100%;z-index:1100;top:64px}.filters-container{position:absolute;width:100%;background-color:#ffffff;padding:36px 0px;z-index:1100}.filters-container .close-filters-button{cursor:pointer;font-weight:bold;position:absolute;top:12px;right:12px;padding:12px;border-radius:12px;color:var(--color-primary);border:1px var(--color-primary) solid}.filters-container .close-filters-button:hover{background-color:var(--color-primary);color:#ffffff}.filters-container .filter-margin-top{margin-top:24px}.filters-container .current-treks-length{margin:0px 0px 32px 8px;color:var(--color-primary);font-size:24px;font-weight:bold}.back-filters-container{background-color:rgba(0, 0, 0, 0.5);width:100%;height:calc(100% - 64px);position:absolute;z-index:1099;top:64px}.loader-container,.large-view-loader-container{display:flex;justify-content:center;align-items:center;height:100%}.loader-container .loader,.large-view-loader-container .loader{width:48px;height:48px;border:5px solid var(--color-primary-tint);border-bottom-color:var(--color-primary);border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.content-container{position:relative;display:flex;height:calc(100% - 64px)}.app-treks-list-container,.app-trek-detail-container,.large-view-app-treks-list-container,.large-view-app-trek-detail-container{height:100%}.app-map-container,.large-view-app-map-container{width:100%;height:100%}.map-visibility-button{cursor:pointer;display:flex;justify-content:center;align-items:center;position:absolute;bottom:24px;width:100%;z-index:400;user-select:none}.map-visibility-button div{background-color:var(--color-primary);color:#ffffff;padding:12px;border-radius:24px;width:120px;text-align:center}.header-container .title{font-size:24px}.loader-container{position:absolute;width:100%}.app-treks-list-container,.app-trek-detail-container{width:100%}.app-map-container{position:relative;width:100%;position:absolute}.large-view-header-container .title{font-size:32px}.large-view-loader-container{position:relative;width:50%}.large-view-app-treks-list-container,.large-view-app-trek-detail-container{width:50%}.large-view-app-map-container{position:relative;width:50%}";
 
 const GrwApp = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.showTrek = false;
     this.showMap = false;
+    this.showFilters = false;
     this.isLargeView = false;
     this.language = 'fr';
     this.appName = 'Geotrek Rando Widget';
@@ -220,7 +224,7 @@ const GrwApp = class {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
-    this.largeViewSize = 664;
+    this.largeViewSize = 1024;
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
@@ -243,8 +247,11 @@ const GrwApp = class {
     this.isLargeView = this.element.getBoundingClientRect().width >= this.largeViewSize;
     this.showMap = this.isLargeView;
   }
+  handleFilters() {
+    this.showFilters = !this.showFilters;
+  }
   render() {
-    return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, index.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 && index.h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }), index.h("div", { class: "app-container" }, index.h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? index.h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : index.h("div", { class: "title" }, this.appName)), index.h("div", { class: "content-container" }, index.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' } }, index.h("grw-treks-list", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, index.h("span", { class: "loader" }))), state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, index.h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), index.h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: this.showMap ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), index.h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, index.h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
+    return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } }, index.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 && index.h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }), index.h("div", { class: "app-container" }, index.h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? (index.h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage })) : (index.h("div", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")), !this.showTrek && this.showFilters && (index.h("div", { class: "options-container" }, index.h("div", { class: "filters-container" }, index.h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`), index.h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"), index.h("div", null, index.h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })), index.h("div", { class: "filter-margin-top" }, index.h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })), index.h("div", { class: "filter-margin-top" }, index.h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))), index.h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))), index.h("div", { class: "attribution-container" }, index.h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))), index.h("div", { class: "content-container" }, index.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' } }, index.h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, index.h("span", { class: "loader" }))), state.currentTrek && (index.h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, index.h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), index.h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: this.showMap ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), index.h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, index.h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -253,6 +260,78 @@ const GrwApp = class {
 };
 GrwApp.style = grwAppCss;
 
+const grwFilterCss = ".filter-name{margin-left:8px;color:var(--color-primary);font-size:24px;font-weight:bold}.filter-button-container{display:flex;flex-direction:row;flex-wrap:wrap}.filter-button-container .filter-button,.filter-button-container .selected-filter-button{user-select:none;cursor:pointer;border:1px var(--color-primary) solid;border-radius:8px;margin:8px 0px 0px 8px;padding:8px}.filter-button-container .filter-button{color:var(--color-primary);background-color:#ffffff}.filter-button-container .selected-filter-button{color:#ffffff;background-color:var(--color-primary)}";
+
+const GrwFilter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.filters = [
+      { property: 'practices', trekProperty: 'practice', type: 'include' },
+      { property: 'difficulties', trekProperty: 'difficulty', type: 'include' },
+      { property: 'durations', trekProperty: 'duration', type: 'interval' },
+    ];
+  }
+  handleFilter(_event, filterToHandle) {
+    const filterFromState = [...state[this.filterType]];
+    filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id).selected = !filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id)
+      .selected;
+    state[this.filterType] = filterFromState;
+    let isUsingFilter = false;
+    let filtersTreks = [];
+    for (const filter of this.filters) {
+      const currentFiltersId = state[filter.property].filter(currentFilter => currentFilter.selected).map(currentFilter => currentFilter.id);
+      if (currentFiltersId.length > 0) {
+        if (filtersTreks.length > 0) {
+          if (filter.type === 'include') {
+            filtersTreks = [...filtersTreks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
+          }
+          else if (filter.type === 'interval') {
+            let minValue;
+            let maxValue;
+            for (const currentFilterId of currentFiltersId) {
+              const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+              if (isNaN(minValue) || currentFilter.minValue < minValue) {
+                minValue = currentFilter.minValue;
+              }
+              if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
+                maxValue = currentFilter.maxValue;
+              }
+            }
+            filtersTreks = [...filtersTreks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+        else {
+          if (!isUsingFilter) {
+            isUsingFilter = true;
+          }
+          if (filter.type === 'include') {
+            filtersTreks = [...state.treks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
+          }
+          else if (filter.type === 'interval') {
+            let minValue;
+            let maxValue;
+            for (const currentFilterId of currentFiltersId) {
+              const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+              if (isNaN(minValue) || currentFilter.minValue < minValue) {
+                minValue = currentFilter.minValue;
+              }
+              if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
+                maxValue = currentFilter.maxValue;
+              }
+            }
+            filtersTreks = [...state.treks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+      }
+    }
+    state.currentTreks = isUsingFilter ? filtersTreks : state.treks;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "filter-name" }, this.filterName), index.h("div", { class: "filter-button-container" }, state[this.filterType].map(currentFilter => (index.h("div", { onClick: event => this.handleFilter(event, currentFilter), class: currentFilter.selected ? 'selected-filter-button' : 'filter-button' }, currentFilter[this.filterNameProperty]))))));
+  }
+};
+GrwFilter.style = grwFilterCss;
+
 const grwInformationDeskDetailCss = ":host{display:flex;flex-direction:column;padding:0px 8px 8px 8px}.information-desk-img{width:180px}.information-desk-img img{width:180px;border-radius:8px}.information-desk-right-container{display:flex;flex-direction:column;padding:8px}.information-desk-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:0px 0px 8px 0px}.information-desk-description{font-size:16px}";
 
 const GrwInformationDeskDetail = class {
@@ -14441,11 +14520,11 @@ const GrwMap = class {
     else if (state.currentTrek) {
       this.addTreks();
     }
-    onChange('treks', () => {
+    onChange('currentTreks', () => {
       if (state.currentTrek) {
         this.addTrek();
       }
-      else if (state.treks) {
+      else if (state.currentTreks) {
         this.addTreks();
       }
     });
@@ -14467,7 +14546,7 @@ const GrwMap = class {
       type: 'FeatureCollection',
       features: [],
     };
-    for (const trek of state.treks) {
+    for (const trek of state.currentTreks) {
       trekscurrentDepartureCoordinates.push(trek.departure_geom);
       treksFeatureCollection.features.push({
         type: 'Feature',
@@ -14476,7 +14555,7 @@ const GrwMap = class {
           id: trek.id,
           name: trek.name,
           practice: (_a = state.practices.find(practice => practice.id === trek.practice)) === null || _a === void 0 ? void 0 : _a.pictogram,
-          imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].url,
+          imgSrc: trek.attachments && trek.attachments.length > 0 && trek.attachments[0].thumbnail,
         },
       });
     }
@@ -14485,34 +14564,40 @@ const GrwMap = class {
       this.currentBounds = bounds;
       this.map.fitBounds(this.currentBounds);
     }
-    this.treksLayer = leafletSrc.geoJSON(treksFeatureCollection, {
-      pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
-        icon: leafletSrc.divIcon({
-          html: geoJsonPoint.properties.practice && `<img src=${geoJsonPoint.properties.practice} />`,
-          className: 'trek-marker',
-          iconSize: 48,
+    if (!this.treksLayer) {
+      this.treksLayer = leafletSrc.geoJSON(treksFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => leafletSrc.marker(latlng, {
+          icon: leafletSrc.divIcon({
+            html: geoJsonPoint.properties.practice && `<img src=${geoJsonPoint.properties.practice} />`,
+            className: 'trek-marker',
+            iconSize: 48,
+          }),
+          autoPanOnFocus: false,
         }),
-        autoPanOnFocus: false,
-      }),
-      onEachFeature: (geoJsonPoint, layer) => {
-        layer.once('click', () => {
-          const trekDeparturePopup = leafletSrc.DomUtil.create('div');
-          trekDeparturePopup.className = 'trek-departure-popup';
-          trekDeparturePopup.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
-          const trekName = leafletSrc.DomUtil.create('div');
-          trekName.innerHTML = geoJsonPoint.properties.name;
-          trekName.className = 'trek-name';
-          if (geoJsonPoint.properties.imgSrc) {
-            trekName.className += ' trek-name-margin-top';
-            const trekImg = leafletSrc.DomUtil.create('img');
-            trekImg.src = geoJsonPoint.properties.imgSrc;
-            trekDeparturePopup.appendChild(trekImg);
-          }
-          trekDeparturePopup.appendChild(trekName);
-          layer.bindPopup(trekDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
-        });
-      },
-    }).addTo(this.map);
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('click', () => {
+            const trekDeparturePopup = leafletSrc.DomUtil.create('div');
+            trekDeparturePopup.className = 'trek-departure-popup';
+            trekDeparturePopup.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
+            const trekName = leafletSrc.DomUtil.create('div');
+            trekName.innerHTML = geoJsonPoint.properties.name;
+            trekName.className = 'trek-name';
+            if (geoJsonPoint.properties.imgSrc) {
+              trekName.className += ' trek-name-margin-top';
+              const trekImg = leafletSrc.DomUtil.create('img');
+              trekImg.src = geoJsonPoint.properties.imgSrc;
+              trekDeparturePopup.appendChild(trekImg);
+            }
+            trekDeparturePopup.appendChild(trekName);
+            layer.bindPopup(trekDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+          });
+        },
+      }).addTo(this.map);
+    }
+    else {
+      this.treksLayer.clearLayers();
+      this.treksLayer.addData(treksFeatureCollection);
+    }
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTreks() {
@@ -14785,7 +14870,7 @@ const durationImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" heigh
 
 const lengthImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="304 96 416 96 416 208" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="405.77" y1="106.2" x2="111.98" y2="400.02" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="208 416 96 416 96 304" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`;
 
-const grwTrekCardCss = ".trek-card-container{font-family:\"Roboto\";width:350px;height:auto;border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25);cursor:pointer}.trek-card-container .image{border-radius:8px 8px 0px 0px;width:100%;height:auto;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-card-container .sub-container{padding:12px}.trek-card-container .sub-container .name{color:var(--color-primary);font-size:24px;font-weight:bold;margin-bottom:12px}.trek-card-container .sub-container .description{max-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}.trek-card-container .sub-container .description p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.trek-card-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{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-card-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:12px}.trek-card-container .sub-container .icons-labels-container .row .icon-label{display:flex;justify-content:center;align-items:center;width:33.3333333333%}.trek-card-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{width:24px;height:auto;margin-right:24px}.trek-card-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}";
+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}";
 
 const GrwTrekCard = class {
   constructor(hostRef) {
@@ -14793,6 +14878,7 @@ const GrwTrekCard = class {
     this.trekCardPress = index.createEvent(this, "trekCardPress", 7);
     this.colorPrimary = '#6b0030';
     this.colorPrimaryTint = '#974c6e';
+    this.isLargeView = false;
   }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -14800,6 +14886,7 @@ const GrwTrekCard = class {
       this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
       this.route = state.routes.find(route => route.id === this.currentTrek.route);
       this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+      this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
     }
     onChange('currentTrek', () => {
       this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -14807,14 +14894,15 @@ const GrwTrekCard = class {
         this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
         this.route = state.routes.find(route => route.id === this.currentTrek.route);
         this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+        this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
       }
     });
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (index.h(index.Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (index.h("div", { class: "trek-card-container" }, this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (index.h("img", { class: "image", src: `${this.currentTrek.attachments[0].thumbnail}`, loading: "lazy" })), index.h("div", { class: "sub-container" }, index.h("div", { class: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name), index.h("div", { class: "description", innerHTML: (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.description_teaser }), index.h("div", { class: "icons-labels-container" }, index.h("div", { class: "row" }, index.h("div", { class: "icon-label difficulty" }, ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && index.h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
-      _d.label), index.h("div", { class: "icon-label duration" }, index.h("div", { class: "svg-icon", innerHTML: durationImage }), formatDuration(this.currentTrek.duration)), index.h("div", { class: "icon-label route" }, ((_e = this.route) === null || _e === void 0 ? void 0 : _e.pictogram) && index.h("img", { src: this.route.pictogram }), (_f = this.route) === null || _f === void 0 ? void 0 :
-      _f.route)), index.h("div", { class: "row" }, index.h("div", { class: "icon-label length" }, index.h("div", { class: "svg-icon", innerHTML: lengthImage }), formatLength(this.currentTrek.length_2d)), index.h("div", { class: "icon-label ascent" }, index.h("div", { class: "svg-icon", innerHTML: ascentImage }), formatAscent(this.currentTrek.ascent)), index.h("div", { class: "icon-label practice" }, ((_g = this.practice) === null || _g === void 0 ? void 0 : _g.pictogram) && index.h("img", { src: this.practice.pictogram }), (_h = this.practice) === null || _h === void 0 ? void 0 :
+    return (index.h(index.Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { 'width': this.isLargeView ? '100%' : 'auto', '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (index.h("div", { class: this.isLargeView ? 'trek-card-large-view-container' : 'trek-card-container' }, this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (index.h("img", { class: "image", src: `${this.currentTrek.attachments[0].thumbnail}`, loading: "lazy" })), index.h("div", { class: "sub-container" }, index.h("div", { class: "departure" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.departure), index.h("div", { class: "name" }, (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.name), index.h("div", { class: "themes-container" }, this.themes.map(theme => (index.h("div", { class: "theme" }, theme.label)))), index.h("div", { class: "icons-labels-container" }, index.h("div", { class: "row" }, index.h("div", { class: "icon-label difficulty" }, ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && index.h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
+      _d.label), index.h("div", { class: "icon-label duration" }, index.h("div", { class: "svg-icon", innerHTML: durationImage }), formatDuration(this.currentTrek.duration))), index.h("div", { class: "row" }, index.h("div", { class: "icon-label length" }, index.h("div", { class: "svg-icon", innerHTML: lengthImage }), formatLength(this.currentTrek.length_2d)), index.h("div", { class: "icon-label ascent" }, index.h("div", { class: "svg-icon", innerHTML: ascentImage }), formatAscent(this.currentTrek.ascent))), index.h("div", { class: "row" }, index.h("div", { class: "icon-label route" }, ((_e = this.route) === null || _e === void 0 ? void 0 : _e.pictogram) && index.h("img", { src: this.route.pictogram }), (_f = this.route) === null || _f === void 0 ? void 0 :
+      _f.route), index.h("div", { class: "icon-label practice" }, ((_g = this.practice) === null || _g === void 0 ? void 0 : _g.pictogram) && index.h("img", { src: this.practice.pictogram }), (_h = this.practice) === null || _h === void 0 ? void 0 :
       _h.name))))))));
   }
 };
@@ -14862,21 +14950,35 @@ const GrwTrekProvider = class {
   }
   componentWillLoad() {
     state.api = this.api;
+    const requests = [];
+    requests.push(!state.difficulties ? fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
+    requests.push(!state.routes ? fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`) : new Response('null'));
+    requests.push(!state.practices ? fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`) : new Response('null'));
+    requests.push(!state.themes ? fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`) : new Response('null'));
     return Promise.all([
-      fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
-      fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
-      fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
-      fetch(`${this.api}sensitivearea/?language=${this.language}&trek=${this.trekId}&fields=id,geometry,name,description`).catch(() => new Response('[]')),
+      ...requests,
+      fetch(`${this.api}sensitivearea/?language=${this.language}&trek=${this.trekId}&fields=id,geometry,name,description`).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`),
       fetch(`${this.api}informationdesk/?language=${this.language}&near_trek=${this.trekId}&fields=id,name,description,type,phone,email,website,municipality,postal_code,street,photo_url,latitude,longitude&page_size=999`),
-      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,route,geometry,gpx,kml,pdf,parking_location`),
+      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure`),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, sensitiveAreas, pois, informationDesks, trek]) => {
-      state.difficulties = difficulties.results;
-      state.routes = routes.results;
-      state.practices = practices.results;
-      state.currentSensitiveAreas = sensitiveAreas.results;
+      .then(([difficulties, routes, practices, themes, sensitiveAreas, pois, informationDesks, trek]) => {
+      if (difficulties) {
+        state.difficulties = difficulties.results;
+      }
+      if (routes) {
+        state.routes = routes.results;
+      }
+      if (practices) {
+        state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
+      }
+      if (themes) {
+        state.themes = themes.results;
+      }
+      if (sensitiveAreas) {
+        state.currentSensitiveAreas = sensitiveAreas.results;
+      }
       state.currentPois = pois.results;
       state.currentInformationDesks = informationDesks.results;
       state.currentTrek = trek;
@@ -14890,7 +14992,7 @@ const GrwTrekProvider = class {
   }
 };
 
-const grwTreksListCss = ":host{font-family:\"Roboto\";display:flex;flex-wrap:wrap;justify-content:space-around;height:100%;max-height:100vh;overflow-y:auto}grw-trek-card{margin:6px}";
+const grwTreksListCss = ":host{font-family:\"Roboto\";width:100%;height:100%;max-height:100vh;overflow-y:auto}.current-treks-length{width:100%;text-align:center;padding:32px 0px;color:var(--color-primary);font-size:24px;font-weight:bold}.current-treks-container{display:flex;flex-wrap:wrap;justify-content:space-around}grw-trek-card{margin:6px}";
 
 const GrwTreksList = class {
   constructor(hostRef) {
@@ -14898,19 +15000,21 @@ const GrwTreksList = class {
     this.treksToDisplay = [];
     this.colorPrimary = '#6b0030';
     this.colorPrimaryTint = '#974c6e';
+    this.isLargeView = false;
     this.handleInfiniteScrollBind = this.handleInfiniteScroll.bind(this);
     this.step = 10;
   }
   componentWillLoad() {
-    this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
-    onChange('treks', () => {
-      this.treksToDisplay = state.treks.slice(0, this.step);
+    onChange('currentTreks', () => {
+      this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+      this.element.scroll({ top: 0 });
+      this.treksToDisplay = [...state.currentTreks.slice(0, this.step)];
     });
   }
   handleInfiniteScroll(event) {
     if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
       if (this.treksToDisplay.length < state.treks.length) {
-        this.treksToDisplay = state.treks.slice(0, this.treksToDisplay.length + this.step >= state.treks.length ? state.treks.length : this.treksToDisplay.length + this.step);
+        this.treksToDisplay = state.currentTreks.slice(0, this.treksToDisplay.length + this.step >= state.currentTreks.length ? state.currentTreks.length : this.treksToDisplay.length + this.step);
       }
       else {
         this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
@@ -14918,7 +15022,7 @@ const GrwTreksList = class {
     }
   }
   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", { trek: trek, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
+    return (index.h(index.Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, index.h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`), index.h("div", { class: "current-treks-container" }, 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 }))))));
   }
   get element() { return index.getElement(this); }
 };
@@ -14940,19 +15044,28 @@ const GrwTreksProvider = class {
     this.portals && (treksRequest += `&portals=${this.portals}`);
     this.routes && (treksRequest += `&routes=${this.routes}`);
     this.practices && (treksRequest += `&practices=${this.practices}`);
-    treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,route,departure_geom&page_size=999`;
+    treksRequest += `&fields=id,name,attachments,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,departure,departure_geom&page_size=999`;
     return Promise.all([
       fetch(`${this.api}trek_difficulty/?language=${this.language}&fields=id,label,pictogram`),
       fetch(`${this.api}trek_route/?language=${this.language}&fields=id,route,pictogram`),
       fetch(`${this.api}trek_practice/?language=${this.language}&fields=id,name,pictogram`),
+      fetch(`${this.api}theme/?language=${this.language}&fields=id,label,pictogram`),
       fetch(treksRequest),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, treks]) => {
+      .then(([difficulties, routes, practices, themes, treks]) => {
       state.difficulties = difficulties.results;
       state.routes = routes.results;
-      state.practices = practices.results;
+      state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
+      state.themes = themes.results;
+      state.durations = [
+        { id: 1, name: '0 - 1h', minValue: 0, maxValue: 1, selected: false },
+        { id: 2, name: '1 - 2h', minValue: 1, maxValue: 2, selected: false },
+        { id: 3, name: '2 - 5h', minValue: 2, maxValue: 5, selected: false },
+        { id: 4, name: '5 - 10h', minValue: 5, maxValue: 10, selected: false },
+      ];
       state.treks = treks.results;
+      state.currentTreks = treks.results;
     });
   }
   render() {
@@ -14961,6 +15074,7 @@ const GrwTreksProvider = class {
 };
 
 exports.grw_app = GrwApp;
+exports.grw_filter = GrwFilter;
 exports.grw_information_desk_detail = GrwInformationDeskDetail;
 exports.grw_map = GrwMap;
 exports.grw_poi_detail = GrwPoiDetail;

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

@@ -189,6 +189,7 @@ const isComplexType = (o) => {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -216,6 +217,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -233,6 +238,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 const newVNode = (tag, text) => {
@@ -246,6 +254,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -294,6 +305,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -458,6 +471,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -465,6 +480,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // Vnode might have been moved left
@@ -502,7 +518,29 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // createKeyToOldIdx
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // new element
                 node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
                 newStartVnode = newCh[++newStartIdx];
@@ -525,7 +563,9 @@ const isSameVnode = (vnode1, vnode2) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (vnode1.$tag$ === vnode2.$tag$) {
-        return true;
+        {
+            return vnode1.$key$ === vnode2.$key$;
+        }
     }
     return false;
 };
@@ -815,6 +855,11 @@ const addHydratedFlag = (elm) => elm.classList.add('hydrated')
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {
+        if (propType & 4 /* Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return propValue === 'false' ? false : propValue === '' || !!propValue;
+        }
         if (propType & 2 /* Number */) {
             // force it to be a number
             return parseFloat(propValue);

package/dist/cjs/loader.cjs.js

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