@geotrekce/geotrek-rando-widget 0.0.3 → 0.0.6

package/dist/esm/{grw-app_10.entry.js → grw-filter_6.entry.js}

@@ -1,267 +1,78 @@
-import { g as getRenderingRef, f as forceUpdate, r as registerInstance, h, H as Host, a as getElement, c as createEvent } from './index-7aa9e822.js';
+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-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 appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
-    }
-    else if (!items.includes(value)) {
-        items.push(value);
-    }
-};
-const debounce = (fn, ms) => {
-    let timeoutId;
-    return (...args) => {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            timeoutId = 0;
-            fn(...args);
-        }, ms);
-    };
-};
+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)}";
 
-/**
- * Check if a possible element isConnected.
- * The property might not be there, so we check for it.
- *
- * We want it to return true if isConnected is not a property,
- * otherwise we would remove these elements and would not update.
- *
- * Better leak in Edge than to be useless.
- */
-const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
-const cleanupElements = debounce((map) => {
-    for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
-    }
-}, 2000);
-const stencilSubscription = () => {
-    if (typeof getRenderingRef !== 'function') {
-        // If we are not in a stencil project, we do nothing.
-        // This function is not really exported by @stencil/core.
-        return {};
-    }
-    const elmsToUpdate = new Map();
-    return {
-        dispose: () => elmsToUpdate.clear(),
-        get: (propName) => {
-            const elm = getRenderingRef();
-            if (elm) {
-                appendToMap(elmsToUpdate, propName, elm);
-            }
-        },
-        set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+const GrwFilter = class {
+  constructor(hostRef) {
+    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;
+              }
             }
-            cleanupElements(elmsToUpdate);
-        },
-        reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
-            cleanupElements(elmsToUpdate);
-        },
-    };
-};
-
-const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
-    const handlers = {
-        dispose: [],
-        get: [],
-        set: [],
-        reset: [],
-    };
-    const reset = () => {
-        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));
-        handlers.reset.forEach((cb) => cb());
-    };
-    const dispose = () => {
-        // Call first dispose as resetting the state would
-        // cause less updates ;)
-        handlers.dispose.forEach((cb) => cb());
-        reset();
-    };
-    const get = (propName) => {
-        handlers.get.forEach((cb) => cb(propName));
-        return states.get(propName);
-    };
-    const set = (propName, value) => {
-        const oldValue = states.get(propName);
-        if (shouldUpdate(value, oldValue, propName)) {
-            states.set(propName, value);
-            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+            filtersTreks = [...filtersTreks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
         }
-    };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(defaultState, {
-            get(_, propName) {
-                return get(propName);
-            },
-            ownKeys(_) {
-                return Array.from(states.keys());
-            },
-            getOwnPropertyDescriptor() {
-                return {
-                    enumerable: true,
-                    configurable: true,
-                };
-            },
-            has(_, propName) {
-                return states.has(propName);
-            },
-            set(_, propName, value) {
-                set(propName, value);
-                return true;
-            },
-        }));
-    const on = (eventName, callback) => {
-        handlers[eventName].push(callback);
-        return () => {
-            removeFromArray(handlers[eventName], callback);
-        };
-    };
-    const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
-            if (key === propName) {
-                cb(newValue);
-            }
-        });
-        const unReset = on('reset', () => cb(defaultState[propName]));
-        return () => {
-            unSet();
-            unReset();
-        };
-    };
-    const use = (...subscriptions) => {
-        const unsubs = subscriptions.reduce((unsubs, subscription) => {
-            if (subscription.set) {
-                unsubs.push(on('set', subscription.set));
-            }
-            if (subscription.get) {
-                unsubs.push(on('get', subscription.get));
-            }
-            if (subscription.reset) {
-                unsubs.push(on('reset', subscription.reset));
-            }
-            if (subscription.dispose) {
-                unsubs.push(on('dispose', subscription.dispose));
+        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;
+              }
             }
-            return unsubs;
-        }, []);
-        return () => unsubs.forEach((unsub) => unsub());
-    };
-    const forceUpdate = (key) => {
-        const oldValue = states.get(key);
-        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
-    };
-    return {
-        state,
-        get,
-        set,
-        on,
-        onChange,
-        use,
-        dispose,
-        reset,
-        forceUpdate,
-    };
-};
-const removeFromArray = (array, item) => {
-    const index = array.indexOf(item);
-    if (index >= 0) {
-        array[index] = array[array.length - 1];
-        array.length--;
+            filtersTreks = [...state.treks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+      }
     }
-};
-
-const createStore = (defaultState, shouldUpdate) => {
-    const map = createObservableMap(defaultState, shouldUpdate);
-    map.use(stencilSubscription());
-    return map;
-};
-
-const { state, onChange } = createStore({
-  api: '',
-  treks: [],
-  difficulties: [],
-  routes: [],
-  practices: [],
-  currentSensitiveAreas: null,
-  currentPois: null,
-  currentTrek: null,
-  currentInformationDesks: null,
-});
-
-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 GrwApp = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.showTrek = false;
-    this.showMap = false;
-    this.isLargeView = false;
-    this.language = 'fr';
-    this.appName = 'Geotrek Rando Widget';
-    this.colorPrimary = '#6b0030';
-    this.colorPrimaryShade = '#4a0021';
-    this.colorPrimaryTint = '#974c6e';
-    this.colorTrekLine = '#6b0030';
-    this.colorDepartureIcon = '#006b3b';
-    this.colorArrivalIcon = '#85003b';
-    this.colorSensitiveArea = '#4974a5';
-    this.colorPoiIcon = '#974c6e';
-    this.largeViewSize = 664;
-  }
-  onTrekCardPress(event) {
-    this.currentTrekId = event.detail;
-    this.showTrek = !this.showTrek;
-  }
-  onWindowResize() {
-    this.handleView();
-  }
-  watchPropHandler() {
-    window.dispatchEvent(new window.Event('resize'));
-  }
-  componentDidLoad() {
-    this.handleView();
-  }
-  onTrekDetailsClose() {
-    this.currentTrekId = null;
-    this.showTrek = !this.showTrek;
-  }
-  handleView() {
-    this.isLargeView = this.element.getBoundingClientRect().width >= this.largeViewSize;
-    this.showMap = this.isLargeView;
-  }
-  render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }), this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }), h("div", { class: "app-container" }, h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : h("div", { class: "title" }, this.appName)), h("div", { class: "content-container" }, h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } }, h("grw-treks-list", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })), this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' }, h("span", { class: "loader" }))), state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' }, h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))), h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: this.showMap ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })), h("div", { class: "map-visibility-button", style: { display: this.isLargeView ? 'none' : 'flex' } }, h("div", { onClick: () => (this.showMap = !this.showMap) }, this.showMap ? (this.showTrek ? 'Voir la fiche' : 'Voir la liste') : 'Voir la carte')))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "isLargeView": ["watchPropHandler"]
-  }; }
-};
-GrwApp.style = grwAppCss;
-
-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 {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+    state.currentTreks = isUsingFilter ? filtersTreks : state.treks;
   }
   render() {
-    return (h(Host, null, this.informationDesk.photo_url && (h("div", { class: "information-desk-img" }, h("img", { src: this.informationDesk.photo_url, loading: "lazy" }))), h("div", { class: "information-desk-right-container" }, this.informationDesk.name && h("div", { class: "information-desk-name" }, this.informationDesk.name), this.informationDesk.description && h("div", { class: "information-desk-description", innerHTML: this.informationDesk.description }), this.informationDesk.postal_code ||
-      this.informationDesk.municipality ||
-      (this.informationDesk.street && (h("div", null, this.informationDesk.postal_code, ` ${this.informationDesk.municipality}`, ` ${this.informationDesk.street}`))), this.informationDesk.phone && (h("div", null, h("a", { href: `tel:${this.informationDesk.phone}` }, this.informationDesk.phone))), this.informationDesk.email && (h("div", null, h("a", { href: `mailto:${this.informationDesk.email}` }, this.informationDesk.email))), this.informationDesk.website && (h("div", null, h("a", { href: `${this.informationDesk.website}` }, this.informationDesk.website))))));
+    return (h(Host, null, h("div", { class: "filter-name" }, this.filterName), h("div", { class: "filter-button-container" }, state[this.filterType].map(currentFilter => (h("div", { onClick: event => this.handleFilter(event, currentFilter), class: currentFilter.selected ? 'selected-filter-button' : 'filter-button' }, currentFilter[this.filterNameProperty]))))));
   }
 };
