@geotrekce/geotrek-rando-widget 0.0.3 → 0.0.4

package/dist/collection/collection-manifest.json

@@ -1,6 +1,7 @@
 {
   "entries": [
     "./components/grw-app/grw-app.js",
+    "./components/grw-filter/grw-filter.js",
     "./components/grw-information-desk-detail/grw-information-desk-detail.js",
     "./components/grw-map/grw-map.js",
     "./components/grw-poi-detail/grw-poi-detail.js",

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

@@ -12,11 +12,6 @@
   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;
@@ -29,6 +24,75 @@
   width: 48px;
   height: auto;
 }
+.header-container .handle-filters-button,
+.large-view-header-container .handle-filters-button {
+  user-select: none;
+  cursor: pointer;
+  color: var(--color-primary);
+  background-color: #ffffff;
+  margin-left: 36px;
+  border-radius: 8px;
+  padding: 8px;
+}
+.header-container .attribution-container,
+.large-view-header-container .attribution-container {
+  position: absolute;
+  right: 24px;
+}
+.header-container .attribution-container a,
+.large-view-header-container .attribution-container a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.options-container {
+  height: calc(100% - 64px);
+  position: absolute;
+  width: 100%;
+  z-index: 1100;
+  top: 64px;
+}
+
+.filters-container {
+  position: absolute;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 36px 0px;
+  z-index: 1100;
+}
+.filters-container .close-filters-button {
+  cursor: pointer;
+  font-weight: bold;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 12px;
+  border-radius: 12px;
+  color: var(--color-primary);
+  border: 1px var(--color-primary) solid;
+}
+.filters-container .close-filters-button:hover {
+  background-color: var(--color-primary);
+  color: #ffffff;
+}
+.filters-container .filter-margin-top {
+  margin-top: 24px;
+}
+.filters-container .current-treks-length {
+  margin: 0px 0px 32px 8px;
+  color: var(--color-primary);
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.back-filters-container {
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: calc(100% - 64px);
+  position: absolute;
+  z-index: 1099;
+  top: 64px;
+}
 
 .loader-container,
 .large-view-loader-container {

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

@@ -5,6 +5,7 @@ export class GrwApp {
   constructor() {
     this.showTrek = false;
     this.showMap = false;
+    this.showFilters = false;
     this.isLargeView = false;
     this.language = 'fr';
     this.appName = 'Geotrek Rando Widget';
@@ -16,7 +17,7 @@ export class GrwApp {
     this.colorArrivalIcon = '#85003b';
     this.colorSensitiveArea = '#4974a5';
     this.colorPoiIcon = '#974c6e';
-    this.largeViewSize = 664;
+    this.largeViewSize = 1024;
   }
   onTrekCardPress(event) {
     this.currentTrekId = event.detail;
@@ -39,20 +40,37 @@ export class GrwApp {
     this.isLargeView = this.element.getBoundingClientRect().width >= this.largeViewSize;
     this.showMap = this.isLargeView;
   }
+  handleFilters() {
+    this.showFilters = !this.showFilters;
+  }
   render() {
-    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } },
+    return (h(Host, { style: { '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint, '--color-primary-shade': this.colorPrimaryShade } },
       h("grw-treks-provider", { api: this.api, language: this.language, "in-bbox": this.inBbox, cities: this.cities, districts: this.districts, structures: this.structures, themes: this.themes, portals: this.portals, routes: this.routes, practices: this.practices }),
       this.showTrek && this.currentTrekId && h("grw-trek-provider", { api: state.api, language: this.language, "trek-id": this.currentTrekId }),
       h("div", { class: "app-container" },
-        h("div", { class: this.isLargeView ? 'large-view-header-container' : 'header-container' }, this.showTrek ? h("div", { onClick: () => this.onTrekDetailsClose(), class: "arrow-back-icon", innerHTML: arrowBackImage }) : h("div", { class: "title" }, this.appName)),
+        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", { onClick: () => this.handleFilters(), class: "handle-filters-button" }, "FILTRER")),
+          !this.showTrek && this.showFilters && (h("div", { class: "options-container" },
+            h("div", { class: "filters-container" },
+              h("div", { class: "current-treks-length" }, `${state.currentTreks.length} résultat${state.currentTreks.length > 1 ? 's' : ''}`),
+              h("div", { onClick: () => this.handleFilters(), class: "close-filters-button" }, "X"),
+              h("div", null,
+                h("grw-filter", { filterName: "Pratique", filterType: "practices", filterNameProperty: "name" })),
+              h("div", { class: "filter-margin-top" },
+                h("grw-filter", { filterName: "Difficult\u00E9", filterType: "difficulties", filterNameProperty: "label" })),
+              h("div", { class: "filter-margin-top" },
+                h("grw-filter", { filterName: "Dur\u00E9e", filterType: "durations", filterNameProperty: "name" }))),
+            h("div", { onClick: () => this.handleFilters(), class: "back-filters-container" }))),
+          h("div", { class: "attribution-container" },
+            h("a", { target: "_blank", href: "https://geotrek.fr" }, "GEOTREK"))),
         h("div", { class: "content-container" },
           h("div", { class: this.isLargeView ? 'large-view-app-treks-list-container' : 'app-treks-list-container', style: { display: this.showTrek ? 'none' : 'flex', position: this.showTrek ? 'absolute' : 'relative' } },
-            h("grw-treks-list", { "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })),
+            h("grw-treks-list", { "is-large-view": this.isLargeView, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint })),
           this.showTrek && !state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-loader-container' : 'loader-container' },
             h("span", { class: "loader" }))),
           state.currentTrek && (h("div", { class: this.isLargeView ? 'large-view-app-trek-detail-container' : 'app-trek-detail-container' },
             h("grw-trek-detail", { "color-primary": this.colorPrimary, "color-primary-shade": this.colorPrimaryShade, "color-primary-tint": this.colorPrimaryTint }))),
-          h("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: this.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("grw-map", { class: this.isLargeView ? 'large-view-app-map-container' : 'app-map-container', style: { visibility: this.showMap ? 'visible' : 'hidden' }, "url-layer": this.urlLayer, center: this.center, zoom: this.zoom, attribution: this.attribution, "color-primary": this.colorPrimary, "color-primary-tint": this.colorPrimaryTint, "color-trek-line": this.colorTrekLine, "color-departure-icon": this.colorDepartureIcon, "color-arrival-icon": this.colorArrivalIcon, "color-sensitive-area": this.colorSensitiveArea, "color-poi-icon": this.colorPoiIcon })),
         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')))));
   }
@@ -470,6 +488,7 @@ export class GrwApp {
   static get states() { return {
     "showTrek": {},
     "showMap": {},
+    "showFilters": {},
     "isLargeView": {},
     "currentTrekId": {}
   }; }

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

@@ -0,0 +1,29 @@
+.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);
+}

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

@@ -0,0 +1,132 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+import state from 'store/store';
+export class GrwFilter {
+  constructor() {
+    this.filters = [
+      { property: 'practices', trekProperty: 'practice', type: 'include' },
+      { property: 'difficulties', trekProperty: 'difficulty', type: 'include' },
+      { property: 'durations', trekProperty: 'duration', type: 'interval' },
+    ];
+  }
+  handleFilter(_event, filterToHandle) {
+    const filterFromState = [...state[this.filterType]];
+    filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id).selected = !filterFromState.find(currentFilter => currentFilter.id === filterToHandle.id)
+      .selected;
+    state[this.filterType] = filterFromState;
+    let isUsingFilter = false;
+    let filtersTreks = [];
+    for (const filter of this.filters) {
+      const currentFiltersId = state[filter.property].filter(currentFilter => currentFilter.selected).map(currentFilter => currentFilter.id);
+      if (currentFiltersId.length > 0) {
+        if (filtersTreks.length > 0) {
+          if (filter.type === 'include') {
+            filtersTreks = [...filtersTreks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
+          }
+          else if (filter.type === 'interval') {
+            let minValue;
+            let maxValue;
+            for (const currentFilterId of currentFiltersId) {
+              const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+              if (isNaN(minValue) || currentFilter.minValue < minValue) {
+                minValue = currentFilter.minValue;
+              }
+              if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
+                maxValue = currentFilter.maxValue;
+              }
+            }
+            filtersTreks = [...filtersTreks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+        else {
+          if (!isUsingFilter) {
+            isUsingFilter = true;
+          }
+          if (filter.type === 'include') {
+            filtersTreks = [...state.treks.filter(trek => currentFiltersId.includes(trek[filter.trekProperty]))];
+          }
+          else if (filter.type === 'interval') {
+            let minValue;
+            let maxValue;
+            for (const currentFilterId of currentFiltersId) {
+              const currentFilter = state[filter.property].find(property => property.id === currentFilterId);
+              if (isNaN(minValue) || currentFilter.minValue < minValue) {
+                minValue = currentFilter.minValue;
+              }
+              if (isNaN(maxValue) || currentFilter.maxValue > maxValue) {
+                maxValue = currentFilter.maxValue;
+              }
+            }
+            filtersTreks = [...state.treks.filter(trek => trek[filter.trekProperty] >= minValue && trek[filter.trekProperty] <= maxValue)];
+          }
+        }
+      }
+    }
+    state.currentTreks = isUsingFilter ? filtersTreks : state.treks;
+  }
+  render() {
+    return (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]))))));
+  }
+  static get is() { return "grw-filter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["grw-filter.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["grw-filter.css"]
+  }; }
+  static get properties() { return {
+    "filterType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-type",
+      "reflect": false
+    },
+    "filterName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-name",
+      "reflect": false
+    },
+    "filterNameProperty": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "filter-name-property",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -31,11 +31,11 @@ export class GrwMap {
     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();
       }
     });
@@ -57,7 +57,7 @@ export class GrwMap {
       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',
@@ -66,7 +66,7 @@ export class GrwMap {
           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,
         },
       });
     }
@@ -75,34 +75,40 @@ export class GrwMap {
       this.currentBounds = bounds;
       this.map.fitBounds(this.currentBounds);
     }
-    this.treksLayer = L.geoJSON(treksFeatureCollection, {
-      pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
-        icon: L.divIcon({
-          html: geoJsonPoint.properties.practice && `<img src=${geoJsonPoint.properties.practice} />`,
-          className: 'trek-marker',
-          iconSize: 48,
+    if (!this.treksLayer) {
+      this.treksLayer = L.geoJSON(treksFeatureCollection, {
+        pointToLayer: (geoJsonPoint, latlng) => L.marker(latlng, {
+          icon: L.divIcon({
+            html: geoJsonPoint.properties.practice && `<img src=${geoJsonPoint.properties.practice} />`,
+            className: 'trek-marker',
+            iconSize: 48,
+          }),
+          autoPanOnFocus: false,
         }),
-        autoPanOnFocus: false,
-      }),
-      onEachFeature: (geoJsonPoint, layer) => {
-        layer.once('click', () => {
-          const trekDeparturePopup = L.DomUtil.create('div');
-          trekDeparturePopup.className = 'trek-departure-popup';
-          trekDeparturePopup.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
-          const trekName = L.DomUtil.create('div');
-          trekName.innerHTML = geoJsonPoint.properties.name;
-          trekName.className = 'trek-name';
-          if (geoJsonPoint.properties.imgSrc) {
-            trekName.className += ' trek-name-margin-top';
-            const trekImg = L.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 = L.DomUtil.create('div');
+            trekDeparturePopup.className = 'trek-departure-popup';
+            trekDeparturePopup.onclick = () => this.trekCardPress.emit(geoJsonPoint.properties.id);
+            const trekName = L.DomUtil.create('div');
+            trekName.innerHTML = geoJsonPoint.properties.name;
+            trekName.className = 'trek-name';
+            if (geoJsonPoint.properties.imgSrc) {
+              trekName.className += ' trek-name-margin-top';
+              const trekImg = L.DomUtil.create('img');
+              trekImg.src = geoJsonPoint.properties.imgSrc;
+              trekDeparturePopup.appendChild(trekImg);
+            }
+            trekDeparturePopup.appendChild(trekName);
+            layer.bindPopup(trekDeparturePopup, { interactive: true, autoPan: false, closeButton: false }).openPopup();
+          });
+        },
+      }).addTo(this.map);
+    }
+    else {
+      this.treksLayer.clearLayers();
+      this.treksLayer.addData(treksFeatureCollection);
+    }
     !this.mapIsReady && (this.mapIsReady = !this.mapIsReady);
   }
   removeTreks() {

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

@@ -1,69 +1,103 @@
-.trek-card-container {
+.trek-card-container,
+.trek-card-large-view-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 .image,
+.trek-card-large-view-container .image {
+  object-fit: cover;
 }
-.trek-card-container .sub-container {
+.trek-card-container .sub-container,
+.trek-card-large-view-container .sub-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   padding: 12px;
 }
-.trek-card-container .sub-container .name {
+.trek-card-container .sub-container .name,
+.trek-card-large-view-container .sub-container .name {
   color: var(--color-primary);
   font-size: 24px;
   font-weight: bold;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
-.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 .departure,
+.trek-card-large-view-container .sub-container .departure {
+  color: rgba(0, 0, 0, 0.7);
+  font-size: 16px;
+  margin: 4px 0px;
 }
-.trek-card-container .sub-container .description p {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin: 0;
+.trek-card-container .sub-container .themes-container,
+.trek-card-large-view-container .sub-container .themes-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
 }
-.trek-card-container .sub-container .icons-labels-container {
+.trek-card-container .sub-container .themes-container .theme,
+.trek-card-large-view-container .sub-container .themes-container .theme {
+  background-color: var(--color-primary-tint);
+  color: #ffffff;
+  border-radius: 8px;
+  padding: 8px;
+  margin: 0px 8px 8px 0px;
+}
+.trek-card-container .sub-container .icons-labels-container,
+.trek-card-large-view-container .sub-container .icons-labels-container {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
 }
-.trek-card-container .sub-container .icons-labels-container .row {
+.trek-card-container .sub-container .icons-labels-container .row,
+.trek-card-large-view-container .sub-container .icons-labels-container .row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
-.trek-card-container .sub-container .icons-labels-container .row:not(:last-child) {
+.trek-card-container .sub-container .icons-labels-container .row:not(:last-child),
+.trek-card-large-view-container .sub-container .icons-labels-container .row:not(:last-child) {
   margin-bottom: 12px;
 }
-.trek-card-container .sub-container .icons-labels-container .row .icon-label {
+.trek-card-container .sub-container .icons-labels-container .row .icon-label,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label {
   display: flex;
-  justify-content: center;
   align-items: center;
-  width: 33.3333333333%;
+  width: 50%;
 }
-.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2) {
+.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2),
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label:nth-child(2) {
   margin: 0px 4px;
 }
 .trek-card-container .sub-container .icons-labels-container .row .icon-label img,
-.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg {
+.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg {
   width: 24px;
   height: auto;
-  margin-right: 24px;
+  margin-right: 8px;
 }
-.trek-card-container .sub-container .icons-labels-container .row .practice img {
+.trek-card-container .sub-container .icons-labels-container .row .practice img,
+.trek-card-large-view-container .sub-container .icons-labels-container .row .practice img {
   background-color: var(--color-primary);
+}
+
+.trek-card-container {
+  width: 350px;
+  height: auto;
+}
+.trek-card-container .image {
+  width: 100%;
+}
+
+.trek-card-large-view-container {
+  height: auto;
+  display: flex;
+  flex-direction: row;
+}
+.trek-card-large-view-container .image {
+  width: 250px;
 }

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

@@ -8,6 +8,7 @@ export class GrwTrekCard {
   constructor() {
     this.colorPrimary = '#6b0030';
     this.colorPrimaryTint = '#974c6e';
+    this.isLargeView = false;
   }
   componentWillLoad() {
     this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -15,6 +16,7 @@ export class GrwTrekCard {
       this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
       this.route = state.routes.find(route => route.id === this.currentTrek.route);
       this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+      this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
     }
     onChange('currentTrek', () => {
       this.currentTrek = this.trek ? this.trek : state.currentTrek;
@@ -22,16 +24,18 @@ export class GrwTrekCard {
         this.difficulty = state.difficulties.find(difficulty => difficulty.id === this.currentTrek.difficulty);
         this.route = state.routes.find(route => route.id === this.currentTrek.route);
         this.practice = state.practices.find(practice => practice.id === this.currentTrek.practice);
+        this.themes = state.themes.filter(theme => this.currentTrek.themes.includes(theme.id));
       }
     });
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    return (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" },
+    return (h(Host, { onClick: () => this.trekCardPress.emit(this.currentTrek.id), style: { 'width': this.isLargeView ? '100%' : 'auto', '--color-primary': this.colorPrimary, '--color-primary-tint': this.colorPrimaryTint } }, this.currentTrek && (h("div", { class: this.isLargeView ? 'trek-card-large-view-container' : 'trek-card-container' },
       this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].thumbnail && (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: "departure" }, (_a = this.currentTrek) === null || _a === void 0 ? void 0 : _a.departure),
+        h("div", { class: "name" }, (_b = this.currentTrek) === null || _b === void 0 ? void 0 : _b.name),
+        h("div", { class: "themes-container" }, this.themes.map(theme => (h("div", { class: "theme" }, theme.label)))),
         h("div", { class: "icons-labels-container" },
           h("div", { class: "row" },
             h("div", { class: "icon-label difficulty" },
@@ -39,17 +43,18 @@ export class GrwTrekCard {
               _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)),
+              formatDuration(this.currentTrek.duration))),
           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)),
+              formatAscent(this.currentTrek.ascent))),
+          h("div", { class: "row" },
+            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: "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))))))));
@@ -68,7 +73,7 @@ export class GrwTrekCard {
       "mutable": false,
       "complexType": {
         "original": "Trek",
-        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; duration: number; length_2d: number; ascent: number; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; }",
+        "resolved": "{ id: number; name: string; attachments: Attachments; description?: string; description_teaser: string; difficulty: number; route: number; practice: number; themes: number[]; duration: number; length_2d: number; ascent: number; departure: string; geometry?: LineString; departure_geom?: Position; gpx?: string; kml?: string; pdf?: string; parking_location?: Position; }",
         "references": {
           "Trek": {
             "location": "import",
@@ -118,13 +123,32 @@ export class GrwTrekCard {
       "attribute": "color-primary-tint",
       "reflect": false,
       "defaultValue": "'#974c6e'"
+    },
+    "isLargeView": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-large-view",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
     "currentTrek": {},
     "difficulty": {},
     "route": {},
-    "practice": {}
+    "practice": {},
+    "themes": {}
   }; }
   static get events() { return [{
       "method": "trekCardPress",