-GrwInformationDeskDetail.style = grwInformationDeskDetailCss;
+GrwFilter.style = grwFilterCss;
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -14404,7 +14215,7 @@ var leafletSrc = createCommonjsModule(function (module, exports) {
 
 const departureArrivalImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M80,464V68.14a8,8,0,0,1,4-6.9C91.81,56.66,112.92,48,160,48c64,0,145,48,192,48a199.53,199.53,0,0,0,77.23-15.77A2,2,0,0,1,432,82.08V301.44a4,4,0,0,1-2.39,3.65C421.37,308.7,392.33,320,352,320c-48,0-128-32-192-32s-80,16-80,16" style=";fill:#ffffff;stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`;
 
-const grwMapCss = ".leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none !important;max-height:none !important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none !important;max-height:none !important;width:auto;padding:0}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51, 181, 229, 0.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform 0.25s cubic-bezier(0,0,0.25,1);transition:transform 0.25s cubic-bezier(0,0,0.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078A8}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,0.5)}.leaflet-container{font-family:\"Helvetica Neue\", Arial, Helvetica, sans-serif;font-size:12px;font-size:0.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,0.65);border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console', Monaco, monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(images/marker-icon.png)}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255, 255, 255, 0.8);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-control-attribution svg{display:inline !important}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;background:#fff;background:rgba(255, 255, 255, 0.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,0.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:17px 0;margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;color:#333;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma, Verdana, sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:\"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)\";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:\"\"}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;color-adjust:exact}}grw-map{font-family:\"Roboto\";display:block;height:100%;max-height:100vh}.departure-icon svg,.arrival-icon svg{width:48px;height:48px}.departure-icon svg path,.arrival-icon svg path{fill:currentColor;stroke:currentColor}.departure-icon{color:var(--color-departure-icon)}.arrival-icon{color:var(--color-arrival-icon)}.trek-marker{background-color:var(--color-primary);border-radius:50%;display:flex;justify-content:center;align-items:center}.trek-marker img{width:36px !important}.map-loader-container{position:absolute;z-index:500;width:100%;height:100%;background:rgba(255, 255, 255, 0.5);display:flex;justify-content:center;align-items:center}.map-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)}}.leaflet-popup-content{width:144px;margin:0}.trek-departure-popup{position:relative;display:flex;flex-direction:column;width:100px;height:auto;padding:24px}.trek-departure-popup img{border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-departure-popup .trek-name{color:var(--color-primary);font-weight:bold;font-size:12px}.trek-departure-popup .trek-name-margin-top{margin-top:12px}.poi-tooltip .poi-name,.poi-tooltip .information-desks-name,.information-desks-tooltip .poi-name,.information-desks-tooltip .information-desks-name{color:var(--color-primary);font-weight:bold;font-size:12px}.sensitiveAreasCheckboxContainer{display:flex;justify-content:center;align-items:center;background-color:#ffffff;padding:8px;border-radius:8px;user-select:none}.sensitiveAreasCheckboxContainer input,.sensitiveAreasCheckboxContainer label{cursor:pointer}.sensitiveAreasCheckboxContainer input{margin:0}.sensitiveAreasCheckboxContainer label{padding-left:8px}.poi-icon,.information-desks-icon{background-color:var(--color-poi-icon);border-radius:50%;display:flex;justify-content:center;align-items:center}.poi-icon img,.information-desks-icon img{width:36px !important}.parking-icon{background-color:#0000ff;border-radius:50%;display:flex;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;color:#ffffff}";
+const grwMapCss = ".leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-tile::selection{background:transparent}.leaflet-safari .leaflet-tile{image-rendering:-webkit-optimize-contrast}.leaflet-safari .leaflet-tile-container{width:1600px;height:1600px;-webkit-transform-origin:0 0}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container .leaflet-overlay-pane svg{max-width:none !important;max-height:none !important}.leaflet-container .leaflet-marker-pane img,.leaflet-container .leaflet-shadow-pane img,.leaflet-container .leaflet-tile-pane img,.leaflet-container img.leaflet-image-layer,.leaflet-container .leaflet-tile{max-width:none !important;max-height:none !important;width:auto;padding:0}.leaflet-container.leaflet-touch-zoom{-ms-touch-action:pan-x pan-y;touch-action:pan-x pan-y}.leaflet-container.leaflet-touch-drag{-ms-touch-action:pinch-zoom;touch-action:none;touch-action:pinch-zoom}.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{-ms-touch-action:none;touch-action:none}.leaflet-container{-webkit-tap-highlight-color:transparent}.leaflet-container a{-webkit-tap-highlight-color:rgba(51, 181, 229, 0.4)}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0;-moz-box-sizing:border-box;box-sizing:border-box;z-index:800}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-animated{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}svg.leaflet-zoom-animated{will-change:transform}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform 0.25s cubic-bezier(0,0,0.25,1);-moz-transition:-moz-transform 0.25s cubic-bezier(0,0,0.25,1);transition:transform 0.25s cubic-bezier(0,0,0.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile{-webkit-transition:none;-moz-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.leaflet-crosshair,.leaflet-crosshair .leaflet-interactive{cursor:crosshair}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-grab,.leaflet-dragging .leaflet-grab .leaflet-interactive,.leaflet-dragging .leaflet-marker-draggable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-image-layer,.leaflet-pane>svg path,.leaflet-tile-container{pointer-events:none}.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive,svg.leaflet-image-layer.leaflet-interactive path{pointer-events:visiblePainted;pointer-events:auto}.leaflet-container{background:#ddd;outline-offset:1px}.leaflet-container a{color:#0078A8}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,0.5)}.leaflet-container{font-family:\"Helvetica Neue\", Arial, Helvetica, sans-serif;font-size:12px;font-size:0.75rem;line-height:1.5}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,0.65);border-radius:4px}.leaflet-bar a{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover,.leaflet-bar a:focus{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-touch .leaflet-bar a:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.leaflet-touch .leaflet-bar a:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console', Monaco, monospace;text-indent:1px}.leaflet-touch .leaflet-control-zoom-in,.leaflet-touch .leaflet-control-zoom-out{font-size:22px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,0.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-scrollbar{overflow-y:scroll;overflow-x:hidden;padding-right:5px}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block;font-size:13px;font-size:1.08333em}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-default-icon-path{background-image:url(images/marker-icon.png)}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255, 255, 255, 0.8);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333;line-height:1.4}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover,.leaflet-control-attribution a:focus{text-decoration:underline}.leaflet-control-attribution svg{display:inline !important}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;white-space:nowrap;overflow:hidden;-moz-box-sizing:border-box;box-sizing:border-box;background:#fff;background:rgba(255, 255, 255, 0.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,0.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 24px 13px 20px;line-height:1.3;font-size:13px;font-size:1.08333em;min-height:1px}.leaflet-popup-content p{margin:17px 0;margin:1.3em 0}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;color:#333;box-shadow:0 3px 14px rgba(0,0,0,0.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:24px;height:24px;font:16px/24px Tahoma, Verdana, sans-serif;color:#757575;text-decoration:none;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover,.leaflet-container a.leaflet-popup-close-button:focus{color:#585858}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{-ms-zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:\"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)\";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}.leaflet-tooltip{position:absolute;padding:6px;background-color:#fff;border:1px solid #fff;border-radius:3px;color:#222;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.leaflet-tooltip.leaflet-interactive{cursor:pointer;pointer-events:auto}.leaflet-tooltip-top:before,.leaflet-tooltip-bottom:before,.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{position:absolute;pointer-events:none;border:6px solid transparent;background:transparent;content:\"\"}.leaflet-tooltip-bottom{margin-top:6px}.leaflet-tooltip-top{margin-top:-6px}.leaflet-tooltip-bottom:before,.leaflet-tooltip-top:before{left:50%;margin-left:-6px}.leaflet-tooltip-top:before{bottom:0;margin-bottom:-12px;border-top-color:#fff}.leaflet-tooltip-bottom:before{top:0;margin-top:-12px;margin-left:-6px;border-bottom-color:#fff}.leaflet-tooltip-left{margin-left:-6px}.leaflet-tooltip-right{margin-left:6px}.leaflet-tooltip-left:before,.leaflet-tooltip-right:before{top:50%;margin-top:-6px}.leaflet-tooltip-left:before{right:0;margin-right:-12px;border-left-color:#fff}.leaflet-tooltip-right:before{left:0;margin-left:-12px;border-right-color:#fff}@media print{.leaflet-control{-webkit-print-color-adjust:exact;color-adjust:exact}}grw-map{font-family:\"Roboto\";display:block;height:100%;max-height:100vh}.departure-icon svg,.arrival-icon svg{width:48px;height:48px}.departure-icon svg path,.arrival-icon svg path{fill:currentColor;stroke:currentColor}.departure-icon{color:var(--color-departure-icon)}.arrival-icon{color:var(--color-arrival-icon)}.trek-marker{background-color:var(--color-primary);border-radius:50%;display:flex;justify-content:center;align-items:center}.trek-marker img{width:36px !important}.map-loader-container{position:absolute;z-index:500;width:100%;height:100%;background:rgba(255, 255, 255, 0.5);display:flex;justify-content:center;align-items:center}.map-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)}}.leaflet-popup-content{width:144px;margin:0}.trek-departure-popup{position:relative;display:flex;flex-direction:column;width:100px;height:auto;padding:24px}.trek-departure-popup img{border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25)}.trek-departure-popup .trek-name{color:var(--color-primary);font-weight:bold;font-size:12px}.trek-departure-popup .trek-name-margin-top{margin-top:12px}.poi-tooltip .poi-name,.poi-tooltip .information-desks-name,.poi-tooltip .sensitive-area-name,.information-desks-tooltip .poi-name,.information-desks-tooltip .information-desks-name,.information-desks-tooltip .sensitive-area-name,.sensitive-area-tooltip .poi-name,.sensitive-area-tooltip .information-desks-name,.sensitive-area-tooltip .sensitive-area-name{color:var(--color-primary);font-weight:bold;font-size:12px}.sensitiveAreasCheckboxContainer{display:flex;justify-content:center;align-items:center;background-color:#ffffff;padding:8px;border-radius:8px;user-select:none}.sensitiveAreasCheckboxContainer input,.sensitiveAreasCheckboxContainer label{cursor:pointer}.sensitiveAreasCheckboxContainer input{margin:0}.sensitiveAreasCheckboxContainer label{padding-left:8px}.poi-icon,.information-desks-icon{background-color:var(--color-poi-icon);border-radius:50%;display:flex;justify-content:center;align-items:center}.poi-icon img,.information-desks-icon img{width:36px !important}.parking-icon{background-color:#0000ff;border-radius:50%;display:flex;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;color:#ffffff}.point-reference-icon{background-color:#ff0000;border:1px solid #ffffff;border-radius:50%;display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:18px;color:#ffffff}";
 
 const GrwMap = class {
   constructor(hostRef) {
@@ -14420,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, {
@@ -14437,11 +14249,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();
       }
     });
@@ -14463,7 +14275,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',
@@ -14472,51 +14284,69 @@ 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,
         },
       });
     }
-    if (trekscurrentDepartureCoordinates.length > 0) {
-      const bounds = leafletSrc.latLngBounds(trekscurrentDepartureCoordinates.map(coordinate => [coordinate[1], coordinate[0]]));
-      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) {
+      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} />` : `<img />`,
+            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 {
+      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',
@@ -14530,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 = {
@@ -14590,11 +14419,24 @@ const GrwMap = class {
       for (const sensitiveArea of state.currentSensitiveAreas) {
         currentSensitiveAreasFeatureCollection.features.push({
           type: 'Feature',
-          properties: {},
+          properties: { name: sensitiveArea.name },
           geometry: sensitiveArea.geometry,
         });
       }
-      this.currentSensitiveAreasLayer = leafletSrc.geoJSON(currentSensitiveAreasFeatureCollection, { style: () => ({ color: this.colorSensitiveArea }) }).addTo(this.map);
+      this.currentSensitiveAreasLayer = leafletSrc.geoJSON(currentSensitiveAreasFeatureCollection, {
+        onEachFeature: (geoJsonPoint, layer) => {
+          layer.once('mouseover', () => {
+            const sensitiveAreaTooltip = leafletSrc.DomUtil.create('div');
+            sensitiveAreaTooltip.className = 'sensitive-area-tooltip';
+            const sensitiveAreaName = leafletSrc.DomUtil.create('div');
+            sensitiveAreaName.innerHTML = geoJsonPoint.properties.name;
+            sensitiveAreaName.className = 'sensitive-area-name';
+            sensitiveAreaTooltip.appendChild(sensitiveAreaName);
+            layer.bindTooltip(sensitiveAreaTooltip).openTooltip();
+          });
+        },
+        style: () => ({ color: this.colorSensitiveArea }),
+      }).addTo(this.map);
       leafletSrc.Control.SensitiveAreasCheckboxContainer = leafletSrc.Control.extend({
         onAdd: () => {
           const sensitiveAreasCheckboxContainer = leafletSrc.DomUtil.create('div');
@@ -14688,6 +14530,32 @@ const GrwMap = class {
         },
       }).addTo(this.map);
     }
+    if (state.currentTrek.points_reference) {
+      const currentPointsReferenceFeatureCollection = {
+        type: 'FeatureCollection',
+        features: [],
+      };
+      currentPointsReferenceFeatureCollection.features.push({
+        type: 'Feature',
+        properties: {},
+        geometry: state.currentTrek.points_reference,
+      });
+      let index = 0;
+      this.currentPointsReferenceLayer = leafletSrc.geoJSON(currentPointsReferenceFeatureCollection, {
+        pointToLayer: (_geoJsonPoint, latlng) => {
+          index += 1;
+          return leafletSrc.marker(latlng, {
+            icon: leafletSrc.divIcon({
+              html: index,
+              className: 'point-reference-icon',
+              iconSize: 24,
+            }),
+            autoPanOnFocus: false,
+            interactive: false,
+          });
+        },
+      }).addTo(this.map);
+    }
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTrek() {
@@ -14717,6 +14585,10 @@ const GrwMap = class {
       this.map.removeLayer(this.currentInformationDesksLayer);
       this.currentInformationDesksLayer = null;
     }
+    if (this.currentPointsReferenceLayer) {
+      this.map.removeLayer(this.currentPointsReferenceLayer);
+      this.currentPointsReferenceLayer = null;
+    }
   }
   render() {
     return (h(Host, { style: {
@@ -14731,92 +14603,7 @@ const GrwMap = class {
 };
 GrwMap.style = grwMapCss;
 
-const grwPoiDetailCss = ":host{display:flex;flex-direction:column;padding:0px 8px 8px 8px}.poi-img{width:180px}.poi-img img{width:180px;border-radius:8px}.poi-right-container{display:flex;flex-direction:column;padding:8px}.poi-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:0px 0px 8px 0px}.poi-description{font-size:16px}";
-
-const GrwPoiDetail = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, this.poi.attachments && this.poi.attachments[0] && this.poi.attachments[0].thumbnail && (h("div", { class: "poi-img" }, h("img", { src: this.poi.attachments[0].thumbnail, loading: "lazy" }))), h("div", { class: "poi-right-container" }, h("div", { class: "poi-name" }, this.poi.name), h("div", { class: "poi-description", innerHTML: this.poi.description }))));
-  }
-};
-GrwPoiDetail.style = grwPoiDetailCss;
-
-const grwSensitiveAreaDetailCss = ":host{display:flex;flex-direction:column;padding:0px 8px 8px 8px}.sensitive-area-name{color:var(--color-primary);font-size:24px;font-weight:bold;padding:0px 0px 8px 0px}.sensitive-area-description{font-size:16px}";
-
-const GrwSensitiveAreaDetail = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "sensitive-area-name" }, this.sensitiveArea.name), h("div", { class: "sensitive-area-description", innerHTML: this.sensitiveArea.description })));
-  }
-};
-GrwSensitiveAreaDetail.style = grwSensitiveAreaDetailCss;
-
-function formatDuration(duration) {
-  let formattedDuration;
-  if (duration < 24) {
-    formattedDuration = `${Math.floor(duration)}h`;
-    if (duration % 1 > 0) {
-      formattedDuration += `${Math.round(60 * (duration % 1))}min`;
-    }
-  }
-  else {
-    formattedDuration = `${duration / 24}j`;
-  }
-  return formattedDuration;
-}
-function formatLength(length) {
-  return `${Math.round(length / 1000)}km`;
-}
-function formatAscent(ascent) {
-  return `${ascent}m`;
-}
-
-const ascentImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><polyline points="352 144 464 144 464 256" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M48,368,169.37,246.63a32,32,0,0,1,45.26,0l50.74,50.74a32,32,0,0,0,45.26,0L448,160" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`;
-
-const durationImage = `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M145.61,464H366.39c19.8,0,35.55-16.29,33.42-35.06C386.06,308,304,310,304,256s83.11-51,95.8-172.94c2-18.78-13.61-35.06-33.41-35.06H145.61c-19.8,0-35.37,16.28-33.41,35.06C124.89,205,208,201,208,256s-82.06,52-95.8,172.94C110.06,447.71,125.81,464,145.61,464Z" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M343.3,432H169.13c-15.6,0-20-18-9.06-29.16C186.55,376,240,356.78,240,326V224c0-19.85-38-35-61.51-67.2-3.88-5.31-3.49-12.8,6.37-12.8H327.59c8.41,0,10.23,7.43,6.4,12.75C310.82,189,272,204.05,272,224V326c0,30.53,55.71,47,80.4,76.87C362.35,414.91,358.87,432,343.3,432Z"/></svg>`;
-
-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 GrwTrekCard = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.trekCardPress = createEvent(this, "trekCardPress", 7);
-    this.colorPrimary = '#6b0030';
-    this.colorPrimaryTint = '#974c6e';
-  }
-  componentWillLoad() {
-    this.currentTrek = this.trek ? this.trek : state.currentTrek;
-    if (this.currentTrek) {
-      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);
-    }
-    onChange('currentTrek', () => {
-      this.currentTrek = this.trek ? this.trek : state.currentTrek;
-      if (this.currentTrek) {
-        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);
-      }
-    });
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (h(Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: "trek-card-container" }, 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: "name" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.name), h("div", { class: "description", innerHTML: (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.description_teaser }), h("div", { class: "icons-labels-container" }, h("div", { class: "row" }, h("div", { class: "icon-label difficulty" }, ((_c = this.difficulty) === null || _c === void 0 ? void 0 : _c.pictogram) && h("img", { src: this.difficulty.pictogram }), (_d = this.difficulty) === null || _d === void 0 ? void 0 :
-      _d.label), h("div", { class: "icon-label duration" }, h("div", { class: "svg-icon", innerHTML: durationImage }), formatDuration(this.currentTrek.duration)), h("div", { class: "icon-label route" }, ((_e = this.route) === null || _e === void 0 ? void 0 : _e.pictogram) && h("img", { src: this.route.pictogram }), (_f = this.route) === null || _f === void 0 ? void 0 :
-      _f.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" }, ((_g = this.practice) === null || _g === void 0 ? void 0 : _g.pictogram) && h("img", { src: this.practice.pictogram }), (_h = this.practice) === null || _h === void 0 ? void 0 :
-      _h.name))))))));
-  }
-};
-GrwTrekCard.style = grwTrekCardCss;
-
-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:18px}.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 .description{padding:0px 24px 24px 24px}.trek-detail-container .pois-title,.trek-detail-container .sensitive-areas-title,.trek-detail-container .information-desks-title{color:var(--color-primary);font-size:36px;font-weight:bold;padding:16px}";
+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) {
@@ -14831,6 +14618,11 @@ const GrwTrekDetail = 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));
+      this.labels = state.labels.filter(label => this.currentTrek.labels.includes(label.id));
+      this.sources = state.sources.filter(source => this.currentTrek.source.includes(source.id));
+      this.accessibilities = state.accessibilities.filter(accessibility => this.currentTrek.accessibilities.includes(accessibility.id));
+      this.accessibilityLevel = state.accessibilitiesLevel.find(accessibilityLevel => this.currentTrek.accessibility_level === accessibilityLevel.id);
     }
     onChange('currentTrek', () => {
       this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -14838,6 +14630,9 @@ const GrwTrekDetail = 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));
+        this.labels = state.labels.filter(label => this.currentTrek.labels.includes(label.id));
+        this.sources = state.sources.filter(source => this.currentTrek.source.includes(source.id));
       }
     });
   }
@@ -14846,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"))), h("div", { class: "description", innerHTML: this.currentTrek.description ? this.currentTrek.description : this.currentTrek.description_teaser }), state.currentSensitiveAreas && state.currentSensitiveAreas.length > 0 && (h("div", { class: "sensitive-areas-container" }, h("div", { class: "sensitive-areas-title" }, "Zones sensibles"), 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 }))))), 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 })))))))));
+      _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;
@@ -14858,21 +14661,43 @@ 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}&published=true&trek=${this.trekId}&fields=id,geometry,name,description,contact,info_url,period,practices`).catch(() => new Response('null')),
+      fetch(`${this.api}label/?language=${this.language}&fields=id,name,advice,pictogram`),
+      fetch(`${this.api}source/?language=${this.language}&fields=id,name,website,pictogram`),
+      fetch(`${this.api}trek_accessibility/?language=${this.language}&fields=id,name,pictogram`),
+      fetch(`${this.api}trek_accessibility_level/?language=${this.language}&fields=id,name`),
       fetch(`${this.api}poi/?language=${this.language}&trek=${this.trekId}&published=true&fields=id,name,description,attachments,type,type_label,type_pictogram,url,published,geometry&page_size=999`),
       fetch(`${this.api}informationdesk/?language=${this.language}&near_trek=${this.trekId}&fields=id,name,description,type,phone,email,website,municipality,postal_code,street,photo_url,latitude,longitude&page_size=999`),
-      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,route,geometry,gpx,kml,pdf,parking_location`),
+      fetch(`${this.api}trek/${this.trekId}/?language=${this.language}&published=true&fields=id,name,attachments,description,description_teaser,difficulty,duration,ascent,length_2d,practice,themes,route,geometry,gpx,kml,pdf,parking_location,departure,arrival,altimetric_profile,ambiance,access,public_transport,advice,advised_parking,gear,labels,source,points_reference,disabled_infrastructure,accessibility_level,accessibility_slope,accessibility_width,accessibility_signage,accessibility_covering,accessibility_exposure,accessibility_advice,accessibilities`),
     ])
       .then(responses => Promise.all(responses.map(response => response.json())))
-      .then(([difficulties, routes, practices, sensitiveAreas, pois, informationDesks, trek]) => {
-      state.difficulties = difficulties.results;
-      state.routes = routes.results;
-      state.practices = practices.results;
-      state.currentSensitiveAreas = sensitiveAreas.results;
+      .then(([difficulties, routes, practices, themes, sensitiveAreas, labels, sources, accessibilities, accessibilitiesLevel, pois, informationDesks, trek]) => {
+      if (difficulties) {
+        state.difficulties = difficulties.results;
+      }
+      if (routes) {
+        state.routes = routes.results;
+      }
+      if (practices) {
+        state.practices = practices.results.map(practice => (Object.assign(Object.assign({}, practice), { selected: false })));
+      }
+      if (themes) {
+        state.themes = themes.results;
+      }
+      if (sensitiveAreas) {
+        state.currentSensitiveAreas = sensitiveAreas.results;
+      }
+      state.labels = labels.results;
+      state.sources = sources.results;
+      state.accessibilities = accessibilities.results;
+      state.accessibilitiesLevel = accessibilitiesLevel.results;
       state.currentPois = pois.results;
       state.currentInformationDesks = informationDesks.results;
       state.currentTrek = trek;
@@ -14886,7 +14711,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) {
@@ -14894,19 +14719,26 @@ 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)];
+    });
+    onChange('treksWithinBounds', () => {
+      this.element.addEventListener('scroll', this.handleInfiniteScrollBind);
+      this.element.scroll({ top: 0 });
+      this.treksToDisplay = [...state.treksWithinBounds.slice(0, this.step)];
     });
   }
   handleInfiniteScroll(event) {
     if (event.composedPath()[0].scrollTop + event.composedPath()[0].scrollHeight / 2 >= event.composedPath()[0].scrollHeight) {
-      if (this.treksToDisplay.length < state.treks.length) {
-        this.treksToDisplay = state.treks.slice(0, this.treksToDisplay.length + this.step >= state.treks.length ? state.treks.length : this.treksToDisplay.length + this.step);
+      if (this.treksToDisplay.length < state.treksWithinBounds.length) {
+        this.treksToDisplay = state.treksWithinBounds.slice(0, this.treksToDisplay.length + this.step >= state.treksWithinBounds.length ? state.treksWithinBounds.length : this.treksToDisplay.length + this.step);
       }
       else {
         this.element.removeEventListener('scroll', this.handleInfiniteScrollBind);
@@ -14914,7 +14746,7 @@ const GrwTreksList = class {
     }
   }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.treksToDisplay.map(trek => (h("grw-trek-card", { trek: trek, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })))));
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, h("div", { class: "current-treks-length" }, `${state.treksWithinBounds.length} résultat${state.treksWithinBounds.length > 1 ? 's' : ''}`), h("div", { class: "current-treks-container" }, this.treksToDisplay.map(trek => (h("grw-trek-card", { key: `trek-${trek.id}`, trek: trek, "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint }))))));
   }
   get element() { return getElement(this); }
 };
@@ -14927,7 +14759,7 @@ const GrwTreksProvider = class {
   }
   componentWillLoad() {
     state.api = this.api;
-    let treksRequest = `${this.api}trek/?language=${this.language}`;
+    let treksRequest = `${this.api}trek/?language=${this.language}&published=true`;
     this.inBbox && (treksRequest += `&in_bbox=${this.inBbox}`);
     this.cities && (treksRequest += `&cities=${this.cities}`);
     this.districts && (treksRequest += `&districts=${this.districts}`);
@@ -14936,19 +14768,29 @@ 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;
+      state.treksWithinBounds = treks.results;
     });
   }
   render() {
@@ -14956,4 +14798,4 @@ const GrwTreksProvider = class {
   }
 };
 
-export { GrwApp as grw_app, GrwInformationDeskDetail as grw_information_desk_detail, GrwMap as grw_map, GrwPoiDetail as grw_poi_detail, GrwSensitiveAreaDetail as grw_sensitive_area_detail, GrwTrekCard as grw_trek_card, GrwTrekDetail as grw_trek_detail, GrwTrekProvider as grw_trek_provider, GrwTreksList as grw_treks_list, GrwTreksProvider as grw_treks_provider };
+export { GrwFilter as grw_filter, GrwMap as grw_map, GrwTrekDetail as grw_trek_detail, GrwTrekProvider as grw_trek_provider, GrwTreksList as grw_treks_list, GrwTreksProvider as grw_treks_provider };